好きな写真を使って遊べるシルエットクイズアプリをリリースしました!
リリースしたサービス
主に子供と遊ぶことを目的としたシルエットクイズアプリです。
- クイズの答えにしたい画像を選ぶと、自動でシルエット画像(クイズの問題)を作成できます
- 登録したクイズを順番に出題したり、ランダムで出題できます
このプロダクトは、株式会社 mofmof の「水曜日の個人開発」にサポートされています。
作ろうと思ったきっかけ
某子供向け番組のシルエットクイズのコーナーを見ていて、家族の写真を使ってシルエットクイズができたら子供たちと盛り上がれるかも、と思ったのがきっかけです。
最初は JavaScript で 2 枚の画像をただブラウザ上で切り替えるだけのアプリケーションをつくって(シルエット画像も編集アプリを使って自分で作成)遊んでみたら大盛り上がり。
もともとモバイルアプリ開発に興味があったこともあり、モバイルアプリとして開発することにしました。
子供たちは楽しんでくれてる?
とても楽しんでくれています!
クイズよりもクイズを作ることの方が楽しいようで(これは想定外でした)、シルエット画像の生成機能を組み込んで良かったです。「(クイズの順番が)いつも同じ順番だなぁ」と言われ、それを機にランダム表示モードを実装するなどフィードバックもたくさんくれました。
個人開発あるあるとしてモチベーションが続かない問題がありますが、今回に関してはモチベーションが途切れることはなかったです。本当にありがとう。
技術スタック
- モバイルアプリ: Swift
- データベース・ローカルストレージ
- Realm
- FileManager
- シルエット画像の生成
- Vision Framework
- U2Net
- データベース・ローカルストレージ
- バックエンド: なし
プライベートの写真も気兼ねなく使って欲しいと思い、登録した画像を端末内に保存するようにしたのはこだわったポイントです。
画像ファイルそのものは FileManager を使ってローカルストレージに保存し、そのパスをデータベース(Realm)に登録しています。よってバックエンドは一切ありません。オフラインでも使うことができます。
シルエット画像の生成には、画像内で最も目立つオブジェクトを検出し切り抜くことができる機械学習モデル U2Net を利用しています。切り抜いた状態だとオブジェクトが白、背景が黒の状態なので、色を反転させればシルエット画像の完成です。
出力される画像が正方形になる、元画像によってはうまく検出できず綺麗なシルエット画像ができないというネガティブポイントはありますが、子供と遊ぶには十分な精度だと思います。
おわりに
モバイルアプリの開発の経験が少なく Swift 未経験だったため躓くことも多かったですが、iOS アプリの開発からリリースまで一通り経験できたのは良かったです。
身近な人のためにつくること(ユーザーを想定すること)、本格的な開発に着手する前に価値あるものか確かめること(今回で言えばブラウザで簡易なアプリケーションをつくったこと)などをあらためて実感することもできました。
なにより一番のユーザーである娘が喜んでくれたのが僕にとって最大のご褒美でした!
Discussion