LoginSignup
3
4

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

Last updated at Posted at 2023-12-16

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

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

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

Notionの準備

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

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

スクリーンショット 2023-12-16 22.07.36.png

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

スクリーンショット 2023-12-16 22.12.41.png

  • 自分の場合こんな感じで取れました
# https://www.notion.so/{database_id}?v={view_id}&pvs={?}
https://www.notion.so/XXXXXXXXXXXXXXXXX?v=YYYYYYYYYYYYYYYYYYYYYY&pvs=Z
  • database_id をメモしておきます

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

  • インテグレーション用のURLにアクセスします

  • インテグレーションを追加します
    スクリーンショット 2023-12-16 22.16.26.png

  • インテグレーションを作成すると シークレット が発行されるのでこれもメモしておきます

    • ドキュメントにNOTION_API_KEYって書いてて、シークレットと同じなのか最初混乱しました(笑。これがNOTION_API_KEYになります
      スクリーンショット 2023-12-16 22.19.20.png
  • 次にこのインテグレーションと1で作ったデータベースを紐づけます

    • 先程作ったデータベースに移動し、設定ボタンの Connections から AddConnectionsを選択するとリストの中に先程作ったインテグレーションが表示されます。これを選択すると以下のようにConnectionに追加されます
      スクリーンショット 2023-12-16 20.35.59.png

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"
            }
          }
        ]
      }
    }
  }'
  • これで成功すれば以下のように追加されます
    スクリーンショット 2023-12-16 22.26.19.png

  • databaseのカラムの型によってパラメタの記述方法が異なるのでそのあたりはドキュメントを参照してください

Google Formの準備

1.Formの作成

  • Notion側は準備できたので次にGoogle Formsで新しいフォームを作ります
    • とりあえずテキトーなフォームを作ります
      スクリーンショット 2023-12-16 22.28.35.png

2.GASの作成

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

コードの記述

  • 手っ取り早く、実際に動いたコード貼っときます
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']
                }
              }
            ]
          }
        }
      })
    }
  )
}
  • コードの処理の大まかな内容はこの3つです
    • 回答結果を取得
    • プロパティ情報(シークレットとdatabase_id)を取得
    • NotionAPIで送信

プロパティ情報の設定

  • プロパティ情報はGASページの左側にある歯車ボタンから設定できます
  • 以下のスクリプトプロパティに設定することが出来るので、ここに値を保存しておきます。
    スクリーンショット 2023-12-16 21.53.43.png

トリガーの設定

  • 作ったコードを回答時に動かすにはトリガー設定をする必要があります
  • トリガー設定は左側のメニューにあるトリガーから設定できます
    スクリーンショット 2023-12-16 22.44.15.png
  • トリガーページを開いて右下にあるトリガー追加ボタンを押すと設定フォームが開きます
    スクリーンショット 2023-12-16 23.03.59.png
  • ここで イベントの種類を選択 をフォーム送信時にして、保存すれば完了です。

実行してみる

スクリーンショット 2023-12-16 23.05.42.png
スクリーンショット 2023-12-16 23.06.32.png

ヨシ!!!

というわけで、回答結果をNotionに飛ばすことが出来ました。

感想

GASが思ったより簡単に使えたのがびっくりしました。
@hkusabaが社内でGAS記事を書いてたのを見てたので使ってみたいなーと思ってたので今回触れてよかったです。
console.logとかも普通に出せるのでjavascript書ける人はすぐかける。

NotionAPIについては最初に書いた通りなのですが、GoogleFormじゃなくてWEBサイトを作ったときの質問フォーム送信先にNotionにすれば管理画面作成を節約できて、質問のタスク管理できるのでは?とか色々用途がありそうです。

ということで以上になります。
突貫で書いたのでなにか変な記述あったらコメントしてもらえば

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4