> ## 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.

# 最初のモバイルアプリを始める

> Agent を使って、レトロ風ゲームアプリ PixelGames をネイティブの iOS・Android アプリとして作りましょう。

export const PromptActions = ({prompt = "", campaign = "docs-prompt-actions"}) => {
  const LZ_SRC = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js";
  const ensureLZString = () => {
    if (typeof document === "undefined") return;
    if (window.LZString) return;
    if (document.querySelector(`script[src="${LZ_SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = LZ_SRC;
    s.async = true;
    document.head.appendChild(s);
  };
  const handleCopy = async e => {
    const btn = e.currentTarget;
    if (!prompt) return;
    try {
      await navigator.clipboard.writeText(prompt);
    } catch {
      const ta = document.createElement("textarea");
      ta.value = prompt;
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand("copy");
      } catch {}
      document.body.removeChild(ta);
    }
    const original = btn.dataset.label || btn.innerText;
    btn.dataset.label = original;
    btn.innerText = "Copied!";
    setTimeout(() => {
      if (btn.isConnected) btn.innerText = original;
    }, 1500);
  };
  const handleBuild = () => {
    if (!prompt || typeof window === "undefined") return;
    const utm = `utm_source=replit-docs&utm_medium=docs&utm_campaign=${encodeURIComponent(campaign)}&utm_content=prompt-actions`;
    let url;
    if (window.LZString) {
      const encoded = window.LZString.compressToEncodedURIComponent(prompt);
      url = `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`;
    } else {
      url = `https://replit.com/?prompt=${encodeURIComponent(prompt)}&referrer=replit-docs&${utm}`;
    }
    window.open(url, "_blank", "noopener,noreferrer");
  };
  ensureLZString();
  const baseButtonStyle = {
    display: "inline-flex",
    alignItems: "center",
    gap: "6px",
    padding: "8px 16px",
    borderRadius: "8px",
    fontSize: "14px",
    fontWeight: 500,
    cursor: "pointer",
    lineHeight: 1.2,
    fontFamily: "inherit",
    textDecoration: "none"
  };
  return <div style={{
    display: "flex",
    gap: "12px",
    margin: "16px 0",
    flexWrap: "wrap",
    alignItems: "center"
  }}>
      <button type="button" onClick={handleCopy} style={{
    ...baseButtonStyle,
    background: "transparent",
    color: "inherit",
    border: "1px solid rgba(127,127,127,0.4)"
  }}>
        Copy the prompt
      </button>
      <button type="button" onClick={handleBuild} style={{
    ...baseButtonStyle,
    background: "#F26207",
    color: "#FFFFFF",
    border: "1px solid #F26207"
  }}>
        Build on Replit ↗
      </button>
    </div>;
};

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

export const pixelGamesPrompt = "Create a mobile app called PixelGames: a retro handheld console UI styled like a classic Game Boy, cream plastic shell, grey screen bezel, olive-green LCD screen with grid lines. Add a D-pad and two round A/B buttons, plus MENU and START buttons below the screen. Show a menu with four games: Blocks, Snake, Racer, and Pinball.";

Replit でのモバイルアプリ開発は、Web アプリの開発と同じ進め方です。作りたいものを説明すると、Agent が
コードを書きます。このガイドでは1つの例を通してその流れを紹介するので、ご自身のアイデアに応用する前に
パターンをつかめます。

<Frame caption="完成イメージ: スマートフォンで動作する PixelGames のメニューと Blocks ゲーム。">
  <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/pixelgames-home-screen.webp?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=dfae6a8f1698297aeda472c149fe9610" alt="Blocks、Snake、Racer、Pinball が並び、Blocks が選択されている PixelGames のメニュー" width="420" height="420" data-path="images/pixelgames/mobile/pixelgames-home-screen.webp" />
</Frame>

<PromptActions prompt={pixelGamesPrompt} campaign="docs-mobile-first-app" />

## 始める前に

必要なのは [Replit アカウント](https://replit.com/)だけです。作成は無料です。

目標は、次の一連の流れを最後まで完了することです。

* [Agent](/ja/features/agent/overview) で作る
* モバイルアプリとしてテストする
* 公開して共有する

Agent は Replit の AI ビルダーです。作りたいものを説明すると、アプリを作成し、何をしたかを説明し、
問題があれば修正します。

## 1. Agent にアプリの作成を指示する

Replit を開いて新しいアプリを開始します。作りたいものを説明し、アプリの種類として **Mobile app** を
選択します。

<AiPrompt>
  {pixelGamesPrompt}
</AiPrompt>

<Frame caption="Agent がモバイルプロジェクトとコンソールのシェル UI をセットアップしている様子。">
  <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/pixelgames-scaffolding.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=f65c88aa83300af9e0aca0528175646a" alt="Mobile モードが選択された状態で、Replit のホームページに入力された PixelGames のビルドプロンプト" data-path="images/pixelgames/mobile/pixelgames-scaffolding.png" width="877" height="411" data-path="images/pixelgames/mobile/pixelgames-scaffolding.png" />
</Frame>

## 2. プレビューで動作を確認する

Replit は、プレビューペイン内で PixelGames を iOS または Android としてシミュレートします。変更を確認する
最も速い方法です。

<Steps>
  <Step title="シミュレーターが自動的に起動する">
    PixelGames の準備ができると、Replit が自動的にシミュレーションを起動します。セットアップは不要です。
  </Step>

  <Step title="ドロップダウンでプラットフォームを切り替える">
    プレビューペインのツールバー（レンチとリフレッシュのアイコンの隣）にある **Simulate on...**
    ドロップダウンで、**iOS**、**Android**、**Web** を切り替えます。
  </Step>
</Steps>

<Frame caption="Replit のプレビューペインにある Simulate on... ドロップダウン。">
  <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/replit-simulate-dropdown.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=261e1358d3acd58025b1f4f00d779a5b" alt="Simulate on の Web・iOS・Android ドロップダウンが開いた Replit のプレビューペイン" data-path="images/pixelgames/mobile/replit-simulate-dropdown.png" width="1920" height="992" data-path="images/pixelgames/mobile/replit-simulate-dropdown.png" />
</Frame>

### 実際に動くか確認する

プレイヤーになったつもりで PixelGames を使ってみましょう。

* **MENU** 画面で **Blocks** が選択でき、他の3つのゲームには「SOON」と表示されていることを確認します。
* Blocks を開き、D-pad と A/B ボタンでいくつかのピースを操作します。
* プレイ中に HUD のスコア、レベル、ライン数が更新されることを確認します。

おかしな点があれば、見たままを Agent に伝えてください。自分でバグを見つける必要はありません。

## PixelGames が動きました

1つのプロンプトから、Replit 内でプレビューできるプレイ可能なゲームができました。

## トラブルシューティング

<AccordionGroup>
  <Accordion title="プレビューペインが空白のままになる">
    最初のビルドには1〜2分かかるため、止まっていると判断する前に少し待ってください。それでも空白の場合は、
    コンソールでエラーを確認し、Agent に共有してください。
  </Accordion>

  <Accordion title="変更がプレビューに反映されない">
    コンソールで **R** を押して PixelGames を再読み込みし、それでも古いままの場合はプレビューペインの
    ツールバーにあるリフレッシュアイコンを使ってください。
  </Accordion>

  <Accordion title="プレビューに赤いエラー画面が表示される">
    通常は JavaScript エラーまたはパッケージの不足を意味します。メッセージを読んでください。多くの場合、
    該当するファイルと行が示されています。その内容を Agent に共有し、修正を依頼してください。
  </Accordion>

  <Accordion title="アプリが Web では動くが iOS や Android で動かない（またはその逆）">
    パッケージによってはプラットフォームごとに動作が異なります。Web で動くものがネイティブでは
    サポートされていなかったり、別のセットアップが必要だったりします。利用する前に Agent に
    「このパッケージはネイティブをサポートしていますか？」と尋ねてください。
  </Accordion>

  <Accordion title="ビルドに時間がかかる">
    最初のビルドはまだキャッシュがないため常に遅く、以降は速くなります。遅いままの場合は、プロジェクト内に
    不要なパッケージがないか Agent に確認させてください。
  </Accordion>

  <Accordion title="Module not found エラー">
    パッケージがインストールされていないか、インストール済みでもキャッシュが古くなっていることを意味します。
    Agent にインストールまたはキャッシュのクリアを依頼し、パッケージ名のスペルミスがないかも確認してください。
  </Accordion>
</AccordionGroup>

## 次のステップ

<CardGroup cols={2}>
  <Card title="スマートフォンでテストする" icon="mobile" href="/ja/build/mobile-preview-testing">
    PixelGames を実際のスマートフォンアプリとして体験しましょう。親指で操作するボタン、ハプティクス、
    実際の画面サイズを確認できます。
  </Card>

  <Card title="ログインを追加する" icon="right-to-bracket" href="/ja/build/mobile-login">
    プレイヤーがサインインして進行状況を保存できるようにします。
  </Card>

  <Card title="モバイルアプリで画像を保存する" icon="image" href="/ja/build/mobile-store-images">
    プロフィール写真を App Storage に保存します。
  </Card>

  <Card title="プッシュ通知を送信する" icon="bell" href="/ja/build/mobile-push-notifications">
    新しいゲームがリリースされたことをプレイヤーに知らせます。
  </Card>

  <Card title="支払いを追加する" icon="credit-card" href="/ja/build/mobile-payments">
    PixelGames のコンテンツに対してプレイヤーに課金します。
  </Card>
</CardGroup>