技術戦略部より、tipsやノウハウなど技術的な話題を発信いたします。werdnaの酒井です。第3回ARアプリの作り方です。本記事では「目的地の入力欄を作成し、前回表示できるようになった地図に目的地までの経路表示」を目標とします。具体的には下記内容を順に説明していきます。(第1回、第2回で環境構築が完了したので実装がメインになります。こちらは開始地点(origin)・目的地(destination)を渡すことで、目的地への経路をJSON形式で返してくれるAPIです。下記のURLを叩くと、弊社から浜町公園までの経路のJSONを返してくれます。APIにpathパラメータとして経路の座標を渡していくことで、マップに経路を表示できます。下記が実際に弊社から浜町公園までの経路を表示した地図を開くためのURLです。(交差点や曲がるタイミングでそれぞれ座標が出てくるのでかなり長いパラメータになります。JSON形式で受け取った文字列をデシリアライズするためのクラスを作成します。中身を一通りマッピングしていますが、今回経路として利用するのはroutes.legs.steps.end_location.lat/lngの2つです。APIを叩くコントローラを作成します。Empty]でGameObjectを作成しスクリプトの追加をしましょう。Objectとして扱えるようになります。そのままだと実体を持たないオブジェクトとして使えるので、今回はscriptを処理するためのコンテナとして利用しています。Field]を作成します。Fieldは、特に何も指定しなくともスマホでタップするとキーボードが表示され入力が出来ます。このオブジェクトを作成したコントローラに紐づけて、入力した目的地への経路を表示します。追加するスクリプトには下記を書き込んでください。初期状態では目的地が入ることはないのでStartでは何もしない。更新は5秒に一度、目的地が設定されていない場合は取得しない。origin=開始地点。現在地からの経路を出したいので現在地を渡す。destination=目的地。InputFieldに入力した文字列をエスケープして渡す。経路が多すぎるとUriFormatExceptionで落ちるため上限を設定しておく。}}最後に地図上へ経路を表示するために、staticMapControllerを少し書き換えます。${APIKey}を自分で作成したapiキーに書き換えてください。}}これらの対応で経路まで表示が完了しました!下記のような画面になります。(弊社から浜町公園までの経路を出しています)5秒おきに更新がかかるので、目的地を更新したり、移動して端末の位置が変わるごとに経路情報も更新されていきます。ここまでで経路案内アプリとしては8割方完了です!あとは次の経路へと進む方向を指し続けるようなオブジェクトを作成して完成になります。