Xamarin+MvvmCrossでアプリ開発をはじめる準備 2014年3月版

XamarinでMvvmCrossを使ったアプリの開発をはじめるにあたって、PCLサポートが公式でない上にNuGetアドインが不安定だった時期にプロジェクトを直接編集して無理矢理導入するというパターンが多かったと思います。

しかし、ここ数ヶ月でXamarinでのPCLサポートやNuGetアドインのサポートが改善したことにより、これまでよりも簡単かつ直感的に初期設定ができるようになっています。

本稿では2014年3月時点で、Mac上Xamarin StudioでMvvmCrossを使ったiOS/Androidクロスプラットフォーム開発環境をセットアップする方法をご紹介します。

NuGetのセットアップ

まず、Xamarin StudioからNuGetを使用できるようにします。

Xamarin Studioを起動し、[Xamarin Studio]メニューから[アドインマネージャー]を選択します。

アドインマネージャー

[Gallery]タブの[リポジトリ]ドロップダウンリストから、[Manage Repositoies...]を選択します。

Manage Repositoies...

追加をクリックし、NuGetアドインのリポジトリ http://mrward.github.com/monodevelop-nuget-addin-repository/4.0/main.mrep を追加します。(NuGetアドインの本家ページは https://github.com/mrward/monodevelop-nuget-addin にあります)

リポジトリ追加

NuGet Package Managementが追加されるので、インストールします。

NuGet Package Management

プロジェクトの作成

作成するアプリのプロジェクトを作成します。

まず、共通ロジックとなるCoreプロジェクトを作成します。[ファイル]メニュー[新規]の中にある[ソリューション]を選び、[C#]の[Portable Library]を選択します。

プロジェクト名は、(アプリ名).Core、ソリューション名は(アプリ名)とします。ここではアプリ名をCrossTestAppとしました。 このとき、先にプロジェクト名をセットしてからソリューション名を編集してください。先にソリューション名を編集するとプロジェクト名を編集したときに連動して変更されてしまいます。

ソリューションの作成

引き続き、ソリューションにプロジェクトを追加していきます。ソリューションエクスプローラにある、ソリューションを右クリックし、[追加]の[新しいプロジェクトの追加]を選び、プロジェクト追加します。

スクリーンショット 2014-03-01 2.20.26.png

下記の2プロジェクトを追加します

  • 種類 C# -> Android -> Android Application
  • プロジェクト名 (アプリ名).Droid

Droid

  • 種類 C# -> iOS -> 空のプロジェクト
  • プロジェクト名 (アプリ名).Touch

なお、(アプリ名)の次につけるプロジェクト種類の名前は、MvvmCrossの他の仕組みとあわせて、下記のようにしておくとわかりやすいのでこれに沿うことを推奨します。

追加したプロジェクトの整理

追加したプロジェクト内のファイルはMvvmCrossと競合したり不要となるので調整していきます。

まず、Coreのオプションを表示し、[ビルド]ツリー[一般]を選び、[Current Profile]を[4.5 - Profile78]を選びます。

Profile78

また、Core に追加されているMyClass.csは削除しておきます。

Droidのプロジェクトでは、MvvmCrossのNuGetパッケージがセットアップするフォルダの名称に合わせるために、Resourcesフォルダ内の各フォルダ名を大文字に変更します。このとき単純に大文字にするだけだとすでに存在するとアラートが出るため、一度違う名前を経由して変更(layoutを_layoutにかえてから、Layoutにする等)します。

Droid

また、デフォルトのMainActivity.csは不要なので削除しておきます。

参照設定の定義

Droid、Touchのプロジェクトから参照設定を作成します。参照のフォルダをダブルクリックすると参照設定の画面が表示されますので[Projects]タブを選択し、Coreのプロジェクトを選択します。

参照設定

MvvmCrossのインストール

プロジェクトにMvvmCrossをインストールします。ソリューションを右クリックして[Manage NuGet Packages]を選択します。

Manage NuGet Packages

NuGetのパッケージ検索ダイアログが開きますので、MvvmCrossを検索し、[MvvmCross - Hot Tuna Starter Pack]を選択します。

MvvmCross

インストールするターゲットのプロジェクトを選択する画面が表示されるので、すべて選択してOKをクリックします。

スクリーンショット 2014-03-01 2.44.20.png

この処理を行うと、プロジェクトにライブラリが追加され、ひな形が一気に生成されます。

AppDelegateのコピー

Touchのプロジェクトに、AppDelegate.cs.txtが生成されますので、AppDelegate.csの内容をこのファイルの内容で上書きします。

作業が終われば、AppDelegate.cs.txtは不要となるので削除します。

とりあえず動かして確認する

以上でプロジェクトの初期設定は完了です。まずはそれぞれ動かしてみましょう。

スクリーンショット 2014-03-01 2.51.48.png

スクリーンショット 2014-03-01 3.08.47.png

無事に動きましたでしょうか。これでMvvmCrossを使った開発の準備が整いました。