モバイルアプリでカスタムマップを作成する

以前の記事では、クロスプラットフォームのモバイルアプリケーションにおいて、各ユーザーデバイスに搭載されている標準の地図アプリケーションと地図を統合する方法について説明しました。弊社のサンプルアプリケーションは、アメリカ国内の主要な空港の位置を示すピンを配置した地図を生成しました。図には、同じアプリケーションがAndroidスマートフォン、iPhone、そしてWindowsのデスクトップ環境で生成した地図の例が示されています。

もし、地図に表示する場所の一覧が事前にわからず、実行時にユーザーの操作に基づいて生成される場合、どうでしょうか？ Altova社のローコードクロスプラットフォームモバイル開発ツールであるMobileTogetherは、開発者が、実行時に生成される地理位置情報の一覧に基づいて、モバイルアプリ上でリアルタイムにカスタムマップを作成できる機能も提供しています。

ここに表示されているのは、モバイルアプリの画面で、ユーザーが入力したキーワードに基づいて、近くの場所の一覧を取得するためにRESTful APIリクエストを実行している様子です。

もし企業が新しいデータセンターの建設場所を探している場合、地図は検索結果に表示されることで非常に役立つでしょう。

以前の記事でご紹介した「空港状況」アプリでもご覧いただいたように、MobileTogetherのマップコントロールには、マーカーの定義、マップを表示するためのビューポート、そしてユーザーがマップ上のピンをクリックした際に実行される操作などを設定するためのプロパティが含まれています。

「空港ステータス」アプリにおいて、主要空港に関するすべてのマーカーの情報は、マーカープロパティのXPath/XQueryエディタウィンドウに直接コードとして組み込まれていました

XQuery式を使って地図上のマーカーを作成する方法

これらのマーカーは、あらかじめ固定的に設定する必要はありません。代わりに、モバイルアプリで使用するカスタムマップのすべてのマーカーリストは、XQuery式によって構築できます。モバイルアプリでカスタムマップを作成するには、REST検索クエリの結果に基づいて、XQueryのFLWOR（For-Let-Where-Order-Return）式が必要です。

FLWOR式における let, where, および order のパラメータはオプションであり、今回のマーカーリストの処理には必要ありません。RESTリクエストによって返される場所のリストを処理するためには、For と Return のみで十分です

XQueryの式は、たとえlet、where、orderといったパラメータを使用しなくても、最初から完璧に構築するのは難しい場合があります。そこで役立つのが、XQuery式ウィンドウの「評価器」セクションです。「評価器」ボタンをクリックすると、作業中に式をテストすることができます。

もし数式にエラーが含まれている場合、評価は失敗し、そのエラーの内容は結果ウィンドウに表示されます。

モバイルアプリケーションの開発中に、シミュレーターがアプリケーションを実行している状態で、MobileTogether DesignerのXQuery式ウィンドウを開きました。しかし、まずシミュレーターを使用してテキスト検索を行い、テキサス州アマリロから半径100マイル以内の地域における「風力発電」に関するRESTクエリから、リアルタイムのデータにアクセスしました。上記のスクリーンショットの左下部に表示されている検索結果に表示されている「Cielo Wind Power LLC」という名称は、右側に表示される評価結果のマーカー1に対応するテキスト要素を生成するために使用されています。

一度、動作する表現に満足したら、新しい地理位置情報マップコントロールを検索結果ページにドラッグ＆ドロップし、その表現をコピーして「マーカー」プロパティに貼り付けます。以下は、MobileTogether Designerでマップが配置されたページの例です

これで、残りのマップのプロパティを、アプリケーションに最適な設定に調整できます。今回は、ズームコントロールを備えたストリートマップを選択しました。その他の利用可能なマップタイプとしては、衛星画像マップや、衛星画像とストリート情報を組み合わせたハイブリッドマップがあります。ビューポートのプロパティは空白になっています。これは、MobileTogetherが、実行時にXQuery式で定義されたマップ上のすべてのマーカーを含めるように、自動的にビューポートを設定するためです。また、RESTリクエストの結果数がゼロより大きい場合にのみ、表示を有効にするように、XQuery式を使用しました。

以下に、マップのプロパティ設定ヘルプウィンドウの画面を示します

「コントロール幅」と「コントロール高さ」のプロパティ設定により、MobileTogetherは各モバイルデバイスに合わせて、自動的に地図のサイズを調整することができます。

マーカーがクリックされた際に、ユーザーに対してその場所に関するより詳細な情報を提供したいと考えています。この機能は、「コントロールアクション」プロパティで定義されます。「コントロールアクション」の3つのドットボタンをクリックすると、「アクション」ダイアログが開きます。このダイアログ内で、開発者は複数のアクションを定義することができます

弊社のアプリは、MobileTogetherの拡張機能を利用して、クリックされたマーカーに関する情報を収集し、その後、その場所の詳細情報を表示するためのサブページを開きます。

以下に、iPhoneで動作しているアプリの検索結果画面と、Androidスマートフォンでユーザーがピンをクリックした後のサブページを示します

結果詳細のサブページにある「生産データ表示」というボタンをクリックすると、選択された風力発電所に関する過去の発電データがデータベースから検索され、表示されます。

モバイルアプリでカスタムマップを簡単に作成できることを、ぜひご自身で体験してみてください。ダウンロードしてご確認ください無料で利用できるMobileTogetherデザイナー, これには、オンラインヘルプやサンプルアプリケーションが含まれています。

MobileTogetherを使用して開発された他のアプリケーションについて、また、ビデオデモについては、以下のURLをご覧ください：https://www.altova.com/mobiletogether/demos