Xamarin.Forms+ReactivePropertyでスマホアプリ開発！《本編》

【記事ツリー】

- [スマホアプリ開発！《本編》](https://qiita.com/YSRKEN/items/0036c6506155b9bf8051)
 - [スマホアプリ開発！《MasterDetailPage編》](https://qiita.com/YSRKEN/items/521d2962ac664fa95ebe)
 - [スマホアプリ開発！《ReactiveProperty編》](https://qiita.com/YSRKEN/items/d6835ac9f1338eeaab05)
 - [スマホアプリ開発！《ファイル読み込み編》](https://qiita.com/YSRKEN/items/36fb3b4ae0c0cf7476db)
 - [スマホアプリ開発！《リリース・署名編》](https://qiita.com/YSRKEN/items/cf22da85013197949742)

# 概要
　この度、[Xamarin.Forms](https://www.xlsoft.com/jp/products/xamarin/forms.html)を使用して次のスマホアプリを開発しました。スマホゲームの[アズールレーン](http://www.azurlane.jp)向けに、経験値計算や確率計算などを簡単に行えるツールです。
　　[YSRKEN/AzurlaneCalculator](https://github.com/YSRKEN/AzurlaneCalculator/releases/)

![3_.png](https://qiita-image-store.s3.amazonaws.com/0/29802/94eee705-c27b-2692-e66a-936d1488fc82.png)

　この際に得られた知見を記事として纏めてみました。

※Xamarin.Formsでは**Shared Project**で**Android用に**開発したので、その他の環境の方は適宜読み替えてください。

# Step1. 環境を導入
　まずは[Xamarin](https://www.xlsoft.com/jp/products/xamarin/index.html)による開発環境を用意する必要があります。[このページ](https://www.xlsoft.com/jp/products/xamarin/download.html)にもある通り、Windows・Macユーザーなら[Visual Studio](https://www.microsoft.com/ja-jp/dev/default.aspx)をインストールすればそれでOKです。
　ここで注意したいのは、インストール時のオプションに気をつけないと、XamarinがVisual Studioで使えるようにインストールされないということです。不安な方は、画像つきの解説記事として、次のWebページに目を通しておきましょう。
　　[Xamarin やりたい人向け Visual Studio 2017 インストール手引書 - Xamarin 日本語情報](http://ytabuchi.hatenablog.com/entry/visualstudio2017)

※既にVisual Studioを導入されている方は、もう一度インストーラーを起動し、所定の項目にチェックを入れて「インストール」ボタンを押すだけで、Xamarinを(追加で)インストールすることができます

# Step2. プロジェクトを作成
　[Xamarin.FormsでWPF・GTKアプリを開発しようとする](https://qiita.com/YSRKEN/items/3affcf805d3639b87588)ぐらいの無茶を考えなければ、Step1.で導入したXamarinをそのまま利用してOKです。ともかく、プロジェクトをXamarin.Formsで作成します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/29802/aee7d7a9-20f3-11ea-7164-90280459aeb5.png)

　プロジェクト作成の際、次のようなダイアログが出ると思いますが、重要なのは「Select a template:」の箇所で「Blank App」を選択することです。「Master Detail」だと余計なコードが多すぎる気がしますのよね……(※個人の感想です)。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/29802/9ea7fa54-aebc-ba84-da5c-1153383cb5b1.png)

# Step3. UIを構築

## ☆フォルダ構成について

　[MVVM](https://www.slideshare.net/YutaMatsumura/mvvm-77221171)使いなら**息をするように**「Views」「Models」「ViewModels」フォルダを作っていることだろうと思います。そしてApp.xaml以外のXAMLをViewsフォルダに移してからXAMLを書き始めることでしょう。
　Xamarin.Formsの場合、画像における「AzurlaneCalculator」プロジェクトが、「**共有プロジェクト**」として定義されています。ここでM・V・VMの全要素を管理すれば、ビルド時に「AzurlaneCalculator.Android」プロジェクトや「AzurlaneCalculator.iOS」プロジェクトなどから参照され、**自動で各々のプラットフォーム向けにビルドされる**わけです。~~その分使えるコントロールやメソッドは少ないですが~~

![image.png](https://qiita-image-store.s3.amazonaws.com/0/29802/093ea805-3ca7-7744-f0cd-ad6b1ca1acc1.png)

## ☆XAMLの作法について
　XAMLの書き方ですが、事前に[WPF](https://msdn.microsoft.com/ja-jp/library/mt149842.aspx)や[UWP](https://docs.microsoft.com/ja-jp/windows/uwp/get-started/whats-a-uwp)などで経験されている方は違和感なく覚えられると思われ……**あるわ！違和感バリバリだわ！まだまだ機能不足なんじゃ！！**

　「コンテナでコントロールの表示を制御」といった[XAMLのノリ](https://qiita.com/karno/items/f30f661b40d9adec6a6d)は同じなのですが、使えるコントロールやコンテナがWPFとはかなり異なります(特にタブコントロールが)。というわけで、使用できるコントロール一覧とコンテナ一覧を貼っておきますね。

　　[Xamarin.Formsの標準で使えるコントロール一覧 ～前編～](http://oxamarin.com/xamarin-forms-control-list-first-part/)
　　[Xamarin.Formsの標準で使えるコントロール一覧 ～後編～](http://oxamarin.com/xamarin-forms-control-list-sequel/)
　　[Xamarin.Forms レイアウト（Formsを使用したアプリ作成の次の１歩）](https://dev.classmethod.jp/smartphone/xamarin-forms-layout/)

　また、ウィンドウサイズが千差万別なことから、コントロールのサイズ指定が「WidthRequest」などと**「要望」っぽい名前である**ことも重要です。[文字サイズを表すFontSizeプロパティ](http://www.atmarkit.co.jp/ait/articles/1608/24/news026.html)にしても、「Medium」や「Large」などといった**ざっくり指定**になっています。ゆえに、WPFのように「[Width="96"だから1インチの長さなんだな](http://blogs.itmedia.co.jp/mohno/2013/12/xaml24-45f5.html)」といった思考をしてはいけません。「複数端末による表示チェック」が、スマホ時代には強く求められるのです。

## ☆要注意ポイント
　アプリ制作時に一番手こずったのが、「左上をタッチするとメニューが出てくる」アレを表現するための**MasterDetailPageウィンドウの扱い**でした。これについては、次のページに内容を分割したので参照してください。

　　[Xamarin.Forms+ReactivePropertyでスマホアプリ開発！《MasterDetailPage編》](https://qiita.com/YSRKEN/items/521d2962ac664fa95ebe)

　また、XAMLを書いたからにはレイアウトが即座にプレビューして欲しいのですが、あいにく**Xamarin.Forms PreviewerとXamarin Live Playerが両方仕事しない**といった不幸に直面しました。前者は[おま環](http://fumopan.tumblr.com/post/131993437271/)かもしれませんが、後者は**ReactivePropertyを導入したら動作しなくなった**パターンですので絶対不具合でしょこれ……！

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">Xamarin.FormsをShared Projectで作成するじゃろ？<br>そこにReacticvePropertyを導入するじゃろ？<br>するとな、Live実行した際に謎のVisualization Errorが出てしまうのじゃ…… <a href="https://t.co/YNQXCWjFrI">pic.twitter.com/YNQXCWjFrI</a></p>&mdash; YSR@ウサミン星人 (@YSRKEN) <a href="https://twitter.com/YSRKEN/status/975501757349416960?ref_src=twsrc%5Etfw">March 18, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

　更に、**エミュレーター起動も(HAXMですら)遅いのに実機デバッグも数分待たされる**、といったエグい状況ですので、「ネットサーフィン」「ゲームで周回」「[ガラスの仮面](http://mtgwiki.com/wiki/MoMa)」などの暇つぶしは必ず用意しておきましょう。

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">「こちらがXamarin.Formsでプロジェクトをリビルドした際の処理時間です」<br>「ReleaseはDebugに比べて3割強の増加か」<br>「そしてこれが、XAMLに空行を1行追加・削除してビルドした際の処理時間です」<br>「は？なんで逆転してるの？」<br>「ついでにスマホへの転送時間が90秒掛かります」<br>「ファーｗｗｗｗ」 <a href="https://t.co/ASrjHT5QXS">pic.twitter.com/ASrjHT5QXS</a></p>&mdash; YSR@ウサミン星人 (@YSRKEN) <a href="https://twitter.com/YSRKEN/status/976420049094258688?ref_src=twsrc%5Etfw">March 21, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# Step4. ViewModelとModelを構築する

　普通にPropertyChangedなどを使って実装しても良いのですが、私はMVVM用ライブラリの[ReactiveProperty](https://github.com/runceel/ReactiveProperty)を補助に使用しました。ViewModelの見た目が大幅に変わるため、Xamarin.Formsの解説ページでは通常用いられないライブラリですが、**便利なものを使わない道理はない**ので今回はガンガン使っていきます。銅使ったかについては、次のページに内容を分割しました。
　　[Xamarin.Forms+ReactivePropertyでスマホアプリ開発！《ReactiveProperty編》](https://qiita.com/YSRKEN/items/d6835ac9f1338eeaab05)
　また、ReactivePropertyを駆使することにより、通常のViewModelと比べて、MasterDetailPageの記述が相当楽になりました。
　　[Xamarin.Forms+ReactivePropertyでスマホアプリ開発！《MasterDetailPage編》](https://qiita.com/YSRKEN/items/521d2962ac664fa95ebe)

※「ReactivePropertyって一体何だ？」といった方は次のページをご覧ください。
　　[【C#】ReactiveProperty全然分からねぇ！って人向けのFAQ集【修正済】](https://qiita.com/YSRKEN/items/5a36fb8071104a989fb8)

※おまけとして、(埋め込み含めた)ファイル読み込みの際に必要な何やかんやを書きました。
　　[Xamarin.Forms+ReactivePropertyでスマホアプリ開発！《ファイル読み込み編》](https://qiita.com/YSRKEN/items/36fb3b4ae0c0cf7476db)

# Step5. デバッグビルドして動作を確かめる
　動作を確認するには、エミュレーター上で動かすか、実機上で動かすかして確かめることになります。前述のように**Xamarin Live PlayerがReactivePropertyを解釈できない**のが苦しいですね……(Xamarin Live Playerの起動・動作はエミュや実機よりずっと軽いので)。

## ☆エミュレーターで動かす
　　次のページを参照してください(投げやり)。やはりスマホ開発はなるべく高速なマシンが欲しいところですね……。
　　[Xamarin でも使える高速 Android エミュレータを簡単に作る方法(Windows編)](https://qiita.com/amay077/items/6176fdaf4aa3a13b9a6d#visual-studio-からも使えます)

## ☆実機(iOS)で動かす
　　次のページを参照してください(投げやり)。MacやiPhoneを持ってないので、具体的な説明ができず誠に申し訳ありません。5000兆円欲しい！
　　[Windows版VisualStudio2017で、実機iPhoneでデバッグする](https://www.usagi1975.com/16sep172147/)

## ☆実機(Android)で動かす

　スマホをPCとUSB接続します。この際、

- Windows10なら開発者モードにする
- Android SDK ManagerからGoogle USB Driverをインストールしておく
- Android側も同じく開発者モードにする

ことが必要ですので、詳しくは次のページが分かりやすいかと思います。
　　[はじめてのXamarin HelloWorldをAndroid実機で実行しよう！](https://goo.gl/PTVC7P)

# Step6. リリースビルドして署名する
　デスクトップアプリの場合、とりあえずビルドすれば配布して使ってもらえるようにできました。しかしスマホアプリの場合、「署名」といった仕組みがあり、それを行わないと他のスマホで使用できなくなってしまいます。具体的な手順については、次のページをご覧ください。
　　[Xamarin.Forms+ReactivePropertyでスマホアプリ開発！《リリース・署名編》](https://qiita.com/YSRKEN/items/cf22da85013197949742)