Visual Studio for Mac での Xamarin (iOS/ Android アプリ開発) 入門 01 : ハローワールド (新規作成、エミュレータ作成、アプリ実行)

macOS 版の Visual Studio を使って、iOS/ Android アプリを開発していこうと思います。

(注意) テキストエディタの `Visual Studio Code` ではなくて、
IDE の方の `Visual Studio (for Mac)` です。

次の記事 → [Visual Studio for Mac での Xamarin.Forms (iOS/ Android) 入門 02 : 新規作成したプロジェクトの構成を見てみる ＆ 簡単な画面更新してみる](https://qiita.com/chomado/items/82c45aaa86d1cd4a86c8)

# この記事の目標

* Visual Studio for Mac の基本的な使い方がわかる
* Xamarin を使って、iOS/ Android アプリを「新規作成」し、実行できる
* Android エミュレータの作り方を理解し、そのエミュレータでアプリを実行できる
* iOS シミュレーターでアプリを実行できる

項目|値
---|---
開発対象|iOS アプリと Android アプリ両方
開発マシン|MacBook Pro
使用 IDE| Visual Studio for Mac ([インストール (無料)](https://visualstudio.microsoft.com/vs/mac/?WT.mc_id=docs-qiita-machiy))
使用言語|C#
使用フレームワーク|Xamarin.Forms

Xamarin は、VS for Mac を入れれば一緒に含まれています。



## 私の環境 詳細

この記事執筆時点での私の環境です。

← VS for Mac | MacBook Pro スペック →
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3230da68-8b48-4887-028c-e8703f78c72f.png)


# Reference

* [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/?WT.mc_id=docs-qiita-machiy)
* [Xamarin 公式ドキュメントトップページ](https://docs.microsoft.com/ja-jp/xamarin/?WT.mc_id=docs-qiita-machiy)
* [Xamarin.Forms の GitHub レポジトリ](https://github.com/xamarin/Xamarin.Forms)
* 2020/04/08 時点での最新の VS for Mac のリリースノート (英語)：[What’s New for Xamarin Developers in Visual Studio 2019 for Mac version 8.5](https://devblogs.microsoft.com/xamarin/mac-version-8-5-vs19/?WT.mc_id=docs-qiita-machiy)
* [Xamarin.iOS アプリの無料プロビジョニング](https://docs.microsoft.com/ja-jp/xamarin/ios/get-started/installation/device-provisioning/free-provisioning?tabs=macos&WT.mc_id=docs-qiita-machiy)
* [XAML Hot Reload for Xamarin.Forms (Xamarin.Forms の XAML ホットリロード)](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/hot-reload?WT.mc_id=docs-qiita-machiy)
* この記事をもとにしたセッションのスライド：『[15 分間で入門！ macOS で iOS/Android アプリを作る！ [Xamarin.Forms/ Visual Studio for Mac 入門]](https://www.slideshare.net/chomado/20204xamarin-mac)』

# Xamarin とは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/fc7bee22-6294-c494-ea82-4ad3ae98a19b.png)


**Xamarin** (ザマリン) とは、
マイクロソフトによりオープンソースで開発されている、
クロスプラットフォーム開発環境です。

C# など .NET 資産を利用して、クロスプラットフォーム間でコード共通化しながら開発することができます。

要するに、例えば、
アプリを開発するとき、iOS 版と Android 版の両方を出したいとき、
普通はそれぞれ別々に別の言語で開発しますが、
Xamarin (などクロスプラットフォーム開発環境) を使えば、
2つのプラットフォーム間でコード共通化しながら、
かなり効率良く開発することが可能となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/d27f6aa4-8cf5-0f92-789e-b2afcab17461.png)


もっと詳しい説明は、[公式ドキュメント](https://docs.microsoft.com/ja-jp/xamarin/get-started/what-is-xamarin?WT.mc_id=docs-qiita-machiy) から引用すると、以下のような感じです：

> Xamarin は、.NET を使用して、iOS、Android、Windows など向けの、最新で高性能なアプリケーションをビルドするためのオープンソースのプラットフォームです。 

> Xamarin を使用すると、開発者はプラットフォーム間でアプリケーションの 90% (平均) を共有できます。

> このパターンにより、開発者はすべてのビジネス ロジックを 1 つの言語で記述 (または既存のアプリケーション コードを再利用) して、各プラットフォームでネイティブのパフォーマンスとルック アンド フィールを実現することができます。

プラットフォーム間 (iOS/ Android など) で、平均 90% のコードを共通化しながら開発できるのはすごいですね！

ちなみに私は Microsoft 入社前は、2014 年から、モバイルアプリ開発者として働いており、
Xamarin で iOS/ Android アプリを開発していました。
C# 良すぎて毎日 C# 書いてて超楽しかったです。（今も楽しいけど）

また、詳しく言うと、`Xamarin` は

* UI 部分は個別に記述する「`Xamarin Native`」
* UI 部分も XAML で共通化して書ける「`Xamarin.Forms`」

の 2 つに分かれるのですが、この記事では後者の `Xamarin.Forms` のみに触れます。

# Xamarin.Forms プロジェクト新規作成

Xamarin を使って
実際に、Android, iOS それぞれのアプリを、同時に作ってみましょう！

## Visual Studio を開く

macOS で `Visual Studio` を開いてみましょう。（`Visual Studio Code` ではないですよ)

<img width="1440" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/745e5fd0-db6f-18d5-b21b-6938a489846c.png">

## プロジェクト新規作成

<img width="768" alt="Screen Shot 2020-04-14 at 0.07.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/c8bf7ada-9b43-08fe-6ffd-e59f2fbb1f60.png">

マルチプラットフォームの中の
Xamarin.Forms 欄にある
`Blank Forms App` （空のアプリ）を選択します。

<img width="1149" alt="Screen Shot 2020-04-14 at 0.09.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/0488f999-70ee-0ccd-1ccf-52836d501eb5.png">

アプリ名を適当に決めます。（私は `TestApp` にしました）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/7ac661bf-378e-afb1-c978-f7fd95a03b05.png)


<img width="1041" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/44999d8e-77c1-4db1-3a34-194cd741c6ef.png">

右下の `Create` を押しますと、プロジェクトが生成されます。

<img width="1440" alt="Screen Shot 2020-04-27 at 15.35.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e2829c62-007a-c48d-8ac5-ae0278a34791.png">


## もし警告が出ていたら？

プロジェクトが開かれたら、iOS プロジェクトに警告が出ていることがあります。

<img width="361" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/14dbe7bd-c2bc-ef75-09bb-f05c1b529e35.png">


> Xcode 11.3.1 is currently selected in Preferences and is incompatible with the version of Xamarin.iOS being used.
> This may cause unexpected errors or warnings while building and deploying the project.
> To resolve this, choose Visual Studio > Preferences > SDK Locations > Apple and select Xcode 11.4 or later.

これは、今 私のマシンで動いている Xcode のバージョンと、この Xamatin.iOS が参照するべき Xcode のバージョンの相違から来るものです。
私の場合、Xcode 11.4 を参照したいのに、今私のマシンに入っているバージョンが 11.3 なので、古くて、警告が出ています。

一度 Visual Studio (と Xcode) を閉じて、
App Store を開き、
Xcode を更新しましょう。

<img width="1112" alt="Screen Shot 2020-04-14 at 0.28.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b20af239-9c45-bd20-e1a4-f787a61689ff.png">

更新が終わったら、再度 Visual Studio を開き、先程作ったプロジェクトを開き、警告が出ていないことを確認しましょう。

# 実行してみよう（ハローワールド)


コードを見る前に、まず、ちゃんと環境が入っているかの確認のために、
アプリを実行してみましょう。

## iOS 編

せっかく macOS でやっているので、
まずは iOS アプリの方から実行してみましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/c80f1109-427b-15d5-0d07-da517a9f0304.png)

Visual Studio for Mac (VS for Mac) の左上にあるバーで、
まず、`TestApp.iOS` を選択し、
実行端末を、好きなシミュレーターを選びましょう。
（もしここにシミュレーターが表示されなかったら、Xcode の設定がうまくいっていません）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/8e367a72-70b4-5d34-d5cf-b564367577df.png)

もろもろ設定したら、
実行ボタンを押しましょう

<img width="478" alt="Screen Shot 2020-04-14 at 4.16.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3add28e7-166f-ce2a-9976-1d5f07bf1255.png">

初回ビルドはちょっと時間がかかりますが、
数分経つと、
iPhone シミュレーターが立ち上がり、
「`Welcome to Xamarin.Forms!`」と書かれたアプリが出てきます。

<img width="1440" alt="Screen Shot 2020-04-14 at 4.26.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e99e176d-e609-7daf-e4dc-2c1d62145ac9.png">

おめでとうございます！これで iOS アプリはちゃんと起動することが確認できました。

### 実機デバッグもできます。

ちなみに、もちろん、実機をつなげれば、実機でのデバッグ実行もできます。

Apple Developer 登録（有料）の設定をちゃんとしておくのが一番簡単ですが、
無料で実機にデプロイする方法もあります。詳しくはこちら
→ [Xamarin.iOS アプリの無料プロビジョニング](https://docs.microsoft.com/ja-jp/xamarin/ios/get-started/installation/device-provisioning/free-provisioning?tabs=macos&WT.mc_id=docs-qiita-machiy)

## Android アプリ編

次は Android で動かしたいですね！

(準備ですが、私は一応 [Android Studio](https://developer.android.com/studio) はインストールしておきました)

VS for Mac のターゲットプロジェクトを、`TestApp.Android` にしましょう。

### Android エミュレータ設定

そして実行デバイスですが、デフォルトでは Android エミュレータは設定されていないはずなので、これからエミュレータを作ることになります。
（すでに事前に Android Studio などでエミュレータを作成済みの方は、ここを飛ばしてください）

<img width="476" alt="Screen Shot 2020-04-14 at 4.32.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b8bb89a7-406d-55dc-4b02-a709b9af0b57.png">

`Manage Android Devices` を選びます。

Android Device Manager が開くので、そこの `+ New Device` を選択します。

<img width="1055" alt="Screen Shot 2020-04-14 at 5.02.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/6a010c95-c5ff-fa99-f7aa-30779100bf50.png">

適当に作ります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/3266e9ab-573c-e2b5-f460-1b4f04ae5a93.png)

`Create` を押すと、エミュレータが作成され、ADM のリストに表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4ac7e993-6284-25e6-586c-3897ed7fb93f.png)

右の「`Play`」を押して、エミュレータを起動しましょう。

エミュレータが起動しました。
また、VS for Mac の実行デバイスも、このエミュレータが選択済みになっていることが分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e7072bef-055a-81da-bd7a-30e813e20642.png)

### Android エミュレータ上で実行

また VS for Mac の実行ボタン（▶）を押して、
アプリを実行しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/1e45378b-60ee-c4de-51df-29df2bb6c2ff.png)

先程の iOS アプリのときと同じように、
「`Welcome to Xamarin.Forms!`」と書かれたアプリが出てきましたね。

ちなみに、もちろん、開発者モードで USB デバッグが有効になっている Android 実機をつなげれば、実機でのデバッグ実行もできます。

## iOS / Android でハローワールドできた！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/8d317a97-63b7-6d5c-c328-a787798d6617.png)

左が Android エミュレータで、右が iPhone シミュレーターです。
それぞれで無事実行されています。

# ちなみに：Visual Studio カラーテーマの変更

私はダークテーマが好きですが、もし、白背景テーマが良かったら、もちろん変更できます。

プレファレンスを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/112d888c-d505-1660-0a6c-af2845c244c9.png)

Visual Style の欄から `Light` と `Dark` が選べます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/ccb9907b-3478-15c2-51cf-da79d6ce36d0.png)


# Next Step

ハローワールド無事完了（ちゃんと環境が入っていることが確認できた）ということで、
次はプロジェクトの構成やコードを少し見てみましょう。

次の記事 → [Visual Studio for Mac での Xamarin.Forms (iOS/ Android) 入門 02 : 新規作成したプロジェクトの構成を見てみる ＆ 簡単な画面更新してみる](https://qiita.com/chomado/items/82c45aaa86d1cd4a86c8)

## Hot Reload もいいぞ

ちなみに、Xamarin.Forms の XAML 保存時にリアルタイムで UI 更新してくれる、Hot Reload 機能もオススメです。

→ [YouTube 動画 (ちょまどチャンネル)](https://youtu.be/di7ojNTmC_c)
→ [XAML Hot Reload for Xamarin.Forms (Xamarin.Forms の XAML ホットリロード)](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/hot-reload?WT.mc_id=docs-qiita-machiy)

この 90 秒動画見ていただけたらなんとなくどんなものかつかめると思います

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/Xamarin?src=hash&amp;ref_src=twsrc%5Etfw">#Xamarin</a> .Forms の Hot Reload について<br>デモをしたのを<br>90 秒の動画にしてみました！<br><br>デバッグ実行中に<br>UI 定義ファイル XAML を編集して保存すると<br>リアルタイムに即座に反映される機能です<br><br>公式ドキュメント： <a href="https://t.co/4jj5JZLPk9">https://t.co/4jj5JZLPk9</a> <a href="https://t.co/YlwSpy8d56">pic.twitter.com/YlwSpy8d56</a></p>&mdash; ちょまど🎀ITエンジニア兼マンガ家 (@chomado) <a href="https://twitter.com/chomado/status/1254530380687802369?ref_src=twsrc%5Etfw">April 26, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>