みなさまのご存知のとおり、
Xamarin (ザマリン) は、C# を使用して、 iOS / Android / UWP / Mac アプリケーションを開発できるクロスプラットフォームアプリの開発環境です。
Xamarin には 2つの開発手法があります。
- Xamarin Native
- ロジックのみ共通化し、UI はネイティブで個別に作り込む必要があります。
- Xamarin Forms
- ロジックと UI を共通化し、UI は各プラットフォームの同じ役割の UI が自動マッピングされます。
iOS や Android などプラットフォームに適した UI を作りたい場合は Xamarin Native が良いと言われています。もしくは、UI を共通にして素早く開発したい場合は、Xamarin Forms が適しています。開発したいアプリの目的によって、使い分ける必要があります。
Xamarin.Forms の標準機能のみではベーシックな UI コントロールしか提供されていませんが、Custom Renderer や Effects を使用することで、ネイティブの UI を活用することもでき、Plugins や Dependency Service を使用することで、ネイティブの API を活用することもできます。また、Xamarin.Forms に標準で組み込まれている Data Binding などの MVVM（Model-View-ViewModel パターン）機能を使用することも可能で、 UI 部分は XAML を使用するため、これまで C# に長けていて WPF 開発をされている方は馴染みやすいと言われています。
よく利用する地図機能
スマートフォンの各プラットフォームでは、標準の地図機能が提供されており、Android では「Google Maps Android API 」、iOS では「MapKit」があります。Xamarin.Forms では、この各プラットフォームの標準マップ API を共通的に扱えるように Xamarin.Forms.Maps コントロールが提供されています。
Map Control - Xamarin
ただし、Xamarin.Forms.Maps では、ピンが置けるだけで、図形の描画などもできなく、機能が少ないと言われています。
そこで、他の選択として、ArcGIS Runtime SDK for .NET を利用することで、iOS / Android で共通の地図機能を扱うことができます。
ArcGIS Runtime SDK for .NET | ArcGIS for Developers
ArcGIS Runtime SDK for Xamarin での地図表示
ArcGISme S RuntiDK for Xamarin は、地図表示や位置情報を扱うための多くの機能が提供されている SDK で、Xamarin.Forms.API の他、Xamarin.iOS.API や Xamarin.Android.API にも対応しています。
今回は、Xamarin.Forms.API を使用して、背景地図の表示と一般的な地図表現として、ポリゴンとポイントを表示してみました。
ポリゴンは、任意の場所を黄色で表示し、ポイントは、『東京都千代田区永田町２‐２‐２』の住所の位置を青色のポイントで表示しました。
住所からポイントを表示する場合には、緯度・経度などの位置情報が必要となるため、ジオコーディングというサービスを利用して、住所から緯度・経度に変換する処理を行いました。
以下の画面からも分かるようにように、iOS と Android で同じ地図が表現されているかと思います。
iOS （iPhone 6） Android （Nexus 7）
住所ですが、住所から緯度・経度に変換するため、ジオコーディング（住所・地名検索用 API）のサービスを利用しています。
以下のコード（C#）がジオコーディングのサービスを呼んで、緯度・経度からポイントを表示するまでの処理です。
var geocodeServiceUrl = @"http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer";
LocatorTask geocodeTask = await LocatorTask.CreateAsync(new Uri(geocodeServiceUrl));
// 日本を検索するパラメータを設定
var geocodeParams = new GeocodeParameters
{
CountryCode = "Japan"
};
// 日本の住所でジオコーディング
var matches = await geocodeTask.GeocodeAsync(address, geocodeParams);
// 住所がヒットした場合は、最初の1件を取得
var bestMatch = matches.FirstOrDefault();
if (bestMatch == null)
{
return;
}
else
{
GraphicsOverlay overlay = new GraphicsOverlay();
// ポイントのシンボルを定義
SimpleMarkerSymbol pointSymbol = new SimpleMarkerSymbol()
{
Color = Colors.Blue, // 青
Size = 20, // サイズ
Style = SimpleMarkerSymbolStyle.Circle, // 円
};
SimpleRenderer renderer = new SimpleRenderer(pointSymbol);
// ポイントの作成
var point = new MapPoint(bestMatch.InputLocation.X, bestMatch.InputLocation.Y, SpatialReferences.Wgs84);
// ポイントの表示
overlay.Graphics.Add(new Graphic(point));
overlay.Renderer = renderer;
MyMapView.GraphicsOverlays.Add(overlay);
}
背景地図には、「地形図、道路地図、衛星画像、海洋図」を選択できるようにしました。
以下の画面は、iOS と Android で背景地図を選択している画面です。iOS と Android で背景地図の選択ができるようになっていることが分かるかと思います。
iOS （iPhone 6） Android （Nexus 7）
最後に
実は、私自身、Xamarin は、最近、触り始めたばかりで、講習会など、外部のイベントにも参加したりして、日々勉強しています。
最近は、Xamarin の魅力にはまっています。同じ UI やロジックで、iOS と Android のアプリが作成できるのは、魅力的です。
Xamarin は、いいぞ！
今回作成したサンプルアプリケーションは、私のGitHub にも公開していますので、ぜひ、触ってみたください！
GitHub - ValueCreation/ArcGISRuntimeSamplesXamarin
今後、Xamarin 含めて、この開発ブログで紹介していきたいと思います。
※ 本稿で紹介した ArcGIS Runtime SDK for Xamarin は、ESRIジャパンでの技術サポート サービスの対象外です。
■関連リンク
