Xamarin逆引きTips
MvvmCrossのプロジェクトをセットアップするには？
クロスプラットフォーム開発を支援するXamarin用ライブラリの「MvvmCross」を使ってiOS／Androidアプリ開発を行うためのプロジェクトの作成方法を説明する。
クロスプラットフォーム開発を支援するXamarin用ライブラリとしてはXamarin.Formsが有名であるが、MvvmCrossというライブラリも存在する。MvvmCrossはXamarin.Forms登場以前から存在するクロスプラットフォームでMVVM（Model-View-ViewModelパターン）開発を支援するライブラリ群だ。Xamarin.iOS／Xamarin.Android、Windows Phoneといったモバイル向けだけでなく、WindowsストアアプリやWPF、Macにも対応している。
今回は、MvvmCrossを使ってiOS／Androidアプリの開発を行うために、プロジェクトをセットアップする方法を紹介する。
1. MvvmCrossの構造
MvvmCrossアプリを構成する2種類のプロジェクト
MvvmCrossで作られるアプリケーションのプロジェクトは、共通処理が記述されたPCL（Portable Class Library）と、それを参照するアプリのプロジェクトに大きく分かれる。MvvmCrossにおいて、PCLに関しては「Core」という名前が付けられている。よって以後、PCLのプロジェクトを指す場合は「Core」と称する。
Coreには、ViewModelや、各ViewModelで共通して使用されるServiceの他、全プラットフォームで共通して使用できるValueConverterなどが含まれる。
プラットフォーム側のアプリのプロジェクトには、Viewの他に、アプリ内で使用するリソースなど、通常、各プラットフォームのアプリに必要なものを含むことになる。
MvvmCrossを構成する3つの要素
MvvmCrossは大きく分けて3つの部分に分けられる（図1）。
基底になる部分は「CrossCore」と呼ばれ、IoCコンテナーやプラグイン機能、デバッグ機能、非同期処理・メインスレッド実行などの機能が備わっている（※MvvmCrossに関係なく、この部分のみを使用することも可能と思われる）。
MvvmCross本体は、CrossCoreの機能を使ってアプリとして動作するための基本機能や、View／ViewModelといったMVVM開発を行うための基底クラス、画面間移動のためのナビゲーション、バインディングやバインディングを便利に行うためのビューコントロールなどが含まれている。
また、プラットフォーム固有機能をCoreプロジェクトから利用するための機構としてプラグイン（Plugins）が備わっている。プラグインは、NuGetパッケージの形で提供されており、実際に導入すると、IoCコンテナーからプラグインが提供する機能を呼び出せるものがほとんどだ（※画面表示のバインディングのValueConverterを提供するVisibilityプラグインなど、IoCコンテナーを使用しないプラグインも存在する）。
命名規則について
MvvmCrossを使用したアプリや関連ライブラリのプロジェクト名やクラス名には、命名規則があるものが多い。例えばViewModelやViewなどのクラスには、それぞれ「ViewModel」や「View」で終わるクラス名を付ける必要がある。アプリやプラグインのプロジェクト名に関しては、表1の命名規則がある。アプリについてはこの通りになっていなくても動くが、合わせておく方が無難である。
| 対象となるプラットフォーム | 命名規則 |
|---|---|
| 共通モジュール（Core／PCL） | ＜プロジェクト名＞.Core |
| iOSアプリ | ＜プロジェクト名＞.Touch |
| Androidアプリ | ＜プロジェクト名＞.Droid |
| Windows Phoneアプリ | ＜プロジェクト名＞.WindowsPhone |
| Windowsストアアプリ | ＜プロジェクト名＞.WindowsStore |
| Windowsアプリ（WPF） | ＜プロジェクト名＞.Wpf |
| Macアプリ（Xamarin.Mac Classic API） | ＜プロジェクト名＞.XamMac |
| Macアプリ（Xamarin.Mac Unified API） | ＜プロジェクト名＞.XamMac.Unified |
2. MvvmCross開発用のプロジェクトの作成
MvvmCrossを使用したアプリの設定は、プロジェクトを作成した上でNuGetパッケージを導入することで行える。MvvmCrossの開発は、Xamarin本体同様、速いペースで行われており、そのときどきで方法が少しずつ異なっている。今回は記事執筆現在、NuGetから正式版として入手できるMvvmCross 3.5.0をベースに解説する。このバージョンで、Xamarin.iOSのUnified APIにも対応済みだ。
ここではプロジェクト名として「MvvmCrossSample」という名前でXamarin.iOS／Xamarin.Androidをターゲットとする新規のプロジェクトを作成してみよう。以下で手順を説明する。
2種類のプロジェクトの作成（Xamarin Studio 5.9以降。5.8以前はコラム参照）
まず、ソリューションおよび、共通部分となるCoreプロジェクトを作成する。
具体的には、Xamarin Studioで（メニューバーにある）［ファイル］メニューの［新規］から［ソリューション］を選択して、ソリューション新規作成用のダイアログ（図A）を開く。プロジェクトの種類から［その他］の［.NET］にある［Portable Library］を選択し、［Next］ボタンを押す。
ダイアログ画面が［Configure your project］（図B）になるので、［プロジェクト名］を「MvvmCrossSample.Core」とし、［Solution Name］は「MvvmCrossSample」とする。［位置］のテキストフィールドの下にある［Create a project within solution directory.］にチェックが入っているかを確認し、最後に［作成］ボタンを押せば、実際にソリューションとCoreプロジェクトが作成される。
名前のフィールドと連動してソリューション名のフィールドも変化するため、名前を設定してからソリューション名を変更するとよい。
次に、作成されたソリューションにiOSアプリのプロジェクトを追加する。
これには、［ソリューション］ビューのソリューション項目を右クリックし、（表示されるコンテキストメニューの）［追加］から［新しいプロジェクトを追加］を選択する。それにより表示されるダイアログ（図C）で、プロジェクトの種類から［iOS］の［App］にある［空のプロジェクト］を選択し、［Next］ボタンを押す。
iOSの［空のプロジェクト］を選択する。
ダイアログ画面が［Configure your iOS app］（図D）になるので、［App Name］を「MvvmCrossSample」とし、［Identififer］はiOSのApplication Identifierとなるので、所有しているドメインの逆順表記＋アプリケーション名とする命名規則に沿って指定する（例えば、「jp.co.fenrir.mvvmcrosssample」などとする）。［Devices］は今回の開発ではiPadは対象外とするため、iPadのチェックを外す。［ターゲット］のiOSは、サポートしたい下限のiOSを選択する。入力が完了すれば［Next］ボタンを押す。これにより図Bと同じような「プロジェクト名の設定」をするための［Configure your new project］画面になるので、そこで［プロジェクト名］を「MvvmCrossSample.Touch」として、最後に［作成］ボタンを押せば、実際にiOSプロジェクトが作成される。
アプリの識別名やターゲットOSなどを指定する。
さらに、AndroidアプリのプロジェクトをiOSと同様の手順で追加する。プロジェクトの種類は［Android］－［App］から［Android App］だ。［Configure your Android app］の画面（図E）では、［App Name］を「MvvmCrossSample」とし、［Identififer］はAndroidのパッケージ名となるので、所有しているドメインの逆順表記＋アプリケーション名とする命名規則に沿って指定する（iOS同様、「jp.co.fenrir.mvvmcrosssample」などとするとよいだろう）。［Target Platforms］には、どのAndroidバージョンで使用できるアプリを作るかを指定する（※各選択肢の意味は次の表を参照されたい）。MvvmCrossは、3.5からAndroid 2.3に対するサポートが終了しているため、実際は［Modern Development］を選択する場面が多くなるだろう。
| Target Platforms の選択 | 対応バージョン |
|---|---|
| Modern Development | Android 4.4 (API Level 19) をターゲットとし、Android 4.1 (API Level 16) 以上で動作する |
| Maximum Compatibility | Android 4.4 (API Level 19) をターゲットとし、Android 2.3 (API Level 10) 以上で動作する |
| Latest and Greatest | 最新SDKをターゲットとし、Android 5.0 (API Level 21) 以上で動作する |
こちらもiOS同様、アプリの識別名やターゲットOSなどを指定する。
その次の画面［Configure your new project］では、［プロジェクト名］として「MvvmCrossSample.Droid」として作成する。
【コラム】Xamarin Studio 5.8以前のプロジェクト作成手順
Xamarin Studio 5.9ではプロジェクト新規作成時のダイアログが変更されており、ウィザード形式になり分かりやすくなった。また、ストアに公開するに当たって適切に設定すべきBundle Identifier（iOS）およびパッケージID（Android）の入力が、そのウィザードで求められるようになっている。ちなみに、Xamarin Studio 5.8以前を使っている場合は、次のような操作方法となる。
まず、ソリューションと共通部分となるCoreプロジェクトを作成する。
具体的には、Xamarin Studioで（メニューバーにある）［ファイル］メニューの［新規］から［ソリューション］を選択して、ソリューション新規作成用のダイアログ（図2）を開く。プロジェクトの種類から［C#］の［Portable Library］を選択し、プロジェクト名を「MvvmCrossSample.Core」とし、ソリューション名は「MvvmCrossSample」とする。最後に［OK］ボタンを押せば、実際にソリューションが作成される。
名前のフィールドと連動してソリューション名のフィールドも変化するため、名前を設定してからソリューション名を変更するとよい。
次に、作成されたソリューションにiOSアプリのプロジェクトを追加する。
これには、［ソリューション］ビューのソリューション項目を右クリックし、（表示されるコンテキストメニューの）［追加］から［新しいプロジェクトを追加］を選択する。それにより表示されるダイアログ（図3）で、プロジェクトの種類として［iOS］－［Unified API］－［iPhone］の［空のプロジェクト］テンプレートを選択し、プロジェクト名は「MvvmCrossSample.Touch」とする。この内容で、［OK］ボタンを押して作成する。
iPhone版はUnified APIの空のプロジェクト。
さらに、Androidのプロジェクトを同様の手順で追加する。プロジェクトの種類は［C#］－［Android］から［Android Application］で、プロジェクト名は「MvvmCrossSample.Droid」とする。
NuGetパッケージの追加
次に、MvvmCrossに必要なNuGetパッケージを導入する。
［ソリューション］ビューの「Core」プロジェクト項目を右クリックし、［追加］から［Add NuGet Packages］を選択して、ダイアログ（図4）を開く。右上の検索フィールドから「MvvmCross」という名前でパッケージを検索すると、MvvmCrossに関連するパッケージが列挙されるが、ここで必要なのはパッケージIDが「MvvmCross」となっているものである。
同じようなライブラリがたくさんあるので注意する必要がある。IDが「MvvmCross」とだけになっているものを選択しよう。
最後に［Add Package］ボタンを押して、実際にMvvmCrossを追加する。
上記の作業を用意した全てのプロジェクトで行う（Coreだけでなく、iOSにも、Androidにも追加する必要がある）。なお、NuGetのMvvmCrossパッケージは、導入先のプロジェクトの種類を判別して、適切なアセンブリやファイルをプロジェクトに追加する。
不要ファイルの削除
プロジェクトにパッケージを追加した後、Xamarin Studioのプロジェクトテンプレートによって作成されているファイルを削除したり、MvvmCrossが用意したテンプレートに差し替えたりしていく（図5）。
Coreプロジェクトでは、Xamarin Studioが用意したMyClass.csファイルを削除する。
Androidのプロジェクトでは、デフォルトの画面であるMainActivity.csファイルと「Resources/layout」フォルダーに入っているMain.axmlファイルを削除する。
iOSのプロジェクトだけは少し状況が異なり、AppDelegate.csファイルを削除した上で、MvvmCrossのパッケージインストーラーが導入したAppDelegate.cs.txtファイルの名前をAppDelegate.csファイルに変えて、先ほど削除したファイルと差し替える。
Xamarin Studioのテンプレートで作られるファイルを削除する。iOSのAppDelgate.csファイルの差し替えだけは手順が異なるので注意が必要。
なお、各プロジェクトの「ToDo-MvvmCross」フォルダーには、それぞれのプロジェクトにMvvmCrossを追加した後に何をすべきかが記述されたテキストファイルが作成される。また、MvvmCrossプラグインによっても、ここにプラグイン説明用のテキストファイルが追加される場合がある。ビルド後のアプリの出力には含まれないので、気になるようであれば削除しても問題ない。
参照の設定
最後に、iOS／Android用の各プロジェクトからCoreプロジェクトへの参照設定を追加する。
追加するには、［ソリューション］ビューで「MvvmCrossSample.Touch」プロジェクトの［参照］というフォルダーをダブルクリックする。［Edit References］ダイアログが開くので（図6）、［Projects］タブから［MvvmCrossSample.Core］にチェックを入れる。
アプリの実行
この状態でiOS／Androidアプリを実行すると、下側のテキストボックスに入力されたテキストが上側のラベルに反映されるサンプルアプリが動作する。
バインディングの動作を例示している。左の画面にある下の「Hello MvvmCross」がテキストボックスになっており、ここに「 !」と文字を追加すると、右の画面のようになる。
■
最新のMvvmCrossを使ってプロジェクトの初期設定を行う方法を紹介した。今後はMvvmCrossの各機能についても掘り下げて紹介していく。
【コラム】Xamarin.FormsとMvvmCross、どちらを選ぶべきか
本連載では、Xamarin.FormsとMvvmCrossの説明が併走することになるが、読者の方はどちらを選ぶべきか悩んでしまうのではないかと思う。
MvvmCrossはモバイル環境だけでなくWindowsストアアプリやPC／Macにも対応しており、同じライブラリでより多くのプラットフォームをカバーできるのが魅力だ。プラットフォームのUIはそれぞれで実装する必要があるが、各プラットフォームから移ってきた人にとってはMvvmCrossの方がとっつきやすかったり、高度なUI制御を書くときの手間が減ったりする。さらにGitHubでMs-PLでソースコードも公開されており、トラブルがあれば自分でコードを解析できる。半面、コミュニティベースで開発されているため、Macなど利用者の少ない機能のメンテナンスは後手に回っている部分もある。
Xamarin.FormsはUIも含めて共通化することが可能で、MvvmCrossよりも一段階上のコードの共通化が可能だ。また、XAMLもバージョンが進むにつれて機能が強化されていっており、WPFやSilverlightの知識があるエンジニアはXamarin.Formsの方がとっつきやすいと思われる。Xamarin社の公式サポートがある点も魅力だ。またこの連載ではじめてXamarin.Formsについて触れた回でも書かれている通り、UI層の機能が最小公倍数になってしまう点やロックインされてしまう点などはデメリットとなる。
対応したいプラットフォーム、UIの複雑さ、サポート体制などをてんびんにかけ、作るアプリの性質に合わせて技術を選択することが重要となる。また、必要に応じて移し替えができるような設計をしていればより安全性が高くなるだろう。そのためにXamarin.Forms、MvvmCross共に知識を蓄えておくことをお勧めしたい。
更新履歴
- 2015/6/1
- Xamarin Studio 5.9でプロジェクト新規作成時のダイアログが変更されたので、それに合わせて内容を更新しました。
※以下では、本稿の前後を合わせて5回分（第35回～第39回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
35. Xamarin.Formsでタッチイベントを処理するには？（iOS／Androidの各種ジェスチャー対応）
iOS／Androidにおけるタップやスワイプなどの各種ジェスチャーを、Xamarin.Formsで処理する方法を解説する。
36. Xamarin.Formsでツールバーアイテムによるメニューを設置するには？
PageクラスのToolbarItemsプロパティを使って、画面の上部にツールバー（Android）／ナビゲーションバー（iOS）を表示する方法を解説する。
37. 【現在、表示中】≫ MvvmCrossのプロジェクトをセットアップするには？
クロスプラットフォーム開発を支援するXamarin用ライブラリの「MvvmCross」を使ってiOS／Androidアプリ開発を行うためのプロジェクトの作成方法を説明する。
38. Xamarin.FormsでListViewコントロールを使用するには？
データの一覧を表示できる「リストビュー」はXamarin.Formsでも提供されている。その基本的な使用方法を解説。また、セルの高さ指定／プログラムによるスクロール／画像表示などの方法も説明する。
39. Xamarin.Formsで地図を表示するには？（Xamarin.Forms.Maps使用）
Android／iOSアプリで各プラットフォーム標準の地図を表示するには、Xamarin.Forms.Mapsコントロールを使う。その基本的な使い方を説明する。
