---
title: "モバイルアプリに地図機能を組み込む"
date: "2019-07-17"
categories: 
  - "app-development"
  - "mobile"
  - "mobile-development"
tags: 
  - "app-development"
  - "maps"
  - "mobile-development"
  - "mobiletogether"
  - "web-services"
description: MobileTogetherを使用すると、モバイルアプリに地図を簡単に組み込むことができます。このツールには、カスタマイズされた位置情報機能やインタラクティブなマーカーが搭載されており、ユーザーエクスペリエンスを向上させることができます。
---
Status: #blog

Tags:  #app-development #maps #mobile-development #mobiletogether #web-services

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)
# モバイルアプリに地図機能を組み込む

開発者は、モバイルデバイスに搭載されている位置情報機能を利用することで、高度にカスタマイズされた位置情報サービスを提供するアプリケーションを開発できます。現在、MobileTogetherは、その [クロスプラットフォーム対応で、ローコード開発が可能なモバイルアプリケーション開発ツール](https://www.altova.com/ja/mobiletogether) Altova社の製品は、主要なモバイルプラットフォーム向けアプリケーションに、地図機能を深く統合するためのサポートを提供します。

開発者は、モバイルアプリに地図を組み込み、専用のマーカーを追加したり、地図上のユーザーのクリックに応じてカスタムアクションを定義したりすることができます。例えば、企業が自社の支店すべての場所を表示する地図をアプリに組み込み、特定の支店がクリックされた際に、その支店の現在の在庫情報を表示するように設定することができます。

以前の記事で、ユーザーがコンボボックスから空港コードを選択することで、主要なアメリカの空港の状況を確認できるモバイルアプリについて説明しました。別の方法としては、47個のコンボボックスの項目を、地図上のピンで置き換えることが考えられます。

この例を見てみましょう。

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

<!--more-->

以下に、新しい「空港ステータス」アプリが、Androidスマートフォン、iPhone、そしてWindowsのデスクトップアプリケーションとして動作している様子をスクリーンショットで示します。

[![モバイルアプリケーションに、異なるプラットフォームに対応した地図機能を統合します](/blog/images/cross-platform-view.png)](cross-platform-view.png)

各デバイスでは、それぞれのデバイスに標準搭載されている地図アプリケーションを使用して地図が生成されます。そのため、エンドユーザーはどのプラットフォームでも、慣れ親しんだスタイルと形式で地図を表示することができます。

もしマップが画面の下部に表示されているステータス情報を隠してしまう場合、垂直方向にスクロールすることで、その情報を確認することができます

[![モバイルアプリに地図を組み込み、垂直方向にスクロールすることで、詳細な情報を表示できるようにします](/blog/images/scroll-view-android.png)](scroll-view-android.png)

MobileTogether Designerのビジュアルレイアウト機能を使用すると、地図コントロールをアプリにドラッグ＆ドロップすることで、モバイルアプリに地図を組み込むことができます。各地図のプロパティはカスタマイズ可能です。以下のスクリーンショットは、当社の主要な空港状況ページの一部で、右側に地図のプロパティ設定ウィンドウが表示されています。

[![MobileTogether Designerのビジュアルツールを使用して、モバイルアプリケーションに地図機能を組み込んでください](/blog/images/design-view.png)](design-view.png)

利用可能な地図の種類は、道路地図、衛星画像、またはそれらを組み合わせたハイブリッド表示です。オプションのズーム機能に加えて、すべてのタッチスクリーンデバイスで、1本の指で地図をスクロールしたり、慣れ親しんだ2本の指でピンチ操作をしてズームインまたはズームアウトしたりすることができます。

表示する地図の範囲は、`mt-geo-map-marker` 式を使用して定義された、1つ以上のマーカーのリストに基づいています。各マーカーには、ID、タイトル、およびテキストのフィールドが含まれています。これらの値は、マーカーがクリックされた際に取得できます。

[![モバイルアプリに、カスタムの地図マーカーを使用した地図機能を組み込みます](/blog/images/map-markers.png)](map-markers.png)

マーカーの色は、赤、緑、青といった一般的な名称であることもあれば、上記のように、カスタムカラーコードで指定することも可能です。

ビューポートプロパティは、地図の左上と右下の座標を設定することで、地図全体として表示される領域を定義します。このプロパティが空の場合、デフォルトのビューポートには、定義されたすべてのマーカーと、わずかな余白が含まれます。私たちは、北アメリカの大部分をカバーする初期値を持つビューポートを定義しました。

[![マップのズームレベルを設定するためのビューポート式](/blog/images/viewport-expression.png)](viewport-expression.png)

「コントロールアクション」プロパティは、ユーザーが地図上の特定のマーカーをクリックした際に何が起こるかを定義します。当社のアプリは、マーカーのタイトル（3文字の空港コード）を読み取り、そのコードを使用してFAAのウェブサービスから空港の情報を取得し、表示を更新します。

弊社のアプリは、選択された空港の位置を拡大表示するために、新しい表示領域（ビューポート）の座標を計算します

[![ビューポートの式に基づいて、カスタムのズームレベルを設定します](/blog/images/map_zoom-541x1030.png)](map_zoom.png)

モバイルアプリに地図を組み込むことの簡単さを、ぜひご自身で体験してみてください。ダウンロードしてご確認ください [無料で利用できるMobileTogetherデザイナー](https://www.altova.com/ja/mobiletogether/download), これには、オンラインヘルプやサンプルアプリケーションが含まれています。また、弊社の [GitHub上の空港情報アプリ](https://github.com/altova/MobileTogether-more-examples/tree/master/Web%20Services) そして、それをデザイナー上で直接実行したり、ご自身のモバイルデバイスで試用したりすることができます。

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