01
アプリの概要
ウェブフロンティア株式会社のインターンで扱った、画像中の顔に絵文字スタンプを重ねるWebアプリです。外部の顔検知APIから顔の位置を受け取り、その座標を使ってブラウザのCanvasに画像とスタンプを描画します。
画像に複数人が写っている場合は、返された顔の座標を順に使います。利用者が確認するのは座標の数値ではなく、スタンプを重ねた画像です。
公開されている仕様書と現行コードを基に、画面と画像処理の構成を説明します。公開デモの動作を確認した記録としては扱いません。
02
画像処理の流れ
画像を選んでから結果を見るまで、ブラウザ、アプリのAPI、顔検知サービスが順に役割を受け持ちます。
-
画像を選ぶ
ドラッグ＆ドロップ、またはファイル選択から画像を取り込みます。JPEG・PNG・WebPに対応し、1枚10MBまでを確認します。
-
顔の位置を調べる
画像をアプリのAPI Route経由で外部の顔検知APIに送ります。返されるのは顔を囲む座標です。
-
スタンプを重ねる
各顔の座標から位置と大きさを決め、Canvas上の元画像に「😊」の絵文字を描きます。
-
結果を確かめる
処理後の画像を一覧で表示します。顔が見つからなかった画像や通信に失敗した画像には、それぞれメッセージを表示します。
03
画面と一括処理
現行コードは「アップロード → プレビュー → 結果」の3段階で画面を切り替えます。複数画像を選んだ場合にも、送信前の確認と画像ごとの結果表示を行える構成です。
プレビューで1枚ずつ確認
最大10枚を選択し、前後の矢印と「N枚中M枚目」の表示で、送信前の画像を切り替えます。
画像ごとに処理を進める
各画像へのリクエストをまとめて開始し、完了枚数を表示します。画像単位で結果とエラーメッセージを保持します。
結果をグリッドで見渡す
処理後は全画像の枠を一覧表示します。正常な画像にはCanvasの描画結果を、エラーになった画像にはメッセージを表示します。
04
技術と構成
Next.js 16 / React 19
アップロード、プレビュー、結果の表示と状態管理
TypeScript
画像ごとのファイル、顔座標、エラー情報を型で管理
Tailwind CSS 4
画面のレイアウトと操作部品の表示
Canvas API
元画像と顔の位置に合わせた絵文字の合成
APIキーをブラウザに渡さない構成
顔検知サービスへの接続情報は、Next.jsのAPI Routeだけで読み込みます。ブラウザから受け取る画像は、サーバー側でも形式と10MBの上限を確認してから中継します。
05
現在地と改善点
READMEの2026年9月11日版には、複数画像の一括処理を「要件定義のみ・未実装」とする記載が残っています。その後の現行コードには、最大10枚の選択、プレビュー切替、一括送信、結果一覧の実装があります。このページではコードで確認できる内容として紹介しており、外部APIを使ったブラウザ上の一連の動作は未検証です。
顔検知APIについては、画像を送って正常な座標データを取得したcurlとNode.jsの疎通確認ログがあります。アプリ全体の動作確認とは区別しています。
- 01
外部APIが返す顔座標の型や範囲を検証する。
- 02
画像の内容検証と、破損画像を使ったエラー表示の確認を行う。
- 03
タイムアウト時の案内と、失敗後の再試行方法を明確にする。
参照資料
仕様と現状は、README・基本仕様書（新しいタブ）、現行の画面コード（新しいタブ）、顔検知APIの疎通確認ログ（新しいタブ）で確認できます。