herohoroブログ

記事一覧のサムネを復活させる~ツヨツヨ型定義?それとも… ~



🔄   2023-03-14

…. きたッ!!!!

Notion APIの型定義が本家でちょっと厳密になりました。

image block

https://github.com/otoyo/easy-notion-blog/pull/132/files

差分が多く、よーく確認しながら、

オリジナルで改造してる部分にも上手く馴染むように…..

なんとかアップデートを済ませたものの、

記事一覧に表示していた画像が真っ白になってしまうという現象に見舞われました。

image block
あらら….

今までキャッシュで管理していたサムネ画像は….

image block

ちょっと厳密になった型定義のPR後にキャッシュファイルも不要とするPRが追加されました。

….私、この先どうする!?

ツヨツヨになった型定義

アルパカ先生の解説記事によると….

image block

https://alpacat.com/blog/easy-notion-blog-v013

読んだ時、清々しい気持ちになりました。

でもね、

そんなおいしい話なわけがない。

データの流れを復習する

私のブログで表示させているサムネの画像はNotionDBのOGImage列にあるものです。

image block

画像の取得

この画像の取得は….

image block

列名(OGImage)→files[0].file.url

本当に!?

って納得できない私は、

いつも公式リファレンスを見て納得することにしてます。

image block

https://developers.notion.com/reference/page-property-values#files

本家でアップデートされたツヨツヨ型定義によると….

image block

公式リファレンスと同じだなってことが理解できました。

画像の確認・表示

取得した後、

画像のデータはどうなっているのかを確認するために

console.dir()を使います。

image block

あら不思議。

必要なOGImageはpost.OGImage にあるのねってことが分かって

あっという間にサムネが復活しました\(^o^)/

image block

🙄
結局、型定義関係なかったみたい….
でも、型定義を疑っていろいろコードを見ることができたからOKってことにするッ!!

まとめ

今まで問題なく使えていた部分が動かなくなって

はじめて必死に本家のコードを読み解く….

といういつものパターンでしたが、

さすがに記事をシェアする時のOGImageの修正まではできませんでした。

画像周りはいつもアルパカ先生を振り回してばかりなので、

いい加減自分でなんとかしたい気持ちはあるものの

理想と現実の溝は埋まらないものです(´;ω;`)

でも、今回は、

サムネの表示は自分でできたので大進歩かなって思ってます♪


ツヨツヨ型定義、

また改造を重ねながらコツを掴んでいきたいなと思います〜〜〜

楽しくなりそうです\(^o^)/

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

Buy Me A Coffee

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/