画像を保存する

ページを編集

この章では、AI エージェントに指示して、装飾した写真をスマートフォンに保存し、任意でブラウザでも動作するようにします。

この章では、最後のコア機能を追加します。ステッカーごと写真をスマートフォンの写真ライブラリに保存する機能です。

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

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

プロンプト

オプションの並びに、ダウンロードアイコン付きの "Save" を追加して。タップしたら、react-native-view-shot ライブラリを使って画面全体ではなくステッカー付きの写真だけをキャプチャし、expo-media-library ライブラリを使ってスマートフォンの写真ライブラリに保存して。必要であれば初回にアクセス許可を求め、画像が保存されたことを知らせるアラートを表示して。

英語の原文プロンプト

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 expo-media-library library. Ask for permission the first time if needed, and show an alert confirming that the image was saved.

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

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

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

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

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

プロンプト

アプリが web ブラウザで動作しているときも Save オプションが使えるようにして。react-native-view-shot ライブラリは web に対応していないので、プラットフォームが web の場合は代わりに dom-to-image ライブラリを使って画像をキャプチャし、ファイルとしてダウンロードして。

英語の原文プロンプト

Prompt

Make the Save option also work when the app runs in a web browser. The react-native-view-shot library doesn't support the web, so when the platform is web, use the dom-to-image library to capture the image and download it as a file instead.

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

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

まとめ

第 5 章：画像を保存する

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

この章を読了にする

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

次へ：仕上げ