ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

独自ドメインのBubbleでGoogle Geocode APIキーとGoogle Map APIキーを設定する

f:id:earthmash:20210922174655p:plain

こんにちは!

Bubbleの地図とジオロケーション機能は、Google APIによって成り立っています。アプリを独自ドメインで運用する場合、地図とジオロケーションに関するGoogle APIの設定が必要になります。

今回は、独自ドメインでBubbleアプリを運用するときのGoogle Geocode APIキーとGoogle Map APIキーの設定方法を説明します。

独自ドメインを取得する

まずはお名前.comなどの独自ドメイン取得サービスで独自ドメインを取得してください。

APIキーを取得する

プロジェクト情報の設定

こちらからGoogle Cloud PlatformのAPIダッシュボードにログインします。初めての場合は利用規約等を確認して同意してから利用開始します。

左上の「プロジェクトを作成」をクリックし、開いたポップアップの右上の「新しいプロジェクト」をクリックします。

f:id:earthmash:20210921195103p:plain
「新しいプロジェクト」をクリック

プロジェクトの設定ページが表示されたら、プロジェクト名にBubbleアプリの名前を入力し、「作成」をクリックします。

※Bubbleアプリ一つにつき一つのプロジェクトを作成してください。

f:id:earthmash:20210921195131p:plain
プロジェクト作成

プロジェクトが作成されたら自動的にトップ画面に戻ってきます。

戻ったら、トップ画面左の「ライブラリ」をクリックします。

このページでは、利用するAPIを選択することができます。

f:id:earthmash:20210921195901p:plain
API ライブラリ

今回は以下の5つのAPIを有効化します。

  • ①Geocoding API

    f:id:earthmash:20210921200608p:plain
    Geocoding API

  • ②Maps JavaScript API

    f:id:earthmash:20210921200630p:plain
    Maps JavaScript API

  • ③Places API

    f:id:earthmash:20210921200655p:plain
    Places API

  • ④Geolocation API

    f:id:earthmash:20210921200711p:plain
    Geolocation API

  • ⑤Time Zone API ※2020年5月、タイムゾーン機能がこちらのAPIとして独立しました。2020年5月以前に取得したAPIキーを設定しているBubbbleアプリで「Current user's timezone」を利用しているなどタイムゾーンが関わる場合は、こちらのAPIを追加してキーを更新してください。

    f:id:earthmash:20210921200729p:plain
    Time Zone API

ライブラリページの検索ボックスから各APIを検索し、ページを開いて利用規約等を確認し有効化を行ってください。

各APIのページで「有効にする」ボタンをクリックすることで有効化されます。

f:id:earthmash:20210921202440p:plain
APIを有効化する

認証情報の設定

認証情報を設定して、APIキーを取得します。

BubbleのSettings>Generalタブの「General services API keys」からも分かるように、「Google Geocode API Key」と「Google Map API key」の2つのAPIキーが必要になります。順に取得していきましょう。

f:id:earthmash:20210922124446p:plain
2つのAPIキーが必要

Clientキー(Google Map API keyの設定)

「APIとサービス」のダッシュボードページに戻り、左のメニューの「認証情報」をクリックします。認証情報に関するページが表示されたら、ページ上部の「+認証情報を作成」をクリックします。

すると「APIキーを作成しました」というポップアップが表示されるので、ポップアップ右下の「キーを制限」をクリックします。

f:id:earthmash:20210922140818p:plain
認証情報を作成する

「API キーの制限と名前変更」ページが表示されるので、まずは1つ目の認証情報を以下の通り設定します。後ほど「Google Map API key」として使用するものです。

  • キーの名前:Client

  • アプリケーションの制限:HTTPリファラー

  • ウェブサイトの制限:「項目を追加」から、「新しいアイテム」に取得したドメインURLの末尾に「/アスタリスク」をつけたURLを入力(例:https://BUBBLENAME.bubbleapps.io/アスタリスク)。※「/アスタリスク」をつけることで、「/アスタリスク」以前の部分が一致する全てのURLが対象になります。 独自ドメインを変更するときにはこのURLの変更を忘れずに!

  • APIの制限:キーを制限しない

    f:id:earthmash:20210922163345p:plain
    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)を選択してください。

f:id:earthmash:20210922140900p:plain
Serverキーの設定

これで必要なキーの設定が完了しました。

APIキーを設定する

取得したAPIキーをBubbleに入力します。

BubbleアプリのEditorページを表示し、Settings>Generalタブの「General services API keys」欄、「Google Geocode API Key」に「Server」キーを、「Google Map API key」に「Client」キーを貼り付けます。

f:id:earthmash:20210922163703p:plain
2つのAPIキーを貼り付け

認証情報ページのクリップボードマークをクリックしてコピーするのが簡単な方法です。

f:id:earthmash:20210922154455p:plain
APIキーは認証情報ページのクリップボードマークからコピー

これでAPIキーのセットアップは完了です。

請求先アカウントを設定する

Google APIを利用した不正行為や悪用防止のため、プロジェクトと請求先アカウントの紐付けが必須になっています。この設定をしましょう。

※この紐付けができていないとGoogle APIが機能しないので必ず設定しましょう。

Googleアカウントの支払い方法設定

※クレジットカード情報を登録済の場合は飛ばしてください。

こちらからGoogleアカウントにログインし、左側のメニューから「お支払いと定期購入」を選択し、「お支払い方法を管理」をクリックします。

f:id:earthmash:20210921185748p:plain
「お支払い方法を管理」をクリック

次の画面で「お支払い方法を追加」をクリックし、クレジットカード情報と請求先になる住所を登録します。

f:id:earthmash:20210921185917p:plain
「お支払い方法を追加」をクリック

完了画面が表示されたら、このアカウントを「請求先アカウント」として次の手順に進みます。

f:id:earthmash:20210921185937p:plain
完了!

請求先アカウントの連携

先ほど作成したプロジェクトのダッシュボードの左上のメニューから、「お支払い」をクリックします。

f:id:earthmash:20210921191446p:plain
左上のメニューからお支払い方法設定ページへ

請求先アカウントが未登録の場合、「このプロジェクトには請求先アカウントがありません」というメッセージが表示されます。

その場合、「請求先アカウントをリンク」をクリックし、このプロジェクトの請求先にするアカウント(先ほどお支払い方法を設定したアカウント)を手順に沿って連携します。

f:id:earthmash:20210921191631p:plain
「請求先アカウントをリンク」をクリック

問題なければ最後に「無料トライアルを開始」をクリックしてください。

f:id:earthmash:20210921192148p:plain
「無料トライアルを開始」をクリック

請求先アカウントの連携が完了したら、「請求先アカウントが複数あります」というメッセージが表示されるはずです。

f:id:earthmash:20210921192343p:plain
請求先アカウント連携完了

これで請求先アカウントの設定は完了です。

地図の表示を確認する

ここまでで全ての設定が完了しました。

問題なければBubbleアプリ上でGoogle Mapが正常に表示されるはずです。テスト用にmapエレメントを配置して、Previewから確認してみましょう。

f:id:earthmash:20210922160430p:plain
表示成功!

以下のような表示になっている場合、設定不備または設定が反映されていない可能性があります。

※APIキーの設定は、有効になるまで最大5分かかります。

f:id:earthmash:20210922160203p:plain
エラー表示
f:id:earthmash:20210922160221p:plain
エラー表示2

時間を置いてPreviewページを更新して再確認してみましょう。5分経っても表示に成功しない場合、設定不備がないか確認してみてください。

終わりに

今回のGoogle Geocode APIキーとGoogle Map APIキーの設定に関するBubble公式のチュートリアル動画やドキュメントもありますので、下記の「参考情報」からご覧下さい。

請求先アカウントの連携も忘れないようにしてくださいね!

参考情報

  • Bubble公式のチュートリアル動画

www.youtube.com

  • Bubble公式のドキュメント

manual.bubble.io