国内初!bubble公式開発試験に合格!

【Bubble】スケジュール予約機能(Googleカレンダー)を実装する方法

概要

Googleカレンダーと連携することで、予定を管理できます。ユーザーはBubbleアプリケーションを介してスケジュールを作成したり、予定を確認したりできます。今回はBubbleとGoogleカレンダーを連携して、スケジュール予約管理を実装する方法を解説します。

Googleカレンダーの連携

1.Google Cloud Platformでプロジェクトを作成する

Google Cloud Platformにアクセスし、プロジェクトを作成します。

2.APIとサービス > ライブラリ からGoogle Calendar APIを有効にする

3.Google Cloud Platform(GCP)で利用登録する

まずGCPにアクセスし「無料で使ってみる」をクリックします。

利用するGoogleアカウントを選択しログインすると、以下のような画面が表示されます。

利用規約にチェックを入れて「続行」をクリックしてください。

お支払情報等を入力して、利用登録は完了です。

4. GCPプロジェクトを作成する

画面上部の「プロジェクト名」を選択すると、以下のような画像でプロジェクトの選択ウィンドウが表示されるので「新しいプロジェクト」をクリックします。

ℹ️ プロジェクト名は任意の名前を入力してください。

5. OAuth同意画面を設定する

左メニュから「APIとサービス」→「OAuth同意画面」を開きます。

以下の画面からUser Type「外部」を選択して「作成」をクリックします。

最低限必要な項目を入力します。

アプリ名任意の名前
ユーザーサポートメールメールアドレスを選択
アプリケーションのホームページhttps://{自身のドメイン}.bubbleapps.io/
承認済みドメインhttp://bubbleapps.io/
デベロッパーの連絡先情報指定メールアドレスを入力

「スコープ」は設定不要の為「保存して次へ」をクリックします。

「テストユーザー」には実装テストに利用するGoogleアカウントのアドレスを入力します。

「概要」にて、OAuth同意画面の設定は完了です。

6. 認証情報を設定する

左メニュから「認証情報」を開きます。「+認証情報を作成」をクリックし、

「OAuthクライアントID」を選択します。

「承認済みのリダイレクトURI」の「URIを追加」ボタンをクリックし、Bubbleのプラグインで控えておいたredirect URLを入力し「作成」ボタンをクリックします。

「クライアント ID」と「クライアント シークレット」を取得します。

Bubbleプラグインの設定

1.「Full Calendar」プラグインをインストールする。

「Full Calendar」を使用することにより、簡単にカレンダーエレメントが追加されます。

2.「API Connector」にOAuth設定する

Googleカレンダーと連携する為に、APIコネクターを設定します。App ID と App Secret は先ほど取得した Google のクライアント ID とクライアントシークレットを入力します。

GoogleカレンダーAPIの設定値の詳細は公式ドキュメントまたは、Zeroqode が公開している Calendar from Google プラグインの設定を参考にしてください。

3.「API Connector」に「Retrieve Calendar Events」を設定する

必須パラメータに calendar_id にはGoogleのOAuth設定でテストユーザーとして登録した Gmailアドレスを入力します。Initialize call ボタンをクリックしてReturn値を受け取り、SAVEボタンで保存します。公式APIドキュメントも参照ください。

4.「API Connector」に「Create a Calendar Event」を設定する

必須パラメータに calendar_id にはGoogleのOAuth設定でテストユーザーとして登録した Gmailアドレスを入力し、Initialize call ボタンをクリックしてReturn値を受け取り、SAVEボタンで保存します。公式APIドキュメントも参照してください。

Bubbleでスケジュール予約機能(Googleカレンダー)を実装する方法

0.完成イメージ

1.「Calendar」エレメントを設置する。

「Full Calendar」プラグインで追加されるCalendarエレメントを追加します。

Calendarエレメントの「Date source」に先ほど設定した「API Connector」の「Group Calendar – Retrieve Calendar Events」の値を設定します。

2.Googleカレンダー認証用エレメントを設置する

Googleカレンダー認証用エレメントを設置し、「Signup/login with API」アクションから設定した「API Connector」「Google Calendar」をワークフローに設定します。

3.Googleカレンダー認証ログアウト用エレメントを設置する

Googleカレンダー認証後にログアウトする為、「Log the user out」アクションをワークフローに設定します。

4.Googleイベント作成用エレメントを設置する

Googleカレンダー作成用エレメントを設置し、イベント作成に必要な情報を用意します。

「Create」ボタンに先ほど設定した「API Connector」の「Google Calendar – Create a Calendar Event」をワークフロー設定します。

資料請求

Swoooのサービス資料をダウンロードいただけます。開発支援をご検討の方はぜひご一読ください。

ご相談・お問い合わせ

お客様の新規事業開発やマーケティング活動における課題解決をサポートします。
お気軽にご相談ください。

料金シミュレーション

たった2分で開発費用が分かります。
簡単な質問に答えるだけでお見積りが可能です。