リンクプレビューのUnfurl属性オブジェクト

リンクプレビューは、Unfurl属性オブジェクトの配列から作成されます。

リンクプレビューは、認証されたユーザーが有効なリンクを共有したときに Notion で展開される、認証されたコンテンツのリアルタイムの抜粋です。

Notionワークスペースでのリンクプレビューの例

ユーザーは、完全なリンクプレビューの代わりに、同じデータを使用するリンクプレビューの縮小版であるメンションをレンダリングすることを選択できます。

Notion ワークスペースでのメンションの例

リンクプレビューまたはメンションは、Unfurl属性オブジェクトの配列として Notion に送信されるデータを表示します。すべての配列には、title属性とdev属性が含まれている必要があります。

たとえば、次のペイロードは、上記のリンクプレビューとメンションの例を作成します。

JSON

[
  {
    "id": "title",
    "name": "Title",
    "type": "inline",
    "inline": {
      "title": {
        "value": "Feature Request: Link Previews",
        "section": "title"
      }
    }
  },
  {
    "id": "dev",
    "name": "Developer Name",
    "type": "inline",
    "inline": {
      "plain_text": {
        "value": "Acme Inc",
        "section": "secondary"
      }
    }
  },
  {
    "id": "state",
    "name": "State",
    "type": "relation",
    "relation": {
      "uri": "acme:item_state/open",
      "mention": {
        "section": "primary"
      }
    }
  },
  {
    "id": "itemId",
    "name": "Item Id",
    "type": "inline",
    "inline": {
      "plain_text": {
        "value": "#23487",
        "section": "identifier"
      }
    }
  },
  {
    "id": "itemIcon",
    "name": "Item Icon",
    "type": "inline",
    "inline": {
      "color": {
        "value": {
          "r": 247,
          "g": 247,
          "b": 42
        },
        "section": "entity"
      }
    }
  },
  {
    "id": "description",
    "name": "Description",
    "type": "inline",
    "inline": {
      "plain_text": {
        "value": "Would love to be able to preview some Acme resources in Notion!\n Maybe an open item?",
        "section": "body"
      }
    }
  },
  {
    "id": "updated_at",
    "name": "Updated At",
    "type": "inline",
    "inline": {
      "datetime": {
        "value": "2022-01-11T19:53:18.829Z",
        "section": "secondary"
      }
    }
  },
  {
    "id": "label",
    "name": "Label",
    "type": "inline",
    "inline": {
      "enum": {
        "value": "🔨 Ready to Build",
        "color": {
          "r": 100,
          "g": 100,
          "b": 100
        },
        "section": "primary"
      }
    }
  },
  {
    "id": "media",
    "name": "Embed",
    "embed": {
      "src_url": "https://c.tenor.com/XgaU95K_XiwAAAAC/kermit-typing.gif",
      "image": {
        "section": "embed"
      }
    }
  }
]

Unfurl属性オブジェクト

Unfurl属性オブジェクトの例

{
    "id": "title",
    "name": "Title",
    "type": "inline",
    "inline": {
      "title": {
        "value": "Feature Request: Link Previews",
        "section": "title"
      }
    }
  }

各 unfurl 属性オブジェクトには、次の値が含まれます。

フイールド	タイプ	説明	例の値
`id`	`string`	属性の一意の識別子。同じ`id`が複数属性が指定されている場合、後者の属性が最初の属性の値をオーバーライドします。	`"title"`
`name`	`string`	属性を説明する人間が読める名前。	`"Title"`
`type`	`inline`		`embed`
`inline`		`embed`	`object`

インラインサブタイプオブジェクト

インラインサブタイプオブジェクトのキーは、サブタイプの種類を表します。キーの値は、表示するvalue と、値がレンダリングされるリンクプレビューのsection です。

サブタイプ	説明	例の値
`color`	r、b、g の値を持つ色。	`{ "value": { "r": 247, "g": 247, "b": 42 }, "section": "entity" }`
`date`	デート。	`{ "value": "2022-01-11", "section": "secondary" }`
`datetime`	日時。	`{ "value": "2022-01-11T19:53:18.829Z", "section": "secondary" }`
`enum`	文字列値とオプションの色オブジェクト。	`{ "value": "🔨 Ready to Build", "color": { "r": 100, "g": 100, "b": 100 }, "section": "primary" }`
`plain_text`	プレーンテキストコンテンツ。	`{ "value": "Would love to be able to preview some Acme resources in Notion!\n Maybe an open item?", "section": "body" }`
`title`*	リンクプレビューのタイトル。 *リンクプレビューを作成するには、このタイプの unfurl 属性オブジェクトをすべてのペイロードに含める必要があります。	`{ "value": "Feature Request: Link Previews", "section": "title" }`

`dev`属性

リンクプレビューを作成するために Notion に送信される属性オブジェクトのすべての配列には、dev属性も含まれている必要があります。この属性は、リンクプレビューを作成した開発者または会社を示します。次の形式を取ります。

dev属性の例

{
    "id": "dev",
    "name": "Developer Name",
    "type": "inline",
    "inline": {
      "plain_text": {
        "value": "Acme Inc",
        "section": "secondary"
     }
   }
 }

サブタイプの子オブジェクトを埋め込む

embedサブタイプオブジェクトを使用して、JPG、GIF、iFrame などのリッチコンテンツをリンクプレビューに追加できます。

カエルのカーミットの画像を埋め込んだリンクプレビューの例

すべての埋め込みサブタイプオブジェクトには、埋め込みへのリンクであるsrc_urlフィールドと、キーが埋め込みのサブタイプであり、値が値がレンダリングされるリンクプレビューの sectionを示すオブジェクトであるオブジェクトが含まれます。

サブタイプ	説明	例の値
`audio`	ソース URL からのオーディオ。	`{ "src_url": "https://s3.us-east-3.amazonaws.com/12345.mp4", "audio": { "section": "embed" } }`
`html`	iFrame でレンダリングされるソース URL からの HTML。	`{ "src_url": "https://s3.us-east-3.amazonaws.com/12345.html", "html": { "section": "embed" } }`
`image`	ソース URL からの画像。	`{ "src_url": "https://s3.us-east-3.amazonaws.com/12345.png", "image": { "section": "avatar" } }`
`video`	ソース URL からのビデオ。	`{ "src_url": "https://s3.us-east-3.amazonaws.com/12345.mp4", "video": { "section": "embed" } }`

📘
iFrame 埋め込みでユーザーにサービスへのログインを求める必要はありません。リンクプレビューを使用している場合は、既に認証されています。

値_`section`

unfurl 属性オブジェクトのsection値は、属性がリンクプレビューまたはメンションで表示される場所を定義します。

リンクプレビューのセクション

メンションのセクション

sectionは、属性のサブタイプオブジェクトにAが指定されています。各sectionとそれぞれの有効な親サブタイプの詳細については、以下の表を参照してください。

セクション	説明	有効な親サブタイプ
アバター	リンクプレビューの左下に表示される画像。	`image`、`plain_text`
バックグラウンド	リンクプレビューの背景色。	`color`
体	リンクプレビューの主な文字列コンテンツ。	`plain_text`
埋め込む	属性タイプのコンテンツがリンクプレビューに表示される大きなスペース。`embed`	`audio`　`html`　`image`　`pdf`　`video`
実在物	リンクプレビューの小見出しとメンションにある小さな画像。	`color`、`image`
識別子	リンクプレビューの下部とメンションの左側にある小見出し。	`image`、`plain_text`
主要な	最初の小見出しセクション。	`enum`　`date`　`datetime`　`plain_text`
二次	2 番目の小見出しセクション。	`date`　`datetime`　`plain_text`
タイトル*	リンクプレビューまたはメンションのメインの見出し。 *必須。	`title`

リンク プレビューのUnfurl属性オブジェクト

リンク プレビューのUnfurl属性オブジェクト#

Unfurl属性オブジェクト#

インライン サブタイプ オブジェクト#

dev属性#

サブタイプの子オブジェクトを埋め込む#

📘#

値_section#

リンクプレビューのUnfurl属性オブジェクト

リンクプレビューのUnfurl属性オブジェクト

Unfurl属性オブジェクト

インラインサブタイプオブジェクト

`dev`属性

サブタイプの子オブジェクトを埋め込む

📘

値_`section`