Hachi Blog
2026-01-29

画像データの埋め込み機能追加

#python #gemini #mupy

記事に画像データを埋め込みできるようにします。

画像データの埋め込み方針

下記の方針に従って、機能を追加します。

  • ![title](image_url)で画像の埋め込みができるようにする
  • 遅延読み込みの有効化(loading="lazy")
  • 記事に利用される画像はcontent/<Category>/<ArticleID>/images/内に保存されている
  • デプロイ時の画像の出力先は、dist/<ArticleID>/images/内にする
  • 入力画像がwebp形式以外の場合、webp形式に変換する
  • 画像の変換時には元画像のアスペクト比を維持
  • 変換後の画像の横幅の最大値は 1200px とする。元画像が最大値より大きい場合はリサイズを実施

実装方法

いつも通り、geminiを呼び出して、上記の方針に書かれている箇条書きを与えてコードを生成してもらう。爆速。

記事に画像データを埋め込めるようにしてほしい。

## 要件
- `![title](image_url)`で画像の埋め込みができるようにする
- 遅延読み込みの有効化(loading="lazy")
- 記事に利用される画像は`content/<Category>/<ArticleID>/images/`内に保存されている
- デプロイ時の画像の出力先は、`dist/<ArticleID>/images/`内にする
- 入力画像が`webp`形式以外の場合、`webp`形式に変換する
- 画像の変換時には元画像のアスペクト比を維持
- 変換後の画像の横幅の最大値は `1200px` とする。元画像が最大値より大きい場合はリサイズを実施

見た目の調整

ちょっと画像の見た目が汚かったので微調整

- 埋め込み画像の周りに**薄い影**を追加してください
- 埋め込み画像はセンタリングしてください。
- `![]()`の次の行に画像のキャプションを追加できるようにしたい(参考情報:<https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll/30366422#30366422)>