はじめに
勉強とアウトプットを兼ねて、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変更を同時にやった
前回やったこと
思い切ってReactのコードをリファクタリングしました！
これでフロントもバックもそれなりにロジックが整理できたはず！！
今回やったこと
２日前にやろうとした画像のExif情報をブラウザから手入力させる機能の一部を実装しました！
フィルムカメラで撮ったExif情報がない写真もこんな感じでExif情報を手動入力できました。
気づいたこと、学び
実装の最中でReactからJSONパラメータをFastAPIに送る処理があったのですが、そこで辞書型ではなく、Pydanticモデルで送る方が型安全かつ使い勝手がいいということを学びました。
from fastapi import FastAPI, File, UploadFile, Form, APIRouter, HTTPException
from fastapi.responses import StreamingResponse
from pydantic import BaseModel
import io
import json
from PIL import Image
from app.services.image_processor import frame_composer
class ReqExif(BaseModel):
Model: str
LensModel: str
DateTime: str
router = APIRouter()
@router.post("/upload-image")
async def upload_image(
file: UploadFile = File(...),
show_exif: str = Form("true"),
exif: str = Form(...)
):
show_exif_flag: bool = show_exif.lower() == "true"
try:
exif_dict = json.loads(exif)
exif_data = ReqExif(**exif_dict)
print(f"exif_data: {exif_data}")
except Exception as e:
raise HTTPException(status_code=400, detail=f"EXIFデータのパースに失敗しました: {str(e)}")
exif_dict = json.loads(exif)の時点ではExif情報は辞書型になっています。
そのため値を取得するときはexif_dict["Model"]を書きます。
ただ、この書き方だと万が一Modelというキーがなかった場合は、KeyErrorの例外になります。
しかし、exif_data = ReqExif(**exif_dict)の処理で辞書型を、あらかじめ定義したReqExifというクラスのインスタンスに変換します。
それにより、exif_data.Modelのように値を取得することができます。
exif_dataがReqExifクラスになっていることが自明なので、エディタで自動補完もされますし、型定義もしているため、Modelというパラメータがない（中身が空 or nullの可能性はある）という例外は発生しません。
辞書型で持つよりも便利！！
おわりに
以前実装できなかった機能を実装しました。
実はまだできていないことがちょっとあります。
- 入力値のバリデーション（日本語入力NGなど）
- ほかのExif情報の編集
- F値、ISO、SSは値の選択肢がほぼ決まっているのでプルダウンで選択させたい
こちらはデプロイするまでには実装したいと思います！