はじめに

hkob の雑記録の第87回目は、昨日公表された Webhook の状況を確認してみます。

インテグレーションの設定

テストのため、新しい webhook_test というインテグレーションを作成しました。今までの「設定」「基本情報」のほかに「Webhook」という欄が登場しています。早速サブスクリプションを作成してみます。

ボタンを押すと以下のような画面になりました。デフォルトのままだとコメントに権限をつかないので、警告が出ていますね。

設定に戻り、コメントの読み取りに権限をつけます。

再度、サブスクリプションを作成に戻ると警告はなくなっていました。

イベントは全部で17件あるようです。スクリーンショットで入りきらないので、テキストに起こします。

ページ (8件)
1. ページコンテンツを更新 (page.content_updated)
2. ページを作成 (page.created)
3. ページを削除 (page.deleted)
4. ページをロック (page.locked)
5. ページを移動 (page.moved)
6. ページのプロパティを更新 (page.properties_updated)
7. ページを復元 (page.undeleted)
8. ページをロック解除 (page.unlocked)
データベース (6件)
1. 更新されたデータベースコンテンツ (database.content_updated)
2. 作成されたデータベース (database.created)
3. 削除されたデータベース (database.deleted)
4. 移動されたデータベース (database.moved)
5. データベーススキーマを更新 (database.schema_updated)
6. データベースを復元 (database.undeleted)
コメント (3件)
1. 作成されたコメント (comment.created)
2. 削除されたコメント (comment.deleted)
3. 更新されたコメント (comment.updated)

とりあえず、受け側の URL がないと話にならないので、どんなデータが渡されるかを確認するエンドポイントを作成してみましょう。

Google Spreadsheet の作成

まず、GAS の受け口となる Spreadsheet を作ります。Webhook test としてみました。

しばらく使わないうちに Google Spreadsheet もアップデートされていてびっくりしました。とりあえず Apps Script を起動します。

まず、受け取ったものをシートに保存する関数を作ります。

中身はこんな感じです。writeSheet は data を最終行の一行下に追加するだけのものです。test 関数で test という文字列を書いてみます。

function writeSheet(data) {
  const sheet = SpreadsheetApp.getActiveSheet()
  const line = sheet.getLastRow()
  const range = sheet.getRange('A' + (line + 1));
  range.setValue(data)
}

function test() {
  writeSheet('test')
}

最初に実行するとスプレッドシートの書き込みに関する権限確認があります。ここはスクリーンショットを撮り忘れましたが、特に問題はないでしょう。実行すると test という文字列が記入されました。

サブスクリプションの確認

最初に Webhook のサブスクリプションを作成すると、Notion は Webhook URL に 1 回限りの POST リクエストを送信するそうです。この時送られるのが verification_token です。説明書きによると、このような形のトークンが作られるそうです。

{
  "verification_token": "secret_tMrlL1qK5vuQAh1b6cZGhFChZTSYJlce98V0pYn7yBl"
}

POST で送られたデータをそのまま Spreadsheet に書き込んでみましょう。

function doPost(e) {
  writeSheet(e.postData.getDataAsString())
  return ContentService.createTextOutput(JSON.stringify({status: 'success'}))
      .setMimeType(ContentService.MimeType.JSON)
}