はじめに

勉強とアウトプットを兼ねて、Webアプリ開発の記録を記事にしてみます。

個人のメモ的な側面が強いです。
Web開発初心者すぎて至らぬところだらけだと思いますが、暖かい目で見ていただければ幸いです。

前回やったこと

開発環境のコンテナを1つに統合して、より開発しやすくしました。

ついにアプリの全体感が完成しました！

Exif情報の有無を切り替えるトグルスイッチを実装しました！

今までできていなかった縦画像にも対応させました。

Exif情報を切り替えるとその部分にも画像を拡張します。
縦画像だとかなり印象が変わりますね。

まずはフロント側でユーザーに画像ファイルを選択してもらいます。
アップロードボタンを押下すると、Exif情報のトグルスイッチのON/OFFに応じたtrue/falseとともに画像データをバックエンドにAPIリクエストを投げます。

この時にデータ容量を削減するために画像データを1350px x 1080pxに収まるようにサイズを縮小してます。
（これで無料サーバーの容量をちょっとは節約できる？）

その後、バックエンドではON/OFFのtrue/falseに応じて、フレーム作成ロジックでExif情報を取得するかどうかを決めています。

無事に一通りの実装ができました。
といってもChat GPTに頼りっぱなしなので、ソースはごちゃごちゃだし、1つのコンポーネントやメソッドがすごいボリュームになってます。

一旦リファクタリングをしようと思いますが、リファクタリングはChat GPTに頼らず自力でやりたいとおもい