達成できること
このガイドを終えると、以下が完成します:- Agent で作成されたモバイルアプリプロジェクト。
- 1つのスマートフォンフレンドリーなフローに絞った最初のバージョン。
- シミュレーターまたはエミュレーターで動作するアプリ。
- Expo Go でスマートフォン上で動作するアプリ。
- フィードバックのために誰かに送れる共有可能なバージョン。
学べること
以下の方法を学びます:- プロンプトからモバイルアプリを開始する。
- スマートフォンの制約に合わせて最初のバージョンのスコープを決める。
- シミュレーターまたはエミュレーターでアプリをテストする。
- Expo Go で実機上でアプリをテストする。
- App Store や TestFlight の作業を始める前に反復を続けるタイミングを判断する。
対象者
アイデアがスマートフォンで使われるべきものである場合にこのガイドを使ってください。 トラッカー、予約フロー、フィールドツール、イベントアプリ、学習ツール、習慣アプリ、デスクトップから離れて使うものに役立ちます。TestFlight と App Store への公開はこのガイドとは別のものです。そのパスの準備ができたら、モバイルアプリをビルドして公開する をご覧ください。
始める前に
以下が必要です:- Replit アカウント。
- Expo Go がインストールされたスマートフォン。
- 数分でテストできる1つのモバイルフロー。
モバイルフローを定義する
ビルドする前に、スマートフォンで誰かが何をするかを決めてください。 Pace Mobile の場合:- 対象者: すぐにランを記録したいランナー。
- メインフロー: ランタイプを選択 → 距離と時間を入力 → ランを保存 → 今日のサマリーを見る。
- モバイルの制約: 主要なアクションは片手の親指で届きやすくする。
- 最初のバージョン: アカウントなし、ソーシャルフィードなし、高度なアナリティクスなし。
最初のバージョンをビルドする
Replit を開いて新しいアプリを開始します。ビルドしたいものを説明して、アプリタイプとして Mobile app を選択します。シミュレーターまたはエミュレーターでテストする
Agent が最初のビルドを完了したら、Preview を開きます。デバイスセレクターで iOS Simulator または Android Emulator を選択します。 スマートフォンで使う人のようにアプリをタップしてみてください。- エラーなしでアプリが起動する。
- ランタイプを選択できる。
- 距離と時間を入力できる。
- ランを保存できる。
- 今日のサマリーが更新される。
- 詰まることなくナビゲートできる。
- ズームなしでテキストを読める。
スマートフォンでテストする
シミュレーターテストは役立ちますが、実機でアプリが本当に使いやすいかがわかります。 モバイルデバイスのプレビューパネルを開いて、スマートフォンで QR コードをスキャンします。これにより Expo Go でアプリが開きます。- 片手でメインフローを完了できますか？
- ボタンと入力欄はタップするのに十分な大きさですか？
- 主要なアクションに届きやすいですか？
- キーボードが重要なフィールドを隠していませんか？
- 小さな画面でもアプリが使いやすいですか？
フィードバック用に共有する
スマートフォンフローが動作したら、アプリを公開して早期フィードバック用の共有可能な Expo Go バージョンを作成します。 1つのフォーカスしたタスクと共に共有します:スマートフォンで Pace Mobile を開いて、1つのランを保存して、タップ、読み取り、理解しにくかったことを教えてください。フォーカスしたフィードバックは一般的な意見より使いやすいです。フィードバックが1つの明確な問題を指している場合は、Agent に最小限の修正を依頼してスマートフォンでもう一度アプリをテストしてください。
App Store に公開する
Expo Go でシミュレーターと実機で Pace Mobile をテストしたら、同じアプリを TestFlight と App Store に昇格させることができます。このフローには Apple Developer Program の会員資格と二要素認証が必要です。登録、個人対組織アカウント、TestFlight と App Store レビュー、外部テストの背景については、モバイルアプリをビルドして公開する をご覧ください。1
Publishing タブを開いて App Store への公開を開始する
Expo Go プレビューが公開されたら、Publishing タブを開きます。Production の下に Ready to publish Pace to the App Store? カードが表示されます。Start publishing to the App Store を選択します。
2
Expo プロジェクトを選択する
Replit が Launch を開きます — Replit に埋め込まれた Expo フローです。Expo プロジェクト名とスラッグを入力または確認して、Continue を選択します。既存の Expo プロジェクトがある場合は、代わりに Use existing を選択します。
3
Apple でサインインする
App Store リスティングを所有する Apple Developer アカウントを接続します。アカウントは Apple Developer Program に登録されている必要があり、Apple は二要素認証を適用します — 信頼されたデバイスで確認コードを承認する準備をしておいてください。
4
Apple アプリを選択または作成する
App Store に表示される App name と Bundle ID（例:
app.replit.pace）を入力します。バンドル識別子は最初のビルド後に変更できないため、慎重に選んでください。5
App Store にLaunchする
Replit があなたの代わりに Apple 証明書を設定します。Ready for launch ステップが点灯したら、Launch to App Store を選択します。Replit がクラウドでネイティブアプリをビルドして、TestFlight のベータレビューのために App Store Connect にビルドを送信します。Launch が完了すると、アプリが App Store をターゲットにしていることの確認が表示され、ダイアログが閉じて Project Editor に戻ります。
バージョンの最初のビルドは通常、テスターがインストールできる前に TestFlight のベータレビューが必要です。承認後、追加のビルドは通常より早くテスターに届きます。外部テスターと共有したり App Store リリースのために送信するには、App Store Connect でリスティングを完成させてください — 完全な App Store Connect チェックリストについては モバイルアプリをビルドして公開する をご覧ください。
完了の確認
- アプリが iOS Simulator または Android Emulator で開く。
- アプリが Expo Go でスマートフォンで開く。
- メインのモバイルフローを完了できる。
- テキスト、ボタン、ナビゲーションがスマートフォンで快適に使える。
- テスト可能なモバイルバージョンを公開または共有した。
- 少なくとも1人がアプリを試してフィードバックを提供できる。
- （オプション）App Store フローを通じて TestFlight にアプリを送信した。
次の改善ステップ
ログインを追加する
各ユーザーが自分の進捗を見られるようにしましょう。
データベースを追加する
最初のテストセッションを超えてランの履歴を保存しましょう。
インテグレーションを追加する
通知、健康データ、外部サービスにアプリを接続しましょう。
モバイルアプリをビルドして公開する
動作するモバイルアプリを TestFlight と App Store に向けて進めましょう。
さらに助けが必要ですか？
- Agent がウェブアプリをビルドする: やり直してビルド前にアプリタイプとして Mobile app を選択してください。
- Expo Go のプレビューが古く見える: スマートフォンを振り、デベロッパーメニューを開いて Refresh を選択してください。
- タップターゲットが小さすぎる: Agent にタッチターゲットを増やして主要なアクションを親指の届く範囲に保つよう依頼してください。
- ナビゲーションが込み合っている: Agent にメインフローに必要な最小限の画面にアプリを絞るよう依頼してください。
- シミュレーターは動作するが実機では動作しない: 実機でハードウェア固有の動作をテストして Native Mobile Apps をご覧ください。
- 公開に失敗する: モバイルアプリのトラブルシューティング をご覧ください。