gaaamii / blog.gaaamii.jp Goto Github PK

ブログ記事内の画像表示によるレイアウトシフトを防ぎたい。

現状

画像表示の領域が確保されておらず、ガクッとする。

どうしたいか

ガクッという感じがなくしたい。

どうするか（ざっくり）

瞬時に画像枠の幅と高さを確保する。

どうするか（詳しく）

どうやら最新のベストプラクティスとしては、width属性とheight属性を指定するだけで良いらしい。

現在HTMLの出力はreact-markdownというライブラリでやっているので、このコンポーネントのcomponents propsにimgのものを追加し、そこにwidthとheightが入るようにする必要がある。ただ、ソースコードの時点ではもちろん画像のアスペクト比はわからない。どうしたものか。

検索すると、以下の記事が参考になりそう（ありがたや）。

Next.js で Markdown 中の画像を next/image に対応させる

こちらの記事だと、画像のサイズを取得する処理をrehypeプラグインに書いている。rehypeはHTMLを入力としてHTMLを出力するようなもので、今回の場合だとimgのwidthとheightを差し込むことがこれによって可能になるようだ。

上記の記事にもあるように、画像のサイズを取得するには https://github.com/image-size/image-size というライブラリが使えそう。https://github.com/image-size/image-size#using-a-url を見るとURLからサイズを取得する方法がわかる。

でもあれだな、そのまま書くとwidthとheightの取得を待ってくれないな。rehypeプラグインの処理を待つことはできないだろうか。

参考

• Cumulative Layout Shift を最適化する

I want to view index of draft status posts.

やりたいこと

• 記事作成画面から画像ファイルをアップロード、記事画面でそれが表示できる
• 画像を保存するクラウドストレージは、あとから変更しやすくしておきたい
  • 現状はCloudinaryがよさそうだと思っているが、あとからS3に変えるなど。

やること

UIまで提供されるウィジェットもあるが、UIは自分で作ったほうが使い勝手がよさそうなのでやめておく。
アップロードができるREST APIがあるようなのでそこを叩く。

unsignedとsignedの2つのやり方が提供されている。unsignedを試してみたところ、認証も何もいらず自分のCloudinaryアカウントに画像ができてしまった。セキュリティ的にまずい。

• https://cloudinary.com/documentation/upload_images#code_explorer_upload_multiple_files_using_a_form_signed

なので、上のURLで説明されているsignedのほうで実装をする。自分のブログシステムのサーバーサイドに /cloudinary_signature のようなエンドポイントを作って、そこから取得したsignatureを利用して画像アップロードのCloudinaryエンドポイントを叩くようにする。

ストレージを変更したくなったらどうするか

以下の手順で移行ができそう

• 記事本文をMarkdown -> HTMLに変換した上で、Nokogiriでパース
• img要素のurlがcloudinaryのものであるものを抜き出してその画像をダウンロード
• ダウンロードした画像を移行先のストレージにアップロード
• 記事本文の画像URL部分を移行先のURLで書き換える