Yuta Watanabe's Blog

開発周りと、その他諸々

MvvmCross と Xamarin for Visual Studio で iOS, Android, Windows アプリを作る流れ

こんにちは。

マイクロソフトの渡辺です。

C# で iOS、Android、Windows アプリをクロスプラットフォーム開発できる Xamarin。VIsual Studio 向けのアドインである Xamarin for Visual Studio も提供されていて、Visual Studio から iOS、Android、Windows の各アプリを開発することもできます。

f:id:yuwata:20140131205801p:plain

アプリをクロスプラットフォーム開発するにあたっては、複数の .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 としてあります。

f:id:yuwata:20140131183026p:plain

Portable Class Library のターゲットフレームワークを聞かれます。.NET Framework と Windows Store apps, Xamarin.Android, Xamarin.iOS にチェックがついていることを確認して進みます。

f:id:yuwata:20140131183038p:plain

MvvmCross を NuGet で取得

プロジェクトを作成した後、まずは NuGet で MvvmCross を取得しましょう。ソリューションエクスプローラーから、参照設定を右クリックし、NuGet パッケージの管理をクリックします。

f:id:yuwata:20140131183050p:plain

オンラインタブで、MvvmCross と検索すると、「 MvvmCross - Hot Tuna Starter Pack 」が見つかります。選択してインストールしてください。

f:id:yuwata:20140131183106p:plain

インストールが完了すると、参照に MvvmCross が追加されます。

f:id:yuwata:20140131183120p:plain

各アプリの共通ロジック ViewModel を記述

ViewModels フォルダの中にある First View Model を開きます。ここに今回各アプリで呼び出す共通ロジック ViewModel を書いていきます。今回は、FirstName, LastName, FullName の 3つのプロパティを追加しました。FirstName, LastName の変更に応じて FullName を更新したいので、FirstName, LastName の変更通知先はを FullName にしておきます。

f:id:yuwata:20140131183657p:plain

ViewModel の実装はこれで完了です。実はこの他にも、ToDo-MVVMCross フォルダの中にあるテキストファイルに初めにやることが書いてあります。ただ、Hot Tuna Starter Pack をインストールした時点で上記のコードを書く以外は自動で行われています。

Windows ストア アプリ、iOS アプリ、Android アプリを作る際も ToDo が含まれます。ただ、ほとんど自動で行われてしまうので、この記事では実際に手を動かす部分だけをご紹介していきます。MvvmCross を使うときに通常のファイルにどんな変更を加えるの?という部分は、これらの ToDo テキストをご参照ください。

Windows ストア アプリを作成

プロジェクト作成

共通部分が用意できたので、ここからは各プラットフォーム向けのアプリを作っていきます。まずは、Windows ストア アプリです。ソリューションエクスプローラーで、ソリューション MVVMCrossDemo を右クリックし、追加 -> 新しいプロジェクト と選択します。

f:id:yuwata:20140131184713p:plain

Visual C# の Windows ストア タブで 新しいアプリケーション ( XAML ) を選択します。ここではプロジェクト名を MVVMCrossDemo.Win8 としました。

f:id:yuwata:20140131184931p:plain

参照を追加

プロジェクトを作成した後は、先ほど作っておいた共通部分の ViewModel がある MVVMCrossDemo.Core への参照を追加しましょう。ソリューションエクスプローラーから、参照設定を右クリックし参照の追加を選択します。

f:id:yuwata:20140131185246p:plain

ソリューションタブで プロジェクト MVVMCrossDemo.Core を選択し、追加します。

f:id:yuwata:20140131185304p:plain

 

加えてこのプロジェクトにも MVVMCross フレームワークを追加します。 Portable Class Library プロジェクト MVVMCrossDemo.Code で MVVMCross を追加した時と同様の手順で、MVVMCross への参照を追加します。

 

 

f:id:yuwata:20140131185332p:plain

View の記述

View の記述前に1箇所修正を行います。App.xalm.cs を下記のように変更し、起動時に MVVMCross をセットアップするようにします。

f:id:yuwata:20140131185749p:plain

次に View を記述します。Viwes フォルダの中にある FirstView.xaml を開き TextBlock と TextBox を追加します。テキストの値には、MVVMCrossDemo.Core で作った ViewModel のプロパティをバインドします。

f:id:yuwata:20140131185819p:plain

デバッグ

Windows ストア アプリをデバッグしてみます。プロジェクト MVVMCrossDemo.Win8 を右クリックし、スタートアップ プロジェクトに設定をクリックします。

f:id:yuwata:20140131190159p:plain

Windows ストア アプリのデバッグは、ローカルコンピュータ、シミュレータ−、リモートコンピューターのいずれかで行うことができます。ここではローカルコンピュータで実行してみます。

f:id:yuwata:20140131190337p:plain

デバッグが開始されるとアプリが配置され、起動します。FirstName と LastName を入力すると、下に FullName が表示されます。簡単なデモですが、データバインドと View への変更通知が行われていることが分かります。

f:id:yuwata:20140131190638p:plain

この仕掛け、動きが気になる方は 共通部分である MVVMCrossDemo.Core の ViewModel にブレークポイントを置いてデバッグしてみましょう。

f:id:yuwata:20140131190703p:plain

TextBox を編集すると、ブレークポイントで止まります。いろいろ実験して動作を確認してみてください。

f:id:yuwata:20140131190822p:plain

 iOS アプリを作成

プロジェクトを作成

Windows ストア アプリの次は、iOS アプリを作ってみましょう。Windows ストア アプリの時と同様の手順で、ソリューションに新規プロジェクトを追加します。今回は、iOS -> iPhone と選択し、HelloWorld Application を使います。プロジェクト名は、MVVMCrossDemo.iPhone としました。

f:id:yuwata:20140131192217p:plain

*もし、プロジェクト作成時に下記の警告が出た場合は、変更を破棄してください。警告が表示される原因は調査中です。

f:id:yuwata:20140131192326p:plain

参照の追加

プロジェクト作成後は、共通部分 MVVMCrossDemo.Core と MVVMCross への参照を追加しましょう。これらの手順は、Windows ストア アプリのプロジェクトを作成した時と同様です。

f:id:yuwata:20140131192528p:plain

View の記述

View の記述に入る前に、AppDelegate.cs を修正します。MVVMCross への参照を追加した際、修正するコードが書かれたテキストファイルが追加されています。それをコピーしましょう。

f:id:yuwata:20140131193031p:plain

Views フォルダの中にある FirstView.cs に View を記述していきます。要素を追加して、バインドする。この流れは Windows ストア アプリ、iOS アプリ、Android アプリ、いずれも同様です。

f:id:yuwata:20140131193212p:plain

デバッグ 

このままデバッグに移りたいところなのですが、iOS アプリのデバッグは少し準備が必要です。ビルドしてみると下記のエラーがでます。

f:id:yuwata:20140131193342p:plain

アプリの設定が不完全なのと、デバッグに使う Build Host を設定する必要があります。

まず、ソリューションエクスプローラーから、プロジェクトのプロパティを開いて設定を追加します。iOS Application のタブで Application name、Identifer、Version の 3つを設定してください。

f:id:yuwata:20140131193436p:plain

次に必要な準備は Build Host とのペアリングです。iOS アプリのデバッグには Mac との接続が必要になります。あらかじめデバッグを行う Mac 側に Xamarin をインストールし、Xamarin.iOS Build Host を起動しておきます。

f:id:yuwata:20140131193834p:plain

Visual Studio から Xamarin.iOS の設定画面を開きます。

f:id:yuwata:20140131193922p:plain

すると Xamarin.iOS の設定画面が表示されるので、Find Build Mac Host をクリックして先に進みます。

f:id:yuwata:20140131194108p:plain

Build Host となる Mac と Visual Studio で開発を行なっている Windows マシンは同一ネットワーク内にある必要があります。Connect を押して接続を開始しましょう。

f:id:yuwata:20140131194210p:plain

ネットワーク上を探索し、接続可能な Build Host が表示されるので、選択して Connect を押します。

f:id:yuwata:20140131195728p:plain

すると、PIN コードを入力するようポップアップが表示されます。先ほど Mac 上で立ち上げた Build Host に表示されているコードを入力しましょう。

f:id:yuwata:20140131195958p:plain

これで、Mac とのペアリングは完了です。Windows ストア アプリをデバッグしたときと同様に、デバッグする前にこの MVVMCrossDemo.iPhone をスタートアップ プロジェクトに設定します。今回は実機でバッグではなく、Mac 上の iOS シミュレータでデバッグするので、ターゲットを iPhoneSimulator に変更。

f:id:yuwata:20140131200039p:plain

 

デバッグを実行すると、Buid Host を立ち上げている Mac 側で iOS シミュレータが起動します。そして、アプリがデプロイされ、デバッグ開始。Windows ストア アプリの時と同様に、バインドされているフォームへの入力によりプロパティの値が変更され、その変更が View へと通知されているのが分かります。

f:id:yuwata:20140131201136p:plain

 

Android アプリを作成

プロジェクトを作成

最後に Android アプリを作っていきます。Windows ストア アプリ、iOS アプリと同様の流れでソリューションに新しいプロジェクトを追加します。プロジェクト名を MVVMCrossDemo.Android とし、Android アプリのプロジェクトを作成します。

f:id:yuwata:20140131201715p:plain

参照の追加

参照の追加も Windows ストア アプリ、iOS アプリの時と同様です。共通部分の ViewModel がある MVVMCrossDemo.Core と MVVMCross への参照を追加します。

f:id:yuwata:20140131202002p:plain

View の記述

さっそく View を記述していきます。Resources/Layout フォルダにある FirstView.axml に TextView、EditText を追加します。local:MvxBind 属性で ViewModel のプロパティとバインドします。

f:id:yuwata:20140131202717p:plain

ちなみに、Xamarin for Visual Studio では Android Designer も使えます。

f:id:yuwata:20140131203022p:plain

デバッグ

では、Android アプリもデバッグしてみましょう。Windows ストア アプリ、iOS アプリの時と同様、プロジェクト MVVMCrossDemo.Android をスタートアッププロジェクトに設定します。また、エミュレータだとパフォーマンス的に厳しいので、今回は実機でバッグを行います。ドライバのインストールや Android 端末の設定は行った上で USB 接続します。

f:id:yuwata:20140131203442p:plain

デバッグのターゲットをエミュレータではなく、実機端末に変更。

f:id:yuwata:20140131203512p:plain

デバッグを実行すると、実機にアプリがデプロイされ起動します。Windows ストア アプリ、iOS アプリの時と同様の動作を確認してみましょう。

f:id:yuwata:20140131211943p:plain

これで 共通部分 MVVMCrossDemo.Core と、各 OS 向けのアプリ MVVMCrossDemo.Win8、MVVMCrossDemo.iPhone、MVVMCrossDemo.Android ができました。

f:id:yuwata:20140131210510p:plain

このあとは

今回は、MvvmCrossXamarin for Visual Studio で、Windows ストア アプリ、iOS アプリ、Android アプリを作る流れをご紹介しました。Visual Studio ではなく、Xamarin Studio で MVVMCross を使う流れは、@amay077 さんが『マルチプラットフォーム MVVMフレームワーク「MvvmCross」を使う』にまとめられています。また、MvvmCross は非常に充実したチュートリアルが提供されていますので、こちらもぜひご参照ください。

*参考リンク