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

前回の「[Xamarin.CrossPlatform] マスタ/詳細アプリのプロジェクトを理解する1」では、マスタ/詳細型アプリの要素技術について取り上げました。

今回は、実行時のアプリ画面と新規プロジェクト作成後のプロジェクト構成、共通プロジェクトのApp.xaml中身を見ていきます。

とりあえず実行してみる

新規プロジェクトを作成して実行すると、以下の画面が表示されます。
これはアプリのメインとなる画面で、項目が一覧表示されます。

メイン画面の右上にある「Add」をタップすると、以下のように項目を追加するための画面が表示されます。

画面下の「About」をタップすると、アプリの情報画面が表示されます。

上記のように、大きく3つの画面で構成されていることがわかります。

プロジェクト構成

続いてプロジェクトの構成をみてみましょう。

以下はプロジェクト名を「MasterDetailSample」として作成した例です。スクショはVS for Macのものですが、構成自体はWindows版も同じです。

ソリューションには3つのプロジェクトがあります。

  1. MasterDetailSample
    iOSとAndroidの共通プロジェクトです。
  2. MasterDetailSample.Droid
    Android用のプロジェクトです
  3. MasterDetailSample.iOS
    iOS用のプロジェクトです。

共通プロジェクトの構成

共通プロジェクトを展開すると、以下のようになります。

前回説明した通り、マスタ/詳細型はMVVMパターンを採用していますので、Models, ViewModels, Viewsというようにフォルダを分けてファイルが作成されています。Servicesについては、後ほど見ていくこととします。そのほか、App.xamlというファイルがあります。

App.xaml

App.xamlのコードは以下のようになっています。

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MasterDetailSample.App">
	<Application.Resources>
		<ResourceDictionary>
			<Color x:Key="Primary">#2196F3</Color>
			<Color x:Key="PrimaryDark">#1976D2</Color>
			<Color x:Key="Accent">#96d1ff</Color>
			<Color x:Key="LightBackgroundColor">#FAFAFA</Color>
			<Color x:Key="DarkBackgroundColor">#C0C0C0</Color>
			<Color x:Key="MediumGrayTextColor">#4d4d4d</Color>
			<Color x:Key="LightTextColor">#999999</Color>
			<Style TargetType="NavigationPage">
				<Setter Property="BarBackgroundColor" Value="{StaticResource Primary}" />
				<Setter Property="BarTextColor" Value="White" />
			</Style>
		</ResourceDictionary>
	</Application.Resources>
</Application>

<Application.Resources>や<ResourceDictionary>という名前から推測できるように、アプリケーション内で使用するリソースを定義しているファイルです。

例えば、5行目は、Primaryという名前で#2196F3の色を定義しています。このようにして定義された色は、データバインディングの機構を使用してViewから使用することができます。

<Color x:Key="Primary">#2196F3</Color>

[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が持つデータを自動で表示したり、ユーザーが入力したデータを受け取ることができるようになります。

 

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

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

[Xamarin.Forms] Jsonファイルを使用する(3)

前回の「Jsonファイルを使用する(2)」では、Json.NetのNuGetパッケージを追加し、デシリアライズ用のクラスを作成しました。

今回は、最終仕上げとしてデシリアライズをする方法を見ていきます。

アジェンダは以下の通りです。

  1. usingの追加
  2. デシリアライズコードの作成

1.usingの追加

はじめに、共通プロジェクト(JsonSample)のJasonSamplePage.xaml.csを開きます。

usingを以下のようにし、Json.Netとデシリアライズをできるようにしておきます。

using System.IO;
using System.Reflection;
using Newtonsoft.Json;
using Xamarin.Forms;

2.デシリアライズコードの作成

あとはプロジェクトに組み込んだperson.jesonを読み込んでデシリアライズをしPersonクラスのインスタンスにデータを入れるコードを書きます。

namespace JsonSample
{
    public partial class JsonSamplePage : ContentPage
    {
        public JsonSamplePage()
        {
			var assembly = typeof(JsonSamplePage).GetTypeInfo().Assembly;
			Stream stream = assembly.GetManifestResourceStream("JsonSample.person.json");

			Person[] persons;


			using (var reader = new System.IO.StreamReader(stream))
			{

				var json = reader.ReadToEnd();
				var rootobject = JsonConvert.DeserializeObject<Rootobject>(json);

				persons = rootobject.persons;
			}
        }
    }
}

7行目は、person.jsonファイルがどこにあるかの情報を取得するものです。typeofの()の中には、このコードが書かれているクラス名を書いています(このコードを書いているクラスはJsonSamplePageというクラスです)。必要に応じて変更して下さい。

8行目は、プロジェクトに追加したperson.jsonのストリームを取得する処理です。GetManifestResourceStreamの引数には、「プロジェクト名.JSONファイル名」を書きまます。

す。

10行目は、デシリアライズ先の変数の準備です。person.jsonは複数のperson情報を持っているので配列にしています。

13行目は、ストリームリーダーのインスタンスを生成して、person.jsonを読み取る準備をしています。

16行目で、peson.jsonからjsonデータを取得し、17行目でデシリアライズをしています。DeserializeObjectの<>にはデータを受け取る器(うつわ)の型を指定するので、前回作成したRootobjectを指定します。また引数にはデシリアライズの元)である(16行目で受け取ったpersonを指定します。

最後に、17行目でデシリアライズ結果を受け取ります。

以上で、プロジェクトに組み込んだjsonファイルからのデータ取得が完了です。あとはpersons変数に入っているデータを使用するのみとなります。