生成画像の自動保存実装。ローカルへの保存はしなくてもよくなった。「Image Prompterへクラウド機能搭載！」

みなさんこ、んばんは。
GWはここぞとばかりに、アプリ開発を楽しんでいます。

最近リリースしたImage Prompterですが、プロンプトの拡張や、プロンプト履歴の管理ができる上に、Nano Banana、Grok、GPT Image、SeeDreamの４つの生成エンジンにフル対応しています。

このアプリの欠点は、生成した画像はローカルに保存しておかないと、アプリを閉じると消えてしまう点でした。

これをどうにか出来ないものかと、試行錯誤した結果、生成した画像はプロンプトとともに、自動保存される仕組みの導入に成功しました！

これまで使用していたクラウド機能（Firestore）は軽くて便利だったのですが、最大ファイルサイズが1Mバイト。Nano Banana Proなどの高性能AIで描いた4K解像度の画像なんかは、圧縮しないと1M以内に収まりません。私が手掛けている他のアプリでは、無理やり1M以内にjpgで圧縮して保存しています。それを、今回Cloudflareのサービスを使うことで、見事解決できました。

もう、あ、閉じてしまった！…保存してなかったのに…という事は起きなくなります。

Cloudflareとは

主な3つの機能

• サイトの高速化（CDN機能）

  • 世界中のサーバーにサイトデータを一時保存（キャッシュ）します。

  • ユーザーに最も近いサーバーからデータを送るため、表示が速くなります。

• サイバー攻撃からの防御（セキュリティ）

  • 大量のアクセスを送りつけるDDoS攻撃を自動でブロックします。

  • 悪質なBotやハッキングの侵入を防ぎ、サイトの安全性を保ちます。

• DNS（ドメイン管理）の提供

  • 高速で安定したドメイン（Webサイトの住所）の管理機能を提供します。

AIに聞いたらこう返ってきましたが、ストレージサービスも展開しています。しかも、10Gバイトまでは、無料で使用できます。そこで、このサービスを、Image Prompterと接続しました。

最大のメリット

これまで、アプリを開発中に何かを変更して、再度立ち上げると、以前のデータが消えています。Firestoreに保存していても、接続は復元されないため、過去のデータにはアクセス出来ずにいました。

ところが、正式にクラウドサービスを使う事で、過去のデータに再接続できますし、なんならCloudflearのコンソールに行けば、データに直に触れます。うまく活用すれば、各アプリ間でデータの連携ができそうで今からワクワクしています。

とは言っても、初めての方には、Cloudflearにアカウントを作るだけでも大変だとは思います。

しかし、一旦作ってしまえば、こんな快適なことはありませんでした。

具体的に出来るようになったこと

アプリを立ち上げると、過去の生成画像のサムネイルを全て読み込みます。それこそ、スマホの写真フォルダのような感じです。新しいものから生成順に並んで表示されます。ギャラリーには、３種類のフィルターがありますので、目的の画像は探しやすくなっています。この3種類のフィルターは、AND演算で処理されます。

• モデルフィルター：生成に使用したモデルでのフィルタリング

• プロジェクトフィルター：現在のプロジェクト名でのフィルタリング

• プロンプトフィルター：現在プロンプトエリアに表示されているプロンプトでのフィルタリング

モデルフィルター

確か、Nano Banana Proで作ったよな〜というときは、Nano Banana Proを選べば、Nano Banana Proの画像を全て表示します。

プロジェクトフィルター

画像生成時には、プロジェクト名がメタデータとして画像に付加されます。つまり、プロジェクト名を変えて生成すれば、そのプロジェクト用のデータとなります。

プロジェクト名は、ギャラリーでも確認できるようになっています。

プロンプトフィルター

このフィルターをONにし、他のフィルターをOFFにすれば、現在表示しているプロンプトで生成した画像を、生成したAIモデルに関係なく全て表示します。

プロンプト履歴のプッシュとプル

これまでローカルに保存していたプロンプト履歴ですが、クラウドへプッシュ出来るようになりました。つまり、プロジェクトを一瞬で交換できるため、例えば「ネコ」プロジェクト（プロンプト履歴20件）から、「美女」プロジェクト（プロンプト履歴50件）に一瞬でチェンジできます。

もちろん、「美女」プロジェクトを選んで、履歴から猫画像をタップして、再度猫画像を生成すると、「美女」プロジェクトの51件目の履歴が猫になります。しかし、プッシュしない限り、「美女」プロジェクトの履歴50件は汚しません。

クラウドストレージの上限設定

Cloudflareは、10Gまで無料ですが、安全策を取って、上限1G〜5Gの間で、自分で上限を決められるようになっています。ストレージが上限に対して、どのくらい使われれいるかは、ギャラリーの上部に表示されるようになっています。

Cloudflareの設定情報、APIキーのインポート＆エクスポート

クラウドに接続するための情報やAPIキーは、アプリ立ち上げ時に自動的に復元しますが、アプリバージョンアップ時には再度入力が必要です。そこで、それらをjsonファイルで入出力する機能を設けました。

メンバーシップの皆様、Image Prompterをお買い上げ頂いた方皆様、クラウド機能はかなり便利ですので、ぜひ使ってみて下さい。端末に空きがない場合も5Gまでストレージが増えますよ😃

Cloudflare R2のセッティング

では、何をすれば使えるようになるのか、出来るだけ簡単に分かりやすくご説明いたします。以下のリンクから、Cloudflareへ行き、まず「無料で始める」をクリックします。

サインアップすると、次の画面になります。

個人ユースなので、Personalを選択します。次に、役職を聞かれますが、企業側のアンケートなので答えても良いですし、SKIPしても大丈夫です。

次に、何の目的でサインアップするのかを聞かれます。とりあえず、ストレージをお借りするので、左側の「Build and scale apps globally」を選んでもSKIPでも良いでしょう。

最後は、どこから始められるか聞かれます。

ここは、素直に右上の「Set up object storage」をクリックします。

ここで右上のボタン「 Add R2 subscription my account 」をクリックします。

支払い情報を登録します。

最後に、チェックを入れて、「Activate R2」をクリックします。2段階認証が行われ、クリアすると、無事ストレージの契約が完了します。

• Class A operations：アップロードやファイル一覧の取得等

• Class B operations：ダウンロードや閲覧等

確認したら、右上の「Continue to R2」をクリックします。

これが、R2のホーム画面です。まだ何も無いので、データを入れるバケツ（bucket）を作らなければいけませんので、右上の「Create bucket」をクリックします。

名前は何でも良いのですが、私は「gemini-apps」にしました。その他のオプションはそのままで良いので、「Create bucket」をクリックします。

ここまで来たら、Settingsをクリックします。ここでは、重要なS3 API URLが表示されています。アプリにコピペする情報①です。

下の方にスクロールすると、CORS Policyがあります。

ここで、+Addをクリックし、右側に表示されるPolicyを書き換えます。

以下のコードで書き換えて下さい。

[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE", "HEAD"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag"]
  }
]

書き換えて「save」ボタンをクリックすると、CORS Policyが次のようになります。

これで、ストレージのアクセスメソッドの設定が完了しました。

最後に、ストレージへアクセスする際のキーとシークレットを取得します。

左側のメニューから、「R2 Object Storage」の「Overview」をクリックします。画面右側にある、API Tokensの { }Manageをクリックします。

右上の「Create Account API token」をクリックします。

読み書きをするので、Object Read & Writeを選択します。他はそのままで、右下の「Create Account API Token」をクリック。次に表示される画面は一度しか表示されず、閉じたら二度と見れません。

ここから、Access Key ID（アプリにコピペする情報②）、Secret Access Key（アプリにコピペする情報③）をコピーし、一時的に保存しておいて下さい。

以上で、Cloudflareのセッティングが終わります。大変お疲れ様でした。

Image Prompterとの接続

右上にある、「R2 S3 API」からAPI情報をセッティングします。

このダイアログに、上でメモった必要情報①〜③を入力して、保存して下さい。接続が成功すると、

APIの隣に、緑のドットが点灯します。点灯を確認したら、再度APIをクリックして、設定情報をローカルにエススポートしておいて下さい。

これで、いつでもどこでも、どの端末でも、同じ環境が整います😉