---
title: "モバイルアプリでカスタムマップを作成する"
date: "2019-09-18"
categories: 
  - "mobile"
  - "mobile-development"
  - "mobiletogether"
  - "xquery"
tags: 
  - "app-development"
  - "maps"
  - "mobile-development"
  - "mobiletogether"
  - "xquery"
description: MobileTogetherを使用することで、XQuery式を活用し、モバイルアプリで動的なカスタムマップを構築する方法を学び、ユーザーの入力に応じてリアルタイムで地理位置情報を調整することができます。
---
Status: #blog

Tags:  #app-development #maps #mobile-development #mobiletogether #xquery

Categories: [mobile-development](/blog/ja/category/mobile-development.md) | [mobile-development](/blog/ja/category/mobile-development.md) | [mobile-development](/blog/ja/category/mobile-development.md) | [xpath+xquery](/blog/ja/category/xpathxquery.md)
# モバイルアプリでカスタムマップを作成する

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

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

![](/blog/images/Blog_MT_windmill.jpg)

<!--more-->

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

[![モバイルアプリでカスタムマップを作成するために、地理位置情報をリスト化する](/blog/images/custom_search.png)](custom_search-e1568826839242.png)

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

[![カスタムマップ用の、ユーザーが作成した位置情報リスト](/blog/images/search-results-list.png)](search-results-list.png)

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

[![クロスプラットフォームのモバイルアプリにおける、地図のプロパティ定義](/blog/images/properties-1-1.png)](properties-1-1.png)

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

[![モバイルアプリで使用するカスタムマップ用の、あらかじめ設定された位置情報マーカーの一覧](/blog/images/marker-list-1.png)](marker-list-1.png)

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

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

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

[![モバイルアプリでカスタムマップ上にマーカーを作成するためのXQuery式 ](/blog/images/marker-list-2.png)](marker-list-2.png)

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

[![XQuery 式を XQuery 評価器を使ってテストする](/blog/images/marker-list-evaluator.png)](marker-list-evaluator.png)

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

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

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

[![MobileTogetherデザイナーで、モバイルアプリのデザインに位置情報マップコントロールを追加する方法](/blog/images/map-design.png)](map-design.png)

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

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

[![MobileTogetherデザイナーにおける、モバイルアプリのカスタムマップに設定するプロパティの定義](/blog/images/map-control-styles.png)](map-control-styles.png)

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

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

[![モバイルアプリのカスタムマップで、ユーザーがマーカーをクリックした際に実行されるアクションを定義します](/blog/images/click-actions.png)](click-actions.png)

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

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

![iPhoneとAndroidスマートフォンで動作するモバイルアプリで作成されたカスタムマップのスクリーンショット](/blog/images/map-results.png)

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

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

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