【Notion API】Google Apps Scriptでリッチテキストの編集を自動化する

はじまり#

リサちゃん

うーん、Notionへの投稿は自動化できたけど・・・

135ml

この文章の編集も自動化したくなってくるな。

ページの中身の編集も自動化しよう！#

以前に下記の記事で、NotionのAPIを使ってNotionのページのプロパティや中身を取得する方法を照会しました。

エンドルフィン風呂に浸かる。

【Notion API】Google Apps Scriptでデータベースからページの中身を取得する

NotionのDatabase API、Page API、Block APIでページの内容を取得する方法を紹介します。ベースはJavaScriptなのでNode.js、Deno、Bunでも流用できるかと。

www.endorphinbath.com

そこで今回は、Google Apps Script（以降、GAS）を使って、Notionのページの中身を更新する方法を紹介していきます。そこで今回は主に、リッチテキストの更新の仕方を中心に見ていきましょう。

GASは、JavaScriptベースのプログラミング言語なので、今回のコードの殆どの部分は、Node.js、Deno、Bun等のランタイムでも利用できるかと思います。

今回使うNotion APIエンドポイント#

今回使うNotion APIのエンドポイントは、Create a pageエンドポイントと、Append block childrenエンドポイントです。一定の頻度でNotionのページを自動で投稿したい場合にCreate a pageエンドポイント、決まったページを定期的に更新したい場合にAppend block childrenエンドポイントが役に立つことでしょう。

Create a pageエンドポイント

Notion Docs

Create a page - Notion Docs

Use this API to create a new page as a child of an existing page or data source.

developers.notion.com

Append block childrenエンドポイント

Notion Docs

Append block children - Notion Docs

Creates and appends new children blocks to the parent block_id specified. Blocks can be parented by other blocks, pages, or databases.

developers.notion.com

Notionのリッチテキストで編集できる事柄#

Notionのページを新規作成および更新する時に、リッチテキストを更新したいケースが出てくると思います。

そこで、Notion上で表示するリッチテキストを、APIで更新するためにこの公式ドキュメントが役に立ちます。

Notion Docs

Rich text - Notion Docs

Notion uses rich text to allow users to customize their content. Rich text refers to a type of document where content can be styled and formatted in a variety of customizable ways. This includes styling decisions, such as the use of italics, font size, and font color, as well as formatting, such as the use of hyperlinks or code blocks.

developers.notion.com

リッチテキストで編集できる事柄は、以下のとおりです。

Property	Type	Description
bold	boolean	太字にするかどうか。
italic	boolean	イタリック体にするかどうか。
strikethrough	boolean	打ち消し線を付けるかどうか。
underline	boolean	下線を入れるかどうか。
code	boolean	コードスタイルにするかどうか。
color	string (enum)	色を塗りたければ、塗る色を決める。
mention	string (enum) or object	メンションする。
Equation	string	LaTeXで数式を記述する。
Linked text	object	テキストにリンクを貼れる。

bold（太字）#

太字にするかどうかを制御します。boolean型なので、true / falseで設定します。

italic（イタリック体）#

イタリック体にするかどうかを制御します。boolean型なので、true / falseで設定します。

strikethrough（打ち消し線）#

打ち消し線を付けるかどうかを制御します。boolean型なので、true / falseで設定します。

underline（下線、アンダーライン）#

下線を入れるかどうかを制御します。boolean型なので、true / falseで設定します。

code（コードスタイル）#

コードスタイルにするかどうかを制御します。boolean型なので、true / falseで設定します。

color（色を塗る）#

そのブロックに色を塗りたければ、塗る色を決めることも出来ます。塗ることが出来る色の種類は以下の通りです。

"blue"
"blue_background"
"brown"
"brown_background"
"default"
"gray"
"gray_background"
"green"
"green_background"
"orange"
"orange_background"
"pink"
"pink_background"
"purple"
"purple_background"
"red"
"red_background”
"yellow"
"yellow_background"

mention（メンション）#

Notionのメンションは、色々なものにメンションすることが出来ます。

ユーザー、日時、他のページ、データベース、リンクを貼ってメンション、などなど・・・。

タスクを忘れないようにするための様々なメンションを利用できます。

Equation（数式）#

LaTex形式で、数式を記述することが出来ます。

Linked text（リンク付きテキスト）#

テキストにリンクを追加できます。追加したリンクおよびリンクされているテキストは後で編集できます。

APIでリッチテキストで編集するサンプル集#

基本的には前述のリファレンスを見ながらJSONを組み立てていけば作れると思います。

しかし、JSONを組み立てるのは煩雑な作業ですので、この記事でJSONのサンプルを紹介していきたいと思います。

日記のテンプレートを作る。#

それではまずは、日記のテンプレートを作ってみましょう。毎日、日記用のページがNotionに作成されるという想定のものになります。

ここで使うNotion APIのエンドポイントは、Create a pageエンドポイントで、指定したデータベースの中に新しいページを追加します。

そして、下記のコードのcreateDiaryPage()を実行すると日記用のページが出来上がります。（200行以上あります・・・。）

1
function getAccessToken() {
2
  const accessToken = PropertiesService.getScriptProperties().getProperty("NOTION_INTEGRATION_TOKEN");
3
  return accessToken;
4
}
5

6
function createPage(databaseId, properties, children) {
7
  const endpoint = "https://api.notion.com/v1/pages";
8
  const options = {
9
    "muteHttpExceptions": true,
10
    "method" : "post",
11
    "headers" : {
12
      "Authorization": "Bearer " + getAccessToken(),
13
      "Notion-Version": "2022-06-28",
14
      "Content-Type": "application/json",
15
    },
16
    "payload" : JSON.stringify({
17
      "parent": {"database_id": databaseId},
18
      "icon": {
19
        "type": "emoji",
20
        "emoji": "🥬"
21
      },
22
      "properties": properties,
23
      "children": children
24
    })
25
  };
26
  const response = UrlFetchApp.fetch(endpoint, options);
27
  return JSON.parse(response.getContentText());
28
}
29

30
function createChildrenForDiary(){
31
  return [
32
    {
33
      "heading_1": {
34
        "rich_text": [
35
          {
36
            "text": {
37
              "content": Utilities.formatDate(new Date(), "JST", "yyyy年MM月dd日の日記")
38
            }
39
          }
40
        ]
41
      }
42
    }, {
43
      "paragraph": {
44
        "rich_text": [
45
          {
46
            "text": {
47
              "content": "天気："
48
            }
49
          }, {
50
            "text": {
51
              "content": "晴れ、"
52
            }, "annotations": {
53
              "bold": true
54
              , "italic": false
55
              , "strikethrough": false
56
              , "underline": false
57
              , "code": false
58
              , "color": "orange_background"
59
            }
60
          }, {
61
            "text": {
62
              "content": "曇り、"
63
            }, "annotations": {
64
              "bold": true
65
              , "italic": false
66
              , "strikethrough": false
67
              , "underline": false
68
              , "code": false
69
              , "color": "gray_background"
70
            }
71
          }, {
72
            "text": {
73
              "content": "雨、"
74
            }, "annotations": {
75
              "bold": true
76
              , "italic": false
77
              , "strikethrough": false
78
              , "underline": false
79
              , "code": false
80
              , "color": "blue_background"
81
            }
82
          }
83
          , {
84
            "text": {
85
              "content": "雷"
86
            }, "annotations": {
87
              "bold": true
88
              , "italic": false
89
              , "strikethrough": false
90
              , "underline": false
91
              , "code": false
92
              , "color": "yellow_background"
93
            }
94
          }
95
        ]
96
      }
97
    }, {
98
      "heading_2": {
99
        "rich_text": [
100
          {
101
            "text": {
102
              "content": "今日の出来事"
103
            }, "annotations": {
104
              "bold": false
105
              , "italic": false
106
              , "strikethrough": false
107
              , "underline": false
108
              , "code": false
109
              , "color": "green_background"
110
            }
111
          }
112
        ]
113
      }
114
    }, {
115
      "bulleted_list_item": {
116
        "rich_text": [
117
          {
118
            "text": {
119
              "content": "出来事その1："
120
            }, "annotations": {
121
              "bold": false
122
              , "italic": true
123
              , "strikethrough": false
124
              , "underline": false
125
              , "code": false
126
              , "color": "default"
127
            }
128
          }
129
        ]
130
      }
131
    }, {
132
      "bulleted_list_item": {
133
        "rich_text": [
134
          {
135
            "text": {
136
              "content": "出来事その2："
137
            }, "annotations": {
138
              "bold": false
139
              , "italic": true
140
              , "strikethrough": false
141
              , "underline": false
142
              , "code": false
143
              , "color": "default"
144
            }
145
          }
146
        ]
147
      }
148
    }, {
149
      "heading_2": {
150
        "rich_text": [
151
          {
152
            "text": {
153
              "content": "感想"
154
            }, "annotations": {
155
              "bold": false
156
              , "italic": false
157
              , "strikethrough": false
158
              , "underline": false
159
              , "code": false
160
              , "color": "yellow_background"
161
            }
162
          }
163
        ]
164
      }
165
    }, {
166
      "paragraph": {
167
        "rich_text": [
168
          {
169
            "text": {
170
              "content": ""
171
            }
172
          }
173
        ]
174
      }
175
    }, {
176
      "heading_2": {
177
        "rich_text": [
178
          {
179
            "text": {
180
              "content": "明日の目標"
181
            }, "annotations": {
182
              "bold": false
183
              , "italic": false
184
              , "strikethrough": false
185
              , "underline": false
186
              , "code": false
187
              , "color": "pink_background"
188
            }
189
          }
190
        ]
191
      }
192
    }, {
193
      "paragraph": {
194
        "rich_text": [
195
          {
196
            "text": {
197
              "content": ""
198
            }
199
          }
200
        ]
201
      }
202
    }, {
203
      "heading_2": {
204
        "rich_text": [
205
          {
206
            "text": {
207
              "content": "過去の記録"
208
            }, "annotations": {
209
              "bold": false
210
              , "italic": false
211
              , "strikethrough": false
212
              , "underline": false
213
              , "code": false
214
              , "color": "default"
215
            }
216
          }
217
        ]
218
      }
219
    }
220
  ];
221
}
222

223
function createDiaryPage() {
224
  const databaseId = "your_database_id";
225
  const properties = {
226
    "Name": {
227
      "title": [
228
        {
229
          "text": {
230
            "content": "日記を作るためのテストですよ"
231
          }
232
        }
233
      ]
234
    },
235
    "Tags": {
236
      "multi_select": [
237
        {
238
          "name": "Diary"
239
        }
240
      ]
241
    }
242
  }
243
  const children = createChildrenForDiary();
244
  console.log(createPage(databaseId, properties, children));
245
}

createChildrenForDiary()でページの内容を取得して、createPage()でページを実際に作ります。実際に上記のコードが走ると、下記のような日記が作成されます。

たったこれだけのボリュームで200行以上必要なんですね・・・。でもJSONの形を崩したら訳が分からなくなりそう・・・。

ページの中に新しいブロックを追加する。#

次は、その作成したページに、新しいブロックを追加してみましょう。ここでは、Notion APIのAppend block childrenエンドポイントを使っていきます。

そして、下記のコードのappendChildrenOfDiary()を実行すると、先程の日記用のページにブロックが追加されます。（100行ぐらいです。）

1
function appendBlockChildren(blockId, children){
2
  const endpoint = "https://api.notion.com/v1/blocks/" + blockId + "/children";
3
  const options = {
4
    "muteHttpExceptions": true,
5
    "method" : "patch",
6
    "headers" : {
7
      "Authorization": "Bearer " + getAccessToken(),
8
      "Notion-Version": "2022-06-28",
9
      "Content-Type": "application/json",
10
    },
11
    "payload" : JSON.stringify({
12
      "children": children
13
    })
14
  };
15
  const response = UrlFetchApp.fetch(endpoint, options);
16
  return JSON.parse(response.getContentText());
17
}
18

19
function createChildrenToAppend(){
20
  return [
21
    {
22
      "bulleted_list_item": {
23
        "rich_text": [
24
          {
25
            "text": {
26
              "content": "シン・仮面ライダーを見た！"
27
            }, "annotations": {
28
              "bold": true
29
              , "italic": false
30
              , "strikethrough": false
31
              , "underline": false
32
              , "code": false
33
              , "color": "red_background"
34
            }
35
          }
36
        ]
37
      }
38
    }, {
39
      "bulleted_list_item": {
40
        "rich_text": [
41
          {
42
            "text": {
43
              "content": "シン・ゴジラは見られなかった・・・"
44
            }, "annotations": {
45
              "bold": false
46
              , "italic": false
47
              , "strikethrough": true
48
              , "underline": false
49
              , "code": false
50
              , "color": "gray"
51
            }
52
          }
53
        ]
54
      }
55
    }, {
56
      "bulleted_list_item": {
57
        "rich_text": [
58
          {
59
            "text": {
60
              "content": "いや、きっとシン・ゴジラを見てやるんだ・・・！"
61
            }, "annotations": {
62
              "bold": true
63
              , "italic": false
64
              , "strikethrough": false
65
              , "underline": true
66
              , "code": false
67
              , "color": "orange"
68
            }
69
          }
70
        ]
71
      }
72
    }
73
  ];
74
}
75

76
function appendChildrenOfDiary() {
77
  const blockId = "your_block_id";
78
  const children = createChildrenToAppend();
79
  console.log(appendBlockChildren(blockId, children));
80
}

上記のコードを実行すると、下記の画像のように「過去の記録」の下に新しいブロックが追加されました。ちなみに、「過去の記録」のブロックと、今追加したブロックは「親子」の関係ではありません。言うなれば「兄弟」の関係です。今追加したブロックの親は、ページになります。

ちなみに、childrenを持つことが出来ないブロックを指定すると、以下のようなエラーレスポンスが返ってきます。

1
{
2
  object: 'error',
3
  status: 400,
4
  code: 'validation_error',
5
  message: 'Block does not support children.',
6
  request_id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
7
}

ページの中に新しいブロックを、位置を指定して追加する。#

新しいブロックを、ページ内の任意の位置に指定して追加することも可能です。

そこで、ブロックIDを取得する必要があります。ブロックIDを取得するためには、目当てのブロックを選択した状態にすると、浮かび上がるナビゲーションメニューの右側に横3点リーダーが表示されますので、それをクリックして開かれたコンテキストメニュー内のCopy link to blockをクリックすると、目当てのブロックIDが含まれたURLを取得できます。

その取得したURLで、https://www.notion.so/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx?pvs=y#zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzの形式のものが取得できます。それぞれのプロパティは以下の情報を持っています。

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx・・・ページID
y・・・分かりません。（0～4まで調べてみましたが違いが分かりませんでした。）
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz・・・ブロックID

ページ内の任意の位置に、新しいブロックを追加する際には、同じくAppend block childrenエンドポイントを使って、afterプロパティを設定して追加します。

下記のコードのappendChildrenOfDiary()を実行すると日記用のページが出来上がります。（100行ぐらいです。）

1
function appendBlockChildren(blockId, children, brotherBlockId){
2
  const endpoint = "https://api.notion.com/v1/blocks/" + blockId + "/children";
3
  const options = {
4
    "muteHttpExceptions": true,
5
    "method" : "patch",
6
    "headers" : {
7
      "Authorization": "Bearer " + getAccessToken(),
8
      "Notion-Version": "2022-06-28",
9
      "Content-Type": "application/json",
10
    },
11
    "payload" : JSON.stringify({
12
      "children": children
13
      , "after": brotherBlockId
14
    })
15
  };
16
  const response = UrlFetchApp.fetch(endpoint, options);
17
  return JSON.parse(response.getContentText());
18
}
19

20
function createChildrenToAppend(){
21
  return [
22
    {
23
      "bulleted_list_item": {
24
        "rich_text": [
25
          {
26
            "text": {
27
              "content": "シン・仮面ライダーを見た！"
28
            }, "annotations": {
29
              "bold": true
30
              , "italic": false
31
              , "strikethrough": false
32
              , "underline": false
33
              , "code": false
34
              , "color": "red_background"
35
            }
36
          }
37
        ]
38
      }
39
    }, {
40
      "bulleted_list_item": {
41
        "rich_text": [
42
          {
43
            "text": {
44
              "content": "シン・ゴジラは見られなかった・・・"
45
            }, "annotations": {
46
              "bold": false
47
              , "italic": false
48
              , "strikethrough": true
49
              , "underline": false
50
              , "code": false
51
              , "color": "gray"
52
            }
53
          }
54
        ]
55
      }
56
    }, {
57
      "bulleted_list_item": {
58
        "rich_text": [
59
          {
60
            "text": {
61
              "content": "いや、きっとシン・ゴジラを見てやるんだ・・・！"
62
              , "link": {
63
                "url": "https://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%B3%E3%83%BB%E3%82%B4%E3%82%B8%E3%83%A9"
64
              }
65
            }, "annotations": {
66
              "bold": true
67
              , "italic": false
68
              , "strikethrough": false
69
              , "underline": true
70
              , "code": false
71
              , "color": "orange"
72
            }
73
          }, {
74
            "type": "mention"
75
            , "mention": {
76
              "type": "date"
77
              , "date": {
78
                "start": "2024-11-08"
79
                , "end": "2024-11-09"
80
              }
81
            }
82
            , "plain_text": "@2024-11-09"
83
          }
84
        ]
85
      }
86
    }
87
  ];
88
}
89

90
function appendChildrenOfDiary() {
91
  const blockId = "your_block_id";
92
  const children = createChildrenToAppend();
93
  const brotherId = "your_target_block_id";
94
  console.log(appendBlockChildren(blockId, children, brotherId));
95
}

先程とは違う場所にブロックが追加されていることが確認できます。

「明日の目標」として掲げたので、シン・ゴジラのWikipediaの記事のリンクを貼って、さらに日付のメンションまで追加しました。

まとめ#

今回は、NotionのAPIにリクエストして、ページ内のリッチテキストブロックを更新する方法を紹介しました。

以下、本記事のまとめです。

Notion APIでNotionのページを更新できる。
Notionのリッチテキストでは、以下の書式が利用できる。
- 太字
- イタリック体
- 打ち消し線
- 下線（アンダーライン）
- コードスタイル
- 文字の色、背景色の設定
- メンション
- 数式
- リンク付きテキスト
Create a pageエンドポイントで、毎日の日記のテンプレートを作れたりする。
Append block childrenエンドポイントで、ページの中に新しいブロックを追加できる。afterプロパティで追加する位置も設定できる。

Notionは、沢山のメモを管理することが出来るツールです。

その沢山のメモをするのにNotion APIを使って、楽にたっぷりメモをしていきましょう！

おしまい#

リサちゃん

Notionのページを自動で編集できるぞ～

135ml

いつものページを自動投稿できますね。

以上になります！

音楽

音楽

はじまり#

ページの中身の編集も自動化しよう！#

今回使うNotion APIエンドポイント#

Notionのリッチテキストで編集できる事柄#

bold（太字）#

italic（イタリック体）#

strikethrough（打ち消し線）#

underline（下線、アンダーライン）#

code（コードスタイル）#

color（色を塗る）#

mention（メンション）#

Equation（数式）#

Linked text（リンク付きテキスト）#

APIでリッチテキストで編集するサンプル集#

日記のテンプレートを作る。#

ページの中に新しいブロックを追加する。#

ページの中に新しいブロックを、位置を指定して追加する。#

まとめ#

おしまい#

記事を共有

音楽

目次