S10. ブロック要素

10.1 ブロック要素の分類

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

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

10.2 Page object

10.2.1 単体ページ

• 上の単体ページの URL をここに貼っておきましょう。アプリで開いている人は、上のページを開いた後で、Cmd-L(macOS), Ctrl-L (Windows)でコピーできます。またブラウザで開いている人はアドレスバーから取得できます。今回のようにページが直接貼られている場合には、ブロックハンドル(6点のもの)のメニューで表示される「リンクをコピー」でも取得できます。
📝

ページの URL を記載 例: https://www.notion.so/hkob/3875908be34e485780fa0c716e15071d?pvs=4

gem update notion_ruby_mapping

sudo gem update notion_ruby_mapping

• 以下のメソッドで page を取得します。

page = Page.find "コピーしたリンクをここに貼り付け"

• Page object を JSON で表示してみます。

print JSON.pretty_generate(page.json)

• 後で確認できるように出力された結果を保存しておきましょう。取得した結果の "id" 部が上のページ URL の赤字部分と一致していることが確認できます。
📝

JSON 部分をコピー&貼り付け

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

• データベース内のページ(最初のページ)へのメンションリンクを用意しました。このリンクからページを開き、ページリンクを取得してください。
最初のページ
📝

ページの URL を記載 例: https://www.notion.so/hkob/d7dbdd6684eb4f56b2a02e22beef15a2

• 以下のメソッドで page を取得します。

page = Page.find "コピーしたリンクをここに貼り付け"

• Page object を JSON で表示してみます。

print JSON.pretty_generate(page.json)

• 後で確認できるように出力された結果を保存しておきましょう。取得した結果の "id" 部が上のページ URL の赤字部分と一致していることが確認できます。
📝

JSON 部分をコピー&貼り付け

10.3 Database object

• 今回取り扱うデータベースは以下のサンプルデータベースです。
サンプルデータベース

• 直接 URL から取得することもできますが、先ほど取得したページの親としてデータベースを取得してみます。

db = page.parent

• Database object を JSON で表示してみます。

print JSON.pretty_generate(db.json)

• 後で確認できるように出力された結果を保存しておきましょう。取得した結果の "id" 部が上のページ URL の赤字部分と一致していることが確認できます。
📝

JSON 部分をコピー&貼り付け

10.4 Block object

• 今回取り扱うブロックは以下のページに置かれています。このページの URL を取得してください。
📝

ページの URL を記載 例: https://www.notion.so/hkob/be077324015d43a197dcf6be4781a39c

• 以下のメソッドで page を取得します。

page = Page.find "コピーしたリンクをここに貼り付け"

• 以下のメソッドで block の配列を取得します。

blocks = page.children.to_a

• ブロックは全部で 30 個あります。

blocks.count

10.4.1 Bookmark block object

print JSON.pretty_generate(blocks[0].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.2 Breadcrumb block object

• 1番目の要素の階層リンクブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[1].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.3 Bulleted list item block object

• 2番目の要素の箇条書きリストブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[2].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.4 Callout block object

• 3番目の要素のコールアウトブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[3].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.5 Code block object

• 4番目の要素のコードブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[4].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.6 Column list block object/ Column block object

• 5番目の要素の列リストブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[5].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

• has_children があるので、Column list block は子要素を持ちます。次に Column list ブロックの最初の子要素の JSON を表示してみます。

print JSON.pretty_generate(blocks[5].children.first.json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

• この Column block も子要素を持ちます。さらに Column block の子要素を確認します。

print JSON.pretty_generate(blocks[5].children.first.children.first.json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

• 以下の図はColumn list ブロックの関係を示したものです。

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

10.4.7 Divider block object

• 6番目の要素の区切り線ブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[6].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.8 Embed block object

• 7番目の要素の埋め込みブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[7].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.9 Equation block object

• 8番目の要素の数式ブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[8].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.10 File block object

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

print JSON.pretty_generate(blocks[9].json)

10.4.11 Heading block object

• 10番目の要素の見出し1ブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[10].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

• 11番目の要素の見出し2ブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[11].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

• 12番目の要素の見出し3ブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[12].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.12 Image block object

• 13番目の要素のイメージブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[13].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.13 Link to page block object

• 14 番目の要素のページリンクブロック(ページ) を JSON で表示してみます。

print JSON.pretty_generate(blocks[14].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

• 15 番目の要素のページリンクブロック(データベース) を JSON で表示してみます。

print JSON.pretty_generate(blocks[15].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.14 Numbered list item block object

• 16番目の要素の番号付きリストブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[16].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.15 Paragraph block object

• 17番目の要素のテキストブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[17].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.16 PDF block object

• 18番目の要素の PDF ブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[18].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.17 Quote block object

• 19番目の要素の引用ブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[19].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.18 Synced block object

• 20番目の要素の同期ブロック(オリジナル)を JSON で表示してみます。

print JSON.pretty_generate(blocks[20].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

• 21番目の要素の同期ブロック(コピー)を JSON で表示してみます。

print JSON.pretty_generate(blocks[21].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.19 Table block object / Table row block object

• 22番目の要素のテーブルブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[22].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

print JSON.pretty_generate(blocks[22].children.first.json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

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
  

10.4.20 Table of contents block object

• 23番目の要素の目次ブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[23].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.21 Template block object

• 24番目の要素のテンプレートブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[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.

https://developers.notion.com/reference/block#template

10.4.21(補足) To do block object

print JSON.pretty_generate(blocks[24].children.first.json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.22 Toggle block object

• 25番目の要素のトグルブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[25].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.23 Toggle heading block object

• 26番目の要素のトグル見出し1ブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[26].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

• 27番目の要素のトグル見出し2ブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[27].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

• 28番目の要素のトグル見出し3ブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[28].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け

10.4.24 Video block object

• 29番目の要素のビデオブロックを JSON で表示してみます。

print JSON.pretty_generate(blocks[29].json)

• 後で確認できるように出力された結果を保存しておきましょう。
📝

JSON 部分をコピー&貼り付け