ノーコードツール【Bubble】位置情報の仕様と使い方を解説

Bubbleの地図とジオロケーション機能は、Google APIに依存しています。アプリが独自ドメインを使用するようになると、設定 > 一般 > 「一般サービス API キー」セクションに独自の Google API キーが必要になります。このガイドでは、独自のキーを取得する方法について説明します。

Google APIは、タイムゾーンと地理的な住所に使用されます。したがって、アプリのどこかで “Current user’s timezone” や住所を使用している場合は、これらのキーを更新しておいてください。

※2020年5月、GoogleはAPIを変更し、タイムゾーン機能(以前はGeocode機能のバンドルに含まれていた)を独自のAPIに分割しました。このため、Googleにアプリを登録する際に、タイムゾーンAPIをアプリの機能に追加する必要があります。

Google Developers Consoleでアプリを設定する

まず、Google Developers Consoleでアカウントを設定する必要があります。これにより、Googleはあなたのアプリについて知り、あなたのアプリが呼び出すことが許可されているAPIを知ることができます。

こちらのコンソールにアクセスしてください。ログインする必要があります。また、Googleからの要求である課金情報を提供する必要がある場合もあります。

まず、GoogleでBubbleアプリに対応する “プロジェクト “を作成し、インターフェイスは以下のようになります。

次に、そのプロジェクトをアクティブにした状態(トップバーに名前が表示されている状態)で、左上のメニューアイコンをクリックします。

Libraryで、以下のAPIを検索し、それぞれを「Enable」します。

・Geocoding API
・Places API
・Geolocation API
・Maps JavaScript API
・(New in May 2020) Time Zone API

新しいキーの作成とセットアップ

左上のメニューアイコン > API & Services > Credentialsにアクセスします。2つの新しいAPIキーを作成し(「資格情報の作成」ボタン)、そのうちの1つを「クライアント」、もう1つを「サーバー」という名前に編集してください。

ここで、セキュリティの観点から、鍵に何らかの制限を加えたいです。

クライアントキーの設定をクリックし、「アプリケーションの制限」で「HTTPリファラー(Webサイト)」を選択します。次に、「ウェブサイトの制限」セクションで、例えば「https://appname.bubbleapps.io/*」のように、あなたのBubbleアプリのURLを追加します。この制限は、あなたのBubbleアプリだけがクライアントキーを使用できることを意味します。は「ワイルドカード」で、”https://appname.bubbleapps.io/”で始まるURLなら何でも受け付けるという意味です。

次に、サーバーキーの設定をクリックし、「APIの制限」セクションを確認します。Restrict key “を選択し、ドロップダウンで上記で有効にした5つのAPIをすべて選択します。この制限により、サーバーキーはこれら5つのGoogle APIのみを使用することができます。(2020年5月の新機能 – 以前は4つのAPIしか有効化できなかったのが、5つすべてを有効化する必要があることに注意)

これでキーの設定は完了です! 別のタブで、バブルエディタに戻り、「設定」→「一般」と進みます。General services API keys” セクションで、Server key を “Google Geocode API key” ボックスに、Client key を “Google Map API key” ボックスにコピー&ペーストしてください。これで設定は完了です。

Google側でのさらなる注意点

・Googleが提供するAPIキー設定の一般的な手順は、マップはこちら、ジオコードはこちらです。このマニュアルページの手順は2020年1月時点のものですが、Googleがインターフェースを更新する際には、必要に応じて公式ドキュメントを参照してください。

・これらのAPIを使用するためには、Google Cloudに課金アカウントを設定し、Googleプロジェクトをその課金アカウントに接続する必要がある場合があります。

・Googleプロジェクトの設定変更は、反映されるまでに1分ほどかかることがあります。

参考英語サイト

https://manual.bubble.io/help-guides/working-with-data/working-with-location-data

参考英語動画サイト

aaaa