Notion DataBaseのプロパティを元にGASでGoogle Formを組み立ててみた

Google Formを汎用的に手軽に作れないかと考え、Notion DataBaseを元に作成してみました。あくまでもシンプルなフォーム限定となります。
2022.11.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Google フォームの編集がやや面倒になり、もうちょっと楽できないかなと考えていました。ふとNotionのDataBaseにおける各種プロパティがフォームと似たもの多めだと気が付き、DataBaseを元にフォームを作成してみることにしました。

DataBaseの設計

テキスト関係であれば特になんでも構いません。関数やリレーションに関するフィールドは使い物にならないはずです。

GAS上でDataBaseを読み込む

多く見受けられるサンプルコードと特に変わった場所はないはずです。

let pageId = "XXXXXXXXXXXXXXXXXXX"

const token = 'secret_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx'

function getDatabaseStatus() {
  var data = sendRequest('https://api.notion.com/v1/databases/' + pageId, 'GET')
  Logger.log(data)
}

function sendRequest(url, method, data=null) {
  let headers = {
    'content-type' : 'application/json',
    'Authorization': 'Bearer ' + token,
    'Notion-Version': '2022-06-28',
    'accept': 'application/json'
  };
  var options ={
    'method': method,
    'headers': headers,
    "muteHttpExceptions" : true,
  }
  if (data) {
    options['payload'] = JSON.stringify(data)
  }

  let notion_data = UrlFetchApp.fetch(url, options);

  notion_data = JSON.parse(notion_data);
  return notion_data;
}

DataBaseプロパティを元にフォームを組み立てる

即興でやったため、getDataBaseStatusに混ぜました。連想配列の入れ子になっているため、Loggerで確認しながら組むほうが無難です。

function getDatabaseStatus() {
  var data = sendRequest('https://api.notion.com/v1/databases/' + pageId, 'GET')
  Logger.log(data)
  var form = FormApp.create("Input Form")
  Object.keys(data).forEach( function(key) {
    Logger.log(key)
    if (key == 'properties') {
      Logger.log(data[key])
      Object.keys(data[key]).forEach( function(field) {
        Logger.log(field)
        if (data[key][field]['type'] == 'title' || data[key][field]['type'] == 'url') {
          form.addTextItem().setTitle(data[key]['name'])
        } else if (data[key][field]['type'] == 'rich_text') {
          form.addParagraphTextItem().setTitle(data[key]['name'])
        } else if (data[key][field]['type'] == 'multi_select') {
          var values = [];
          data[key][field]['multi_select']['options'].forEach(function(option) {
            values.push(option['name'])
          })
          form.addCheckboxItem().setTitle(data[key]['name']).setChoiceValues(values)
        }
      })
    }
  })
  Logger.log(form.getEditUrl())
}

実行結果は以下の通り。今回はDataBaseのプロパティで入力できる値を全て許容しましたが、値の絞り込み済みレコードを幾つか用意し、Queryにて指定したレコードを元に値を変えたフォームを作成することも可能です。

問題点は今回のコードでは生成するフォームIDを一切指定していないので、毎回新しいフォームが作成されるところでしょうか。

あとがき

とりあえずざっくりとやってみました。フォームから送信した内容をDBに取り込むという派生もありますが、今回はまずはスプレッドシートへの入力としておきます。