Xamarin Live Playerを使ってみたので導入手順をまとめます！

みなさんこんにちは！

ここ１週間ほど前から仕事でXamarinを触る機会ができ、以前から思っていたiOSアプリ開発願望に、より拍車がかかっています。
しかし、残念なのがiOSアプリの開発にはどうしても**Mac PCが必要である**ということ。
mac miniで安くても5万円はしてしまうので、二の足を踏んでいる自分がいます。

その中で、こんな朗報が！！
[iOSアプリ開発でMac OSが不要に、Windowsで開発・テスト・公開可能な「Xamarin Live Player」 -INTERNET Watch ](http://internet.watch.impress.co.jp/docs/news/1059302.html) 

早速使ってみました。結論から言うと、**Macを持っていない自分でもiOSアプリを開発できる環境ができました。**
非常にタイムリーな話題だと思いますので、導入手順を簡単にまとめさせていただきたいと思います。

なお、Xamarin Live Playerはアルファ版ですので、自己責任での導入をお願いいたします。
下記導入を行った中で生じた不利益について、責任は負いかねます。

以下の導入手順は、基本的にこちらのページに則っています。
[Xamarin Live Player Setup](https://developer.xamarin.com/guides/cross-platform/live/install/)
# 必要なもの
導入の前に必須要件だけまとめておきます。導入の判断材料としてお使いください。

* Visual Studio 2017 **15.3 Preview版**
* デバイス
    + iOS 9.0以降
        + iPhone 5以降 (5cはNG) 
        + iPad Air以降
    + Android 4.2以降
* 無線LAN環境

筆者はiPhone SE (iOS 10.3.1) で確認しています。
iPadも持っていますが、第4世代iPadだったのでインストールの時点ではじかれました(´・ω・｀)

# 1. [デバイス側] Xamarin Live Playerのインストール
App StoreまたはGoogle PlayからXamarin Live Playerをデバイスにインストールします。
ダウンロードページへのQRコードを貼っておきますのでご活用ください。

| iOS | Android |
|:------------:|:------------:|
|[![Apple版](https://qiita-image-store.s3.amazonaws.com/0/171480/63ea0d76-f0d6-fbc6-fd62-0bdb769d6136.png)](https://itunes.apple.com/us/app/xamarin-live-player/id1228841832?ls=1&mt=8)|[![xlp_android.png](https://qiita-image-store.s3.amazonaws.com/0/171480/df287ce8-08f9-46c5-85c5-379bbc7c81df.png)](https://play.google.com/store/apps/details?id=com.xamarin.live)|

# 2. [PC側] Visual Studio 2017 15.3 Preview のインストール
Xamarin Live Player は Visual Studio のプレビュー版で動作します。
[こちらのページ](https://www.visualstudio.com/en-us/news/releasenotes/vs2017-preview-relnotes)から、Visual Studio 2017 15.3 のインストーラをダウンロードしてください。

![00_download.png](https://qiita-image-store.s3.amazonaws.com/0/171480/3c3301de-f1ae-72ab-4019-23d3facd4701.png)

インストーラを起動すると、どのモジュールをインストールするか選択する画面が出てきます。
もちろんXamarinを使用するので、チェックを忘れないようにしてください。
![011_installer2.png](https://qiita-image-store.s3.amazonaws.com/0/171480/88609be3-edc3-db97-2eaf-8791abdc9e03.png)

# 3. [PC側] Xamarin Updater のインストール
Visual Studio のインストールが終わったら、Xamarin をアップデートするための Visual Studio の拡張機能をインストールします。

Visual Studio のメニューバーから、[ツール] -> [拡張機能と更新プログラム] を選択します。
オンラインの Visual Studio MarketPlace に **Xamarin Updater** がありますので、そちらをインストールしてください。
![013_xamarinupdater.png](https://qiita-image-store.s3.amazonaws.com/0/171480/db20cb55-adb7-9d88-5e70-a8af7dc0b43e.png)

なお、どうしても見つからない時は、[こちらのページ](https://marketplace.visualstudio.com/items?itemName=Xamarin.XamarinUpdater)からダウンロードすることも可能です（筆者はこちらからインストールしました）。

# 4. [PC側] サンプルプロジェクトのダウンロード
すでにプロジェクトがある方は飛ばしていただいても構いません。
とりあえず動作確認だけしたかったので、自分はサンプルプロジェクトをダウンロードし、そちらで確認しました。

[Color Control Sample (iOS)](https://developer.xamarin.com/samples/mobile/LivePlayer/ColorControl/)

ダウンロードしたファイルを解凍し、ソリューションファイルを Visual Studio 2017 15.3 Preview で開きます。

# 5. [PC側] Xamarin の更新
ここまでいけば、動くはず・・・！と思いましたが、ちょっとした壁に当たりました。
[Xamarin Live Player のセットアップページ](https://developer.xamarin.com/guides/cross-platform/live/install/)には「ここまでやれば Live Player っていうモードが出てくるよ」と書いてあるのに出てきません・・・。
![021_vs2.png](https://qiita-image-store.s3.amazonaws.com/0/171480/c428fe20-6aeb-02ea-2ccb-1db4307db76b.png)

どうしたものかと悩んでいましたが、[トラブルシューティングのページ](https://developer.xamarin.com/guides/cross-platform/live/troubleshooting/)に乗っかってました。
「Xamarin Live のオプションが出ない時は Xamarin を更新しろ」ってちゃんと・・・。

ということで、Xamarin の更新をします。
Visual Studio のメニューバーから、[ツール] -> [拡張機能と更新プログラム] を選択します。
「更新プログラム」を見ると、未更新のプログラムがちゃんとありました。
![022_vsupdate2.png](https://qiita-image-store.s3.amazonaws.com/0/171480/8bfa4d84-2b64-ac64-a8e2-2f179e162483.png)
一応念のため、上記画像の3つとも更新しておきました。

一旦 Visual Studio を閉じて、Xamarin を更新します。
更新完了後、再び起動してサンプルプロジェクトを開くと、ちゃんと出てきました！
![024_vs2.png](https://qiita-image-store.s3.amazonaws.com/0/171480/fa5c56ed-d369-8632-ba72-20694a4919f5.png)

# 6. デバイスとのペアリング
いよいよ実機転送に移ります。
ここで、**PC とデバイスは同一のネットワークに接続している**ことを確認してください。
ペアリングはできても、実機への転送ができません。

「Live Player」をクリックして実行すると、ペアリングの画面が出力されます。
![031_xlp.png](https://qiita-image-store.s3.amazonaws.com/0/171480/36c3dfcf-439f-ed10-7c58-ceabe83bd6e4.png)

デバイス側で Xamarin Live Player を起動します。中央下部にある「Pair to Visual Studio」をタップし、カメラを起動します。
PC に表示されている QR コードを読み込ませると、ペアリング成功のダイアログが出てくるはずです。
![030_xlp.png](https://qiita-image-store.s3.amazonaws.com/0/171480/907e413e-ce15-62f6-2819-a01e78ba99cf.png)

そのまましばらく待つと、プログラムが実機上で実行されます。
<img width="320" alt="20170513_001229000_iOS.png" src="https://qiita-image-store.s3.amazonaws.com/0/171480/78831607-73b7-a64f-31da-3b789f5ba487.png">

# 7. ペアリング後は・・・
![032_paired.png](https://qiita-image-store.s3.amazonaws.com/0/171480/5fdb9329-9e2a-d9f4-4db1-cde55fca9b18.png)
ペアリングした後は Visual Studio とデバイスが紐付きますので、再度 QR コードを読み込む必要はなくなります。
しかしながら、実機にしっかりデプロイされるわけではなく、あくまで **Xamarin Live Player 上でコードが動いている**構造になります。

# Xamarin Studio で できること と できないこと
まだほとんど試せていないですし、試す技術もないのですが、簡単にまとめさせていただきます。

* **デバッグができます**
一番衝撃的でした。
従来の Xamarin の開発でも Visual Studio から Mac PC を通して実機にデプロイさせた時にステップ実行できたのもすごく衝撃的でしたが、Xamarin Live Player でもステップ実行や変数の中身を見ることができました。
ホント中身どうなってるんですか・・・。

* **アプリとしてのデプロイはできません**
プログラムの実行には、Xamarin Live Player を起動しておく必要があります。あくまで Xamarin Live Player 上で動くということで考えたほうがいいかもしれません。
プッシュ通知とかはもしかすると非対応なのかもしれません（試せていないのでなんとも言えないです・・・）。
ちゃんとアプリとしてデプロイしたい時は Mac PC が必要になるということですね。

簡単にサンプルプログラムを動かした上での所感でした。
この記事が皆さんの参考になることを願っています。

以上です。お読みいただきありがとうございました。