1. ホーム /
  2. ノーコード /
  3. Bubble /
  4. 【中級者向け】Bubble × GoogleカレンダーのAPIまとめ
Bubble

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

  • LINEで送る
  • by NoCodeDB
GoogleカレンダーAPIまとめ

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

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

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

[box class=”box29″ title=”合わせて読みたい”]

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

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

[box class=”box29″ title=”合わせて読みたい”]

[/box]

 

カレンダーの作成

[timeline]

[tl label=’STEP.1′ title=’Googleの公式ドキュメントはこちらです。’]

[/tl]

[tl label=’STEP.2′ title=’API Connectorの設定は以下の通りです。’]

API設定1

カレンダー作成APIの設定

[codebox title=”Headers”]

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

[/codebox]

[codebox title=”Body”]

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

[/codebox]

[/tl]

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

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

[/tl]

[/timeline]

 

イベントの作成（終日）

[timeline]

[tl label=’STEP.1′ title=’Googleの公式ドキュメントはこちらです。’]

[/tl]

[tl label=’STEP.2′ title=’API Connectorの設定は以下の通りです。’]

API設定1

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

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

 

[codebox title=”URL parameters”]

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

[/codebox]
[codebox title=”Headers”]

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

[/codebox]
[codebox title=”Body”]

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

[/codebox]

[open title=’カレンダーのIDはどこで確認できる？’]

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

カレンダーIDを保存

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

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

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

[/open]

[/tl]

[tl label=’STEP.3′ title=’APIを実行することで、カレンダーに新規イベント（終日）が作成されます。’]

新規イベント（終日）

[/tl]

[/timeline]

イベントの作成（時刻指定）

[timeline]

[tl label=’STEP.1′ title=’Googleの公式ドキュメントはこちらです。’]

[/tl]

[tl label=’STEP.2′ title=’API Connectorの設定は以下の通りです。’]

API設定1

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

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

[codebox title=”URL parameters”]

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

[/codebox]
[codebox title=”Headers”]

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

[/codebox]

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

[codebox title=”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から作成されました"
}

[/codebox]

[open title=’カレンダーのIDはどこで確認できる？’]

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

カレンダーIDを保存

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

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

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

[/open]

[/tl]

[tl label=’STEP.3′ title=’APIを実行することで、カレンダーに新規イベント（時刻指定）が作成されます。’]

作成されたイベント（時間指定）

[/tl]

[/timeline]

 

繰り返しイベントの作成（終日）

[timeline]

[tl label=’STEP.1′ title=’Googleの公式ドキュメントはこちらです。’]

[/tl]

[tl label=’STEP.2′ title=’API Connectorの設定は以下の通りです。’]

API設定1

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

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

[codebox title=”URL parameters”]

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

[/codebox]
[codebox title=”Headers”]

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

[/codebox]

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

[codebox title=”Body”]

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

[/codebox]

[open title=’カレンダーのIDはどこで確認できる？’]

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

カレンダーIDを保存

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

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

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

[/open]

[/tl]

[tl label=’STEP.3′ title=’APIを実行することで、カレンダーに繰り返しのイベント（終日）が新規作成されます。’]

作成された繰り返しイベント（終日）

[/tl]

[/timeline]

 

繰り返しイベントの作成（時刻指定）

[timeline]

[tl label=’STEP.1′ title=’Googleの公式ドキュメントはこちらです。’]

[/tl]

[tl label=’STEP.2′ title=’API Connectorの設定は以下の通りです。’]

API設定1

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

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

[codebox title=”URL parameters”]

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

[/codebox]
[codebox title=”Headers”]

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

[/codebox]

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

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

[codebox title=”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から作成されました"
}

[/codebox]

[open title=’カレンダーのIDはどこで確認できる？’]

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

カレンダーIDを保存

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

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

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

[/open]

[/tl]

[tl label=’STEP.3′ title=’APIを実行することで、カレンダーに繰り返しのイベント（時刻指定）が新規作成されます。’]

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

[/tl]

[/timeline]

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

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

  • LINEで送る