GithubXDiscord

customization-guide > ノーションプレッソの構造理解とカスタマイズ

ノーションプレッソの構造理解とカスタマイズ

ノーションプレッソを効果的にカスタマイズするためには、まず基本構造とデータの流れを理解する必要があります。このセクションでは、ノーションデータの構造を確認し、それを基にカスタムコンポーネントを作成する方法を説明します。

データ構造の理解

ノーションプレッソが使用するノーションデータは、JSON形式で構成され、ページ情報と各ブロックの詳細内容を含みます。この構造を理解することが効果的なカスタマイズの第一歩です。

基本データ構造

{
  "object": "page",
  "id": "page-id",
  "created_time": "2024-09-20T13:54:00.000Z",
  "last_edited_time": "2024-09-21T04:28:00.000Z",
  "cover": null,
  "icon": null,
  "parent": {
    "type": "page_id",
    "page_id": "parent-page-id"
  },
  "properties": {
    "title": {
      "id": "title",
      "type": "title",
      "title": [
        {
          "type": "text",
          "text": {
            "content": "ページのタイトル",
            "link": null
          },
          "annotations": {
            "bold": false,
            "italic": false,
            "color": "default"
          },
          "plain_text": "ページのタイトル"
        }
      ]
    }
  },
  "blocks": [
    {
      "object": "block",
      "id": "block-id-1",
      "type": "toggle",
      "toggle": {
        "rich_text": [
          {
            "type": "text",
            "text": {
              "content": "トグルの内容",
              "link": null
            },
            "annotations": {
              "bold": false,
              "italic": false,
              "color": "default"
            },
            "plain_text": "トグルの内容"
          }
        ],
        "color": "default"
      },
      "blocks": [
        {
          "object": "block",
          "id": "block-id-2",
          "type": "paragraph",
          "paragraph": {
            "rich_text": [
              {
                "type": "text",
                "text": {
                  "content": "トグルの内部パラグラフ",
                  "link": null
                },
                "annotations": {
                  "bold": false,
                  "italic": false,
                  "color": "default"
                },
                "plain_text": "トグルの内部パラグラフ"
              }
            ],
            "color": "default"
          }
        }
      ]
    }
  ]
}

主要な構造要素

  1. ページのメタデータ: id, created_time, last_edited_time, parent など、ページの基本情報を含みます。

  2. coverとicon: ページのカバー画像とアイコン情報です。カスタムデザインを適用する際にこの情報を活用できます。

  3. properties: ページの属性情報で、通常はページのタイトル(title)が含まれます。カスタムヘッダーを作成する際にこの情報を使用できます。

  4. blocks: ページの内容を構成するブロックの配列です。各ブロックは次の構造を持ちます:

    • object: 常に "block"
    • id: ブロックの一意の識別子
    • type: ブロックのタイプ (例: "toggle", "paragraph", "heading_1" など)
    • [type]: ブロックタイプに対応するキーで、そのブロックの具体的な内容を含みます。
    • blocks: サブブロックの配列。これにより、再帰的な構造を形成します。
  5. 再帰的な構造: blocks 配列内の各ブロックは、再帰的な構造を持つことができます。これにより、入れ子になった構造を表現できます。これは、トグル、リストなどの入れ子のコンテンツをカスタマイズする際に重要です。

  6. rich_text: ほとんどのテキストコンテンツは rich_text 配列で表現され、テキストのスタイル情報(annotations)を含みます。これにより、テキストのスタイルを細かくカスタマイズできます。

カスタマイズのためのコンポーネント構造

ノーションプレッソの基本的なコンポーネント構造は次のようになります:

┌────────────────────────────────────────────────────────────────┐
│                           <Notion>                             │
│  ┌────────────────────────────────────────────────────────┐    │
│  │                        <Cover />                       │    │
│  │                  // Page cover image                   │    │
│  └────────────────────────────────────────────────────────┘    │
│                                                                │
│               ┌────────────────────────────┐                   │
│               │           <Body>           │                   │
│               │  ┌──────────────────────┐  │                   │
│               │  │      <Title />       │  │                   │
│               │  │    // Page title     │  │                   │
│               │  └──────────────────────┘  │                   │
│               │  ┌──────────────────────┐  │                   │
│               │  │      <Blocks>        │  │                   │
│               │  │ ┌──────────────────┐ │  │                   │
│               │  │ │<Block type="...">│ │  │                   │
│               │  │ │  // e.g. Heading │ │  │                   │
│               │  │ └──────────────────┘ │  │                   │
│               │  │ ┌──────────────────┐ │  │                   │
│               │  │ │<Block type="...">│ │  │                   │
│               │  │ │   // e.g. Para   │ │  │                   │
│               │  │ └──────────────────┘ │  │                   │
│               │  │         ...          │  │                   │
│               │  │  // More blocks      │  │                   │
│               │  └──────────────────────┘  │                   │
│               └────────────────────────────┘                   │
│                                                                │
└────────────────────────────────────────────────────────────────┘

この構造では、<Body> コンポーネントは全体の幅の約60%を占め、中央に配置されます。このレイアウトを基にして、各コンポーネントをカスタマイズできます。

カスタマイズの戦略

  1. ブロックごとのカスタムコンポーネント: 各ブロックタイプ(paragraph, heading_1, toggle など)に対して、カスタムコンポーネントを作成し、基本スタイルと動作をオーバーライドできます。

  2. スタイルのカスタマイズ: CSS変数とクラスを使用して、全体的なデザインを調整できます。

  3. レイアウトの調整: <Body> コンポーネントの幅や配置を調整して、全体的なレイアウトを変更できます。

  4. 再帰的なレンダリングの活用: 入れ子になったブロック構造を活用して、複雑なレイアウトやインタラクションを実装できます。

  5. メタデータの活用: ページのメタデータ、カバー画像、アイコンなどを活用して、豊かなUIを構成できます。

これらの構造と戦略を理解することで、ノーションプレッソを基にして、高度にカスタマイズされたNotionベースのウェブサイトを作成できます。次のセクションでは、各要素ごとの具体的なカスタマイズ方法を確認します。