2025年でやりたいことの一つに「スマホアプリケーションを作る」がある。
自分は非エンジニアで、Webアプリの開発経験（めっちゃ趣味）があるくらい。
スマホアプリに関しては開発環境の構築から、デプロイの方法まで何もわからなかった。
そんな自分がAIツールを駆使しながらAppStoreにアプリを登録するまでに経験した知見をここに記していく。
ちなみに実際に作ったアプリはこれ
改良の余地は大有りなんだけど、一旦デプロイし切ることを重視した。
動画でも解説しているから、そちらも見て欲しい。
前提
大前提として『完成したアプリの品質は問わない』ということはご了承願いたい。
この記事で解説するのはゼロから始めて、基本的なアプリケーションを登録するまでのロードマップ。
本当はマーケティング的な要素や要件定義などがちゃんと入った方がいいと思うけど、まずは一通りやり切ることに注力。
大まかなステップ・かかった期間
大まかなステップとしてはこんな感じ。
- 技術選定〜環境構築（どのフレームワークで作っていくか）
- UIの構築（おおよそのイメージを掴んでいく）
- 詳細な調整（エディタを使いながら気になるところを直していく）
- ビルド
- アプリの登録
詳細は次の項目で解説する。
かかったのは最初にやり始めて、平日の空き時間や土日を使って1ヶ月くらい。今思えば躓きポイントの乗り越え方を把握していたらもっと早く行けたと思うから、この記事で解説をしていく。
それぞれの行程の解説
ステップ①｜技術選定〜環境構築
実は結構ここで躓いてしまった。
というのも、アプリのプラットフォームごとに明確に線が引かれているから。
詳細は後述するとして、結論として
React NativeとExpoを使って開発することにした。
理由としては
- 環境構築が楽
- 自分が元々Webアプリで書いた言語Typescript, JavaScriptで記述できる
- テストをするのが楽
- Bolt.newやRorkなどのAIツールとの連携ができる。
ちなみに、環境構築はあまりAIに聞かない方がいい。
シンプルにAIの指示だけでうまく行ったことがない。
ちゃんと記事を見てその通りにやっていくことをおすすめする。
ステップ②｜UIの構築
ここが一番楽しいところ。
「これ作れたら神やん！！」みたいなテンションになれるから。
おすすめとしてはフロントエンド生成AIツールを使い倒すこと。
おすすめなのはBolt.new。
コツがあるとすれば、Bolt.newに渡すプロンプトというか仕様書の作り方。
ChatGPTなどの生成AIに大まかなイメージを伝えて、それを言語化してもらう感じ。
ステップ③｜詳細な調整
ここはCursorを使ってゴリゴリに編集をしていく。
初心者だとBolt.newからCursorにプロジェクトを移すのがイメージできないかと思う。
やり方としてはまず、Bolt.newのプロジェクトからダウンロードする
で、Cursorでコードベースを参照しつつ、
「このプロジェクトはUIのファイルだけ作ってあるから開発環境を構築して欲しい」って伝えるとうまくいった。知識がある場合には、プロジェクトはこちらで作って、その構成しているファイルをCursor側に伝えるのでもできる。
ステップ④｜ビルド
ここがめっちゃエラー出た。初心者は一個一個潰していくしかない。
Cursorに逐一状況を教えながら考えてもらう。
メインの修正はapp.jsonファイルの修正だった。
ステップ⑤｜アプリの登録
ここでは用意するものが意外に多かった。
- 登録するためのアプリケーションのスクショ
- PR文や機能情報など、アプリの登録
- プライバシーポリシーや問い合わせのためのページ
あと、登録の時に色々エラーが出てきたんだけど、ここでもメインの修正はapp.jsonファイルの修正だった。
どうやら、このファイルの情報を元にAppStoreとのやりとりやアプリの設定が判定されているらしい。
エラーが出ても落ち着いてCursorと対話することをお勧めする。
結構躓いたポイント
技術選定・環境構築｜Flutterに沼った
生成AI駆動開発をしたい人が地味につまづくのがこの技術選定・環境構築だと思う。
理由として、ある程度の知識がないとAIに指示できないし、出力が妥当なものなのかわからない。
技術選定に関して。個人的に最初Flutterを使って開発をしようとしたんだけど、環境構築で沼ってしまった。用意するものが多いのと、調べてもよくわからないって状態がそこそこ続いた。
で、出した結論としてはReactNative×Expoでの構築。これの利点は先述の通り。
生成AI時代はUI生成ツールの技術様式をそのまま受け入れるのが機動力が上がる気がする。
Bolt.newのコードを実際に手元で動かすための構築
ここも地味につまづいた。
boltからダウンロードされるのはあくまでもファイル構造だけであって、プロジェクトとして、ダウンロードできるわけじゃない。だからnpm run devしても動かない。
解決策としては先述の通り。
ビルド〜アプリの登録（エラーが出るし、普通に面倒）
この段階はもう手元では動くアプリができているのに、それをなかなか公開できなもどかしさがある。
以下の記事等を参考にしてどんなものが必要になるのかを改めて把握しておくことが大事。
また、app.jsonの設定とかAppStoreConnectの設定とかだるい。
少しでもエラーが出ていたり、アラートが出ていたり、何か表示された時は逐一調べて解決してから進んだ方が手戻りがなくていい。
アプリの登録で用意するものが結構多い
まず、1個目スクリーンショットについて。
これは自分が使っているiPhone16のシミュレーターを使用して作ったものでは不十分だった画面の比率が違ったらしい。AppStoreConnectで指示されている画像サイズにPhotoshopなどの画像修正ソフトで修正するのがいい。
あと、iPadのスクリーンショットも必要なので注意。
2個目。プライバシーポリシーなど、問い合わせページも必要。
これはVercelを使って簡単なページをデプロイしました。
1回AppStoreから差し戻された
個人的にすごくシンプルですぐ通ると思っていたんだけど、1日くらい経ったら以下のようなメッセージが来て一回AppStoreから差し戻された。
Hello,
We noticed one or more issues with a recent delivery for the following app:
PomoFlow
App Apple ID6744347890
Version 1.0.0
Build 5
This is for your information only and doesn’t require any action:ITMS-90078: Missing potentially required entitlement – Your app, or a library that’s included in your app, uses Apple Push Notification service (APNs) registration APIs, but the APS Environment Entitlement isn’t included in the app signature’s entitlements. If your app uses APNs, make sure the App ID is enabled for push notifications in Certificates, Identifiers & Profiles, sign the app with a distribution provisioning profile that includes the APS Environment Entitlement, and upload a new build to ensure that push notifications function as intended. For details, visit: https://developer.apple.com/documentation/usernotifications/registering-your-app-with-apns.
提出していたapp.jsonの内容と、AppStoreConnectの情報に食い違いがあったことが原因だったっぽい。
「ややこしすぎるねん！」という言葉を飲み込んで再度提出したら難なく通った。
まとめ
今回は非エンジニアの自分がスマートフォンアプリケーションを作るために辿ってきた道を共有した。
生成AIを使えばアプリケーションが簡単に作れるのは事実なんだけど、それは知識や知的探究心、熱量があってこそというのを今回わからされた。
次は解決する課題の深掘りとか、広めるためのマーケティング手法とか。徐々に改善をしていきたいと思ってる。
