技術戦略部より、tipsやノウハウなど技術的な話題を発信いたします。werdnaの酒井です。第2回ARアプリの作り方です。前回までで環境構築とビルドが出来るように進めてもらったと思いますので、今回は実際にアプリの実装を進めていきます。APIから取得した地図の表示」を目標とします。具体的には下記内容を順に説明していきます。APIの利用準備です。APIを利用できるようにします。1からの説明で長くなってしまうので、設定済みの方や設定方法をご存知の方は読み飛ばしてください。大まかにですが、下記3つの手順を実施することでAPIが利用可能になります。画面遷移が多く、分かりやすい説明が難しかったため、画像の赤枠内をクリックしていけばAPIを利用できるようにしています。プロジェクトの作成Googleアカウントでログイン後下記ページを開いてください。PlatformのAPIライブラリページhttps://console.cloud.google.com/apis/library画面上部の「プロジェクトの選択」よりプロジェクト選択モーダルを開きます。モーダル右上「新しいプロジェクト」を開きます。プロジェクト名に任意の名づけを行ったあと「作成」でプロジェクトが作成されます。作成後にライブラリページが開きます。プロジェクト作成中だと「作成」しか画面上にないので、プロジェクト作成完了後に一度ページを更新し「選択」をクリックしてモーダルを開きます。モーダルに作成したプロジェクトが表示されているのでクリックします。これでプロジェクトの作成と利用中への設定が完了です。APIを有効化します。API」を入力してAPIのページを開き「有効化」ボタンを押します。APIも有効化します。これでAPIの有効化は完了です。続いてAPIを利用するときに必要な「APIキー」の作成を行います。ハンバーガーメニューより「APIとサービス」→「認証情報」を開きます。認証情報ページより「認証情報を作成」→「APIキー」を選択APIキーが作成される。(認証情報ページを開けばいつでも確認することが出来ます。APIの二つのみを利用できるように制限をかけます。キーの制限と名前変更」ページを開きます。API」を選択し保存します。これでAPIの設定は終了です。APIをリクエストしてみます。このAPIは指定した住所・座標を中心としたGoogleMapのpngファイルを返すAPIです。下記のようなURLで接続することが可能です。(${APIKey}を作成したapiキーに書き換えてください。)https://maps.googleapis.com/maps/api/staticmap?center=%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%A9%E3%82%AF%E3%83%BC%E3%83%B3%E3%83%9B%E3%83%BC%E3%83%AB%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%B9&key=${APIKey}&zoom=18&size=640x640&scale=2&maptype=terrain&style=element:labels|visibility:off&style=element:terrain|invert_lightness:trueこのURLでは「株式会社ラクーンホールディングス」でGoogleマップを検索した結果を表示しています。正常に表示されない場合はエラーの文言が表示されているはずですので上の説明を再度確認しつつAPIをリクエストできるよう設定していただければと思います。Input.location.lastData.timestamp今回必要なのは現在位置を表す緯度(latitude)・経度(longitude)の二つなので、まずはこの2つの値を画面上に表示出来るようにします。Hierarchyウィンドウを右クリックしてUI→Textを追加すると、Canvas下にTextオブジェクトとEventSystemオブジェクトが作成されます。Longitudeに変更しておきます。Componentでスクリプトをつけてあげます。付けるスクリプトは下記のような内容になります。GameObjectをメソッド外で定義することで、InspectorにてObjectを紐づけできる。Textという欄が作成されていると思います。11行目で定義したGemeObjectに紐づけられ、Updateメソッド内部でテキスト部分の更新が可能になります。ビルドして端末で実行した画面は下記の通りです。見やすさのために後ろのCanvasにつけているBackgroundCamera.csを無効化しています。このアプリを立ち上げたまま、移動するとGPSの座標が変わっていくことが分かるかと思います。(歩きスマホは危険なので、周囲に人がいないことを確認したうえで座標を見てみてください。APIが利用可能か確認のために一度触れていますが、指定した住所・座標を中心としたGoogleMapのpngファイルを返すAPIです。GPSの緯度・経度を利用して表示する場合にはURLの中に”center=緯度,経度”と入れてあげることで表示できます。アプリ上に表示するために、APIより返ってきたpngファイルをテクスチャとしてオブジェクトに張り付けることで地図を表示します。Componentで新しいスクリプトを作成します。作成するScriptは下記のようになります。${APIKey}を作成したapiキーに書き換えてください。}}内容はコメントに記載していますが補足です。APIは色々なパラメータを渡すことで地図の色やお店の情報を載せるか等の指定が出来ますが、個人的に見やすいパラメータを固定値で入れています。GPSの住所以外は全部固定値で実行しています。パラメータに渡す値をpublicで定義したオブジェクトで紐づけることで地図を変化させることもできます。(地図をタップしたときにzoom=nnという縮尺設定の数値を変更して、表示する地図の拡大・縮小を実施する等)Updateは毎フレーム呼び出されると上に記載した通り、UpdateでAPIを呼び出し続けると秒間60回も接続しに行くことになってしまうので、無駄なリクエストを避けるために5秒(300フレーム)に一度リクエストを送るようにしています。returnの処理が終わるまで待つ。上記Scriptを反映して実行すると、現在地点を中心にしたマップの画像が表示されることを確認できるかと思います。ここまでで本記事で説明したい地図表示は実装完了です。次の記事では目的地の入力と、今回表示した地図に目的地までの経路を表示までを実装していきます。