モバイルアプリをビルドする

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

⏰ 所要時間: 約15分 モバイルアプリはスマートフォンで自然に使えるべきです: すぐに開け、タップしやすく、片手で快適に使えます。 Replitとは？ のランニングトラッカーの例にインスパイアされた、スマートフォンファーストのランニングトラッカー Pace Mobile をビルドします。App Store の完全なパスにコミットする前に、フォーカスしたモバイルフローをテストすることが目標です。

​

達成できること

このガイドを終えると、以下が完成します:

• Agent で作成されたモバイルアプリプロジェクト。
• 1つのスマートフォンフレンドリーなフローに絞った最初のバージョン。
• シミュレーターまたはエミュレーターで動作するアプリ。
• Expo Go でスマートフォン上で動作するアプリ。
• フィードバックのために誰かに送れる共有可能なバージョン。

​

学べること

以下の方法を学びます:

• プロンプトからモバイルアプリを開始する。
• スマートフォンの制約に合わせて最初のバージョンのスコープを決める。
• シミュレーターまたはエミュレーターでアプリをテストする。
• Expo Go で実機上でアプリをテストする。
• App Store や TestFlight の作業を始める前に反復を続けるタイミングを判断する。

​

対象者

アイデアがスマートフォンで使われるべきものである場合にこのガイドを使ってください。 トラッカー、予約フロー、フィールドツール、イベントアプリ、学習ツール、習慣アプリ、デスクトップから離れて使うものに役立ちます。

​

始める前に

以下が必要です:

• Replit アカウント。
• Expo Go がインストールされたスマートフォン。
• 数分でテストできる1つのモバイルフロー。

シミュレーター、エミュレーター、デバイスプレビューの正確な詳細については、Native Mobile Apps をご覧ください。

​

モバイルフローを定義する

ビルドする前に、スマートフォンで誰かが何をするかを決めてください。 Pace Mobile の場合:

• 対象者: すぐにランを記録したいランナー。
• メインフロー: ランタイプを選択 → 距離と時間を入力 → ランを保存 → 今日のサマリーを見る。
• モバイルの制約: 主要なアクションは片手の親指で届きやすくする。
• 最初のバージョン: アカウントなし、ソーシャルフィードなし、高度なアナリティクスなし。

これにより、最初のモバイルスライスをテストに十分小さく保てます。

​

最初のバージョンをビルドする

Replit を開いて新しいアプリを開始します。ビルドしたいものを説明して、アプリタイプとして Mobile app を選択します。 このプロンプトを使ってください: Agent にビルド前に考えてほしい場合は Plan モード を使ってください。ビルドを開始する前に、Agent に画面、ナビゲーション、タップターゲット、スマートフォン固有の制約を確認するよう依頼してください。

​

シミュレーターまたはエミュレーターでテストする

Agent が最初のビルドを完了したら、Preview を開きます。デバイスセレクターで iOS Simulator または Android Emulator を選択します。 スマートフォンで使う人のようにアプリをタップしてみてください。 以下を確認してください:

• エラーなしでアプリが起動する。
• ランタイプを選択できる。
• 距離と時間を入力できる。
• ランを保存できる。
• 今日のサマリーが更新される。
• 詰まることなくナビゲートできる。
• ズームなしでテキストを読める。

​

スマートフォンでテストする

シミュレーターテストは役立ちますが、実機でアプリが本当に使いやすいかがわかります。 モバイルデバイスのプレビューパネルを開いて、スマートフォンで QR コードをスキャンします。これにより Expo Go でアプリが開きます。 スマートフォンで確認します:

• 片手でメインフローを完了できますか？
• ボタンと入力欄はタップするのに十分な大きさですか？
• 主要なアクションに届きやすいですか？
• キーボードが重要なフィールドを隠していませんか？
• 小さな画面でもアプリが使いやすいですか？

何か使いにくい場合は、アプリ全体をリデザインするのではなく、その特定の部分を修正するよう Agent に依頼してください。

​

フィードバック用に共有する

スマートフォンフローが動作したら、アプリを公開して早期フィードバック用の共有可能な Expo Go バージョンを作成します。 1つのフォーカスしたタスクと共に共有します:

スマートフォンで Pace Mobile を開いて、1つのランを保存して、タップ、読み取り、理解しにくかったことを教えてください。

フォーカスしたフィードバックは一般的な意見より使いやすいです。フィードバックが1つの明確な問題を指している場合は、Agent に最小限の修正を依頼してスマートフォンでもう一度アプリをテストしてください。

​

App Store に公開する

Expo Go でシミュレーターと実機で Pace Mobile をテストしたら、同じアプリを TestFlight と App Store に昇格させることができます。このフローには Apple Developer Program の会員資格と二要素認証が必要です。登録、個人対組織アカウント、TestFlight と App Store レビュー、外部テストの背景については、モバイルアプリをビルドして公開する をご覧ください。

​

完了の確認

• アプリが iOS Simulator または Android Emulator で開く。
• アプリが Expo Go でスマートフォンで開く。
• メインのモバイルフローを完了できる。
• テキスト、ボタン、ナビゲーションがスマートフォンで快適に使える。
• テスト可能なモバイルバージョンを公開または共有した。
• 少なくとも1人がアプリを試してフィードバックを提供できる。
• （オプション）App Store フローを通じて TestFlight にアプリを送信した。

​

次の改善ステップ

​

さらに助けが必要ですか？

• Agent がウェブアプリをビルドする: やり直してビルド前にアプリタイプとして Mobile app を選択してください。
• Expo Go のプレビューが古く見える: スマートフォンを振り、デベロッパーメニューを開いて Refresh を選択してください。
• タップターゲットが小さすぎる: Agent にタッチターゲットを増やして主要なアクションを親指の届く範囲に保つよう依頼してください。
• ナビゲーションが込み合っている: Agent にメインフローに必要な最小限の画面にアプリを絞るよう依頼してください。
• シミュレーターは動作するが実機では動作しない: 実機でハードウェア固有の動作をテストして Native Mobile Apps をご覧ください。
• 公開に失敗する: モバイルアプリのトラブルシューティング をご覧ください。

​

今すぐ試す

​

関連

• Native Mobile Apps
• モバイルアプリをビルドして公開する
• バイブコーディング入門
• モバイルアプリのトラブルシューティング