【100日チャレンジ 22日目】体調不良を乗り越え、OGP画像プレビュー機能を追加！使い勝手向上への一歩

2025年5月21日

100日チャレンジも気づけば22日目。本日はあいにくの体調でしたが、「1日1コミット」の精神で、なんとかVSCodeを起動し、開発作業を進めました。今回の主な取り組みは、以前から課題となっていたデータベース仕様書の修正と、ユーザーがより直感的に操作できるよう、カテゴリ編集画面におけるOGP画像のプレビュー機能開発です。

本日の目標：OGP画像のトリミング結果を保存前に確認できるようにする

ブログ記事の顔とも言えるOGP画像。これを設定する際に、トリミングした結果が意図通りになっているか、保存前に確認したいというニーズは大きいと考えました。そこで本日の目標は、「カテゴリ編集画面にて、OGP画像のトリミング結果を保存前にプレビューできる機能を追加する」こととしました。

実施した作業内容：トリミング後プレビュー機能の実装

この目標を達成するために、主にフロントエンド側の改修を行いました。

1. フロントエンド (HTMLの変更)

edit_category.html テンプレートに、以下の要素を追加・修正しました。

「トリミング結果をプレビュー」ボタンの追加: id="show_crop_preview_button" を持つボタンを配置。
プレビュー画像表示エリアの用意: トリミング後の画像を表示するための <img> タグ (id="cropped_image_preview") と、そのコンテナ (id="cropped_image_preview_area") を新設。
既存OGP画像エリアのID付与: JavaScriptから制御しやすくするため、既存の「現在のOGP画像」表示エリアに id="current_ogp_image_display" を付与しました。

2. フロントエンド (JavaScriptのロジック追加・修正)

ユーザー操作に応じて動的にプレビューを表示するため、以下のJavaScript処理を実装・変更しました。

ファイル選択時の挙動変更:
- 画像ファイルが選択され、Cropper.jsの準備が完了したタイミングで、「トリミング結果をプレビュー」ボタンを表示するようにしました。
- 新しい画像ファイルが選択された際には、混乱を避けるために既存の「現在のOGP画像」表示を非表示にする処理を追加。
- 逆に、ファイル選択がクリアされた（キャンセルされた）場合には、既存の「現在のOGP画像」表示を再表示するようにしました。
「トリミング結果をプレビュー」ボタンクリック時の処理:
- Cropper.js の getCroppedCanvas() メソッドを利用して、ユーザーが調整した現在のトリミング範囲で切り取られたCanvasオブジェクトを取得します。
- 取得したCanvasオブジェクトを toDataURL() メソッドで画像データ（Base64形式）に変換。
- この画像データをプレビュー用 <img> タグの src 属性に設定し、プレビュー表示エリアを表示状態にします。
エラーハンドリング: 画像が選択されていない場合や、トリミング範囲が不適切（例えば、範囲が指定されていないなど）な場合に、ユーザーにアラートで通知する処理も追加しました。

直面した問題とその解決：JavaScriptセレクタエラー

開発当初、プレビュー機能がうまく動作しない問題に直面しました。コンソールログを確認すると、JavaScriptで document.querySelector にて標準ではサポートされていない :contains() セレクタを使用していたことが原因でスクリプトエラーが発生していました。

解決策: エラー箇所を特定し、対象要素に明確なIDを付与。セレクタを document.getElementById() に修正することで、無事問題を解決し、プレビュー機能が正常に動作するようになりました。やはり、基本的ながら確実なDOM操作が重要だと再認識しました。

現在の状況：OGP画像設定のUX向上

上記の実装により、カテゴリ編集画面でOGP画像を選択し、Cropper.jsでトリミング範囲を調整した後、「トリミング結果をプレビュー」ボタンを押すことで、実際に保存される前にトリミング後の画像を確認できるようになりました。これにより、ユーザーが意図した通りのOGP画像を設定しやすくなり、利便性が向上したと考えています。

今後のステップ（優先度順）

機能の安定性と更なる品質向上のため、以下のステップを計画しています。

詳細な動作テスト:
- 様々なサイズの画像ファイルでのテスト。
- 異なるファイル形式（JPG, PNG, GIFなど ALLOWED_EXTENSIONS で許可しているもの）でのテスト。
- トリミング範囲を画像の端ギリギリにしたり、非常に小さくしたりするなどのエッジケースの洗い出しとテスト。
- 何もトリミングせずに（またはトリミング範囲が不適切な状態で）プレビューボタンを押した場合の挙動確認。
- 画像を選択せずにプレビューボタンを押した場合の挙動確認。
既存OGP画像の扱い（ファイル削除）: カテゴリ更新時に、もし古い ogp_image のパスが存在し、かつ新しい画像がアップロードされた場合は、古い画像ファイルをサーバーから削除するロジックを admin.py の edit_category 関数に追加する。
エラーハンドリングの強化（サーバーサイド）: Pillowでの画像処理中に予期せぬエラー（ファイル破損、メモリ不足など）が発生した場合のサーバー側のエラーハンドリングをより堅牢にする。
ユーザーインターフェースの微調整（必要に応じて）： プレビュー画像の表示サイズやスタイル、ボタンの文言や配置、操作の流れに関するヘルプテキストの追加などを検討。
SQLAlchemyのLegacyAPIWarning対応: ターミナルログに出力されている LegacyAPIWarning について、SQLAlchemy 2.0 スタイルへの移行を検討する。

所感：体調不良でも諦めずにコミット

正直なところ、今日は体調が優れず、作業への集中力も途切れがちでした。しかし、「1日1コミット」という目標が背中を押し、なんとかOGP画像のトリミング後プレビュー機能という形にまで持っていくことができました。小さなエラーはありましたが、コンソールログをしっかり読み解けば原因は見えてくるものですね。

ユーザーが画像を保存する前に結果を視覚的に確認できるようになったことは、操作ミスを減らし、より安心して使ってもらえるシステムに繋がる一歩だと感じています。

まずは、実装した機能の詳細なテストをしっかりと行い、安定性を高めていきたいと思います。

開発リポジトリはこちらで公開しています。 GitHub: https://github.com/miyakawa2449/100DaysOfCode-016_miniBlog/tree/main