ノーコード ラボ

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

Bubble と Googleカレンダーを連携してみよう!

f:id:yksmt:20201214140745p:plain

皆さん、こんにちは!

Bubble と Googleサービスの連携方法については、これまでもいくつかご紹介していますが、今回は Googleカレンダーを取り上げてみたいと思います。

Bubble で Googleカレンダーに関するプラグインを検索してみると、今現在(2020年12月時点)フリーで使えるものと言えば Zeroqode の Calendar from Google ですが、一部の機能は無料ということで制限されていますので、今回はこちらのプラグインをベースに自身の API Connector に落とし込んで、一部の機能を拡張して利用するという方法についてご紹介したいと思います。

Bubble から Googleカレンダーを操作できると、スケジュール管理や予約アプリなどの構築を検討されている方には便利な機能だと思いますので、どうぞお付き合いくださいね。

今回、取り上げる機能は、基本的な操作となる以下5つです。

  • Google アカウントに OAuth 接続し、カレンダーリストを取得します。
  • カレンダーに登録されているイベントを一覧で取得します。
  • カレンダーに新規でイベントを登録します。
  • カレンダーのイベントを削除します。
  • カレンダーのイベントを更新します。

また、OAuth って何?や API Connector の設定が初めての方は、以下の記事もご参考いただければと思います。

blog.nocodelab.jp

では、早速はじめましょう!

API Connector のインストール

まずは、Bubble アプリに API Connector をインストールしておきます。

Plugins タブの「+Add plugins」で「API Connector」を検索してインストールします。

「Add another API」ボタンをクリックして、Authentication を「OAuth2 User-Agent Flow」として、Use a generic redirect URL を表示させておきます。この URL (https://your-app.bubbleapps.io/api/1.1/oauth_redirect) は後ほど Google APIs の設定で使用します。

f:id:yksmt:20201215104034p:plain

Google APIs でプロジェクト作成

次に、Google Cloud Platform ページを開いて、「プロジェクト選択」より新しいプロジェクトを作成します。

f:id:yksmt:20201211122755p:plain

左のメニューの「OAuth 同意画面」をクリックし、OAuth 同意画面の設定を行います。

User Type で「外部」を選択します。 「アプリケーション名」と「ユーザーサポートメール」を入力し、「承認済みドメイン」を設定します。必要であれば、アプリのロゴなども登録しておきましょう。ここでは、アプリケーション名を「gc-sample」としました。ドメインは「bubbleapps.io」と入力します。

f:id:yksmt:20201211122437p:plain

f:id:yksmt:20201211123441p:plain

「保存して次へ」からスコープへ進みますが、今回スコープについては Bubble の API Connector で直接指定しますので、そのまま次のテストユーザーへ進みます。検証で利用するGoogleアカウントを登録しておきましょう。

f:id:yksmt:20201211124503p:plain

f:id:yksmt:20201211124610p:plain

「保存して次へ」で概要へ進み、入力した内容を確認します。

次に、左のメニューの「認証情報」をクリックして、認証情報を設定していきます。「+認証情報を作成」リンクから「OAuth クライアント ID」を選択します。

f:id:yksmt:20201211132255p:plain

「承認済みのリダイレクト URI」に、 先ほど Bubbleの API Connector の設定時に取得した、https://your-app.bubbleapps.io/api/1.1/oauth_redirect を入力し「作成」ボタンをクリックします。your-app の部分は、ご自身の Bubble アプリ名に置き換えてくださいね。

f:id:yksmt:20201211132844p:plain

以上で、Google のクライアント ID とクライアントシークレットを取得することができました。

Bubble アプリの構築

では、Bubble側のアプリを作成していきます。

API Connector のOAuth設定

まずは、Googleカレンダーと接続するのに、Zeroqode が公開している Calendar from Google プラグインの設定をこちらのURLを参考に、手作業になりますが自身の API Connector に設定値を全てそのままコピーしてしまいましょう。

f:id:yksmt:20201215104108p:plain

Calendar from Googleプラグインにある「Retrieve List of Calendars」や「Retrieve Calendar Events」、「Create a Calendar Event」などの設定は「Add another call」ボタンから行っていくことになりますが、OAuth 接続をビルドさせる前にそれらの呼び出しを「Initialize call」してしまうと、401エラーなどを取得しますので、まずは、プラグインの設定コピーが終わった時点で、OAuth接続だけ行うこととします。

App ID と App Secret は先ほど取得した Google のクライアント ID とクライアントシークレットを入力してくださいね。

また今回は、Calendar from Google プラグインをベースに構築していますが、設定値については必須項目以外のパラメーターやプロパティは一部割愛されている場合があります。Googleカレンダー API の設定値の詳細ついては、以下のドキュメントにて解説されていますので、ご参考ください。

developers.google.com

ソーシャルログインで接続

では、API Connector の設定値のコピーができたら、まずはOAuth接続していきます。ボタンをひとつ配置して、クリックイベントを作成します。Googleカレンダーへ OAuth接続するには、「Signup/login with a social network」アクションで、先ほど設定したプロバイダーを選択します。

f:id:yksmt:20201211140903p:plain

f:id:yksmt:20201211141108p:plain

接続を「Signup/login with a social network」で設定したので、ついでに切断するボタンもここで作成し「Log the user out」アクションを設定しておきましょう。

Bubble アプリで、API Connector を使用してソーシャルログインを構築した際、慣れていない時は特にですが、検証していると「何だかうまく動作しないな」といったことがあるかもしれません。そんな時は、一旦アプリから意図的にログアウトして検証してみると原因の糸口が見つかることがありますのでおススメです。

f:id:yksmt:20201211153141p:plain f:id:yksmt:20201211153050p:plain

では、Preview ボタンでアプリを起動しテストしてみましょう。配置した接続用のボタンをクリックしたら Google のアカウント選択画面が表示されます。

f:id:yksmt:20201211143835p:plain

アカウントを選択したら、一度以下のような警告ページに遷移すると思いますが、これは Google の確認プロセスを通過していない為、表示されることになったようです。

f:id:yksmt:20201211143921p:plain

上記警告については、以下のページで解説がありますのでご参考ください。現在はテスト環境なので、このまま「bubbleapps.io(安全ではないページ)に移動」から遷移を続けます。

support.google.com

次に、権限の付与についての確認画面が表示されます。

f:id:yksmt:20201211144220p:plain

f:id:yksmt:20201211144233p:plain

「許可」をクリックすると、以下のように OAuth接続成功のメッセージが表示されればOKです。

f:id:yksmt:20201211144324p:plain

API Connector の呼び出しポイントを初期化

OAuth接続に成功したら、もう一度 API Connector に戻り、今度は呼び出しポイントを初期化していきます。

まずは「Retrieve List of Calendars」からやっていきましょう。 Initialize call ボタンをクリックして、Return値を受け取り、SAVEボタンで保存します。ここでもし、401エラーなどが出るようであれば、もう一度 Bubble を Preview 起動して、念のため切断用に用意したボタンでログアウトしてから、設定値をよく確認し再度接続ボタンをクリックして、接続をトライしてみてください。

f:id:yksmt:20201211145602p:plain

f:id:yksmt:20201211145842p:plain

次に「Retrieve Calendar Events」を設定します。ここでは、必須パラメータに calendar_id があるので、Google の設定でテストユーザーとして登録した Gmailアドレスを入力して、Initialize call ボタンをクリックしてください。先ほどと同様、Return値を受け取り、SAVEボタンで保存します。

f:id:yksmt:20201211150040p:plain

ユーザーのカレンダーリストを取得

では、次に画面にドロップダウンリストを配置し、ユーザーが持っているカレンダーリストを取得するように設定します。

Type of choices は「Retrieve List of Calendars item」とし、Choices source で Get data from an external API から API provider で「Retrieve List of Calendars」を選び、さらに items を選択します。 Option caption は「summary」でカレンダーのタイトルを表示させましょう。

f:id:yksmt:20201211150525p:plain

カレンダーのイベントを取得

では、次にカレンダーに登録されているイベントを取得していきます。

Repeating group を配置して、Type of content で「Retrieve List of Calendars item」を選択します。

f:id:yksmt:20201211155038p:plain

Data source は以下のように設定しています。 Get data from an external API から API provider で「Retrieve Calendar Events」を選択し、取得に必要な条件を指定します。 ここでの指定は、calendar_id と singleEvents を true で設定するようにしましょう。取得するイベントの件数が多い場合は、条件に日時を使うようにしてください。

f:id:yksmt:20201211155346p:plain

日時は、ISOフォーマットで指定する必要があります。Bubbleでは、「:formatted as...」から「Simplified extended ISO」を選択することで簡単に指定することが可能です。

f:id:yksmt:20201214105647p:plain

なお上記の設定では、日付の取得などで以下の Cutsom states を使用しています。Cutsom states の設定については、今回は割愛させていただきますが、ページロードのタイミングなどで値を算出するようにしています。ここでは、1ヵ月分のカレンダーのイベントが取得できるように、今月であれば 2020/12/1 AM0:00 から 2020/12/31 PM23:59 の日時で timeMax と timeMin を指定し絞り込みを行っています。

  • Current calendar(text):ドロップダウンで選択されたユーザーのカレンダーIDを保持
  • First day(date):毎月1日のAM0:00を保持
  • Last day(date):月末日のPM23:59を保持

f:id:yksmt:20201211160404p:plain

次に、Repeating group 内に カレンダーまでのリンクと、イベントIDを表示させます。

f:id:yksmt:20201211161018p:plain

f:id:yksmt:20201211161351p:plain

では、ここで一旦アプリを Preview してみましょう。イベントリンクとイベントIDが表示されればOKです。

f:id:yksmt:20201214133944p:plain

では、もう一度 API Connector に戻り、今度は「Get Event Details」の設定をしていきましょう。calendar_id と先ほど取得した event_id を入力してから Initialize call ボタンをクリックします。

f:id:yksmt:20201214103929p:plain

これで、イベントの詳細までを取得できるようになりました。 Googleカレンダーでは、Googleカレンダーで直接入力したイベントと、Bubble などのアプリを通じで登録したイベントでは、イベント日付を保持しているプロパティが若干異なるようですので、Bubble の inspect ボタンをうまく活用して中身を覗いてみてくださいね。

「Get Event Details」の start Date プロパティで取得できない値は、代わりに「Retrieve Calendar Events」の start dateTime プロパティで取得するといったことができるようです。

f:id:yksmt:20201211162809p:plain

ここではイベントの日付を、以下のように設定しています。

f:id:yksmt:20201211163134p:plain f:id:yksmt:20201211163206p:plain

カレンダーにイベントを新規作成

では次に、カレンダーの新規作成ができるアクションを追加するのに、API Connectorで「Create a Calendar Event」を設定していきます。

今までと同様、calendar_id にテストユーザーのアドレスを入力し、content-type には「application/json」と入力します。 イベントの内容を end_time、start_time、summaryに入力します。

では、 Initialize call ボタンをクリックして、イベントが登録されたかGoogleカレンダーで確認してみてください。日時は「2020-12-14T14:30:00+03:00」のように ISOフォーマットするようにしてください。

f:id:yksmt:20201211171126p:plain f:id:yksmt:20201211171401p:plain

ワークフローから指定する場合は、ボタンクリックでポップアップなどを表示し、ユーザーに日付やイベントタイトルなどを入力してもらい、その値を登録するようにすると良いですね。

f:id:yksmt:20201211171012p:plain

アクションは Pulugins から選択できます。

f:id:yksmt:20201214132143p:plain

なお、カレンダーへのイベント登録は、カレンダーへの書き込み権限があるユーザーである必要があります。アクセス権限は、Retrieve List of Calendars item の accessRole プロパティで参照することができます。詳細はこちらのドキュメントをご参考ください。

以下では、accessRole が writer または owner の場合は、カレンダー登録ができる Conditional を設定しています。

f:id:yksmt:20201214134728p:plain

カレンダーからイベントを削除(Calendar from Google をアクションに変更して利用)

では、次にカレンダーからイベントを削除してみます。API Connector で「Delete Calendar Event」を設定していきます。Zeroqode からコピーしてきたままの設定値では、アクションで削除を使えないので、Use as の部分を「Data」から「Action」に、Data type を「Json」から「Empty」に変更します。

必須パラメータである、calendar_id と event_id に値を入力します。イベントの削除を、イベントに紐づいているユーザーに通知する場合は、sendUpdates を使用します。ここでは「none」としていますが、すべてのゲストに通知するには「all」と指定します。パラメータの詳細は、こちらのドキュメントをご参考ください。

では、Initialize call ボタンをクリックして、イベントが削除されたか確認してみましょう。

f:id:yksmt:20201214110511p:plain

カレンダーからイベントを更新(Calendar from Google には実装されていないため追加で作成)

では最後に、Calendar from Google にはありませんが、イベントを更新するアクションも追加しておきたいと思います。設定値は以下の通りです。

項目
Name Update a Calendar Event
Use as Action
Data Type Json
HTTP request PUT
URL https://www.googleapis.com/calendar/v3/calendars/[calendar_id]/events/[event_id]
URL parameters Key calendar_id
URL parameters Key event_id
Headers Key sendUpdates:all

Body には以下を入力します。end と start は必須となり、summary 以外にも更新できるプロパティは複数あります。その他のプロパティについては、こちらのドキュメントをご参考ください。

{
  "end": {
    "dateTime": "<end_time>"
  },
  "start": {
    "dateTime": "<start_time>"
  },
"summary":"<summary>"
}

f:id:yksmt:20201214124522p:plain

では、パラメータの値を入力して、Initialize call ボタンをクリックし、イベントが更新されるか確認してみてくださいね。

Delete、Update についても Initialize が完了したら、ワークフローからも実行できます。アクションは Create でご紹介したように、Pulugins から選択することができます。

f:id:yksmt:20201214132143p:plain

まとめ

いかがでしたか?今回は、Bubbleと Googleカレンダーの連携についてご紹介しました。API Connector の設定は慣れるまで大変ですが、非常に魅力的な機能ですので、是非皆さんも色々試してみてくださいね! ここまで、お読みいただきありがとうございました。では、次回もどうぞお楽しみに~!