Notion APIでいよいよ画像ブロックが取得できるようになりました。
以前「Notion Blogで公式APIを使って本文を取得する」で公式APIを使ってNotionからページの内容を取得する方法を説明したときは、まだ画像ブロックなどテキスト以外のブロックはサポートされていませんでした。
このエントリではNotion Blogの本文に埋め込まれた画像ブロックを表示する方法を説明します。
最初にNotion APIのバージョンが古い方は、現時点で最新の 2021-08-16 にアップデートしておきましょう。
Notion SDK for JavaScript を使用している場合は、v0.3.0以上にアップデートすることで最新の 2021-08-16 になります。
アップデートはプロジェクトルートで yarn upgrade @notionhq/client@^0.3.0 を実行します。
0.3.0 にアップデートすると、画像ブロックなどこれまで unsupported だったブロックタイプが取得できるようになります。
それによってエラーとなる部分は一緒に修正しておきましょう。このブログの場合ですと上記PRの2コミット目がそれに当たります。
- case 'unsupported':
+ default:APIバージョンを上げたら画像ブロックに対応していきます。
ブロック取得APIのレスポンスのうち、画像ブロックは "type": "image" となっています。
イメージブロックの詳細は公式ドキュメントをご覧ください。
公式ドキュメントには載っていませんが画像キャプションも取得できます。
キャプションを含め、TypeScript でインターフェイスを定義しておく場合は下記を参考にしてみてください。
interface ImageBlock extends Block {
Image: Image
}
interface Image {
Caption: RichText[]
Type: string
File: File
}
interface File {
Url: string
}
次に、画像ブロックの場合に <img> タグを表示するために src/pages/blog/[slug].tsx で、画像ブロックの場合の処理を追加します。
下記コミットを参考にしてみてください。
case 'image':
toRender.push(<img src={block.Image.File.Url} />)
if (
block.Image.Caption.length > 0 &&
block.Image.Caption[0].Text.Content
) {
toRender.push(
<div className={blogStyles.caption}>
{block.Image.Caption[0].Text.Content}
</div>
)
}
break
Notionで画像サイズが指定されている場合にサイズを変更するロジックはまだありませんが、そちらは後日紹介できればと思います。
このブログの画像ブロックの対応PRは下記です。
以上です。
このエントリではNotion Blogの本文に埋め込まれた画像ブロックを表示する方法を説明しました。
コメントを送る
コメントはブログオーナーのみ閲覧できます