HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
執筆中ページ/
📕
「Notion API 活用術」テンプレート/
2️⃣
S10. ブロック要素
2️⃣

S10. ブロック要素

10.1 ブロック要素の分類

  • ブロック要素の関係性を示した図です。

10.2 Page object

10.2.1 単体ページ

1️⃣
単体ページサンプル
  • 上の単体ページの URL をここに貼っておきましょう。アプリで開いている人は、上のページを開いた後で、Cmd-L(macOS), Ctrl-L (Windows)でコピーできます。またブラウザで開いている人はアドレスバーから取得できます。今回のようにページが直接貼られている場合には、ブロックハンドル(6点のもの)のメニューで表示される「リンクをコピー」でも取得できます。
      • 📝
      ページの URL を記載 例: https://www.notion.so/hkob/3875908be34e485780fa0c716e15071d?pvs=4
⚠️
補足説明
最近、ページ URL を取得すると末尾に「?pvs=4」が付与されることが多くなりました。書籍では末尾の32桁の16進数という説明が記述されていますが、? 以降の文字列を抜いた末尾32文字と読み替えてください。NotionRubyMapping でも v0.7.6 にて、末尾の ? 以降の文字列を無視するようにしました。v0.7.5 以前の NotionRubyMapping を使っている場合には、gem を再インストールしてアップデートしてください。
または
  • 以下のメソッドで page を取得します。
  • Page object を JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。取得した結果の "id" 部が上のページ URL の赤字部分と一致していることが確認できます。
      • 📝
      JSON 部分をコピー&貼り付け

10.2.2 データベースに所属するページ

  • データベース内のページ(最初のページ)へのメンションリンクを用意しました。このリンクからページを開き、ページリンクを取得してください。
      • 最初のページ
      📝
      ページの URL を記載 例: https://www.notion.so/hkob/d7dbdd6684eb4f56b2a02e22beef15a2
  • 以下のメソッドで page を取得します。
  • Page object を JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。取得した結果の "id" 部が上のページ URL の赤字部分と一致していることが確認できます。
      • 📝
      JSON 部分をコピー&貼り付け

10.3 Database object

  • 今回取り扱うデータベースは以下のサンプルデータベースです。
      • サンプルデータベース
  • 直接 URL から取得することもできますが、先ほど取得したページの親としてデータベースを取得してみます。
  • Database object を JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。取得した結果の "id" 部が上のページ URL の赤字部分と一致していることが確認できます。
      • 📝
      JSON 部分をコピー&貼り付け

10.4 Block object

ブロック一覧
  • 今回取り扱うブロックは以下のページに置かれています。このページの URL を取得してください。
      • 📝
      ページの URL を記載 例: https://www.notion.so/hkob/be077324015d43a197dcf6be4781a39c
  • 以下のメソッドで page を取得します。
  • 以下のメソッドで block の配列を取得します。
  • ブロックは全部で 30 個あります。

10.4.1 Bookmark block object

最初の要素(blocks の0番目の要素)のブックマークブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.2 Breadcrumb block object

  • 1番目の要素の階層リンクブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.3 Bulleted list item block object

  • 2番目の要素の箇条書きリストブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.4 Callout block object

  • 3番目の要素のコールアウトブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.5 Code block object

  • 4番目の要素のコードブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.6 Column list block object/ Column block object

  • 5番目の要素の列リストブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
  • has_children があるので、Column list block は子要素を持ちます。次に Column list ブロックの最初の子要素の JSON を表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
  • この Column block も子要素を持ちます。さらに Column block の子要素を確認します。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
  • 以下の図はColumn list ブロックの関係を示したものです。

10.4.7 Divider block object

  • 6番目の要素の区切り線ブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.8 Embed block object

  • 7番目の要素の埋め込みブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.9 Equation block object

  • 8番目の要素の数式ブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.10 File block object

  • 9番目の要素のファイルブロックを JSON で表示してみます。

10.4.11 Heading block object

  • 10番目の要素の見出し1ブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
  • 11番目の要素の見出し2ブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
  • 12番目の要素の見出し3ブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.12 Image block object

  • 13番目の要素のイメージブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.13 Link to page block object

  • 14 番目の要素のページリンクブロック(ページ) を JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
  • 15 番目の要素のページリンクブロック(データベース) を JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.14 Numbered list item block object

  • 16番目の要素の番号付きリストブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.15 Paragraph block object

  • 17番目の要素のテキストブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.16 PDF block object

  • 18番目の要素の PDF ブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.17 Quote block object

  • 19番目の要素の引用ブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.18 Synced block object

  • 20番目の要素の同期ブロック(オリジナル)を JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
  • 21番目の要素の同期ブロック(コピー)を JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.19 Table block object / Table row block object

  • 22番目の要素のテーブルブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
Table block の子要素の最初の要素(0行目)である table_row を確認してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.20 Table of contents block object

  • 23番目の要素の目次ブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.21 Template block object

  • 24番目の要素のテンプレートブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
⚠️
補足説明1
2023年3月中旬にボタンがリリースされ、代わりにテンプレートブロックの作成ができなくなりました。また、Notion API でも 2023年3月27日にて作成機能が削除されました。2023年4月の段階では、まだボタンに対する Notion API の機能はリリースされていません。
Start building with the Notion API
Connect Notion pages and databases to the tools you use every day, creating powerful workflows.
Start building with the Notion API
https://developers.notion.com/reference/block#template
Start building with the Notion API

10.4.21(補足) To do block object

本の中で To do ブロックの記述を忘れてしまいました。今回、Template ボタンの中に To do ブロックを入れてあったので、このブロックの children を取得して確認してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.22 Toggle block object

  • 25番目の要素のトグルブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
 

10.4.23 Toggle heading block object

  • 26番目の要素のトグル見出し1ブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
  • 27番目の要素のトグル見出し2ブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
  • 28番目の要素のトグル見出し3ブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け

10.4.24 Video block object

  • 29番目の要素のビデオブロックを JSON で表示してみます。
  • 後で確認できるように出力された結果を保存しておきましょう。
      • 📝
      JSON 部分をコピー&貼り付け
🔹
この CHAPTER 内の SECTION
🔶
CHAPTER LIST
graph RL
  B2([Sub Block 1]) --> B1([Block 1])
  B1 --> P1[Page 1]
  P1 --> W{Workspace}
  P2[Page 2] --> P1
  D1(Database 1) --> W
  P3[Page 3] --> D2
  P4[Page 4] --> D2
  D2(Database 2) --> P1
  P5[Page 5] --> D1
  P6[Page 6] --> D1
ブロック要素の関係
このページの URL
gem update notion_ruby_mapping
Windows, rbenv 環境など
sudo gem update notion_ruby_mapping
Linux, macOS のシステム Ruby
page = Page.find "コピーしたリンクをここに貼り付け"
print JSON.pretty_generate(page.json)
File object
このページの URL
page = Page.find "コピーしたリンクをここに貼り付け"
print JSON.pretty_generate(page.json)
File object
db = page.parent
print JSON.pretty_generate(db.json)
File object
このページの URL
page = Page.find "コピーしたリンクをここに貼り付け"
blocks = page.children.to_a
blocks.count
print JSON.pretty_generate(blocks[0].json)
Bookmark block object
print JSON.pretty_generate(blocks[1].json)
Breadcrumb block object
print JSON.pretty_generate(blocks[2].json)
Bulleted list item block object
print JSON.pretty_generate(blocks[3].json)
Callout block object
print JSON.pretty_generate(blocks[4].json)
Code block object
print JSON.pretty_generate(blocks[5].json)
Column list block object
print JSON.pretty_generate(blocks[5].children.first.json)
Column block object
print JSON.pretty_generate(blocks[5].children.first.children.first.json)
Callout block object
graph RL
  A11([任意の block 1]) --> C1([Column block 1]) --> CL([Column list block])
  A12([任意の block 2]) --> C1
  A21([任意の block 3]) --> C2([Column block 2]) --> CL([Column list block])
  A22([任意の block 4]) --> C2
Column list block / Column block の関係
print JSON.pretty_generate(blocks[6].json)
Divider block object
print JSON.pretty_generate(blocks[7].json)
Embed block object
print JSON.pretty_generate(blocks[8].json)
Equation block object
print JSON.pretty_generate(blocks[9].json)
print JSON.pretty_generate(blocks[10].json)
Heading1 block object
print JSON.pretty_generate(blocks[11].json)
Heading2 block object
print JSON.pretty_generate(blocks[12].json)
Heading3 block object
print JSON.pretty_generate(blocks[13].json)
Image block object
Image block object
print JSON.pretty_generate(blocks[14].json)
Link to page block object
Link to page block object (Page)
print JSON.pretty_generate(blocks[15].json)
Link to page block object
Link to page block object (Database)
print JSON.pretty_generate(blocks[16].json)
Numbered list item block object
Numbered list item block object
print JSON.pretty_generate(blocks[17].json)
Paragraph block object
Paragraph block object
print JSON.pretty_generate(blocks[18].json)
PDF block object
PDF block object
print JSON.pretty_generate(blocks[19].json)
Quote block object
Quote block object
print JSON.pretty_generate(blocks[20].json)
Synced block object (original)
Synced block object (original)
print JSON.pretty_generate(blocks[21].json)
Synced block object (copy)
Synced block object (copy)
print JSON.pretty_generate(blocks[22].json)
Table block object
Table block object
print JSON.pretty_generate(blocks[22].children.first.json)
Table row block object
Table block object
graph RL
  C00[[Cell 00]] --> TR0([Table row 0]) --> T([Table])
  C01[[Cell 01]] --> TR0
  C10[[Cell 00]] --> TR1([Table row 1]) --> T
  C11[[Cell 01]] --> TR1
Table block / Table row block / Cell の関係
print JSON.pretty_generate(blocks[23].json)
Table of contents block object
Table block object
print JSON.pretty_generate(blocks[24].json)
Template block object
Template block object
print JSON.pretty_generate(blocks[24].children.first.json)
To do block object
To do block object
print JSON.pretty_generate(blocks[25].json)
Toggle block object
Toggle block object
print JSON.pretty_generate(blocks[26].json)
Toggle heading 1 block object
Toggle heading 1 block object
print JSON.pretty_generate(blocks[27].json)
Toggle heading 2 block object
Toggle heading 2 block object
print JSON.pretty_generate(blocks[28].json)
Toggle heading 1 block object
Toggle heading 3 block object
print JSON.pretty_generate(blocks[29].json)
Video block object
Video block object