[Xamarin.CrossPlatform] マスタ/詳細アプリのプロジェクトを理解する1

数回に分けて、Xamarinのマスタ/詳細型アプリのプロジェクトについて理解を含めていきます。

今回はマスタ/詳細型プロジェクトの技術要素について見ていきます。

WindowsのVSはEnterprise 2017 Ver.15.5.2
MacのVSは7.3.2

を使用しています。

マスタ/詳細型プロジェクトの作成方法

クロスプラットフォームのアプリを作成する場合、WindowsのVisual StudioでもMacのVisual Studioでも、2つのテンプレートから作成することになります。

1つは空白のフォームのテンプレート、もう1つはマスター/詳細型のテンプレートです。

以下にプロジェクト作成時のダイアログを示します。上がWindows版で下がMac版です。

Windows版は、Master Detailを選択するとマスタ/詳細型のアプリを作成することができます。ちなみにBlank Appを選択すると空白のフォームアプリを作成することができます。

Mac版は、フォームアプリを選択することでマスタ/詳細型のアプリを作成することができます。

Windows版、Mac版とも、作成されるファイルは同じです。以降スクショはMac版を掲載します。

MVVM

マスタ/詳細型のプロジェクトは、MVVMパターンです。

MVVMはModel-View-ViewModelの略で、GUIを持つアプリケーションをModel、View、ViewModelの3つに分割して設計、実装を行います。

これはMVC(Model-View-Controller)の派生パターンになっています。

Model

Modelはビジネスロジック(アプリケーションのデータと手続き)を担う部分です。このため、表示機能については関与しませんが、背景色や文字色といった装飾部分のデータについてはModelで管理します。

View

Viewはデータを見える形にして表示したり、ユーザーからの入力を受け取る部分を担当します。Viewには複雑なロジックを持たせることはしません。基本的にはデータバインディング(後述)と呼ばれる機構を使用して、データの表示や入力の受け取りを行うようにします。

ViewModel

ViewModelはViewから受け取ったデータをModelに伝達したり、Viewの状態保持を担当します。このようにViewModelはViewとModelの仲介役となります。

データバインディング

データバインディングはUIとデータを関連付ける機構です。XamarinのCrossPlatform開発においては、Xamlの中にバインディング用の属性を記述することで、Modelが持つデータを自動で表示したり、ユーザーが入力したデータを受け取ることができるようになります。

 

今回は、マスタ/詳細型のプロジェクトの基本技術要素について触れてきました。文字ベースですし、説明がわかりにくいとことろもあるかと思います。

次回以降は、実際のコードも掲載しながら理解を進めていきます。

[Visual Studio][Xamarin][CrossPlatform] Android SDKをインストールする

Xamarin.Formsアプリのビルド時に「No resource found that matches xxxx」という警告が発生することがあります。これはAndroidのものです。

判断方法は簡単でプロジェクト名の後ろに.Droidが付いているかどうかです。

Android系の警告

たいていの場合はAndroid SDKをインストールすることで解決できるようです。

Android SDKのインストールは、Visual Studioの[ツール]-[Android]-[Android SDK Manager…]を選択します。

Andoroid SDKのインストール

続いて、Android SDK Managerが表示されます。

Android SDK Manager

あとは、必要なSDKにチェックを付けてインストールを行います。

以下のものはインストールしておきましょう。
Tools
・Android SDK Tools
・Android SDK Tools Platform-tools
・Android SDK Build-tools 23.0.3

Android 6.0(API 23)
・SDK Platform

Android 5.1.1(API 22)
・SDK Platform

Android 5.0.1(API 21)
・SDK Platform

Android 4.4.2(API 19)
・SDK Platform

Android 4.1.2(API 16)
・SDK Platform

Android 4.0.3(API 15)
・SDK Platform

Extras
・Android Support Repository
・Intel x86 Emulator Accelerator (Haxm Installer)

[Visual Studio][Xamarin][CrossPlatform] 新規プロジェクトを作成する

前回まではiOSやAndroidのネイティブアプリの作成方法を見てきました。

今回からXamarin.Formsを使用したクロスプラットフォームの開発手法を見ていきます。

そもそも、クロスプラットフォーム開発って何でしょう?

現在世の中に出回っているデバイスはA

ndroidかiOSのデバイスが主流です。で、アプリを作成する際に、それぞれのOS用にコーディングするのは時間が掛かりますし、非効率的です。そこで仕様が異なるOSやデバイスで、同じ仕様のアプリを作成できるようにしたものが、クロスプラットフォーム開発と呼ばれいてます。

Xamarinはこのクロスプラットフォーム開発ができる開発環境です。

では、新規プロジェクトでどれを選べばよいかを見ていきましょう。

新しいプロジェクトの作成ダイアログを開いたら、左側で[Visual C#]-[Windows]-[Cross Platform]を選択します。右側にはクロスプラットフォームのプロジェクト一覧が表示されます。この中から「Blank Xaml App(Xamarin.Forms.Portable)」を選択します。あとはプロジェクト名を入力して[OK]を押すとプロジェクトの作成が開始されます。

クロスプラットフォーム開発のプロジェクト作成しばらく待つと(結構待ちます)。

途中UWPアプリプロジェクトのバージョン選択ダイアログが表示されるのですが、現時点ではAniversary Editionを選択しない方がいいようです。ということでBuild 10586を選択します。

UWPターゲット選択

プロジェクトの作成が完了すると、使用している環境にもよりますが大量の警告やらエラーが出まくります。

いったんビルドすることで消えるエラーや警告があります。それでも消えない場合はNugetパッケージマネージャを起動してXamarin関連のアップデートがないかを確認してください。

Nugetマネージャ

無事エラーが取れたら、ソリューションエクスプローラーを確認してみましょう(エラーの解決方法は随時公開していきたいと思います)。

ソリューションエクスプローラー

一番上が各デバイスの共通となるプロジェクトで、それ以外がデバイス毎のプロジェクトになります。

上の例を表示すると以下のようになります

プロジェクト名 対応デバイス
BlankXamlAppSample 各デバイス共通のプロジェクト
BlankXamlAppSample.Droid Android
BlankXamlAppSample.iOS iOS
BlankXamlAppSample.UWP(Universal Windows) Windows(UWPアプリ)
BlankXamlAppSample.Windows(Windows 8.1) Windows 8.1向け
BlankXamlAppSample.WinPhone(Windows Phone 8.1) Windows Phone 8.1向け

不要なデバイス向けのプロジェクトもあるかもしれません。そのような場合は削除しても大丈夫です。

ということで、プロジェクトの作成方法については理解できたかと思います。

次回も引き続きXamarin.Formsを見ていきます。