FusicAdvent Calendar 2023

Google FormsからNotionのデータベースに回答結果を保存する

Last updated at 2023-12-16Posted at 2023-12-16

Fusic Advent Calendar2023 16日担当の小林です。
（17日まであと20分ですがまだ16日ですのでユルシテ）

今回やるのはGoogle Formの回答結果をNotionのデータベースに書き込む方法です。

Google Formからスプレッドシートに保存されるからいいじゃん！と思いますが、例えば質問フォームなどを作って質問に対する回答のタスク管理もしたい場合、
スプレッドシートよりNotionのほうがBoardViewなどを使ってステータス管理しやすのでは？＆NotionAPIとGAS使ったことなかったので今回を機会に触ってみよう!回になります。

Notionの準備

1. Notionで回答結果を書き込むデータベースを用意

Notion使い慣れてるひとはサクッと作れると思いますがデータベースを作成します

作成後、ShareボタンからCopy Linkボタンを叩いて、どこかにメモとして貼り付けておきます

自分の場合こんな感じで取れました

# https://www.notion.so/{database_id}?v={view_id}&pvs={?}
https://www.notion.so/XXXXXXXXXXXXXXXXX?v=YYYYYYYYYYYYYYYYYYYYYY&pvs=Z

database_id をメモしておきます

2. NotionAPIに必要なインテグレーションの設定を行う

インテグレーション用のURLにアクセスします
- https://www.notion.com/my-integrations
インテグレーションを追加します
インテグレーションを作成すると シークレット が発行されるのでこれもメモしておきます
- ドキュメントにNOTION_API_KEYって書いてて、シークレットと同じなのか最初混乱しました（笑。これがNOTION_API_KEYになります
次にこのインテグレーションと1で作ったデータベースを紐づけます
- 先程作ったデータベースに移動し、設定ボタンの Connections から AddConnectionsを選択するとリストの中に先程作ったインテグレーションが表示されます。これを選択すると以下のようにConnectionに追加されます

3. API送信実行(curl)

これでNotion側の準備が終わったのでcurlして追加されるか試してみます
- シークレットとdatabase_idを貼り付けます

curl -X POST https://api.notion.com/v1/pages \
  -H 'Authorization: Bearer '"{シークレット}"'' \
  -H "Content-Type: application/json" \
  -H "Notion-Version: 2022-06-28" \
  --data '{
	  "parent": {
      "type": "database_id",
      "database_id": "{database_id}"
    },
	  "properties": {
      "Name": {
        "type": "title",
        "title": [
          {
            "type": "text",
            "text": {
              "content": "New Page Title"
            }
          }
        ]
      }
    }
  }'

これで成功すれば以下のように追加されます
databaseのカラムの型によってパラメタの記述方法が異なるのでそのあたりはドキュメントを参照してください
- ドキュメント
  - https://developers.notion.com/reference/database

Google Formの準備

1.Formの作成

Notion側は準備できたので次にGoogle Formsで新しいフォームを作ります
- とりあえずテキトーなフォームを作ります

2.GASの作成

Formで回答した際に、NotionAPIにリクエストをどうやって送ればいいの？と思って調べたらGAS(Google Apps Script)でスクリプトを書くことで出来ました。
- GASの作成は先程作ったGoogle Formsの右上の設定ボタンから表示されるスクリプトエディタを選択することで作成ページに飛べます
もうスクリプト書いてる状態ですが以下のようなGASエディタ画面が表示されます

コードの記述

手っ取り早く、実際に動いたコード貼っときます

function onFormSubmit(event) {
  // フォームの回答を取得
  let items = event.response.getItemResponses()
  let values = {}
  for (var i = 0; i < items.length; i++) {
    values[items[i].getItem().getTitle()] = items[i].getResponse()
  }

  // プロパティ取得
  const key = PropertiesService.getScriptProperties().getProperty('NOTION_API_KEY');
  const databaseId = PropertiesService.getScriptProperties().getProperty('NOTION_DATABASE_ID');

  // Notionへリクエスト送信
  UrlFetchApp.fetch(
    "https://api.notion.com/v1/pages",
    {
      "method" : "POST",
      'headers': {
        'Authorization': 'Bearer ' + key,
        "Content-Type" : "application/json",
        "Notion-Version" : "2022-06-28",
      },
      "payload" : JSON.stringify({
        "parent": {
          "type": "database_id",
          "database_id": databaseId
        },
        "properties": {
          "Name": {
            "type": "title",
            "title": [
              {
                "type": "text",
                "text": {
                  "content": values['Name']
                }
              }
            ]
          }
        }
      })
    }
  )
}