MvvmCross と Xamarin for Visual Studio で iOS, Android, Windows アプリを作る流れ
こんにちは。
マイクロソフトの渡辺です。
C# で iOS、Android、Windows アプリをクロスプラットフォーム開発できる Xamarin。VIsual Studio 向けのアドインである Xamarin for Visual Studio も提供されていて、Visual Studio から iOS、Android、Windows の各アプリを開発することもできます。
アプリをクロスプラットフォーム開発するにあたっては、複数の .NET 処理系に対して、バイナリレベルで再利用できるライブラリである PCL ( Portable Class Library ) を活用します。PCL プロジェクトに共通ロジック部分を実装し、それを各アプリのプロジェクトから参照することで、コードを共通化することができます。
今回は、この共通部分を Mvvm フレームワーク 「 MvvmCross 」を使って、Windows ストア アプリ、iOS アプリ、Android アプリを作る流れを見ていきたいと思います。
共通ロジック部分 PCL ( Portable Class Library ) を作成
まず始めに、各アプリの共通部分を実装する PCL ( Portable Class Library ) を作成するところからはじめましょう。プロジェクトのテンプレートとして Portable Class Library を選択します。ここでは、プロジェクト名を、MvvmCrossDemo.Core としました。このあと、Windows, iOS, Android アプリのプロジェクトも追加していくので、ソリューション名は MvvmCrossDemo としてあります。
Portable Class Library のターゲットフレームワークを聞かれます。.NET Framework と Windows Store apps, Xamarin.Android, Xamarin.iOS にチェックがついていることを確認して進みます。
MvvmCross を NuGet で取得
プロジェクトを作成した後、まずは NuGet で MvvmCross を取得しましょう。ソリューションエクスプローラーから、参照設定を右クリックし、NuGet パッケージの管理をクリックします。
オンラインタブで、MvvmCross と検索すると、「 MvvmCross - Hot Tuna Starter Pack 」が見つかります。選択してインストールしてください。
インストールが完了すると、参照に MvvmCross が追加されます。
各アプリの共通ロジック ViewModel を記述
ViewModels フォルダの中にある First View Model を開きます。ここに今回各アプリで呼び出す共通ロジック ViewModel を書いていきます。今回は、FirstName, LastName, FullName の 3つのプロパティを追加しました。FirstName, LastName の変更に応じて FullName を更新したいので、FirstName, LastName の変更通知先はを FullName にしておきます。
ViewModel の実装はこれで完了です。実はこの他にも、ToDo-MVVMCross フォルダの中にあるテキストファイルに初めにやることが書いてあります。ただ、Hot Tuna Starter Pack をインストールした時点で上記のコードを書く以外は自動で行われています。
Windows ストア アプリ、iOS アプリ、Android アプリを作る際も ToDo が含まれます。ただ、ほとんど自動で行われてしまうので、この記事では実際に手を動かす部分だけをご紹介していきます。MvvmCross を使うときに通常のファイルにどんな変更を加えるの?という部分は、これらの ToDo テキストをご参照ください。
Windows ストア アプリを作成
プロジェクト作成
共通部分が用意できたので、ここからは各プラットフォーム向けのアプリを作っていきます。まずは、Windows ストア アプリです。ソリューションエクスプローラーで、ソリューション MVVMCrossDemo を右クリックし、追加 -> 新しいプロジェクト と選択します。
Visual C# の Windows ストア タブで 新しいアプリケーション ( XAML ) を選択します。ここではプロジェクト名を MVVMCrossDemo.Win8 としました。
参照を追加
プロジェクトを作成した後は、先ほど作っておいた共通部分の ViewModel がある MVVMCrossDemo.Core への参照を追加しましょう。ソリューションエクスプローラーから、参照設定を右クリックし参照の追加を選択します。
ソリューションタブで プロジェクト MVVMCrossDemo.Core を選択し、追加します。
加えてこのプロジェクトにも MVVMCross フレームワークを追加します。 Portable Class Library プロジェクト MVVMCrossDemo.Code で MVVMCross を追加した時と同様の手順で、MVVMCross への参照を追加します。
View の記述
View の記述前に1箇所修正を行います。App.xalm.cs を下記のように変更し、起動時に MVVMCross をセットアップするようにします。
次に View を記述します。Viwes フォルダの中にある FirstView.xaml を開き TextBlock と TextBox を追加します。テキストの値には、MVVMCrossDemo.Core で作った ViewModel のプロパティをバインドします。
デバッグ
Windows ストア アプリをデバッグしてみます。プロジェクト MVVMCrossDemo.Win8 を右クリックし、スタートアップ プロジェクトに設定をクリックします。
Windows ストア アプリのデバッグは、ローカルコンピュータ、シミュレータ−、リモートコンピューターのいずれかで行うことができます。ここではローカルコンピュータで実行してみます。
デバッグが開始されるとアプリが配置され、起動します。FirstName と LastName を入力すると、下に FullName が表示されます。簡単なデモですが、データバインドと View への変更通知が行われていることが分かります。
この仕掛け、動きが気になる方は 共通部分である MVVMCrossDemo.Core の ViewModel にブレークポイントを置いてデバッグしてみましょう。
TextBox を編集すると、ブレークポイントで止まります。いろいろ実験して動作を確認してみてください。
iOS アプリを作成
プロジェクトを作成
Windows ストア アプリの次は、iOS アプリを作ってみましょう。Windows ストア アプリの時と同様の手順で、ソリューションに新規プロジェクトを追加します。今回は、iOS -> iPhone と選択し、HelloWorld Application を使います。プロジェクト名は、MVVMCrossDemo.iPhone としました。
*もし、プロジェクト作成時に下記の警告が出た場合は、変更を破棄してください。警告が表示される原因は調査中です。
参照の追加
プロジェクト作成後は、共通部分 MVVMCrossDemo.Core と MVVMCross への参照を追加しましょう。これらの手順は、Windows ストア アプリのプロジェクトを作成した時と同様です。
View の記述
View の記述に入る前に、AppDelegate.cs を修正します。MVVMCross への参照を追加した際、修正するコードが書かれたテキストファイルが追加されています。それをコピーしましょう。
Views フォルダの中にある FirstView.cs に View を記述していきます。要素を追加して、バインドする。この流れは Windows ストア アプリ、iOS アプリ、Android アプリ、いずれも同様です。
デバッグ
このままデバッグに移りたいところなのですが、iOS アプリのデバッグは少し準備が必要です。ビルドしてみると下記のエラーがでます。
アプリの設定が不完全なのと、デバッグに使う Build Host を設定する必要があります。
まず、ソリューションエクスプローラーから、プロジェクトのプロパティを開いて設定を追加します。iOS Application のタブで Application name、Identifer、Version の 3つを設定してください。
次に必要な準備は Build Host とのペアリングです。iOS アプリのデバッグには Mac との接続が必要になります。あらかじめデバッグを行う Mac 側に Xamarin をインストールし、Xamarin.iOS Build Host を起動しておきます。
Visual Studio から Xamarin.iOS の設定画面を開きます。
すると Xamarin.iOS の設定画面が表示されるので、Find Build Mac Host をクリックして先に進みます。
Build Host となる Mac と Visual Studio で開発を行なっている Windows マシンは同一ネットワーク内にある必要があります。Connect を押して接続を開始しましょう。
ネットワーク上を探索し、接続可能な Build Host が表示されるので、選択して Connect を押します。
すると、PIN コードを入力するようポップアップが表示されます。先ほど Mac 上で立ち上げた Build Host に表示されているコードを入力しましょう。
これで、Mac とのペアリングは完了です。Windows ストア アプリをデバッグしたときと同様に、デバッグする前にこの MVVMCrossDemo.iPhone をスタートアップ プロジェクトに設定します。今回は実機でバッグではなく、Mac 上の iOS シミュレータでデバッグするので、ターゲットを iPhoneSimulator に変更。
デバッグを実行すると、Buid Host を立ち上げている Mac 側で iOS シミュレータが起動します。そして、アプリがデプロイされ、デバッグ開始。Windows ストア アプリの時と同様に、バインドされているフォームへの入力によりプロパティの値が変更され、その変更が View へと通知されているのが分かります。
Android アプリを作成
プロジェクトを作成
最後に Android アプリを作っていきます。Windows ストア アプリ、iOS アプリと同様の流れでソリューションに新しいプロジェクトを追加します。プロジェクト名を MVVMCrossDemo.Android とし、Android アプリのプロジェクトを作成します。
参照の追加
参照の追加も Windows ストア アプリ、iOS アプリの時と同様です。共通部分の ViewModel がある MVVMCrossDemo.Core と MVVMCross への参照を追加します。
View の記述
さっそく View を記述していきます。Resources/Layout フォルダにある FirstView.axml に TextView、EditText を追加します。local:MvxBind 属性で ViewModel のプロパティとバインドします。
ちなみに、Xamarin for Visual Studio では Android Designer も使えます。
デバッグ
では、Android アプリもデバッグしてみましょう。Windows ストア アプリ、iOS アプリの時と同様、プロジェクト MVVMCrossDemo.Android をスタートアッププロジェクトに設定します。また、エミュレータだとパフォーマンス的に厳しいので、今回は実機でバッグを行います。ドライバのインストールや Android 端末の設定は行った上で USB 接続します。
デバッグのターゲットをエミュレータではなく、実機端末に変更。
デバッグを実行すると、実機にアプリがデプロイされ起動します。Windows ストア アプリ、iOS アプリの時と同様の動作を確認してみましょう。
これで 共通部分 MVVMCrossDemo.Core と、各 OS 向けのアプリ MVVMCrossDemo.Win8、MVVMCrossDemo.iPhone、MVVMCrossDemo.Android ができました。
このあとは
今回は、MvvmCross と Xamarin for Visual Studio で、Windows ストア アプリ、iOS アプリ、Android アプリを作る流れをご紹介しました。Visual Studio ではなく、Xamarin Studio で MVVMCross を使う流れは、@amay077 さんが『マルチプラットフォーム MVVMフレームワーク「MvvmCross」を使う』にまとめられています。また、MvvmCross は非常に充実したチュートリアルが提供されていますので、こちらもぜひご参照ください。
*参考リンク
- iOS/Android/Windows――すべてに対応するアプリを開発するには
- iOS/Android/Windowsすべてに対応したアプリを作るには(MSC2013) 資料公開 - Yuta Watanabe's Blog
- Xamarin - Build apps with C# and .NET for iOS, Android, Mac and Windows