読者です 読者をやめる 読者になる 読者になる

銀の光と碧い空

クラウドなインフラとC#なアプリ開発の狭間にいるエンジニアの日々

MvvmCross で Windows Phone アプリケーションを作る ~その1~

あけましておめでとうございます。

新年最初のブログは MvvmCross ネタで行こうと思います。

MvvmCross というのは、Xamarin でのiOSやAndrodといったプラットフォームにも対応しているMVVMライブラリで、MS-PL ライセンスにてGtiHubで公開されています。

MvvmCross/MvvmCross · GitHub

特徴としては、Xamarin.iOS, Xamarin.Android を始め、Windows Phone7/8, Windows Store App, WPF と対応プラットフォームが幅広いこと、およびViewModel を PCL として作成することで全プラットフォーム共通の ViewModel (および Model) クラスを作成することが挙げられます。

その出自からして、今のところ情報はXamarin での iOSやAndroid 開発が多めなのですが、Windows Phone 開発でも使えないかと考え試すことにしました。個人的な着眼点としては、

  • MVVMの中でも、ViewとViewModelの連携を中心に調査(DataBindingとか画面遷移など)。
  • ひとまずは、Windows Phoneアプリのみをターゲットにする。ViewModelをPCLでは作るけど、Windows Phoneアプリ単体を開発するとしたときにどこまで使えるかを知りたい。
  • Windows Phone固有の機能とかをどう実装するか/するべきか。(バックグラウンドタスクとか)
  • というのを手で動かしながら確かめたいので、某Chatwork アプリを MvvmCross で作ってみる

を考えています。ちなみに、今まで Windows PhoneやWindows Store Appを作るときは、Mvvm Light Toolkit を使っていました。

今回は、まず最小限動くところまでをやってみます。

ソリューションを作って、ViewModel を記述する PCLプロジェクトを作成する

Visual Studio拡張で、MvvmCross なソリューション一式を作成できるものがあるのですが、VS2012限定なので使わず手作業で作っていきます。 まずは新規にソリューションを作成し、ポータブルライブラリプロジェクトをテンプレートから選びます。このとき名前は「XXX.Core」にするのが慣例っぽいです。 PCLのターゲットは、Windows Phone 8, Windows Store 8.1, Xamarin.iOS, Xamarin.Android にしました(Xamarin は Xamarin Studio をインストールしないと出てきません)。

次に、NugetからMvvmCross を追加します。MvvmCrossで検索するとたくさん出てきますが、それらはこんな感じに依存しています。

f:id:tanaka733:20140103005543p:plain

MvvmCross が全部入りで、TutorialだとStarter Packが入っていますが、Starter Packはいらないだろうと思い、今回は MvvmCross.HotTuna.MvvmCrossLibraries を追加しました。

次にViewModelを作ります。ViewModels/MainViewModel.cs というクラスを作ります。

MvxViewModel というのを継承します。テンプレ的なViewModel のプロパティ作成にはこんなコードスニペットがあると捗ります。

次にCoreプロジェクト直下にAppクラスを作成します。

これでCoreプロジェクトはいったん完成です。

Windows Phoneプロジェクトを作成する

次にWindows Phone 8 プロジェクトをこのソリューションに追加します。名前は「XXX.WP」という感じでつけました。追加したら、Coreプロジェクトへの参照を追加したのち、Nugetから同じく MvvmCross.HotTuna.MvvmCrossLibraries を追加します。同じパッケージですが、Windows Phoneプロジェクトで参照すると、Windows Phone用のDLLが追加で参照に追加されます。

Setup.csというクラスをプロジェクト直下に作成します。

次に、App.xaml.cs に次のような初期化コードと画面遷移用のコードを追加します。ここで注目すべきは、最初の画面遷移時に処理を割り込ませて、MvvmCrossで用意している初期化処理を呼び出していることです。

最後にViewを作成しますが、ViewはViewsフォルダー以下に、ViewModelのクラス名と対応させて作る必要があります。MainViewModelというViewModelに対応するのはMainViewという名前のViewです。また、Viewは Cirrious.MvvmCross.WindowsPhone.Views.MvxPhonePage を継承する必要があります。

以上で最低限動くものができました。起動すると、ページタイトルがViewModelで定義したものになっているはずです。