--- title: "APIとモバイルアプリケーションの統合" date: "2018-08-21" categories: - "json" - "mobile-development" - "mobiletogether" - "xml" tags: - "apis-and-mobile-apps" - "data-integration" - "mobile-development" description: モバイルアプリケーションにおける、より優れたユーザーエクスペリエンスを実現するための、APIとの効果的な連携方法について解説します。本ガイドでは、位置情報機能、RESTfulなリクエスト、データ処理について説明します。 --- Status: #blog Tags: #apis-and-mobile-apps #data-integration #mobile-development Categories: [json](/blog/ja/category/json.md) | [mobile-development](/blog/ja/category/mobile-development.md) | [mobile-development](/blog/ja/category/mobile-development.md) | [xml](/blog/ja/category/xml.md) # APIとモバイルアプリケーションの統合 外出先でスマートフォンを頻繁に利用するユーザーは、便利で効率的なアプリを好みます。MobileTogetherは、開発者向けに、APIやモバイルアプリをシームレスに統合し、モバイルデバイスの機能を最新の外部情報と組み合わせるための機能を提供します。これにより、開発者は、モバイルデバイスの機能を最大限に活用し、ユーザーに豊かで魅力的な体験を提供する、クロスプラットフォーム対応のネイティブアプリを開発することができます。 公開されているAPIは、カスタムモバイルアプリケーションの機能を向上させるための優れた外部データソースです。開発者は、複数のAPIから取得した情報を組み合わせることで、ユーザーに、より優れた情報をもっと迅速に、そして洗練された統合された形で提供することができます。 モバイルアプリケーションが必要とするあらゆる種類の情報に対して、APIが利用可能です。例えば、フライトの追跡、商品や株式の価格、熱帯低気圧の追跡など、様々な情報に対応しています。 この投稿では、まずモバイルデバイスのGPS機能を使って「現在地はどこか？」という基本的な質問に答えるGPSアプリを紹介します。その後、GoogleやMapQuestのAPIと連携し、豊富な追加情報を提供します。さらに、位置情報を考慮した検索エンジンを組み込み、半径400メートル以内の周辺の興味深い場所を検索したり、ユーザーの現在地を衛星写真上に特定し、大陸全体やそれ以上の範囲を広角で表示したりすることができます。 [![](/blog/images/image01.png)](image01.png) 当社のアプリが起動すると、最初にユーザーにはGPS制御のためのボタンが表示されます。以下は、MobileTogetherシミュレーターのウィンドウから見た画面の例です [![モバイルアプリの起動時に表示される画面で、APIから取得したデータを使用している場合](/blog/images/api-data-and-mobile-apps-initial-user-screen.png)](api-data-and-mobile-apps-initial-user-screen.png) 最初の座標が入力されると、カラフルなツールバーのアイコンが表示され、そこから新しい機能にアクセスできるようになります [![位置情報座標が取得された後、モバイルアプリで使用できるツール](/blog/images/api-data-and-mobile-apps-coordinates-captured.png)](api-data-and-mobile-apps-coordinates-captured.png) 左から順に、これらのボタンは以下の機能を実行します - 緑色のダイアログボタンを押すと、モバイルデバイスのテキストメッセージアプリが起動し、デフォルトのメッセージ「ここにいます：」に加えて、緯度・経度座標と住所が表示されます。このボタンの動作は、MobileTogetherのSMSテキストアクションと、位置情報データソースからのテキストを組み合わせたもので、以下のアクションツリーの定義で確認できます。この同じアクションは、Android、iPhone、Windows Phoneなど、様々なモバイルデバイスで動作し、開発者は各モバイルOSの具体的な制御方法を気にする必要はありません。MobileTogetherが、各デバイスの詳細を自動的に処理します。 [![位置情報データを含むテキストメッセージの送信](/blog/images/api-data-and-mobile-apps-share-by-sms.png)](api-data-and-mobile-apps-share-by-sms.png) - 折り畳まれた地図のアイコンをクリックすると、モバイルデバイスの標準地図アプリケーションが起動し、表示されている座標を中心として地図が表示されます。これはMobileTogetherの機能の一つであり、各モバイルデバイスの種類に対応するための設定は自動的に行われます。[![このMobileTogetherの機能は、どのモバイルオペレーティングシステムでも、現在地の地図を表示します](/blog/images/api-data-and-mobile-apps-show-map-action.png)](api-data-and-mobile-apps-show-map-action.png) - 「…」のアイコンは「詳細情報」ボタンです。このボタンをクリックすると、一連の処理が実行されます。まず、緯度と経度の座標をMapQuestの逆ジオコーディングAPIに送信し、住所を取得します。この住所は、通常、生の地理位置情報よりも詳細な情報が含まれています。次に、MobileTogetherの機能を使って、モバイルデバイスのWebブラウザを開き、取得した住所に基づいて検索エンジンにクエリを送信します。 [![MobileTogetherの機能を使って、その場でURLを生成します](/blog/images/api-data-and-mobile-apps-build-a-url.png)](api-data-and-mobile-apps-build-a-url.png) - この衛星画像ツールアイコンは、GoogleマップのAPIと連携し、ユーザーが指定したズームレベルに基づいて、指定された場所の衛星写真画像を生成します。生成された画像は、モバイルデバイスのフォトライブラリに保存したり、SMSメッセージやメールで送信したりすることができます。以下に、上記で取得した座標を用いた例を示します。 [![ MobileTogetherアクション：衛星画像のURLを生成する](/blog/images/api-data-and-mobile-apps-satellite-image-url.png)](api-data-and-mobile-apps-satellite-image-url.png) [![ MobileTogetherアプリによって生成された衛星画像](/blog/images/api-data-and-mobile-apps-satellite-image-1.jpg)](api-data-and-mobile-apps-satellite-image-1.jpg) - この拡大表示ツールを使用すると、新しいページが開かれ、MapQuestの検索APIとPlace Search APIが連携して、ユーザーに2つの異なる検索オプションを提供します。 ### APIとモバイルアプリケーションの連携について この衛星画像ツールは、XPath式を使用してGoogle Maps APIを通じて画像を生成し、URL経由でその画像を開きます。APIが必要とするパラメータは、URLの一部として提供され、様々なオプションを設定するために使用されます。各パラメータの値は、必要に応じて動的に生成されます。以下に、XPath/XQuery式エディタに表示されるXPath式を示します [![モバイルアプリケーション開発プラットフォーム「MobileTogether」のXPath/XQuery式エディタで、API用のURLを構築する方法](/blog/images/api-data-and-mobile-apps-building-an-api-url.png)](api-data-and-mobile-apps-building-an-api-url.png) 色のコード分けによって、表現がより明確になります。1行目の緑色の部分は文字列演算子を表し、シングルクォートで囲まれたオレンジ色の部分は定数、そして紫色の部分はデータツリーの要素や関数の結果を表します。 以下に、XPath式に合わせて改行を挿入した、最終的なURLの例を示します [![MobileTogetherアプリ内で生成されるURL](/blog/images/api-data-and-mobile-apps-url-example.png)](api-data-and-mobile-apps-url-example.png) 生成される画像のサイズは、各エンドユーザーデバイスのウィンドウの幅と高さに自動的に対応します。これは、それらの値がMobileTogetherのグローバル変数として定義されているためです。 サテライトボタンに割り当てられた機能は、モバイルデバイスの標準ウェブブラウザで指定されたURLを開きます。 ### MobileTogetherは、HTTP、FTP、REST、およびSOAPといった様々なプロトコルに対応しており、APIやモバイルアプリケーションとの連携を可能にします MapQuestの検索APIとPlace Search APIは、それぞれRESTfulなAPIのGETリクエストを利用して、構造化されたデータを取得します。このデータはMobileTogetherのデータツリー内のページソースとして利用され、さらなる処理のために利用可能です。 「GET」リクエストは、アプリケーションのデータツリーにページソースが追加される際に作成されるダイアログで定義されます。以下にその例を示します [![MobileTogetherは、APIを通じてデータを取得するためのRESTリクエストをサポートしています](/blog/images/api-data-and-mobile-apps-REST-call.png)](api-data-and-mobile-apps-REST-call.png) リクエストを構築する簡単な方法として、APIドキュメントからサンプルURLを上記のURL欄に貼り付け、その後、波括弧 { } 内のパラメータ定義を置き換え、パラメータセクションで各パラメータの値のソースを定義します。 弊社のアプリの検索機能では、ユーザーがドロップダウンメニューから検索範囲と最大表示件数を指定できます。さらに、APIドキュメントに記載されているリストから検索対象を選択するための追加のドロップダウンメニューも用意されています。ユーザーが検索ボタンをクリックすると、MobileTogetherのアクションがGETリクエストを実行します [![MobileTogetherアプリは、ユーザーがボタン操作を通じて、API経由で外部データにアクセスできる機能を提供します](/blog/images/api-data-and-mobile-apps-get-request.png)](api-data-and-mobile-apps-get-request.png) [![MobileTogetherにおける、APIのGETリクエストを実行するためのアクション](/blog/images/api-data-and-mobile-apps-get-request-action.png)](api-data-and-mobile-apps-get-request-action.png) 返されたXMLデータは、データツリーに追加されます。以下は、MobileTogetherシミュレーターウィンドウの「ページソース」セクションで、その様子を確認できる例です [![MobileTogetherがAPIを通じて取得する外部データ](/blog/images/api-data-and-mobile-apps-external-data-retrieved.png)](api-data-and-mobile-apps-external-data-retrieved.png) 新しい検索結果ページが開かれ、情報がスクロール可能な表形式でユーザーに提供されます。なお、APIは検索結果を自動的に、現在地の半径順に並べ替えています。 [![MobileTogetherアプリで取得したデータの、ユーザーが閲覧する画面](/blog/images/api-data-and-mobile-apps-user-data-view.png)](api-data-and-mobile-apps-user-data-view.png) 検索結果ページに表示される追加のツールボタンを使用すると、目的地までの経路を表示する地図を開いたり、目的地の名前と場所でウェブ検索を実行したり、またはワンクリックでその場所に電話をかけることができます。 カテゴリー検索は良好な結果をもたらしますが、300種類以上の検索対象からユーザーが選択するのは手間がかかる可能性があります。MapQuestのプレイスサーチAPIは、任意のテキストフレーズを検索対象として受け付け、同様の結果を提供します。プレイスサーチAPIもRESTfulなGETリクエストとしてアクセス可能で、カテゴリー検索と同様に設定できます [![MobileTogetherの設定：追加のデータを取得するための、2番目のRESTリクエスト](/blog/images/api-data-and-mobile-apps-REST-call-2.png)](api-data-and-mobile-apps-REST-call-2.png) プレースサーチAPIとカテゴリー検索には、必要なパラメータや返されるデータにいくつかの違いがあります。カテゴリー検索では、XML形式またはJSON形式の結果が得られますが、プレースサーチAPIからはJSON形式でのみデータが返されます。 MobileTogetherでは、複数のデータ形式を組み合わせることは問題ありません。当社のアプリケーションでは、ユーザーからの入力を収集するために編集フィールドコントロールを作成し、再度、データの取得リクエストを実行するために「再読み込み」アクションを使用しました。 [![MobileTogetherアプリは、APIリクエストに必要なユーザー入力を収集します](/blog/images/api-data-and-mobile-apps-user-tool-2.png)](api-data-and-mobile-apps-user-tool-2.png) シミュレーターウィンドウの「ページソース」データツリーで、JSON形式の結果を確認できます [![MobileTogetherアプリによって取得されたJSONデータの表示](/blog/images/api-data-and-mobile-apps-JSON-data-view.png)](api-data-and-mobile-apps-JSON-data-view.png) このAPIは、検索結果をスクロール可能な表形式でユーザーに提示しますが（ここに一部を表示）、現在地からの距離や電話番号は返しません [![MobileTogetherアプリにおける、外部JSONデータのユーザーインターフェース表示](/blog/images/api-data-and-mobile-apps-user-view-json.png)](api-data-and-mobile-apps-user-view-json.png) APIからJSON形式のデータが返ってきましたが、その結果をMobileTogetherのジオロケーション機能に適用することで、地図ボタンをクリックすると、モバイルデバイスの標準的な地図アプリケーションが起動し、指定された住所への経路が表示されるようにすることができます [![MobileTogetherアクション：特定の場所への経路を表示する](/blog/images/api-data-and-mobile-apps-show-route-action.png)](api-data-and-mobile-apps-show-route-action.png) [![上記のMobileTogetherアクションによって生成された地図です](/blog/images/api-data-and-mobile-apps-show-route-map.png)](api-data-and-mobile-apps-show-route-map.png) MobileTogetherの「Open URL」アクションが、Globeツールに割り当てられており、これにより、検索結果の場所の名前と住所がWebブラウザのウィンドウで表示されます。 ネストされた置換演算子を使用することで、有効な構文を持つURLが生成されます。 [![MobileTogether機能は、ウェブ検索クエリをその場で構築することができます](/blog/images/api-data-and-mobile-apps-web-search-action.png)](api-data-and-mobile-apps-web-search-action.png) [![Androidデバイスで表示されるアプリ検索クエリの画面イメージ](/blog/images/api-data-and-mobile-apps-web-search.png)](api-data-and-mobile-apps-web-search.png) ### APIキーについて（補足） ここに説明されている各APIで使用されるパラメータの一つに、API提供者が割り当てる固有のAPIキーがあります。このAPIキーは、APIへのリクエストが送信されるたびに、ユーザーを識別し、認証するために使用されます。特定の企業ユーザーグループで共有されるアプリケーションの場合、MobileTogetherのデータツリーに永続的に保存された共有キーが最も適切である可能性が高いです。すべてのユーザーからのリクエストは集約され、APIごとの利用量が無料枠を超えた場合、単一の請求書が発行されます。 アプリケーションを一般公開する際に、開発者は各ユーザーに対して一意のAPIキーを取得させ、個々の利用状況に責任を持たせたいと考える場合があります。当社のアプリケーションには、起動画面にある歯車アイコンをクリックすることでアクセスできる「設定」ページが含まれています。この設定ページでは、ユーザーが検索エンジンの選択など、さまざまなユーザー設定を行うことができます。また、各モバイルデバイスに固有の永続データツリーに、それぞれのAPIキーを記録する機能も備わっています。 [![MobileTogetherアプリ内で、ユニークなユーザーAPIキーを取得する方法](/blog/images/api-data-an-mobile-apps-record-key.png)](api-data-an-mobile-apps-record-key.png) ### カスタム機能を追加する これまでの説明では、多くのモバイルアプリで見られる一般的な位置情報機能について解説してきました。上記で説明したAPIや、その他の公開APIを活用することで、特定の課題を解決する機能を追加することも可能です。例えば、弊社のアプリには「どこにいたか」というページがあり、特定のルートに沿った移動を記録したいユーザーは、このページにある「封筒」アイコンをクリックすることで、メールを通じて移動記録を送信できます。また、弊社のアプリでは、どのツールアイコンを長押しすると、ヘルプメッセージがポップアップで表示されます [![モバイルアプリケーション「MobileTogether」のAndroid版に表示される、一時的なヘルプメッセージ](/blog/images/api-data-and-mobile-apps-pop-up-help.png)](api-data-and-mobile-apps-pop-up-help.png) APIやモバイルアプリを組み合わせて、独自のアプリケーションを作成したり、MobileTogetherの他の機能を使って、洗練されたクロスプラットフォームのモバイルアプリを開発したりすることができます [無料で利用できるMobileTogether Designerをダウンロードしてください](https://www.altova.com/ja/download/mobiletogether.html), これには、統合されたヘルプ機能、チュートリアル、そして多くのサンプルが付属しています。また、MobileTogetherに関する多くの情報を確認することもできます [ビデオデモンストレーション](https://www.altova.com/ja/mobiletogether/demos) 始めるための手助けとして。