[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変数に入っているデータを使用するのみとなります。

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

前回の記事「Jsonファイルを使用する(1)」では、JSONファイルを作成し、プロジェクトに組み込むまでを説明しました。

今回は、JSONファイル操作を行うNuGetパッケージの追加と、デシリアライズするためのクラスの作成を行います。

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

  1. JSON用のNuGetパッケージの追加
  2. シリアライズとデシリアライズ
  3. デシリアライズ用クラスの作成

1.JSON用NuGetパッケージの追加

Xamarin.FormsでJSONファイルを操作するには、ライブラリを使用します。標準のライブラリを使用しても行えますが、もっと便利なライブラリ(NuGetパッケージ)を使用します。

Windows版のVisual Studioを使用している場合は、メニューの[ツール]-[NuGetパッケージマネージャー]-[ソリューションのNuGetパッケージの管理]をクリックして下さい。

NuGetソリューションの画面に切り替わるので、「参照」を選択して「Json.Net」

を検索します。検索結果から「newtonsoft.Json」を選択して[インストール]ボタンをクリックして下さい。

Mac版Visual Studioの場合は、共通プロジェクト(PCLプロジェクト)を右クリックして[追加]-[NuGetパッケージの追加]を選択します。

検索窓で「Json.Net」を入力して検索をし、一覧から「Json.Net」にチェックを付けます。最後に[パッケージを追加]をクリックします。

2.シリアライズとデシリアライズ

はじめに、シリアライズとデシリアライズの用語についておさらいしておきましょう。

シリアライズは、クラスの内容をある形式のファイルに変換することです。例えば、personというクラスがあり、このクラスが持つデータの内容から、XMLやJSON形式のファイルを作成することをシリアライズ化と呼びます。

一方デシリアライズは、シリアライズ操作の逆です。あるファイルの内容から、クラスにデータをセットすることをデシリアライズと呼びます。

先ほど組み込んだJson.Netは、JSONファイルのシリアライズ/デシリアライズを行うための機能を持っています。この機能を使用することで、容易にシリアライズもデシリアライズも行うことができます。

今回の一連の記事では、プロジェクト内に配置したperson.jsonというファイルの内容をクラスに展開したいので、デシリアライズを行います。

3.デシリアライズ用クラスの作成

はじめに、前回作成したperson.jsonのおさらいをしておきましょう。

{
  "persons": [
    {
      "Name": "HIRO",
      "Age": 44,
      "Gender": "Male"
    },
    {
      "Name": "Bill",
      "Age": 53,
      "Gender": "Male"
    },
    {
      "Name": "Cathy",
      "Age": 38,
      "Gender": "Female"
    },
  ]
}

personsという配列があり、その中にName, Age, Genderのデータを持っているJSONファイルです。

このファイルの内容を保持できるクラスは、Nameプロパティ(String型)、Ageプロパティ(int型)、Genderプロパティ(String型)を持っていればよいことがわかります。JSONファイルではpersonsという配列がありますが、これはクラスのインスタンスを配列化すれば対応が可能です。よってシンプルにName, Age, Genderのプロパティを持つクラスを作成します。

以上を理解できたら、共通のプロジェクト(JsonSample)に「Personクラス」を作成してください。

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Gender { get; set; }
}

Xamrinのサイトのサンプルでは、上記のようなクラスの配列をプロパティとして持つクラスを作成して管理しています。例にならって、Rootobjectというクラスも作成することにします。

public class Rootobject
{
    public Person[] persons { get; set; }
}

以上でデシリアライズ用クラスの作成は完了です。

次回は、いよいよデシリアライズを行う方法について説明します。

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

データベースまで必要はないけれど、ちょっとした設定データを書き込んでおいて読み出せると便利です。

ということで、今回から数回に分けて、Xamarin.FormsにJsonファイルを組み込んでおき、読み込んで使用する方法を見ていきます。

今回のアジェンダは以下の通り。

  1. Jsonファイルとは
  2. Jsonファイルを作成する
  3. プロジェクトにJsonファイルを追加する
  4. Jsonファイルの設定をする

1.Jsonファイルとは

既にご存じの方もいらっしゃるでしょうが、はじめにJsonファイルについておさらいをしておきましょう。

JSONはJavaScript Object Notationの略です。テキスト形式のデータフォーマットで、拡張子はjsonです。JavaScriptと入っていますが、JavaScript専用のデータフォーマットというわけではありません。XMLよりも簡潔に記述ができ、最近ではWeb APIがJSON形式データを返してくるものの多く見られるようになってきました。

JSONはデータの集合を{ 〜 }でくくり、その内側にデータを記述します。データはキーと値のペアになっており、コロン記号「:」で連結して記述します。

以下にJSONデータの例を示します。

{"Name":"HIRO", "Age":43, "Gender":"Male"}

上記の例では、Nameというキーに対してHIROというデータを、Ageというキーに対して43というデータを、GenderというキーにMaleというデータを設定している例です。

配列の場合は、配列にしたいデータを[ 〜 ]でくくります。以下はNameというキーに対して、HIRO, Bill, Cathyという3つのデータを持たせています。

{ "Name:"["HIRO","Bill","Cathy"]}

JSONで使用できるデータ型には以下のようなものがあります。

データ型 説明
String 文字列。ダブルクォーテーション「”」でくくります。
Numbers 数値。7, 1.24など数値を書きます。
Booleans 真偽値。trueやfalseを書きます。
Null Nullを表す

2.Jsonファイルを作成する

JSONフォーマットについて理解できたら、実際にファイルを作成してみましょう。

実際に作成するファイルには、氏名、年齢、性別のデータを複数持たせることとします。先ほど例で示したデータの構成を複数持たせます。

テキストエディタを開いて、以下のように入力して下さい。Name, Age, Genderの組み合わせを複数持てるように配列としています。配列にはpersonsという名前を付けています。(英単語としてpersonsは存在しないのですが、わかりやすくするためにsを付けてpersonsとしています。)

{
  "persons": [
    {
      "Name": "HIRO",
      "Age": 44,
      "Gender": "Male"
    },
    {
      "Name": "Bill",
      "Age": 53,
      "Gender": "Male"
    },
    {
      "Name": "Cathy",
      "Age": 38,
      "Gender": "Female"
    },
  ]
}

上記の入力が完了したら、「person.json」という名前でUTF-8で保存をして下さい。

3.プロジェクトにJSONファイルを追加する

それではXamarin.Formsプロジェクトを作成しましょう。プロジェクト名はJsonSampleとします。

Visual StudioのWindows版を使用している方は「クロスプラットフォームアプリ(Xamarin.Formsまたはネイティブ)」を、Mac版を使用している方は「Blank Forms App」を選択して、プロジェクト名を「JsonSample」として下さい。

作成するとソリューションエクスプローラーは以下のようになります。Visual Studio for Macのスクリーンショットですが、Windows版も同様です。

それではiOSとAndoroidで共通となるJsonSampleプロジェクトにjsonファイルを追加しましょう。

ソリューションエクスプローラーにぶら下がっている、Windows版では「JsonSample」プロジェクトを右クリックして[追加]-[既存の項目]で、先ほど作成したjsonファイルを選択します。Mac版の場合はプロジェクトを右クリックして、[追加]-[ファイルを追加]をクリックして、jsonファイルを選択して下さい。

4.Jsonファイルの設定をする

プロジェクトにJsonファイルを組み込みましたが、まだ終わりではありません。このままだと、Jsonファイルを読み込むことができないので、設定が必要です。

先ほど組み込んだ「person.json」ファイルをマウスで選択し、プロパティウィンドウを開いて下さい。

以下のように、ビルドアクションの設定を行います。左側はMac版、右側はWindows版での設定です。どちらも「埋め込みリソース」を意味します。

ということで、今回はここまで。

次回は埋め込んだJSONファイルの読み込みとデシリアライズをするためのクラス作成について説明をします。

[Xamarin.Forms] 地図にピンを表示する(Xamarin.Forms.Maps編)

Xamarin.Forms.MapsのMapクラスには、Pinsというピン専用のプロパティがあり、Addメソッドを使用してピンを立てることができます。

AddメソッドにはPinクラスのインスタンスを渡します。

このPinクラスには、以下表に示す設定を行うことができます。

Type ピンの種類。Generic, Place, SavedPin, SearchResultのいずれかを指定します。
Position 地図上のピンの表示位置を指定します。
Label ピンに表示するラベルの文字列を指定します。
Address ピンに表示する住所を表す文字を指定します

以下に、2つのピンを表示するコード例を示します。

// 以下追加
using Xamarin.Forms;
using Xamarin.Forms.Maps;
namespace MapSample
{
    public class MapPage : ContentPage
    {
        public MapPage()
        {
            var map = new Map(
                MapSpan.FromCenterAndRadius(
                    new Position(35.6329, 139.8803),
                    Distance.FromKilometers(1.0))) {
                IsShowingUser = true,
                VerticalOptions = LayoutOptions.FillAndExpand,
                HasScrollEnabled = true,
                HasZoomEnabled = false
                    
                                               
            };

            // 1つ目のピンを作成
			var pin1 = new Pin
			{
				Type = PinType.Place,
				Position = new Position(35.6329, 139.8803), 
				Label = "ねずみ〜らんど",
				Address = "夢と魔法の国"
			};
            // Mapに1つ目のピン追加
			map.Pins.Add(pin1);

            // 2つ目のピンを作成
			var pin2 = new Pin
			{
				Type = PinType.Place,
				Position = new Position(35.6267, 139.8850),
				Label = "ねずみ〜し〜",
				Address = "俺の国建設予定地"
			};
            // Mapに2つ目のピンを追加
			map.Pins.Add(pin2);
           
			Content = new StackLayout
            {
                Children = { map }
            };
        }
    }
}

22〜31行目で1つ目のピンを、33〜42行目で2つ目のピンを追加しています。

[Xamarin.Forms] 地図の初期化を理解する(Xamarin.Forms.Maps編)

前回の記事で、地図の表示を行いました。

今回は、地図表示時の初期化コードを掘り下げて見ていきます。

はじめに前回のコードをおさらいしましょう。

using System;

// 以下追加
using Xamarin.Forms;
using Xamarin.Forms.Maps;
namespace MapSample
{
    public class MapPage : ContentPage
    {
        public MapPage()
        {
            var map = new Map(
                MapSpan.FromCenterAndRadius(
                    new Position(35.6329, 139.8803),
                    Distance.FromMiles(0.0))) {
                IsShowingUser = true,
                VerticalOptions = LayoutOptions.FillAndExpand
            };
            Content = new StackLayout
            {
                Children = { map }
            };
        }
    }
}

12行目〜18行目の部分に注目してみましょう。

12行目のnew Mapは、Xamarin.Froms.Map を使用するための初期化コードです。正確にはMapのインスタンスを作成している部分です。

引数に渡しているMapSpan.FromCenterAndRadius(13行目)は、マップ表示時に画面の中央の位置をどこにするかと、表示する半径の距離を設定するものです。

14行目のnew Position()が画面中央の緯度と経度を表します。緯度と経度ともに10進法で指定する必要があります。60進法の指定ではないので注意して下さい。第1引数に緯度を第2引数に経度を指定します。なお、英語で緯度は「Latitude」、経度は「longitude」と言うので、覚えておくと海外サイトの記事も読みやすくなります。

続く15行目のDistance.FromMilesは、画面の中心から半径何マイルを表示するかを設定するものです。FromMilesとなっているので、単位はマイルになります。日本人になじみがあるのはKmなので、 FromKilometersを使用するとよいでしょう。

16行目のIsShowIngUserは、デバイスの現在位置を地図上に表示するかを指定するものです。trueを指定すると、地図上にデバイスの位置を表すマークが表示されるようになります。

17行目のVerticalOptionsは垂直方向の表示オプションです。FillAndExpandを指定しているので、画面いっぱいに表示されます。

これ以外にも指定可能なオプションがあるので紹介します。

HasScrollEnabledは、スクロールを許可するかどうかを指定します。falseを指定するとマップをスクロールして表示することができません。既定値はtrueです。

HasZoomEnabledは、マップの拡大縮小を許可するかどうかを指定します。falseを指定すると、拡大縮小ができなくなります。既定値はtrueです。

以上のオプションを使用して、好みに合った地図が表示されるようにしましょう。