Googleスプレッドシートをアプリ化
前回までの内容は、いかがでしたでしょうか?
Stable DiffusionのAPIキーは取得できましたか?
「APIとは何か?」なんとなく理解できましたか?
公開されているAPIを使う場合には、通信が必要となります。コマンドで必要なパラメーターをすべて手入力するは大変メンドウです。
APIサービスの利用は、
- APIへパラメーターを送信
- 結果を受け取る
- 受け取った結果を表示する(または、エラーを表示)
の手順で行います。
この手順で、毎回同じパラメーターを送信部分はプログラム化し、パラメーターの入力と結果の表示を、表と裏に分けて管理します。
表部分には、GUIでパラメーターの入力、結果の表示。
裏部分には、通信プログラム登録します。
この表・裏を上手く使えるのがGoogleスプレッドシートになります。
手順
Googleスプレッドシートを開き、名前を付けます。

StabilityAI社のDeveloper PlatformからAPIキーをコピーします。

プログラムを書いてもらうときに指定したように、A1セルにAPIキーを貼り付けます。
通信プログラムを書くために、メニューの「拡張機能」-「Apps Script」を選択します。

ChatGPTに作成してもらったプログラムを貼付ます。「保存」ボタンをクリックし、「無題のプロジェクト」をクリックして名前を付けます。
プログラムを書いてもらったChatGPTとの会話です。


プログラムを実行するためのボタンを作成します。プログラム実行方法もChatGPTに尋ねています。
メニューの「挿入」-「図形描画」を選択します。

図形描画ウィンドウが開きます。「図形」-「ベベル」を選択します。図形描画ウィンドウで大きさを指定し、文字を書き入れます。


ボタンに実行するスクリプトを割り当てます。「ボタン」の3点メニューから「スクリプトの割当」を選択します。
実行するスクリプト名「generateImage」と入力します。

他のパラメーター
- プロンプト A2
- 縦横比 A3
を入力します。
ボタンをクリックしてプログラムを実行します。

スクリプト実行には認証が必要だと表示されます。

認証するGoogleアカウントを選択します。

実行するスクリプトを許可します。

エラーが出ました。
内容は、DNSエラーです。名前解決ができない(URLのサーバー名が無効)のようです。

APIドキュメントを確認すると、URLの間違いでした。

スクリプトのURLを修正します。

URLを修正しましたが、「FormData is not defined」とエラーになりました。
エラーメッセージをChatGPTに伝えて修正してもらいます。
修正後のプログラムを貼付け保存します。

再度実行しましたが、以下のエラーになりました。
モデル名の指定が、「sd3-medium」にしないといけないようです。

モデル名を修正し、実行します。


またもエラーになりました。
今回のエラーは、「入力内容が1つのセルに最大5000文字の制限を超えています」とのことです。
結果はbyte文字列で返って来ますので、画像データが文字としてセルに入力されるため、5000文字を超えてエラーになりました。
再度、ChatGPTに修正してもらいます。
ChatGPTは受け取ったデータを画像に変換しGoogleドライブに保存し、その画像をスプレッドシート上にダウンロードする案のようです。
実行すると、以下のエラーになりました。

Googleドライブには、以下の画像が作成されています。

再度、ChatGPTに修正を依頼すると、Googleドライブ上で画像が「公開設定」になっていないのを修正してくれました。
実行すると、画像が作成できました。

まとめ
今回は、ChatGPTに書いたプログラムのエラーと修正を繰り返した全てを公開しています。
ChatGPTが優れていても一回で動作するプログラムは出来ませんが、エラーを伝え修正を繰り返すことで、プログラムの知識が無くてもツールを作成することができました。
宿題
せっかくですので、販売できる水準までにしてください。
- APIキー、プロンプト、縦横比の入力部分の見栄えを良くしてください。
- 画像作成中に読み込み中だとユーザーに分かるようにしてください。