新作アプリをリリースしました

品評会画像メーカー

品評会画像メーカーのスマホアプリ版をリリースしました。

• AppStore
• GooglePlay

アプリの説明

前回作成した品評会画像メーカーのスマホアプリ版です。集合写真を入力すると、各人物の顔に番号を割り振った画像を出力するツールです。

前回はウェブアプリとして作成しましたが、スマホアプリにしてほしいとの要望があったためスマホアプリ版を制作しました。

制作の過程をYouTubeで解説しています。

入出力例

入力画像

出力画像

使い方

タップして画像を選択を押して画像を選択します。フォントサイズ、番号の位置、カッコの有無をオプションとして選択可能です。画像を選択したら解析するをタップします。

解析が完了すると自動的に結果画面に遷移します。解析結果はimgurにアップロードされていますのでURLをコピーしたり、画像を保存することが可能です。また、結果画像をタップすることで画像を拡大プレビューすることもできます。

使用技術とアプリの仕組み

フロントエンド

アプリ自体はReact Native(Expo)を使用しました。

バックエンド

ウェブアプリ版と同じAPIを使用しています。

バックエンドでは以下の処理を行うPythonスクリプトをCloud Runで実行しています。

1. フロントから送信されてきた、画像のURL、数字の位置、フォントサイズ、カッコのオンオフなどのパラメーターを受け取る
2. フロントから受け取った画像URLから画像をダウンロード
3. Face Recognitionパッケージを使用して顔の位置を特定
4. 顔の位置に数字を描画し、画像を保存
5. Imgurのパッケージを使用して処理後の画像をアップロード
6. アップロードされた画像のURLをフロントに返す

ウェブアプリ版との差分

画像解析を行うAPIは画像のURLを入力として受け取りますので、画像解析APIに画像データを直接入力することはできません。そこで、スマホアプリ版では選択した画像を一旦imgurにアップロードして、そのURLを画像解析APIに入力しています。

ウェブアプリ版では

1. 画像URLとオプションパラメーターをバックエンドに送信
2. 結果画像のURLを受け取って表示

の2ステップの処理を行っていますが、

スマホアプリ版では

1. 選択した画像をimgurにアップロードしてURLを得る
2. 画像URLとオプションパラメーターをバックエンドに送信
3. 結果画像のURLを受け取って表示

の3ステップになっています。

ソースコード

ソースコードはGitHubに公開しています。

• スマホアプリ
• バックエンド

まとめ

そもそも品評会自体があまり開催されなくなったので全然使われていない。

---