Ultimate Guide to Prototyping with Google Maps API

この API チュートリアルは、Google マップを高精細なプロトタイプにシームレスに統合する作業を、より簡単にできるように設計されています。ProtoPie の Connect API プラグイン と self-hosted media 機能 を活用することで、コーディングなしで、デザインにリアリティとインタラクティブ性を加えられます。

あなたが経験豊富なデザイナーでも、UI/UX の世界に初めて足を踏み入れる方でも、このチュートリアルでは、実際の Google マップをプロトタイプに取り込むために必要な基本ツールを身につけられます。ProtoPie で高精細なデザインをさらに高める、この刺激的な冒険にぜひ参加してください。

Google Maps API を使って、コーディングなしでプロトタイプを作成する方法

ご存じのとおり、Google Maps API は、開発者向けに強力なツール群を提供し、地図や位置情報ベースの機能をアプリケーションや Web サイトへシームレスに統合できるようにします。

これらの API は、マッピング、ジオコーディング、ルート案内など幅広い機能を備えていますが、主に開発者向けに設計されているため、デザイナーが扱うには難しさがあります。

デザイナーの皆さん、ご安心ください！ProtoPie を使えば、どんなコーディングもせずに、地図をプロトタイプへ簡単に統合できます。最大の利点は、完成品のように、しかも本物の実データを取り入れた状態で、デザインを初期段階からテストし検証できることです。

動画

学べること

1. 認証キーを取得する方法

• ボーナス: サンプルプロトタイプを入手する

1. API から情報を取得する方法

2. API リクエストをデバッグする方法

3. テキスト検索を行う方法（Places API を使用）

4. 場所の写真を表示する方法（Places API を使用）

5. 静的地図を表示する方法（Maps Static API を使用）

6. カスタマイズした地図を表示する方法（Maps Static API を使用）

1. 認証キーを取得する方法

まず、Google Maps API を使い始める最初のステップは、アカウントに登録して認証キーを取得することです。さっそく設定しましょう！

1. Google Maps Platform にアクセスし、"Get Started" ボタンをクリックして Google アカウントでログインします。

Google Maps Platform。

2. ログインに成功したら、プラットフォーム左側のサイドバーにある "Keys & Credentials" セクションへ移動します。

Keys & Credentials タブへ移動します。

3. Google Maps Platform を初めて使用する場合は、個人情報の入力を求められます。開始は無料ですが、確認のために支払い情報の入力が必要になる場合があります。画面の案内と指示に従って、セットアップを完了してください。

アカウント情報を設定します。

4. セットアップが完了すると、API Key が画面に表示されます。次の手順で必要になるため、このキーはメモ帳などにコピーするか、安全な場所に保存することを強くおすすめします。

"Enable all Google Maps APIs for this project" のオプションにチェックを入れ、続けて "GO TO GOOGLE MAPS PLATFORM" ボタンをクリックしてください。

API key。

• キーを忘れた場合や、セットアップ時にコピーしなかった場合でも、"Keys & Credentials" ページからいつでも取得できます。

• 忘れないでください。キーは必ず非公開に保つことが非常に重要です。誤って公開してしまうと、予期しない費用や問題につながる可能性があります。

🌟 ボーナス: サンプルプロトタイプを入手する

試してみたくなりましたか？ まさに今が絶好のタイミングです！

API key を手に入れたら、サンプルプロジェクトを試す準備は万端です。下の Pie ファイルを取得し、以下の手順に従って設定してください。

以下の手順に従えば、Pro と Enterprise の両ユーザーがこのプロトタイプを実行し、同じ結果を得られます。

1. プロトタイプをローカルに保存します。

2. Google Maps Platform で API key を登録します。

3. プロトタイプファイルに API key を挿入します。API key は 2 か所に貼り付ける必要があります。

• メインシーンで、変数パネルを確認し、"API_KEY" という変数を見つけてそこにキーを貼り付けます。

• "POI Card" コンポーネントでも、同様に変数パネルで "API_KEY" という変数を確認し、そこにキーを貼り付けます。

4. プロジェクトを保存します。

5. プロトタイプを ProtoPie Connect にドラッグします。

6. "Plugin" ボタンをクリックしてプラグインパネルを開き、設定を次のように行います。

• Method: GET

• URL、Header、Body は空欄のままにします。

• Message from Pie: TEXT SEARCH REQUEST

• "override" チェックボックスをオンにして、ドロップダウンメニューから URL を選択します。これにより、メッセージと一緒に送った値でリクエスト URL を上書きできます。

• Message to Pie: TEXT SEARCH RESULT

• 最後に、"Activate" ボタンをクリックして API プラグインを実行します。

7. Web ブラウザでプロトタイプを開けば、準備完了です。

どう仕組みが動くのか気になりますか？では、プロトタイプで Google Maps API を扱う流れを深く掘り下げる、包括的なガイドへ進みましょう！

2. API から情報を取得する方法

API key を手に入れたら、これから使う API に少し慣れておきましょう。Places API のドキュメントページへ進むと、この API に関する必要な情報がすべてまとまった、読みやすく包括的なリソースを確認できます。

では、最初に使う API である Text Search から見ていきましょう。名前のとおり、入力したテキスト文字列に一致する場所の一覧を返します。ドキュメントは長くて難しそうに見えるかもしれませんが、ここでは必要な要点に絞って見ていきます。

重要なのはリクエスト URL です。この構造は次のとおりです。

https://maps.googleapis.com/maps/api/place/textsearch/output?parameters

この URL では、output と parameters の 2 点に注目してください。

• output は、API が情報を返す形式を指定します。Connect API プラグインで使う場合は、問題なく動作する json を使用します。

• parameters については、この API を初めて扱う場合、ドキュメントを確認して慣れる必要があるかもしれません。通常は、API を機能させるためにリクエスト URL に必須のパラメータを含める必要があり、さらに API の動作をカスタマイズできる任意のパラメータもあります。

• 特に Text Search では、必須パラメータが 2 つあります。query と radius です。

• query — 検索したいテキスト文字列です。

• radius — API が場所の結果を返す範囲を、メートル単位で指定するパラメータです。ただし、多くの場合は自動的に最大値に設定されるため、明示的に設定しなくても問題ありません。

• 最後に、URL のパラメータとして API key を忘れずに含めてください。詳しくは、Use API Keys with Places API のガイドを参照してください。

*必須パラメータ。 *

それでは、"gym" を検索してみましょう。URL は次のようになります。

https://maps.googleapis.com/maps/api/place/textsearch/json?query=gym&key=YOUR_API_KEY

"YOUR_API_KEY" は、先ほど取得した実際の API key に置き換えてください。

3. API リクエストをデバッグする方法

API のデバッグに便利なツールは Postman です。無料プランでも十分に使えます。

*Postman を使って API リクエストをデバッグします。 *

このケースでは、必要なパラメータと認証情報がすべて URL に含まれているため、この URL をそのまま Web ブラウザで開けば大丈夫です。

*ブラウザを使って API リクエストをデバッグします。 *

4. テキスト検索を行う方法（Places API を使用）

では、実際のユースケースへ進みましょう。まずは、検索結果のテキスト内容を表示することを目指します。

検索結果のテキスト内容を表示します。

API リクエストを送信する

サンプルファイルを開くと、検索は「Search」ボタンをタップしたときに実行されます。ここで Text Search リクエストを送信する必要があります。そのため、Tap トリガーの下に Send response を配置しました。

• Channel には "ProtoPie Connect/Studio" を選択します。

• Message は自由に決めて構いませんが、自分にとって意味が分かるものにしてください。ここでは TEXT SEARCH REQUEST を使用しました。

Text search request。

• 次に「Send Value Together」をクリックします。value には式を使います。

式。

• placeBaseURL は、式を簡潔にするために URL の一部を保存しておくテキスト変数です。中身は https://maps.googleapis.com/maps/api/place/textsearch/json?query= です。

• ``Search Box.text は、入力ボックスの text プロパティを取得します。これは要するに、検索ボックスに入力した内容です。

• “&key=” は単なるテキストです。

• API_KEY は、API key を保持するテキスト変数です。

要するに、この式はリクエスト URL を組み立てており、Connect にメッセージを送ると、その URL が値として含まれます。

テキスト内容を表示する

では、Text Search のレスポンスをさらに詳しく見ていきましょう。Text Search は、あなたの IP アドレスをもとに近くの場所を探します。JSON レスポンスの中で注目すべき箇所は "results" セクションで、ここに検索結果が格納されています。

各ページには最大 20 件の結果があり、0 から 19 まで番号が振られています。（多くのプログラミング言語では、最初の要素は通常 0 から始まります。）

各結果には、名前、住所、評価など、その場所に関する追加情報が含まれています。

Text search response。

この情報をプロトタイプに組み込むには、ProtoPie の parseJson() 関数を使います。この関数は JSON 文字列を入力として受け取り、対応する値を取得します。たとえば、1 件目の結果の名前を取得するには parseJson(apiResponse, "results.0.name") を使えます。

• apiResponse は、API から返されたデータを保存するためのテキスト変数です。

• “results.0.name” は、JSON データ内の特定の値にアクセスするためのパス、またはキーの並びを表す文字列です。これは、関数に対して次のように JSON データ構造をたどるよう指示します。

1. 配列である "results" キーにアクセスします。

2. その配列内のインデックス 0 の要素にアクセスします。

3. その要素内の "name" キーにアクセスします。

より高度な機能を使った改善アイデア

parseJson() 関数をテキストレスポンスに使えば、望む形式でテキスト内容を抽出して表示できます。さらに、API データにはまだまだ多くの可能性があります。次の例を検討してみてください。

• 検索結果の場所の 名前 を、見やすくスタイリッシュに表示する。

• API レスポンスから詳細な 住所 情報を取得し、ユーザーに場所の詳細を提供する。

• 各場所に 星評価 を付け、品質をひと目で把握できるようにする。

• 各結果に Open/Closed の状態を組み込み、使いやすく視覚的にも魅力的な表現を作る。

テキスト内容を表示します。

API プラグインを設定する

では、ProtoPie Connect に移ってプラグインを設定しましょう。Plugin ボタンをクリックしてプラグインパネルを開きます。

• Method: GET

• URL、Header、Body は空欄のままにします。

• Message from Pie: TEXT SEARCH REQUEST

• "override" チェックボックスをオンにして、ドロップダウンメニューで URL を選択します。これにより、メッセージと一緒に送った値でリクエスト URL を上書きできます。

• Message to Pie: TEXT SEARCH RESULT

• 最後に、activate ボタンをクリックして API プラグインを実行します。

5. 場所の写真を表示する方法（Places API を使用）

検索結果には現在、場所の写真は表示されていませんが、これからそれを変えていきます。検索結果にその写真を組み込む作業を進めましょう。

Places API を使って場所の写真を表示します。

Text Search のレスポンスでは、"photos" セクションに注目してください。さらに詳しく見ると、"photo_reference" というキーが見つかります。このキーは、場所の写真を表示するために非常に重要です。

"photo_reference" とラベルされたキー。

写真を表示するには、Places API の別サービスである Place Photos を使います。Place Photos リクエストの構造は次のとおりです。

https://maps.googleapis.com/maps/api/place/photo?parameters

パラメータとして必ず含める必要があるのは次のとおりです。

• photo_reference — これは上の Text Search レスポンスで見つかる値です。

• maxheight or maxwidth — 写真サイズを指定するために使います。

• そして、いつものように、URL の末尾に API key を追加することを忘れないでください。

たとえば、前のスクリーンショットに表示されている photo_reference を使って写真を表示し、最大幅を 400 ピクセルにしたい場合、URL は次のようになります。

https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference=AcJnMuGgHB8nM5itT6xjy_NPCiatZPdnBSfMA6sDfy6GmaUNas8HvJPQBKIhTKDRaUEig32RaNP_729GheM7-WEBSiP1Ck8-OcslObfpBO7NAL98XcVav31fo9ih8wYQcEPU8oxW4Sm_GAvMAKgC46YxyHMeML0Ur9SJZi6KUMDNNb2WNTfZ&key=YOUR_API_KEY

"YOUR_API_KEY" は、先ほど取得した実際の API key に置き換えてください。

もう一度言いますが、これは Web ブラウザで URL を開けば簡単にデバッグできます。

Text search response の写真デバッグ。

では、この写真をプロトタイプにどう組み込むのか気になるかもしれません。これを行うために、2 つ目の API プラグインが必要なのでしょうか？ 答えはいいえです。ProtoPie 7.9 で新しくリリースされた self-hosted media 機能 により、Media response の中で提供された URL を簡単に利用できます。

そのためには、画像レイヤーに Media response を適用し、式を使うだけです。式には次のものを利用しましょう。

式。

式は少し長く見えるかもしれませんが、心配いりません。順を追って分解していきます。

• photoBaseURL は、URL の一部を含むテキスト変数で、式を扱いやすくしています。中身は https://maps.googleapis.com/maps/api/place/photo?maxwidth=400& です。

• "photo_reference=” は単なるテキストです。

• parseJson(apiResponse,"results.0.photos.0.photo_reference") — parseJson() 関数にはすでに慣れています。この関数は、Text Search 結果の API レスポンスから photo_reference を取得します。

• “&key=” も別のテキスト要素です。

• API_KEY は、API key を保存するテキスト変数です。

これらを組み合わせることで、検索結果の写真を取得するために必要な URL が完成します。

6. 静的地図を表示する方法（Maps Static API を使用）

Maps Static API は、Google Maps Platform 内のもう一つのサービスです。Google マップの画像を埋め込むことができます。私たちの目的は、検索結果のいずれかをクリックしたときに、選択した場所の地図を右側に表示することです。

選択した場所の地図を表示します。

Text Search のレスポンスでは、今度は場所の経度と緯度を含む "location" セクションに注目しましょう。これも、プロトタイプで活用できる重要な情報です。

Text Search response

Maps Static API の URL 構造は次のとおりです。

https://maps.googleapis.com/maps/api/staticmap?parameters

必須パラメータは次のとおりです。

• center は地図の中心を定義し、地図のすべての端から等距離になる位置を指定します。緯度と経度のペア、または文字列の住所として指定できます。

• zoom は地図のズームレベルです。必要に応じて試しながら、最適なズームレベルを選択できます。

• size は地図画像の長方形サイズを定義します。

• そしてまた、URL の末尾に API key を追加することを忘れないでください。

たとえば、指定された座標（緯度: 43.6544165、経度: -79.3600957）の場所の地図画像を、ズームレベル 12、サイズ 865 x 920 ピクセルで取得したい場合、URL は次のようになります。

https://maps.googleapis.com/maps/api/staticmap?center=43.6544165,-79.3600957&zoom=12&size=865x920&key=YOUR_API_KEY

"YOUR_API_KEY" は、先ほど取得した実際の API key に置き換えてください。

そして、これも再びブラウザでデバッグできます。

Text search response の地図デバッグ。

この画像をプロトタイプに組み込むには、もうお分かりのように、self-hosted media 機能を活用できます。

7. カスタマイズした地図を表示する方法（Maps Static API を使用）

最後に、Google が提供するデフォルトの地図カラーに頼りたくない方に向けて、プロトタイプ内の地図画像にカスタムスタイルを適用する方法を説明します。これは Maps Static API でもサポートされており、詳しくは こちら をご覧ください。

Google マップの色を変更します。

簡単に言うと、カスタムスタイルを実装するには、デザイン用の map ID を生成するだけです。これは 次の手順に従う ことで実現できます。

デザイン用の map ID を生成します。

その後、URL のパラメータとして map ID を含めれば、その URL を Media response でシームレスに利用できます。

https://maps.googleapis.com/maps/api/staticmap?center=43.6544165,-79.3600957&zoom=12&size=865x920&map_id=YOUR_MAP_ID&key=YOUR_API_KEY

ProtoPie で Google Maps を統合できます！

このチュートリアルでは、コーディングの複雑さなしに、Google Maps と位置情報ベースのサービスを UI/UX プロトタイプへ統合する方法を学びました。経験豊富なデザイナーでも、デザインの旅を始めたばかりの方でも、Google Maps Platform と ProtoPie の革新的な機能を組み合わせれば、リアリティあふれる高精細デザインを作成できます。

本物のデータ、写真、そしてパーソナライズされた地図スタイルをプロトタイプに取り入れられるので、ユーザーを魅了し、現実世界のやり取りに近い体験を届けられます。

さあ、この新しく身につけたスキルを使って、創造性とインタラクティブ性に満ちた旅へデザインを命を吹き込みましょう。楽しくプロトタイピングしてください！