はじめに
勉強とアウトプットを兼ねて、Webアプリ開発の記録を記事にしてみます。
個人のメモ的な側面が強いです。
Web開発初心者すぎて至らぬところだらけだと思いますが、暖かい目で見ていただければ幸いです。
↓ これまでの内容 ↓
【Day0】アプリが完成するまで毎日投稿
【Day1】開発環境を考える
【Day2】開発環境を構築する、、、はずでした
【Day3】まずはフロントだけ開発環境を構築する
【Day4】バックエンドの開発環境を整えつつ、マルチコンテナ対応のDevcontainerにする
【Day5】お試し実装！ファイルをアップロードしてバックエンドで処理する
【Day6】Docker Desktopが起動しなくなり泣きながら原因調査する
【Day7】画像にフレームとExif情報を付けてみる
【Day8】フロントに表示する画像のサイズを小さくする
【Day9】フロントエンドとバックエンドをそれぞれデプロイする
【Day10】結局コンテナ1つで開発する方が楽かもしれない
【Day11】アプリが一通り完成！！
【Day12】FastAPIのコードをリファクタリングする
【Day13】機能実装！フレームに記載するExif情報を編集できるようにする（前編）
【Day14】ReactのリファクタリングとUI変更を同時にやった
【Day15】機能実装！フレームに記載するExif情報を編集できるようにする（後編）
【Day16】インスタ用のキャプションを生成する（前編）
【Day17】インスタ用のキャプションを生成する（中編）
前回やったこと
Webアプリの新機能として、インスタ投稿用のキャプションの自動生成を実装中です。
フロントにキャプション表示エリアを作成する
↓
キャプション用のテキスト（定数）をレスポンスとして返却するAPIを作成する
というように段階的に実装していきました。
今回やったこと
アップロードした画像のExif情報から自動的にキャプションを生成する部分を実装しました！
これでアップロード→自動生成→表示の一連の流れができました。
キャプションをどういう内容にするかはこれからも考えていきたいですが、今はとりあえずカメラとレンズのハッシュタグにしました。
特にレンズにはスラッシュやピリオドなどが含まれることが多いですが、これらがあるとハッシュタグとして機能しなくなるため取り除く処理を加えています。（実際にインスタで調べてみてもそういう風なハッシュタグにしている）
気づいたこと、学び
今回は行きあたりばったりで実装を分割しながら進めていきましたが、最初にこの順番で進めよう！って計画を立ててから臨めるとより良かったですね。
タスクを分解してどうやって進めていくか、これは実業務でも大事なこと、、、！
おわりに
3日かけて新しい機能を実装しました！
次はこの機能のまだまだな部分を探して改善しつつ、自動テストなどのCI/CD周りを拡充させていければと思っています。