皆さんこんにちは！Ryoです
ざっくりと自己紹介をさせていただくと、現在高専の4年生で国内最大のNoCodeオンラインサロン「NoCodeCamp」にて公認Bubbleエキスパートをしており、NoCodeの教育事業や小中学校へのプログラミング授業導入支援などを行なっております。
今回はBubbleでアプリ開発をした方が「いざアプリをリリース！」となった際に必須になる手続きのGoogle API Keyの取得について解説しようと思います。
Bubbleのアプリをリリースする際にはGoogleのAPIやGoogle Mapを実装していなくともリリース時にGoogle API Keyが必須になります。
こちらを取得しないとサイト運営に支障が出る場合がありますので、必ず取得し接続設定を行うようにしましょう
Google Developer Console
さて、Bubbleのアプリをリリースする際に必ず必要になるもの。それは
- ドメイン
- 有料プラン（Personal以上）
- Google API Key
となっています。
「自分のアプリは別にGoogle Mapとか導入してないしいらないでしょ」と思ったそこのあなた！
実はアプリのデプロイの際にGoogle API Keyを入力していないとBubbleからエラー分が飛んでくる事態になるんです！
Google API Keyは3ヶ月の無料期間もあるのでこの機会に取得方法をマスターして自分のアプリを量産できるようになりましょう！！
まずはGoogle API Keyを取得するため、「Google developer console」にアクセスします。
こんな形の「Google Cloud Platform」と書かれたサイトにアクセスすることができたと思います。
「Google developer consoleって言ってたのに違うサイトにアクセスした」と思った方。大丈夫です。
ここがGoogle developer consoleです。
Googleアカウントがないという場合はこれを機会に作ってしまいましょう。
それでは早速、今回のアプリ用のプロジェクトを作成し、Google APIを取得していきます。
今回のために私も新しいGoogleアカウントでプロジェクトの作成を行なっていきますが、初めてGoogle API Keyを取得する方はこんな画面になっていると思います。
まず、新しいプロジェクトを作成していきたいので、画面右の「プロジェクトの作成」もしくは画面左上の「プロジェクトの選択」をクリックします。
「プロジェクトの選択」をクリックした場合は、このような画面が出てきますので右上の「新しいプロジェクト」より、プロジェクト作成を行なってください。
2回目以降はこのやり方になります。
まずはプロジェクト名の設定です。
好きなプロジェクト名を入力し、組織名と場所を確認してください。
学校や会社のGmailアカウントを使っている場合はそれに準じた表示がされますが、個人のアカウントの場合は「組織なし」で大丈夫です。
作成ボタンをクリックしてプロジェクトを作成しましょう。
ホーム画面に戻り、しばらくするとプロジェクトが作成されます。
画面左上の「Google Cloud Platform」の右側に先ほど設定したプロジェクト名が反映されていればOKです。
反映されていない場合は、プロジェクト名の箇所をクリックして、作成したプロジェクト名が一覧の中にあるか確認してみてください。
Google APIを有効化する
続いてメニューバーより、矢印の「ライブラリ」をクリックし、APIの有効化の作業をしていきます。
このようなAPIライブラリが表示されますので、今回必要なAPIを取得していきます。
APIを有効化する方法は、指定のAPIを検索して「管理」となっているボタンが始めは「有効にする」というボタンになっているので、そこをクリックすればOKです。
そして今回使用するAPIは
- Geocoding API
- Places API
- Geolocation API
- Map JavaScript API
- Time Zone API
こちらの計5つです。
5つのAPI を有効にしたらBubbleのアプリで使用するGoogle APIの有効化は完了です。
Google API Keyを取得する
続いてメニューの認証情報より、API Keyを取得していきます。
認証情報にアクセスできたら、画面上の「+ 認証情報を作成」よりAPI Keyを作成していきます。
「+ 認証情報を作成」をクリックすると選択肢が出てくるため、「APIキー」をクリックします。
このようにAPI キーが作成されます。
今回は2種類のAPIキーを作成するので同じ作業をもう１度行い、もう一つAPI キーを作成しておきましょう。
APIキーの作成が完了したら、画面右下の「キーを制御」からAPIキーの制御設定を行なっていきます。
1つ目のAPIキーはAPIキーの名前を「Client」に設定し、アプリケーションの制限を「HTTPリファラー（ウェブサイト）」にチェック
ウェブサイトの制限にリリースするアプリのドメインをコピペしてドメインの最後に「/*」を付け加えてください。
APIの制限は「キーを制限しない」に設定し、保存ボタンをクリックして1つ目のAPIキーの設定は完了です。
2つ目のAPIキーはAPIキーの名前を「Server」に設定し、アプリケーションの制限を「なし」
APIの制限に「キーを制限」を選択して、先ほどライブラリにて有効化した5つのAPIを選択します。
APIが選択できたら保存ボタンをクリックして2つ目のAPIキーの設定も完了です。
BubbleにGoogle API Keyを設定する
先ほどのAPIキーが設定完了して、名前の左側にチェックマークが付いていることが確認できたらいよいよBubbleにAPI Keyを設定していきます。
今回リリースするアプリのSettingsタブよりGeneralに移動し、General services API KeysよりGoogle API Keyを設定していきます。
先ほど作成したAPIキーより
「Server」キーを[Google Geocode API Key]へペースト、
「Client」キーを[Google Map API Key]へペーストします。
こちらでBubbleのアプリリリース前に行うGoogle API Keyの設定は完了となります。
告知
2022年1月中旬より、Bubblerの技術向上を全力で後押しするBubble専門オンラインサロン【Bubble研究室】をリリースします！
公式Bubbleフォーラムを日本語ベースでまとめたウィークリーレポートの発信や、プラグイン周りのサポートなどBubblerが自分の作りたいアプリを作るために豊富なサポートをご用意しております。
また、「マンツーマンで作りたいアプリをサポートしてほしい！」「もっといろんなTipsや深い技術を学びたい！」という方のためにマンツーマンコーチングのプランもご用意しております。
是非ともご検討ください！
