こんにちは！
Bubbleの地図とジオロケーション機能は、Google APIによって成り立っています。アプリを独自ドメインで運用する場合、地図とジオロケーションに関するGoogle APIの設定が必要になります。
今回は、独自ドメインでBubbleアプリを運用するときのGoogle Geocode APIキーとGoogle Map APIキーの設定方法を説明します。
独自ドメインを取得する
まずはお名前.comなどの独自ドメイン取得サービスで独自ドメインを取得してください。
APIキーを取得する
プロジェクト情報の設定
こちらからGoogle Cloud PlatformのAPIダッシュボードにログインします。初めての場合は利用規約等を確認して同意してから利用開始します。
左上の「プロジェクトを作成」をクリックし、開いたポップアップの右上の「新しいプロジェクト」をクリックします。
プロジェクトの設定ページが表示されたら、プロジェクト名にBubbleアプリの名前を入力し、「作成」をクリックします。
※Bubbleアプリ一つにつき一つのプロジェクトを作成してください。
プロジェクトが作成されたら自動的にトップ画面に戻ってきます。
戻ったら、トップ画面左の「ライブラリ」をクリックします。
このページでは、利用するAPIを選択することができます。
今回は以下の5つのAPIを有効化します。
①Geocoding API
Geocoding API ②Maps JavaScript API
Maps JavaScript API ③Places API
Places API ④Geolocation API
Geolocation API ⑤Time Zone API ※2020年5月、タイムゾーン機能がこちらのAPIとして独立しました。2020年5月以前に取得したAPIキーを設定しているBubbbleアプリで「Current user's timezone」を利用しているなどタイムゾーンが関わる場合は、こちらのAPIを追加してキーを更新してください。
Time Zone API
ライブラリページの検索ボックスから各APIを検索し、ページを開いて利用規約等を確認し有効化を行ってください。
各APIのページで「有効にする」ボタンをクリックすることで有効化されます。
認証情報の設定
認証情報を設定して、APIキーを取得します。
BubbleのSettings>Generalタブの「General services API keys」からも分かるように、「Google Geocode API Key」と「Google Map API key」の2つのAPIキーが必要になります。順に取得していきましょう。
Clientキー（Google Map API keyの設定）
「APIとサービス」のダッシュボードページに戻り、左のメニューの「認証情報」をクリックします。認証情報に関するページが表示されたら、ページ上部の「＋認証情報を作成」をクリックします。
すると「APIキーを作成しました」というポップアップが表示されるので、ポップアップ右下の「キーを制限」をクリックします。
「API キーの制限と名前変更」ページが表示されるので、まずは1つ目の認証情報を以下の通り設定します。後ほど「Google Map API key」として使用するものです。
キーの名前：Client
アプリケーションの制限：HTTPリファラー
ウェブサイトの制限：「項目を追加」から、「新しいアイテム」に取得したドメインURLの末尾に「/アスタリスク」をつけたURLを入力（例：https://BUBBLENAME.bubbleapps.io/アスタリスク）。※「/アスタリスク」をつけることで、「/アスタリスク」以前の部分が一致する全てのURLが対象になります。 独自ドメインを変更するときにはこのURLの変更を忘れずに！
APIの制限：キーを制限しない
Clientキーの設定
できたら「保存」をクリックして設定を保存します。
これで、「ウェブサイトの制限」で入力したURLのサイトのみがこのAPIキーの対象となりました。
Serverキー（Google Geocode API Keyの設定）
次に、利用するGoogle APIを制限するキーを取得します。
もう一度、「認証情報」のページから「＋認証情報を作成」をクリックし、APIキーを作成します。 「APIキーを作成しました」というポップアップ右下の「キーを制限」をクリックし、設定画面で以下の通り認証情報を設定してください。
キーの名前：Server
アプリケーションの制限：なし
APIの制限：「キーを制限」を選択。するとプルダウンが表示されるので、先ほど有効化した5つのAPI（①Geocoding API、②Maps JavaScript API、③Places API、④Geolocation API、⑤Time Zone API）を選択してください。
これで必要なキーの設定が完了しました。
APIキーを設定する
取得したAPIキーをBubbleに入力します。
BubbleアプリのEditorページを表示し、Settings>Generalタブの「General services API keys」欄、「Google Geocode API Key」に「Server」キーを、「Google Map API key」に「Client」キーを貼り付けます。
認証情報ページのクリップボードマークをクリックしてコピーするのが簡単な方法です。
これでAPIキーのセットアップは完了です。
請求先アカウントを設定する
Google APIを利用した不正行為や悪用防止のため、プロジェクトと請求先アカウントの紐付けが必須になっています。この設定をしましょう。
※この紐付けができていないとGoogle APIが機能しないので必ず設定しましょう。
Googleアカウントの支払い方法設定
※クレジットカード情報を登録済の場合は飛ばしてください。
こちらからGoogleアカウントにログインし、左側のメニューから「お支払いと定期購入」を選択し、「お支払い方法を管理」をクリックします。
次の画面で「お支払い方法を追加」をクリックし、クレジットカード情報と請求先になる住所を登録します。
完了画面が表示されたら、このアカウントを「請求先アカウント」として次の手順に進みます。
請求先アカウントの連携
先ほど作成したプロジェクトのダッシュボードの左上のメニューから、「お支払い」をクリックします。
請求先アカウントが未登録の場合、「このプロジェクトには請求先アカウントがありません」というメッセージが表示されます。
その場合、「請求先アカウントをリンク」をクリックし、このプロジェクトの請求先にするアカウント（先ほどお支払い方法を設定したアカウント）を手順に沿って連携します。
問題なければ最後に「無料トライアルを開始」をクリックしてください。
請求先アカウントの連携が完了したら、「請求先アカウントが複数あります」というメッセージが表示されるはずです。
これで請求先アカウントの設定は完了です。
地図の表示を確認する
ここまでで全ての設定が完了しました。
問題なければBubbleアプリ上でGoogle Mapが正常に表示されるはずです。テスト用にmapエレメントを配置して、Previewから確認してみましょう。
以下のような表示になっている場合、設定不備または設定が反映されていない可能性があります。
※APIキーの設定は、有効になるまで最大5分かかります。
時間を置いてPreviewページを更新して再確認してみましょう。5分経っても表示に成功しない場合、設定不備がないか確認してみてください。
終わりに
今回のGoogle Geocode APIキーとGoogle Map APIキーの設定に関するBubble公式のチュートリアル動画やドキュメントもありますので、下記の「参考情報」からご覧下さい。
請求先アカウントの連携も忘れないようにしてくださいね！
参考情報
- Bubble公式のチュートリアル動画
- Bubble公式のドキュメント
