Docs
ブログ変更履歴GitHub でスターを付ける
ホームガイドEASリファレンス学習
ArchiveExpo SnackDiscord and forumsNewsletter

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

写真ライブラリに保存する

次のプロンプトをエージェントに貼り付けてください。

プロンプト
オプションの並びに、ダウンロードアイコン付きの "Save" を追加して。タップしたら、react-native-view-shot ライブラリを使って画面全体ではなくステッカー付きの写真だけをキャプチャし、expo-media-library ライブラリの Asset.create() メソッドを使ってスマートフォンの写真ライブラリに保存して。必要であれば初回に写真を追加する許可を求め、画像が保存されたことを知らせるアラートを表示して。
英語の原文プロンプト
Prompt
Add a "Save" option to the row of options, with a download icon. When I tap it, capture just the photo with the sticker on it (not the whole screen) using the react-native-view-shot library, and save the result to my phone's photo library using the Asset.create() method from the expo-media-library library. Ask for permission to add photos the first time if needed, and show an alert confirming that the image was saved.

表示されるもの: 初めて Save をタップしたときに、写真を追加する許可を求められることがあります。Allow（許可）をタップすると、アプリが確認メッセージを表示します。スマートフォンの写真ギャラリーを開いてみましょう。ステッカーが焼き込まれた写真がそこにあり、どこにでも共有できる状態になっています。

2

web でも動くようにする（任意）

このアプリはスマートフォン専用ではありません。同じプロジェクトは web ブラウザでも動作します。開発サーバーを実行しているターミナルウィンドウで W を押すと、アプリがブラウザで開きます。Save を除いて、すべて動作します。web ブラウザはアプリに写真ライブラリへのアクセスを提供しないため、画像をそこに保存できません。

Save オプションを web でも動くようにしたい場合

次のプロンプトをエージェントに貼り付けてください。

プロンプト
アプリが web ブラウザで動作しているときも Save オプションが使えるようにして。プラットフォームが web の場合は、react-native-view-shot ライブラリで画像を data URI としてキャプチャし、写真ライブラリに保存する代わりに JPEG ファイルとしてダウンロードして。
英語の原文プロンプト
Prompt
Make the Save option also work when the app runs in a web browser. When the platform is web, capture the image with the react-native-view-shot library as a data URI, and download it as a JPEG file instead of saving it to the photo library.

表示されるもの: ブラウザで写真を選び、ステッカーを追加して Save をクリックすると、画像がファイルとしてダウンロードされます。これが Expo アプリでのプラットフォームごとの違いの扱い方です。1 つのアプリの中に、必要な箇所だけ小さくプラットフォーム別の分岐を用意します。

結果が期待どおりにならない場合は、見えているものをそのままエージェントに伝えてください。うまくいかないとき に対処法があります。

まとめ

第 5 章：画像を保存する

StickerSmash はこれで機能が出そろいました。写真を選び、ステッカーをぺたりと貼り、その結果をスマートフォンに、そしてブラウザでも保存できます。残るはあと 1 章です。

次の章では、ステータスバー・スプラッシュスクリーン・アプリアイコンを仕上げて、次のステップに進みます。

次へ：仕上げ