herohoroブログ

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



🔄   2022-11-16

…. きたッ!!!!

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

画像が読み込まれない場合はページを更新してみてください。

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

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

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

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

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

画像が読み込まれない場合はページを更新してみてください。
あらら….

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

画像が読み込まれない場合はページを更新してみてください。

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

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

ツヨツヨになった型定義

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

画像が読み込まれない場合はページを更新してみてください。

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

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

でもね、

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

データの流れを復習する

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

画像が読み込まれない場合はページを更新してみてください。

画像の取得

この画像の取得は….

画像が読み込まれない場合はページを更新してみてください。

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

本当に!?

って納得できない私は、

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

画像が読み込まれない場合はページを更新してみてください。

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

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

画像が読み込まれない場合はページを更新してみてください。

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

画像の確認・表示

取得した後、

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

console.dir()を使います。

画像が読み込まれない場合はページを更新してみてください。

あら不思議。

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

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

画像が読み込まれない場合はページを更新してみてください。

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

まとめ

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

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

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

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

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

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

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

でも、今回は、

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


ツヨツヨ型定義、

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

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

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

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

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

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


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

https://herohoro.com/atom

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

Twitter Timeline


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