This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
ホーム画面を構築する
ページを編集
この章では、AI エージェントに指示して、タブナビゲーション、写真ビューア、画像ピッカーを追加します。
この章で、アプリは StickerSmash らしい見た目になっていきます。2 つのナビゲーションタブ、写真ビューア、そしてスマートフォンの写真ライブラリを開くボタンを追加します。
1
2
写真ビューアを追加する
次は、ホーム画面の主役となる要素です。大きな写真と 2 つのボタンを配置します。プレースホルダーの写真と、あとで使う絵文字ステッカーをまとめたアセットパックを用意してあります。次のプロンプトをエージェントに貼り付けてください。
アセットを自分でダウンロードしたい場合
エージェントがファイルをダウンロードまたは展開できない場合は、手動で行ってください。sticker-smash-assets.zip をダウンロードして展開し、StickerSmash フォルダ内の assets/images フォルダに画像をコピーします。同じ名前のファイルは置き換えてください。そのうえで、上のプロンプトから最初の 1 文を除いたものをエージェントに渡して、画面を作ってもらいます。
表示されるもの: コーギーの子犬の写真が画面の大部分を占め、その下に 2 つのボタンが並びます。
3
結果が期待どおりにならない場合は、見えているものをそのままエージェントに伝えてください。前章の うまくいかないとき に対処法があります。
まとめ
第 3 章：ホーム画面を構築する
アプリにナビゲーションと、スタイルの整ったホーム画面、そして動作する画像ピッカーが揃いました。コードは 1 行も書いていません。
次の章では、絵文字ピッカーのモーダルを追加し、ジェスチャーでステッカーを操作できるようにします。