This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
仕上げ
ページを編集
この章では、AI エージェントに指示して、ステータスバー・スプラッシュスクリーン・アプリアイコンを整え、ビルダーとしての次のステップに進みます。
アプリはすでに動いています。あとは仕上げるだけです。この章では、ユーザーが意識せずとも気づく細部、ステータスバー・スプラッシュスクリーン・アプリアイコンを整えます。
1
ステータスバーを直す
アプリの一番上を見てください。時計とバッテリーのアイコンが濃い色になっていて、暗い背景の上では読みづらくなっています。次のプロンプトをエージェントに貼り付けてください。
スマートフォンのステータスバー（画面上部の時計とバッテリーのアイコン）が、暗い背景の上で読みづらいです。expo-status-bar ライブラリを使って、すべての画面でステータスバーの文字を明るい色にして。
英語の原文プロンプト
The phone's status bar (the clock and battery icons at the top of the screen) is hard to read against our dark background. Use the expo-status-bar library to make the status bar text light on every screen.
表示されるもの: 画面上部の時計・バッテリー・電波のアイコンが明るい色になり、読みやすくなります。
2
アプリアイコンとスプラッシュスクリーンを設定する
前に取得したアセットパックには、アプリアイコンとスプラッシュスクリーンの画像も含まれています。次のプロンプトをエージェントに貼り付けてください。
アプリのアイコンを assets/images/icon.png に設定して。そして expo-splash-screen の config プラグインを使って、Android・iOS・web で assets/images/splash-icon.png を #25292e の背景の中央に表示するスプラッシュスクリーンを設定して。
英語の原文プロンプト
Set the app's icon to assets/images/icon.png, and configure the splash screen using the expo-splash-screen config plugin so it shows assets/images/splash-icon.png centered on a #25292e background on Android, iOS, and web.
表示されるもの: これらの設定はアプリの設定ファイルに書き込まれるため、反映するには開発サーバーを再起動します。ターミナルで Ctrl + C を押し、npx expo start をもう一度実行して、Expo Go からアプリを開き直してください。プロジェクトの読み込み中、一瞬スプラッシュスクリーンが表示されます。
1 つ注意点があります。ホーム画面上のアプリアイコンは変わりません。いま実行しているのは Expo Go というアプリの中であり、Expo Go 自身のアイコンを使っているためです。自分のアイコンが使われるのは、アプリのスタンドアロンビルドを作成したときです。その段階に進む準備ができたら、開発ビルドを参照してください。
結果が期待どおりにならない場合は、見えているものをそのままエージェントに伝えてください。うまくいかないとき に対処法があります。
アプリを作り上げました
ここで少し立ち止まって、ここまでにやったことを振り返ってみましょう。開発環境をゼロから整え、AI エージェントに指示して、ナビゲーション・写真の選択・ジェスチャーで操作するステッカー・保存機能（Android・iOS・web すべてで動作）を備えた本物のアプリを、コードを 1 行も書かずに作り上げました。
さらに重要なのは、このループを学んだことです。プロンプトを送る、ビルドする、確認する、また指示を出す。このループは、このチュートリアルで終わりではありません。自分のアイデアで、今すぐ試してみてください。
写真に複数のステッカーを置けるようにして。
共有ボタンを追加して。タップするとシステムの共有シートが開いて、作った画像を友だちに送れるようにして。
英語の原文プロンプト
Add a share button that opens the system share sheet so I can send my creation to friends.
About 画面の中身を作って。このアプリが何をするものなのかを説明して、制作者として私をクレジットして。
次のステップ
エージェントが使えるスキルの一覧と、それぞれのプロンプト例を確認できます。
ビルドのトリガーやクラッシュレポートの読み取りなど、Expo のツールでエージェントができることをすべて確認できます。
助けが必要な場合や、作ったものを見せたい場合は、Discord の Expo コミュニティに参加してください。
まとめ
第 6 章：仕上げ
おめでとうございます。AI エージェントに指示して StickerSmash をゼロから作り上げ、ステータスバー・スプラッシュスクリーン・アプリアイコンで仕上げました。
エージェントが実際に書いたコードが気になりますか？ Expo チュートリアルでは同じアプリを、コードを 1 ステップずつ説明しながら構築します。