【中級者向け】Bubble × GoogleカレンダーのAPIまとめ

本記事では、GoogleカレンダーにAPIでアクセスするときの、BubbleのAPI Connectorプラグイン設定をまとめました。

例えば、Bubbleで開発されたスケジュールアプリと、Googleカレンダーを同期させるときに使用します。

ここで紹介するAPIの実行には、アプリユーザーからアクセストークンを取得する必要があります。トークンの取得に関しては以下の記事で解説しています。

合わせて読みたい

そもそもBubbleの使い方がわからないという方は、以下の記事を先にご覧になることをおすすめします。

Bubbleの登録から簡単な使い方について解説しています。

合わせて読みたい

 

カレンダーの作成

STEP.1
Googleの公式ドキュメントはこちらです。

STEP.2
API Connectorの設定は以下の通りです。

API設定1

カレンダー作成APIの設定

Headers

Authorization: "Bearer" + " "(半角スペース) + "カレンダーを作成したいアカウントのアクセストークン"
Body

{
"summary":"テストカレンダーを作成しました"
}

STEP.3
APIを実行することで、指定アカウントに新規カレンダーが作成されます。

新規カレンダーが作成されました

 

イベントの作成(終日)

STEP.1
Googleの公式ドキュメントはこちらです。

STEP.2
API Connectorの設定は以下の通りです。

API設定1

終日イベント作成APIの設定1

終日イベント作成APIの設定2

 

URL parameters

calendarId: イベント作成先のカレンダーID
Headers

Authorization: "Bearer" + " "(半角スペース) + "カレンダーを作成したいアカウントのアクセストークン"
Body

{
"start": {
"date": "2022-6-14"
},
"end": {
"date": "2022-6-14"
},
"summary": "テストイベント",
"description": "このイベントはBubbleから作成されました"
}

1.APIでカレンダーを作成した場合、返されたカレンダーIDを保存しておけばOKです。

カレンダーIDを保存

2.Googleカレンダーから確認するには、カレンダーのメニューから「設定と共有」をクリックします。

カレンダーのメニューから設定を開く

開かれた画面をスクロールすると、カレンダーIDが表示されます。

STEP.3
APIを実行することで、カレンダーに新規イベント(終日)が作成されます。

新規イベント(終日)

イベントの作成(時刻指定)

STEP.1
Googleの公式ドキュメントはこちらです。

STEP.2
API Connectorの設定は以下の通りです。

API設定1

時刻指定イベントの作成API設定1

時刻指定イベントの作成API設定2

URL parameters

calendarId: イベント作成先のカレンダーID
Headers

Authorization: "Bearer" + " "(半角スペース) + "カレンダーを作成したいアカウントのアクセストークン"

イベントの時刻を指定する場合は、時間の範囲とタイムゾーンを指定します。

Body

{
  "start": {
    "dateTime": "2022-4-25T09:00:00-07:00",
    "timeZone": "Asia/Tokyo"
  },
  "end": {
    "dateTime": "2022-4-25T17:00:00-07:00",
    "timeZone": "Asia/Tokyo"
  },
  "summary": "テストイベント",
  "description": "このイベントはBubbleから作成されました"
}

1.APIでカレンダーを作成した場合、返されたカレンダーIDを保存しておけばOKです。

カレンダーIDを保存

2.Googleカレンダーから確認するには、カレンダーのメニューから「設定と共有」をクリックします。

カレンダーのメニューから設定を開く

開かれた画面をスクロールすると、カレンダーIDが表示されます。

STEP.3
APIを実行することで、カレンダーに新規イベント(時刻指定)が作成されます。

作成されたイベント(時間指定)

 

繰り返しイベントの作成(終日)

STEP.1
Googleの公式ドキュメントはこちらです。

STEP.2
API Connectorの設定は以下の通りです。

API設定1

繰り返しイベント(終日)作成APIの設定1

繰り返しイベント(終日)作成APIの設定2

URL parameters

calendarId: イベント作成先のカレンダーID
Headers

Authorization: "Bearer" + " "(半角スペース) + "カレンダーを作成したいアカウントのアクセストークン"

繰り返しイベントを作成する場合は、”recurrence”で繰り返しの「頻度」と「いつまで繰り返すか」を指定します。毎日は”DAILY”、毎週は”WEEKLY”、毎月は”MONTHLY”、毎年は”YEARLY”を設定します。

Body

{
  "start": {
    "date": "2022-4-28"
  },
  "end": {
    "date": "2022-4-28"
  },
  "recurrence": [
    "RRULE:FREQ=WEEKLY;UNTIL=20220701T170000Z"
  ],
  "summary": "テストイベント",
  "description": "このイベントはBubbleから作成されました"
}

1.APIでカレンダーを作成した場合、返されたカレンダーIDを保存しておけばOKです。

カレンダーIDを保存

2.Googleカレンダーから確認するには、カレンダーのメニューから「設定と共有」をクリックします。

カレンダーのメニューから設定を開く

開かれた画面をスクロールすると、カレンダーIDが表示されます。

STEP.3
APIを実行することで、カレンダーに繰り返しのイベント(終日)が新規作成されます。

作成された繰り返しイベント(終日)

 

繰り返しイベントの作成(時刻指定)

STEP.1
Googleの公式ドキュメントはこちらです。

STEP.2
API Connectorの設定は以下の通りです。

API設定1

繰り替えしイベント(時刻指定)作成APIの設定1

繰り替えしイベント(時刻指定)作成APIの設定2

URL parameters

calendarId: イベント作成先のカレンダーID
Headers

Authorization: "Bearer" + " "(半角スペース) + "カレンダーを作成したいアカウントのアクセストークン"

イベントの時刻を指定する場合は、時間の範囲とタイムゾーンを指定します。

また、繰り返しは、”recurrence”で繰り返しの「頻度」と「いつまで繰り返すか」を指定します。毎日は”DAILY”、毎週は”WEEKLY”、毎月は”MONTHLY”、毎年は”YEARLY”を設定します。

Body

{
  "start": {
    "dateTime": "2022-06-15T06:45:57.145Z",
    "timeZone": "Asia/Tokyo"
  },
  "end": {
    "dateTime": "2022-06-15T07:45:57.145Z",
    "timeZone": "Asia/Tokyo"
  },
  "recurrence": [
    "RRULE:FREQ=DAILY;UNTIL=20220621T170000Z"
  ],
  "summary": "テストイベント",
  "description": "このイベントはBubbleから作成されました"
}

1.APIでカレンダーを作成した場合、返されたカレンダーIDを保存しておけばOKです。

カレンダーIDを保存

2.Googleカレンダーから確認するには、カレンダーのメニューから「設定と共有」をクリックします。

カレンダーのメニューから設定を開く

開かれた画面をスクロールすると、カレンダーIDが表示されます。

STEP.3
APIを実行することで、カレンダーに繰り返しのイベント(時刻指定)が新規作成されます。

作成された繰り返しイベント(時刻指定)

まだまだGoogle APIはありますが、キリがないので一旦ここまでにします。

BubbleはAPIが使えると可能性がぐっと広がります。何となくルールが分かってきたら、ここに載っていないAPIリクエストにも挑戦してみましょう。