みやもとメモ

「Notion」「Google Apps Script」「ブログカスタマイズ」などについて書いていきます。
目次
目次
トップ > GAS（Google Apps Script） > 【GAS】Notionページを作成し、ブロックも作成する（大見出し/コールアウト/箇条書き）

【GAS】Notionページを作成し、ブロックも作成する（大見出し/コールアウト/箇条書き）

GAS（Google Apps Script） GAS（Google Apps Script）-Notion

この記事をシェアする

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

以前もGASに関する記事を書いています（以下リンク）。

miya-moto-memo.hatenablog.com

上記の記事で、GASでNotionにタスク自動登録してLINE通知する対応をしました。
そして今回、登録したタスクのブロック部分も自動作成してみます。

Notion APIではタスクの登録時に、中身（ブロック）も作成できるようです。
今回は、登録したタスクに対して「大見出し」「コールアウト」「箇条書き」のブロックを作成してみます。

それでは本題へ。

やりたいこと

記事の冒頭でも触れましたが、以下記事への追加対応となります。

miya-moto-memo.hatenablog.com

上記の記事で、GASでNotionにタスクを自動登録しています。
自動登録されたタスクが以下です。

プロパティが指定した通りに登録されています。
ただ、タスクの中身は空です。

GASでNotionにタスクを自動登録（タスクの中身は空）

今回の対応で、タスクの中にブロックを作成します。
「大見出し」「コールアウト」「箇条書き」のブロックを作成してみます。

タスクの中にブロックを作成したい

プログラム

プログラムは以下の通りです。

// Notionインテグレーションキー
const NOTION_API_KEY = PropertiesService.getScriptProperties().getProperty('NOTION_API_KEY');
// 日記NotionのデータベースID
const DATABASE_ID = PropertiesService.getScriptProperties().getProperty('DATABASE_ID');
// LINE Notify トークン
const LINE_NOTIFY_TOKEN = PropertiesService.getScriptProperties().getProperty('LINE_NOTIFY_TOKEN');

/**
 * メイン処理
 */
function main() {
  // Notionにデータ登録
  const createdNotionData = createNotionData();
  // LINE通知
  notifyLine(createdNotionData);
}

/**
 * Notionにデータ登録
 */
function createNotionData() {
  const url = 'https://api.notion.com/v1/pages';
  return JSON.parse(UrlFetchApp.fetch(url, composeFetchParam()));
}

/**
 * データ登録に必要なパラメータを組み立てる
 */
function composeFetchParam() {
  const payload = {
    'parent': {'database_id': DATABASE_ID},
    'properties': properties, // プロパティ
    'children': blocks // ブロック ★追加
  };

  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;
}

/**
 * データ登録時のプロパティ
 */
const properties = {
  'タイトル': {
    'title': [{
      'text': {
        'content': getCurrentDate().replaceAll('-', '/')
      }
    }]
  },
  '日付': {
    'date': {
      'start': getCurrentDate()
    }
  },
  'ステータス': {
    'status': {
      'name': '未着手'
    }
  },
};

/**
 * ★追加
 * データ登録時のブロック
 */
const blocks = [
  // 大見出し
  {
    'object': 'block',
    'type': 'heading_1',
    'heading_1': {
      'rich_text': [{
        'type': 'text',
        'text': { 'content': '日記' }
      }]
    }
  },
  // コールアウト
  {
    'object': 'block',
    'type': 'callout',
    'callout': {
      'rich_text': [{
        'type': 'text',
        'text': { 'content': '3行ポジティブ日記' },
        'annotations': { 'bold': true }
      }],
      'icon': { 'emoji': '📝' },
      'color': 'pink_background',
      // コールアウトの子ブロック
      'children': [
        // 箇条書き
        {
          'object': 'block',
          'type': 'bulleted_list_item',
          'bulleted_list_item': {
            'rich_text': [{
              'type': 'text',
              'text': { 'content': '' }
            }]
          }
        }
      ]
    }
  }
]

/**
 * 日付をフォーマットする
 * ※dateプロパティにスラッシュ区切りを渡すとエラーになる
 */
function getCurrentDate() {
  const now = new Date();
  const year = now.getFullYear();
  const month = zeroPadding(now.getMonth()+1);
  const date = zeroPadding(now.getDate());
  return year + '-' + month + '-' + date;
}

/**
 * ゼロ埋めする
 */
function zeroPadding(str) {
  return ('0' + str).slice(-2);
}

/**
 * LINE通知する
 */
function notifyLine(createdNotionData) {
  const url = 'https://notify-api.line.me/api/notify';
  const params = {
    'method': 'post',
    'headers': {'Authorization': 'Bearer ' + LINE_NOTIFY_TOKEN},
    'payload': {'message': createLineMessage(createdNotionData)},
  };
  // メッセージ通知
  UrlFetchApp.fetch(url, params);
}

/**
 * LINEのメッセージ内容を作成
 */
function createLineMessage(createdNotionData) {
  let msg = [];
  msg.push('今日の日記を書いてください');
  msg.push(createdNotionData.url);
  return msg.join('\n');
}

前回の記事との差分を分かりやすくするため、プログラムコメントに「★追加」と書いています。

プログラム実行

上記のプログラムを実行すると、日記Notionにタスクが登録されます。
そして登録されたタスクにブロックも作成されます。
※プログラムは「2024年6月12日」に実行しています。

プログラム実行
GASの実行でタスクが登録される
GASの実行でブロックが作成される

そしてLINEから通知が来ます。

LINEから通知が来る

「URL」をクリックすると対象の日記ページが開きます。
※以下の画像（右）はNotionアプリのページです。

「URL」クリックで日記ページが開く

タスクの中にブロックが作成されます（今回対応した内容）。
「大見出し」「コールアウト」「箇条書き」のブロックが作成されています。

プログラムのポイント

プログラムの中からポイントとなる部分をピックアップして説明していきます。

Create a page（ページ作成）

Notionデータベースにページを作成する「Create a page」のリファレンスは以下です。

「Create a page」に渡すパラメータとして"children”があります。
ここにブロックオブジェクトを指定します。

developers.notion.com

Block（ブロック）

ブロックオブジェクトのリファレンスは以下です。

developers.notion.com

ブロックは種類によって指定方法が異なります。
上記リンクに、各ブロックの指定方法が詳しく書かれています。

せっかくなので自分も、Notionの画像を交えつつ、ブロックの指定例を何パターンか載せておきます。

大見出し（heading_1）

{
  'object': 'block',
  'type': 'heading_1',
  'heading_1': {
    'rich_text': [{
      'type': 'text',
      'text': { 'content': '日記' }
    }]
  }
}
大見出し（heading_1）

ちなみに見出しはChrome拡張機能「Stylus」でCSS適用しています。
記事にもしているので、こちらも良ければぜひ。
miya-moto-memo.hatenablog.com


コールアウト（Callout）

{
  'object': 'block',
  'type': 'callout',
  'callout': {
    'rich_text': [{
      'type': 'text',
      'text': { 'content': '3行ポジティブ日記' },
      'annotations': { 'bold': true }
    }],
    'icon': { 'emoji': '📝' },
    'color': 'pink_background',
}
コールアウト（Callout）

ちなみに「bold」を”true”にして太字設定にしています。
以下のリファレンスに太字の設定が載っていました。

developers.notion.com


箇条書き（Bulleted list item）

{
  'object': 'block',
  'type': 'bulleted_list_item',
  'bulleted_list_item': {
    'rich_text': [{
      'type': 'text',
      'text': { 'content': '' }
    }]
  }
}
箇条書き（Bulleted list item）

ちなみに「コールアウト」の子要素として「箇条書き」を設定しています。
これはコールアウトの設定内で“children”を指定し、その中で箇条書きを設定することで実現できるようです。

おわりに

ということで、「【GAS】Notionページを作成し、ブロックも作成する」に関してアレコレ書いてみました。

GASによるブロックの作成はなかなか細かい実装になりましたが、自動で作成できるのはありがたいなと。
しかもかなり具体的なところまで指定できるので、一度頑張って作ってしまえば色々助かりそうだなと思いました。

この記事が参考になれば幸いです。

関連記事

GAS（Google Apps Script）に関してはいくつか記事にしています。
気になる記事があればぜひ。

GASの活用事例


GASでNotionにタスクを自動登録してLINE通知する - 派生記事

#GAS #Google Apps Script #Notion #ページ #ブロック

miyamoto-blog 読者になる

広告を非表示にする
コメントを書く
TOPへ戻る HOMEへ