はじめに
勉強とアウトプットを兼ねて、Webアプリ開発の記録を記事にしてみます。
個人のメモ的な側面が強いです。
Web開発初心者すぎて至らぬところだらけだと思いますが、暖かい目で見ていただければ幸いです。
↓ これまでの内容 ↓
【Day0】アプリが完成するまで毎日投稿
【Day1】開発環境を考える
【Day2】開発環境を構築する、、、はずでした
【Day3】まずはフロントだけ開発環境を構築する
【Day4】バックエンドの開発環境を整えつつ、マルチコンテナ対応のDevcontainerにする
【Day5】お試し実装！ファイルをアップロードしてバックエンドで処理する
【Day6】Docker Desktopが起動しなくなり泣きながら原因調査する
【Day7】画像にフレームとExif情報を付けてみる
【Day8】フロントに表示する画像のサイズを小さくする
【Day9】フロントエンドとバックエンドをそれぞれデプロイする
【Day10】結局コンテナ1つで開発する方が楽かもしれない
前回やったこと
開発環境のコンテナを1つに統合して、より開発しやすくしました。
今回やったこと
ついにアプリの全体感が完成しました！
トップ画面
Exif情報の有無を切り替えるトグルスイッチを実装しました！
フレーム作成
今までできていなかった縦画像にも対応させました。
Exif情報の切り替え
Exif情報を切り替えるとその部分にも画像を拡張します。
縦画像だとかなり印象が変わりますね。
全体のロジックの流れ
まずはフロント側でユーザーに画像ファイルを選択してもらいます。
アップロードボタンを押下すると、Exif情報のトグルスイッチのON/OFFに応じたtrue/falseとともに画像データをバックエンドにAPIリクエストを投げます。
この時にデータ容量を削減するために画像データを1350px x 1080pxに収まるようにサイズを縮小してます。
（これで無料サーバーの容量をちょっとは節約できる？）
その後、バックエンドではON/OFFのtrue/falseに応じて、フレーム作成ロジックでExif情報を取得するかどうかを決めています。
おわりに
無事に一通りの実装ができました。
といってもChat GPTに頼りっぱなしなので、ソースはごちゃごちゃだし、1つのコンポーネントやメソッドがすごいボリュームになってます。
一旦リファクタリングをしようと思いますが、リファクタリングはChat GPTに頼らず自力でやりたいとおもい