AI絵本アプリを未経験から1人で作ってストア公開した話

はじめに

普段は主にクラウドインフラエンジニアをしている、現役パパエンジニアです。本日無事２児のパパになったので記念日として投稿しておこうと思います！

スマホアプリ開発は完全に未経験で、仕事としても全く関わりのない分野だったのですが、小さなきっかけから始まり「お父ちゃんがこれ作った」と息子に言いたいーーそんな気持ちから、AIを活用した絵本アプリの開発とリリースまでの挑戦を軌跡として投稿しようかと思います。

リリースしたアプリのご紹介

先にリリースしたアプリをご紹介しておきます！
絵本読み聞かせやオリジナルの絵本が作成できるスマホアプリ（Android、iOSどちらも提供中）です。
会員登録不要で無料体験もできるので、よろしければ是非インストールしてみてください。（無料体験の画像生成API利用料がそれなりに費用がかかってくる...ので、良ければストアにレビューも頂けると嬉しいです）

もし体験ユーザーのみが増えて、画像生成AIの料金が高額になってきた場合、初回AI絵本作成トライアルは制限するかもしれません…

開発を始めたきっかけ

• ちょうど Cursorのエージェント機能が世間を賑わせまくっていた頃に「とりあえず自分も触ってみるか」という思いからスタートしました
• 最初は、「おぉ！簡単な指示だけで初期設定やファイルまでばばーっと生成してくれる！」と感動しながら遊び程度にTerraformを書かせてみたりしていたのですが、妻が息子の寝かしつけで絵本を読んでいる姿を見て、「絵本の読み聞かせアプリを作ってみるのも面白いかも」 と思いはじめました
• 当時はToDoのWebアプリ作ってみた系の記事が溢れており、それだけではワクワクしなかったので、「せっかくならちゃんとしたスマホのアプリ作ってみよう」「お父ちゃんがこれ作ったって息子に言いたい」「とりあえずやってみるか」の3つの精神 で初のスマホアプリ開発に着手し始めました

開発前に決めていたこと

個人開発で家庭には迷惑かけないこと、ユーザーが安心して使えることを第一に考え、以下のルールを自分の中で決めていました

• 個人情報やクレジットカード情報はアプリで扱わない
  • 流出リスクが怖すぎるので、絶対に個人情報は取得したくありませんでした
  • クレジットカード情報もアプリ内で打ち込ませ、もし不正利用が発生した場合、このアプリ自体に流出原因はなくても変に疑いをかけられるのも嫌だったので、各ストア側の課金で対応するようにしました（マージン高すぎる…）
• 他ユーザーとの共有機能は実装しない
  • 実装すると嬉しい機能かもしれませんが、万が一、承認していないユーザーに自分の子どもの写真が晒されると保護者としても恐ろしいので、そのような危険モードは実装しないと決めました
• 会員登録なしで使えるようにする
  • 開発着手前に興味本位で、Google認証やメールアドレス認証の実装も試しましたが「登録なしの方がユーザーも使いやすいだろう」と感じたので、一意のユーザIDのみ割り振ってユーザ登録不要でアプリ作ることに決めました
• AIは必ず活用する
  • 前回の魔改造ファービーの記事でもそうですが、何らかの形でAIを利用できると楽しいだろうなと思っており、AIは何かしらに使おうと思っていました
• Cursorのみで開発する
  • AIの進化が早すぎるので、登場するたびに色々なAIツールをキャッチアップしながら、子育ても並行して開発するのは厳しいと思ったので、（アプリで利用する画像生成のAI等は除き）今回の開発自体は、CursorのProプランでやり切る と決めました

開発し始めてからの出来事

コードはバンバン作成してくれますが、スマホアプリ開発ど素人には、これがどうやったらスマホで動かせるのかわかりません。とりあえずコード生成だけでなく、わからないことは全てCursorに聞きまくりました

• 例えば、、
  • ここからどうやってスマホでアプリを起動できるようになるの？
  • 匿名認証って何なの？ 毎回ユーザーIDが作成されるの？
  • スマホへのビルドってこんな時間かかるの！？何とかならないの？
  • Androidでアプリをリリースするには？ この登録画面って何を入力したら良いの？
  • XCodeのこれって何？デバッグから本番リリースに切り替えるには？
  • え！Androidは一度だけの支払いなのに、Appleは毎年支払わないといけないの？ 等々

もちろん開発言語やフレームワークもど素人ですが、実装して欲しい機能などを伝えると、Cursorの動かすファイルが次第に判明していきます。じっと眺めていると、「あーこれとこのあたりのファイルのこの辺を修正しているから、この機能はコイツを狙って指示すれば良いのね」 とわかるようになってきました

• ちなみにこのアプリはFlutterとFirebaseを使って作っていますが、アプリ開発の知識乏しいので、「AndroidとiOSでアプリリリースしたい。なるべく手間なく運用したい」的なアプリ開発当初の指示から、成り行きでそうなっております

アプリの機能として工夫したこと

Cursorに機能は実装してもらっていますが、アプリの機能としてこういうのがあったら良いなぁのイメージはこちらから伝えていきます。そのイメージを相談すると、良さそうな機能もプラスして提案してくれるので、自分の作りたいイメージに合わせて以下のような機能を盛り込んでみました。

操作性のわかりやすさ

• 個人的にチュートリアルの案内はすっ飛ばすタイプなので、説明しなくてもポチポチと押していくと、こういう感じで使えるんだなーと何となくユーザー自身でもわかるように操作動線を意識して実装しました（Androidメインで開発し、最新のiPhoneは持ち合わせていなかったので、ちょっとiPhoneの見た目は微妙なところもあるかもしれません。同じ型でも、エミュレーターと実機で見え方に若干誤差があったので。）

子どもにも楽しめる機能

• AIを使っての絵本作成機能
  • 子どもの名前などを主人公名にもできて、様々なジャンルやイラストスタイルの絵本を作成できる機能を実装しました
  • アプリストア側には表立って案内できませんが「名探偵コナンをモチーフにした絵本」などメジャーなアニメをモチーフにするように説明欄に入れて絵本を作成すると、それっぽい絵本を子どもの名前を使ったストーリーで作ってくれたりします(↓の作成結果は、対象年齢5-6歳向けの絵本ですが、作成時に対象年齢を0歳とか他の年齢にすると、ストーリー性は乏しくなりますが、オノマトペ多用など対象年齢に応じた絵本内容で仕上がります)
  • ちなみに、画像生成AIのAPI利用だと、連続して同じような画像を生成する機能は提供していない（開発時点で現在は不明）ため、独自のアルゴリズムで許容範囲レベルに同じっぽい画像ができるように仕込んでおります
    
    
    
    
    

• 多彩なテーマカラー
  • ダークモードとかはよく見ますが、子どもが好きな色も様々あると思いますので、色々な選択肢からアプリのテーマカラーを選択できるようにしました
    

• ぴこぴこっと鳴る効果音
  • 年齢の低い子ども（私の息子は1歳後半なので）は、スマホを触りたくもなるお年頃なので、ついつい押してみたくなるようにタップした時に効果音がなるようにしました
  • アプリの名称もこのあたりの背景からそのように命名しております

• 音声録音機能
  • アプリの読み聞かせはスマホ端末側の音声を利用するため、ロボット感も強く変な読み方や抑揚がなかったりします
  • プレミアムプラン限定ですが、親の声で読み聞かせもできるように自分で作成する絵本を対象に、音声録音機能もつけました
  • （本当は、AIの音声サービスを選択できるようにしたかったのですが、毎回異なる文章を読ませようとすると料金が高額になり過ぎるため断念しました・・）
    

• 本物っぽいページ送り機能
  • 実際に絵本を読んでいるようなページ送り機能を実装しました（パッケージにそのようなものがありましたが、私の息子には今のやつが良さそうな反応だったのでオリジナルページ送りで実装しています）
    

保護者にも嬉しい機能

• 写真でおもいで絵本作成機能
  • 子どもの写真はスマホでいっぱい撮影しますが、それを活かす場面ってなかなかありませんよね。子どもの写真などを使って、オリジナルの絵本を簡単に作成できる機能も実装しました
  • 子どもが達成したことや何か出来るようになったことを親と一緒に振り返ることは、子どもの自己肯定感も上がるらしいので、そういったオリジナル絵本を作ってみるのにもオススメです
    

• 学習モード
  • おそらくほとんどの保護者は子どもに英語を触れさせたい欲があるかなと思っています
  • 運営のデフォルト絵本とユーザー作成のAI絵本を対象に、日本語と英語の読み聞かせ言語の切り替えや、両言語の並列表示モードを搭載し、絵本で英語が学べるようにしました
    

• さいしょからボタン
  • 子どもに読み聞かせをした後に、99%くらいの確率で「もう1回」がやってきます。簡単に読み直しができるよう、さいしょからボタンを搭載し、子どもの「もう1回」にも対応できるようにしました

設計として工夫したこと

この辺りはエンジニアとしての腕の見せ所です。Firebaseは初利用でしたが、ここらへんは守るべきもの、というのは経験から判断がつくので、それがこのアプリではどうなっているかをCursorに指示して解析してもらいつつ、疑問点なども壁打ちしながら設計を詰めていきながら実装していきました。

ストレージコストの削減

• 画像アップロード時の高圧縮
  • 個人開発なのでストレージコスト料金が爆発するのは避けたいと思いました（そのまま写真アップロードすると、XXMB／枚なので、散り積もるとストレージコストとか通信コストも恐ろしい‥）
  • 画像アップロード時に高圧縮し、絵本の見た目も保ちながら容量を大幅削減した上で、アプリ内部でカスタムキャッシュを利用し、ストレージへのアクセスも極力減らすように設計しました

生成AI APIのレート制限対策

• 絵本を作成するためのAI API側の制限が使い始めはとても厳しい
  • 画像生成AIのAPI仕様を確認したところ、画像生成リクエストが同時発生すると簡単にレート制限に引っかかってしまう恐れがありました
  • そこでレート制限に引っかからないように、キューサービスを導入し、同時リクエスト数を事前に制御してレート制限に引っかからないように計算して実装し、ユーザーにはアプリ内でリクエスト待ちやリアルタイム進捗ステータスの表示、アプリを閉じても絵本作成進捗には影響しないようにすることで、ユーザー体験を損なわないようにしました
    

クライアントとサーバーの役割分担

• 軽量処理はクライアント（端末）側、高負荷や重要な処理はクラウド側で
  • 軽い処理系はクライアント側に任せることができますが、例えば、画像生成AIのリクエストなど処理時間も長く万が一流出すると怖いものはクラウド側に任せるように設計しました
  • クラウドサービスを利用しますので、想定リクエスト数と各処理の実ログから処理時間を調べたり、想定外の費用が発生しないようにかなり綿密な計算をしました（それでも予想外の費用が生じてきたら、ちょっとサービス内容や処理の持たせ方を変えたりもするかもしれません）

セキュリティ対策

• APIキーなどの機密情報は 適切にクラウド側のサービスで管理して利用
  • Secret Managerなどの機密情報を適切に保管して利用するサービスを使い、重要なキー情報は保護して利用するように実装しました
• 自分の絵本以外へのリクエスト禁止
  • 念には念をということで、自分のユーザーID以外からのリクエストは受け付けないようにストレージ側のルールでセキュリティルールを設けました
• アプリ以外からの利用防止
  • アプリ以外からの不正利用はさせたくないなーという思いでいたら、FirebaseにはAppCheckという最適サービスが用意されていたのでこれを適用しました

リリースや審査にあたって驚いたこと

Android（Play Store）

• 開発者の住所が公開される
  • アプリ内課金がある場合、デベロッパー住所が公開されるルールになっていました。さすがに自宅の住所を晒されると困る‥となったので、色々と調べてバーチャルオフィス契約して開業届を出す羽目に..
• テスター要件
  • 12人以上14日間の内部テストを実施する必要があるらしく、どうしたものかと困り果てました
    https://support.google.com/googleplay/android-developer/answer/14151465?sjid=16570471984713459888-NC
  • ※ただし、これは個人開発向けの要件だったようで、 開業届して組織に切り替えしたら、この要件は対象外 になりました
• 不適切コンテンツの報告機能の実装
  • Androidでは生成AIを使う場合には、必ず不適切コンテンツ報告機能を実装する必要があると審査リジェクトされました
    https://support.google.com/googleplay/android-developer/answer/13985936?hl=ja

iOS（App Store）

• 「ペアレンタルゲート」が必須
  • スワイプしてボタンを押せるようにはしていましたが、子ども向けアプリでは以下のような厳しい制御を入れる必要があると、審査リジェクトされました
    https://developer.apple.com/app-store/kids-apps/
  • 例にある、図形の問題だと5-6歳には軽く突破されそうな気もしたので、四則演算をこのアプリでは導入し再審査提出すると審査が無事通過しました

ちなみに、AndroidよりiOSの方が審査に厳しいとよく聞きますが、生成AIコンテンツを扱っているからなのか、このアプリではAndroidの方が審査厳しい（Firebaseのログを確認する限りは、しっかりと細かくアプリの細かな機能まで見てくれていた）印象でした。

どちらも

• リリースまでの諸作業がクソ面倒
  • ストアに載せるアプリのスクリーンショットを作成したり、アプリのホームページ作ったり、ドメイン契約したり、（私の場合は、開業届やバーチャルオフィス契約したり、ストアを屋号へ変更したりと…)スマホアプリ開発以外での作業が想像以上に労力と時間がかかり、こちらの方がモチベーション維持するのに苦労しました

学んだこと（教え）

• 最初に要件定義や方向性をしっかり整理することが大切
  • 最初はとりあえず「こういうの作って」と始めたため、後々手戻りすることが多くありました（デバッグログの非活性化とか、アプリ名の変更 等々）
  • 最初からAI丸投げでとりあえずアプリ作ってみただと、気づいたらアプリのクラウド利用料が超高額に…ってことも起こり得るとも思います
  • (最近話題になっていた、AWSのKiroがまさに仕様書駆動型IDEのようでなので、こちらもぜひ使ってみたいと思っています)
• 開発者も学びながらAIを活用することが大切
  • Cursorにお願いすると平気な顔で色々実装はしてくれますが、「いやいやその解決の仕方は違うでしょ」的な挙動だったり、予めルールを記載してても「何やってんだお前ェっ！」という挙動、ドヤ顔的に「これでバッチリ解決しました！」という嘘も平気で言ってきたりします
  • Cursorがなんか困っていそうだったら、開発者側でもその問題やエラーを調べたりして、「このIssueにこう書いてあるけど、これで対応してみるのはどう？」「今やっているの、XXだから、YYってことなんじゃないの？」とか、開発者も実装に対して理解をし示しつつ、パートナーという想いやりを持って適宜やり取りを加えて導いてあげることも必要だと思いました（一緒になって解決できたときはなんか嬉しかったです）
• これだ！と情熱を抱ける題材の必要性
  • 今回、私は冒頭の3つの精神でリリースまで乗り切りましたが、作るアプリの内容次第では、リリースまでとても長い道のりになるかと思います
  • 私の場合、「自分の作ったアプリでまず息子の楽しむ顔をみたい」という情熱が宿っていたので、リリースまでの道のりを乗り切ることができましたが、それなりに情熱を持てるアプリの題材（誰のためにそれを作成するのか？）を見つけるのが大切なのかなと思いました
  • （もしくは、先に述べたように、アプリ開発以外の作業が大変でモチベーション保ちづらいので、最初はスモールスタートで簡単なアプリ開発にして、リリース作業を先にささっと経験してみるのもありかもしれません。2個目以降はやり方がわかるので、割と楽しく開発できるかなと思っています）

あとがき

• 今回は、Cursorエージェントが登場したての頃でもあり、Proプランの制限も緩く結構使えていましたが、最近は制限が厳しくなったため、今後同じ程度のアプリ開発をCursor Proプランだけでやり切るのは結構厳しいかとは思っています
• 今後は Cloud CodeやGemini CLI、Kiroなど別のAIツールも試してみつつ、 自分に合ったスタイルで他のスマホアプリも開発してみたいと思います
• また、最新のAI情報のキャッチアップだけにとどまらず、AIを活用してしっかりと形にしてリリースする経験は様々な学びと価値がある と強く感じました
• 息子が泣いたときに、自分の名前呼びが効いたのかこの絵本アプリを使うとパッと泣き止んだり、絵本のポーズの真似っこ遊び（ぴょんぴょんくるりんという絵本）もするので、是非お子さまを持つパパママさん使ってみてください！

役立った参考記事

• アプリ作り始める前の必読記事（開発途中で発見しましたが、絶対最初に読んだ方が良い）
  https://qiita.com/sakes9/items/d8a94271f994ab3c26d1
• 個人開発でストアを屋号名称に変更する際の参考記事
  https://note.com/gigabit_million/n/n9ae2c315ed16