GASでNotionにデータ登録するWebページを作ってみる

今回はGAS（Google Apps Script）に関して書いていきます。

以前、Notion活用事例として思いつきの雑多なメモを管理する内容を記事にしました（以下リンク）。

miya-moto-memo.hatenablog.com

上記の記事で、メモを登録する導線としてNotionアプリのAndroid ウィジェットを紹介しました。
Android ウィジェットでも機能的には十分だったのですが、せっかくなので登録導線を自作してみたいなと。

GASでWebページを作れる
GASでNotion連携できる

上記2点を駆使して、試しに作ってみることにしました。

今回の記事では、その辺りに関して書いていきます。

GASとは？
完成図デモ
プログラム事前準備
プログラム
スマホにショートカットを配置
おわりに
関連記事

GASとは？

まずはGASとは？に関して書いておきます。

Google Apps Script（GAS）は、ひとことで言えばGoogleが提供する各種サービスの自動化／連携を行うためのローコード開発（※1）ツールです。GASを使うと、Gmailやカレンダー、Google スプレッドシート、Googleドライブなど、Googleが提供する様々なサービス上で処理を自動化したり、複数のサービスを連携させたりできます。
※1：ローコード開発：可能な限りソースコードを書かずにアプリケーションを開発する手法
出典：【入門】GASとは？できること＆活用法を解説（サンプルコード付き） - マーケティングオートメーションツール SATORI

satori.marketing

ついでに、今回の内容に関連しそうな記事をいくつかリンクしておきます。
miya-moto-memo.hatenablog.commiya-moto-memo.hatenablog.commiya-moto-memo.hatenablog.com

完成図デモ

まずは手っ取り早く、完成図のデモをします。

GASで実装したWebページを使って、Notionデータベースにメモを登録します。

STEP

（スマホにて）GASで実装したWebページを開く

STEP

「タイトル」と「メモの詳細」を入力し、登録ボタンをタップ

STEP

完了メッセージが表示される

STEP

Notionデータベースに入力したデータが登録される

Android ウィジェットと同様、メモを入力するまでの手順が少ないことがポイントです。

プログラム事前準備

上記のデモで紹介したWebページのプログラムを載せていきます。
ただその前に、GASでNotionのデータを操作するためには事前準備が必要です。

事前準備の手順は別記事にて詳しく書いています。
以下あたりの記事を見てもらえればと思います。
miya-moto-memo.hatenablog.commiya-moto-memo.hatenablog.com

プログラム

準備が整ったところで、プログラムです。
※事前準備が完了している前提です。

プログラムは以下、3ファイルです。

コード.gs
index.html
css.html

コード.gs

// Notionインテグレーションキー
const NOTION_API_KEY = PropertiesService.getScriptProperties().getProperty('NOTION_API_KEY');
// 雑多メモNotionのデータベースID
const DATABASE_ID = PropertiesService.getScriptProperties().getProperty('DATABASE_ID');

/**
 * GET処理
 */
function doGet() {
  // 表示処理
  return index();
}

/**
 * POST処理
 */
function doPost(e) {
  // 作成処理
  create(e.parameter);
  // 完了メッセージ
  const msg = "登録が完了しました";
  // 表示処理
  return index(msg);
}

/**
 * インクルード処理
 */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

/**
 * 表示処理
 */
function index(msg = null) {
  // HTML側に渡す変数をセット
  const template = HtmlService.createTemplateFromFile('index');
  template.deployURL = ScriptApp.getService().getUrl();
  template.msg = msg;
  // タイトルやmetaタグをセット
  const htmlOutput = template.evaluate();
  htmlOutput.setTitle('雑多メモ');
  htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  return htmlOutput;
}

/**
 * 作成処理
 */
function create(param) {
  // Notionページ登録URL
  const url = 'https://api.notion.com/v1/pages';
  // Notionページ登録実行
  UrlFetchApp.fetch(url, composeFetchParam(param));
}

/**
 * データ登録に必要なパラメータを組み立てる
 */
function composeFetchParam(param) {
  const payload = {
    'parent': {'database_id': DATABASE_ID},
    'properties': composeProperties(param),
    'children': composeBlocks(param)
  };

  const params = {
    'method': 'POST',
    'headers': {
      'Notion-Version': '2022-06-28',
      'Authorization': 'Bearer ' + NOTION_API_KEY,
      'Content-Type': 'application/json'
    },
    'payload': JSON.stringify(payload),
  };
  
  return params;
}

/**
 * データ登録時のプロパティ
 */
function composeProperties(param) {
  return {
    'タイトル': {
      'title': [{
        'text': {
          'content': param.title
        }
      }]
    }
  };
}

/**
 * データ登録時のブロック
 */
function composeBlocks(param) {
  return [{
    "type": "paragraph",
    "paragraph": {
      "rich_text": [{
        "type": "text",
        "text": { "content": param.memo }
      }]
    }
  }]
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('css'); ?>
  </head>
  <body>
    <div class="header">雑多メモ</div>
    <div class="container">
      <? if (msg) { ?>
        <div class="msg-area"><?= msg ?></div>
      <? } ?>
      <form method="post" action="<?= deployURL ?>">
        <input type="text" name="title" placeholder="タイトルを入力" />
        <textarea name="memo" rows="10" placeholder="メモの詳細を入力"></textarea>
        <button type="submit">登録</button>
      </form>
    </div>
  </body>
</html>

css.html

<style>
  .header {
    padding: 10px;
    text-align: center;
    background-color: #111;
    color: #fff;
    font-weight: bold;
  }
  .container {
    width: 400px;
    margin: 0 auto;
  }
  .msg-area {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
    background-color: #fee;
    border-radius: 5px;
  }
  input[type="text"] {
    font-family: inherit;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    line-height: 1;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #313131;
  }
  textarea {
    font-family: inherit;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    line-height: 1.5;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #313131;
  }
  button {
    width: 100%;
    padding: 10px;
    color: #fff;
    background-color: #6C6C6C;
    border: 1px solid #313131;
    border-radius: 5px;
  }
  button:hover {
    background-color: #9C9C9C;
    transition: 0.3s;
    cursor: pointer;
  }
</style>