Xamarin やりたい人向け Visual Studio 2017 インストール手引書 (Qiita転載)

こんにちは。エクセルソフトの田淵です。

やっと、重い腰を上げて Visual Studio 2017 を新規にインストールしてみました。

> 2017年3月17日時点の手順です。細かい手順は変わる可能性がありますので、ご了承ください。

### Xamarin が使えるように Visual Studio をインストールするには

本エントリーは、まったくの新規の状態からのインストールの手引書です。

が、既に Visual Studio 2017 をインストールされている方は以下の「変更」ボタンから Xamarin を追加インストールできます。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170315/20170315174653.png" width="300" />


### ダウンロード

まずは Visual Studio 2017 のインストーラーをダウンロードします。

[Visual Studio \| Developer Tools and Services \| Microsoft IDE](https://www.visualstudio.com/ja/)

こちらのサイトで、適切なエディションを選んでダウンロードします。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170316/20170316010225.png" width="600" />

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170316/20170316010221.png" width="300" />

今回は Community Edition をインストールしてみました。

### インストールウィザード

インストールを開始すると、以下のインストールウィザードが開きます。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170316/20170316010125.png" width="600" />

下の方に「.NETによるモバイル開発」がありますので、チェックしましょう。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170316/20170316183938.png" width="600" />

右側でチェックされているコンポーネントがインストールされます。それぞれが何なのか？の解説をつけておきます。

- Xamarin Workbooks
    - Console／Android／WPF／iOS の REPL 環境です。サイズも大きくないので入れておいて損はないです。
    - [こちら](http://qiita.com/amay077/items/11255f6bafa53f1dd5d1) を見ていただくと良いかと思います。
- Android NDK
    - AOTかBundle assemblies into native codeを使わなければ不要とのこと（[@atsushieno](https://twitter.com/atsushieno/status/841884195723087872) に教えていただきました）
- Android SDK セットアップ (レベル23)
    - ビルドに必要な SDK の各種ツールを API 23（Marshmallow）を対象にしたものを入れてくれます。
- Java SE Development Kit (8.0.xxx.xx)
- Google Android エミュレーター ※1
    - API 23 の ARM と HAXM のエミュレーターです。
    - これのチェックを外すとかなりの容量が減りますが、エミュレーターを自分で作らなければいけません。
    - インストールされている SDK の API にあったエミュレーターを作るようで、完全に新規インストールの場合は 12.5GB でした。インストールされている API が多い場合は 20GB くらいになることもあるようです。
- F# 言語サポート
    - 関数型言語はいいらしいぞ。
- Intel Hardware Accelerated Execution Manager (HAXM)
    - [公式サイト](https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager)
    - ※1の Google エミュレーターを動かすための仮想マシンホストです。エミュレーターを使うなら必須。
- Windows 10 Mobile エミュレーター ※2
    - W10M のエミュレーターとそれを動かすための Hyper-V（恐らく）が入ります。
    - これと ※1 は共存はできないと思われますので、インストールは推奨しません。UWP のデバッグは Windows 10 マシンであればローカルマシンに配布できるので問題ないです。
- Xamarin用ユニバーサルWindowsプラットフォーム
    - 標準では未チェックです。
    - Xamarin.Forms UWP 用の SDK などが入っています。Xamarin.Forms で UWP アプリも作る場合はチェックを追加してください。

となっています。（Enterprise の方は iOS Remote Simulator（だったなか？）もインストールしておきましょう。）

Xamarin が初めてという方は、一番下の「ユニバーサルWindowsプラットフォーム（UWP のことです）」を追加でチェックして、そのままインストールしましょう。

その他の「.NET デスクトップ開発」、「ASP.NET と Web 開発」などのワークロードはお好みに合わせて入れてください。

> **Android SDK、Intel HAXM のエミュレーターの作り方について結構分かっているという方**は、[@amay077](https://twitter.com/amay077) さんが一番小さい容量で Visual Studio 2017 と Xamarin をインストールするには？という趣旨で以下のエントリーを書いてくださっているので、参考にして、最小構成でインストールするのもアリです。
> 
> [Xamarin の為だけに Visual Studio 2017 をミニマムインストールする \- Qiita](http://qiita.com/amay077/items/43cd700e4d125a6517b7)


### 起動＆プロジェクト作成

インストールが終了したら「起動」ボタンをクリック！

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317094539.png" width="600" />

テーマを決めて Microsoft アカウントでログインして、起動します。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317095159.png" width="300" />

Visual Studio 2015 と比べると結構画面が変わっていますね。新しいプロジェクトから新規プロジェクトを作成できます。検索欄に「クロス」と入力して「クロスプラットフォームアプリ (Xamarin.Forms またはネイティブ」のプロジェクトを作成しても良いですし、「その他のプロジェクトテンプレート」から従来のテンプレート選択ダイアログを表示しても良いです。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317100951.png" width="600" />

「その他のプロジェクトテンプレート」をクリックした場合は、以下のダイアログが開きますので、「Visual C#＞Cross-Platform＞クロスプラットフォームアプリ (Xamarin.Forms またはネイティブ」を選択して［OK］をクリックします。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317101041.png" width="450" />

アプリの基本設定を決める次のダイアログが表示されますので、今回はそのまま［OK］をクリックします。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317101302.png" width="450" />

UWP 開発をチェックした方は、以下のダイアログが表示されますので、そのまま［OK］をクリックします。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317101731.png" width="450" />

### 環境チェック＆デバッグ

作成されたプロジェクトと環境周りを見てみましょう。

前述の通り、Intel HAXM を使用する Android 6.0 エミュレーターがインストールされ、使える状態になっています。ここでは、「VisualStudio_android-23_x86_phone (Android 6.0 - API 23)」を選択します。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317102633.png" width="450" />

Visual Studio のメニューから「ツール＞Android＞Android SDK マネージャー」をクリックしてみました。ビルドに必要な「Android SDK Tools」「Android SDK Platform-tools」がほぼ最新で、API 23 で構築できるように「Android SDK Build-tools」の 23.0.3 がインストールされているのが分かります。最低限、Android 6.0 向けのアプリはビルドできることが分かります。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317102827.png" width="600" />

UWP プロジェクトでエラーが出ている可能性がありますが、ソリューションをビルドすれば無くなるはず。（未だに「Initialize Component」のエラーが出るのか… とは思いますが、このエラーは無視しても良いやつです。）

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317103614.png" width="600" />

ではそのままビルドしてみましょう！

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317103958.png" width="600" />

おおおおお…😭😭 マジか！やったね！！！

UWP も OK！

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317104159.png" width="450" />

iOS も多分 OK！

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317104314.png" width="300" />

多分 OK というのは私の環境だけ iOS プロジェクトのプロパティの「iOS ビルド＞パッケージ化のオプション＞iOS 用に PNG イメージファイルを最適化する」のチェックを外さないとビルドできなかったため… なんでや…

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317112637.png" width="450" />

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317104321.png" width="450" />

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317104242.png" width="450" />

Mac 側の `~/Library/Caches/Xamarin/mtbs/builds/＜アプリ名＞/＜ビルドのハッシュ？＞/obj/＜ビルドターゲット＞/Debug/optimized/` に最適化した png ファイルがコピーされるみたいなのですが、なぜかコピーされない状態です。調査中。

その他きになるかも？という点は以下。

> 「共有プロジェクト」と「ポータブルクラスライブラリ (PCL)」については以下をご参照ください。<br />
（.NET Standard との兼ね合いで暫くは共有プロジェクトの方が良いかもです。）<br />
[Sharing Code Options \- Xamarin](https://developer.xamarin.com/guides/cross-platform/application_fundamentals/code-sharing/)

<br />

> UWP 開発を始めてやる方は、「開発者モードにせよ」というダイアログが出たりしますので、言われる通りにしておきましょう。<br />
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317102352.png" width="450" /><br />
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/ytabuchi/20170317/20170317102402.png" width="450" />


### まとめ

Visual Studio 2017 で Xamarin を始める方は、PC の容量さえクリアできれば、サクッとインストールして、サクッとデバッグまで試していただけます！これなら、「Xamarin はいいぞ！」って言えますね。嬉しい。

周りの方に、Xamarin を始めたい場合は、Visual Studio 2017 を「.NETによるモバイル開発」にチェックをつけてインストールすれば何の問題もなく始められるよ！と言ってあげてください。

### Next Step？

Xamarin 公式ドキュメントにもある、一番最初の QuickStart 日本語版です。まずはここからやってみましょう！

[ytabuchi/XamarinHOL: Xamarin ハンズオン用のレポジトリ＆ドキュメントです。](https://github.com/ytabuchi/XamarinHOL)

WPF などの開発を行っていて XAML に慣れている方は、以下のハンズオンをやってみましょう！

[xamarin\-dev\-doc/hands\-on at master · chomado/xamarin\-dev\-doc](https://github.com/chomado/xamarin-dev-doc/tree/master/hands-on)


（画面写真やメニューの名前が少し古いかもしれませんがご容赦ください。）

楽しい Xamarin ライフを！

### Xamarin 気になった方は

Visual Studio 2017 をインストールして触ってみてください。手順書は <a href="http://ytabuchi.hatenablog.com/entry/visualstudio2017">こちらのエントリー</a> をご覧ください。
<a href="http://ytabuchi.hatenablog.com/entry/2014/08/26/191759">学習用リソース</a> や <a href="http://jxug.org/links.html">JXUG リンクページ</a> に参考資料を纏めてますので併せてどうぞ。

Xamarin の導入支援サービスを始めました。ベースは基本的なアプリを一緒に作ることで Xamarin を使えるようになって頂く内容ですが、ご要望に応じて講習内容のカスタマイズも可能です。詳しくは田淵までお問い合わせください(^^)

<a href="https://www.xlsoft.com/jp/products/xamarin/seminar.html">Xamarin 有償トレーニング : XLsoft エクセルソフト</a>

Xamarin の情報が欲しい方は<a href="http://blog.hatena.ne.jp/ytabuchi/ytabuchi.hatenablog.com/subscribe">このブログも購読</a>いただいたり、私の<a href="https://twitter.com/ytabuchi">Twitterアカウントをフォロー</a>いただいたりすると嬉しいです。

私が所属している [エクセルソフト](http://www.xlsoft.com/jp/index.html) の宣伝を少しさせてください。弊社は開発者向けの様々なソフトウェアを扱っています。おなじみの [ReSharper (JetBrains)](http://www.xlsoft.com/jp/products/jetbrains/index.html)、 や Atlassian の [JIRA, Confluence](http://www.xlsoft.com/jp/products/atlassian/index.html)、Office/PDF ファイルを .NET/Java で操作するライブラリ [Aspose（アスポーズ）](http://www.xlsoft.com/jp/products/aspose/index.html)、Windows アプリ、Web ページ、iOS/Android アプリの UI テストができる [TestComplete](http://www.xlsoft.com/jp/products/smartbear/index.html) などお勧めです(^^) また、Visual Studio Professional/Enterprise with MSDN も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば [弊社ページ](http://www.xlsoft.com/jp/) を覗いてみてください。

以上です。