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

絵文字ピッカーを追加する

写真が選ばれたら、アプリは「写真を選ぶ」モードから「写真を装飾する」モードに切り替わるべきです。次のプロンプトをエージェントに貼り付けてください。

プロンプト
写真が選ばれたら(ライブラリから選んだ場合でも、"Use this photo" をタップした場合でも)、2 つのボタンをオプションの行に置き換えて。左側には元のボタンに戻す "Reset" オプション、中央には丸い "+" ボタンを置いて。"+" をタップすると、Expo UI(@expo/ui)の BottomSheet コンポーネントを使って、"Choose a sticker" というタイトルのボトムシートを開いて。シートには assets/images フォルダ内の絵文字画像を 3 列のグリッドで表示して。絵文字をタップしたらシートを閉じて、その絵文字を写真の上にステッカーとして配置して。
英語の原文プロンプト
Prompt
When a photo has been chosen (either picked from the library or by tapping "Use this photo"), replace the two buttons with a row of options: a "Reset" option on the left that brings back the original buttons, and a circular "+" button in the middle. Tapping "+" should open a bottom sheet titled "Choose a sticker", using the BottomSheet component from Expo UI (@expo/ui). The sheet shows the emoji images from the assets/images folder in a grid with three columns. When I tap an emoji, close the sheet and place that emoji on top of the photo as a sticker.

表示されるもの: 写真を選ぶと、ボタンが新しいオプションの行に変わります。+ をタップすると、絵文字のグリッドを含むボトムシートがスライドして表示されます。いずれかをタップするとシートが閉じて、写真の上に絵文字が表示されます。

2

ステッカーを動かしたり大きさを変えたりする

ステッカーが 1 か所に固定されたままでは面白くありません。次のプロンプトをエージェントに貼り付けてください。

プロンプト
react-native-gesture-handler と react-native-reanimated ライブラリを使って、ステッカーをインタラクティブにして。指でステッカーをドラッグして写真上の好きな場所に置けるようにして、ダブルタップすると大きさが 2 倍になるようにして(もう一度ダブルタップすると元の大きさに戻る)。移動とサイズ変更はスムーズにアニメーションするようにして。
英語の原文プロンプト
Prompt
Make the sticker interactive using the react-native-gesture-handler and react-native-reanimated libraries: I want to drag the sticker around with my finger to place it anywhere on the photo, and double-tap it to double its size (double-tapping again should shrink it back). The movement and resizing should animate smoothly.

表示されるもの: 指で絵文字を写真の上にドラッグして動かせます。ダブルタップすると大きくなったり、元のサイズに戻ったりします。

このステップは、あなたの役割を思い出させてくれます。エージェントは自分の書いたコードを読むことはできますが、ジェスチャーの感触までは分かりません。ドラッグの感触が正しいかどうかを確認できるのはあなただけです。ステッカーが遅れて動いたり、飛んだり、元の位置に戻ってしまったりする場合は、その様子をそのままエージェントに伝えてください。

まとめ

第 4 章:ステッカーを追加する

写真には、ドラッグでき、大きさも変えられる絵文字ステッカーが貼り付けられるようになりました。あとは、この作品を保存する方法だけです。

次の章では、装飾した写真をスマートフォンの写真ライブラリに保存します。

次へ:画像を保存する