AppSheet と Gemini Pro でブログ記事自動執筆

テックブログ記事の執筆が思うように進まないため、マルチモーダル生成AIに手伝ってもらうことにしました。フロントエンドはAppSheetで作成し、Google Apps Script（GAS）から Vertex AI Gemini API を呼び出す超お手軽サクッと開発です。

ブログ記事自動執筆アプリの構成

スマホのカメラで撮影したモノ・風景から自動で気の利いたブログ記事を生成してくれるシンプルなアプリを作成します。

ブログ執筆AIの作成

Vertex AI Studio

Vertex AI Studioを利用すると簡単に生成 AI モデルのプロトタイピングやテストをすることができます。今回は Vertex AI Studio のマルチモーダルを利用してみます。Sample prompts から “Write story from image” を選択しました。一枚の画像からプロンプトに応じたストーリーを生成してくれるマルチモーダルモデルのサンプルです。

日本語にも対応していますね。プロンプトはこのようにしてみました。

この画像を参考にブログの記事を書いてください。ブログの読者は知的好奇心旺盛な若者です。200文字程度にまとめてください。

納得のいくプロンプトができたら、「<>コードを取得」からサンプルコードをすぐに入手できます。

Google Apps Script（GAS）

AppSheet アプリから呼び出す GAS のコードを準備します。Vertex AI Stduio が作ってくれたサンプルコードに少し手を入れるだけですぐに完了です。
Googleドライブに保存された画像ファイルを読み込み、base64でエンコードして、プロンプトや各種パラメータと共にVertex AI Gemini APIのエンドポイントに送信し、レスポンスを受け取るというシンプルな構成です。

const API_ENDPOINT = "{YOUR_ENDPOINT}"
const PROJECT_ID = "{YOUR_PROJECT_ID}"
const MODEL_ID = "gemini-pro-vision"
const LOCATION_ID = "{YOUR_LOCATION}"

function getGeminiProVision(filePath){

  var path = filePath.split("/");
  var fileName = path[path.length-1]
  var folder = DriveApp.getFolderById("{FOLDER_ID}")
  var file = folder.getFilesByName(fileName).next();
  var blob = file.getBlob();
  var base64Data = Utilities.base64Encode(blob.getBytes());

  //OAuthトークンを取得
  const token = ScriptApp.getOAuthToken();

  //Gemini APIのエンドポイント
  var geminiEndpoint = `https://${API_ENDPOINT}/v1/projects/${PROJECT_ID}/locations/${LOCATION_ID}/publishers/google/models/${MODEL_ID}:streamGenerateContent`;
  var request = {
    "contents": [
      {
        "role": "user",
        "parts": [
          {
            "inlineData": {
              "mimeType": "image/jpeg",
              "data": base64Data
            }
          },
          {
            "text": "この画像を参考にブログの記事を書いてください。ブログの読者は知的好奇心旺盛な若者です。200文字程度にまとめてください。"
          }
        ]
      }
    ],
    "generation_config": {
      "maxOutputTokens": 2048,
      "temperature": 0.4,
      "topP": 1,
      "topK": 32
    }
  };

  const headers = {
    "Authorization": "Bearer " + token,
    "Content-Type": "application/json"
  };

  const options = {
    "method": "POST",
    "headers": headers,
    "payload": JSON.stringify(request)
  };

  const response = UrlFetchApp.fetch(geminiEndpoint, options);
  const responseData = JSON.parse(response.getContentText());

  // candidates で返ってきているテキストを全て繋ぎ合わせる
  var text = "";
  for(var data of responseData) {
    text += data.candidates[0].content.parts[0].text;
  }

  return (text)
}

AppSheet アプリの作成

データファイル（スプレッドシート）の作成

ID、画像ファイルのリンク、ブログ記事を含むスプレッドシートを作成します。下図のデータはイメージです。実際の作成時には、カラム名のみが記載された空のシートから始めます。

ID	photo	story
0000x	blog_image/yyyyy.png	今、札幌に来ています…
0000z	blog_image/abced.png	冬といえば、ぜんざい…

AppSheet アプリの自動作成

スプレッドシートの[拡張機能 > AppSheet > アプリを作成]を選択すると、AppSheetアプリが自動的に作成されます。ID カラムは INITIAL VALUE : UNIQUEID() の TEXT になっていたり、photo カラムのタイプが Image になっているなど 自動作成の AI がなかなか賢くて、この段階でほぼ使えるアプリに仕上がっています。

story カラムを LongText に変更、アプリ上で一覧表示したときに記事の書き出しだけを表示したいので、バーチャルカラムで short_story として story の最初の50文字だけを切り取ったものを作成しておきます。

オートメーションの作成

アプリで写真を撮影すると自動で記事を作成するようにオートメーションを設定します。データ追加をトリガーに先ほど作成した GAS の関数を呼び出して、返り値を story カラムに登録します。

Function Parameters に [photo] をセットし、Return Value をオンします。返り値は [Call GAS].[Output] という表記で関数内で再利用できます。ここでは最後のプロセスの Set row values で [story]列に返り値（ブログ記事）を記録します。

UXの調整

表示項目を選択し、不要なボタンを削除します。

記事執筆

できたアプリはスマホでもすぐに利用することができます。
写真を撮影して少し待つと…気の利いた（？）ブログ記事のできあがりです。

---

生成AIブログ(1)「消防署」 by Gemini Pro

（この文章は生成AIで作成したものです。正確性や完全に事実に基づくものである保証はできないことをご了承ください。）

この写真は、日本のとある消防署の車庫です。日本の消防署は、主に火災を消し止めるための活動をしていますが、救急救命活動や、災害救助活動なども行っています。 日本の消防署には、さまざまな種類の消防車や救急車が配備されています。この写真には、2台の消防車が写っています。1台は、火災を消し止めるための水を積んだ消防車です。もう1台は、救急救命活動を行うための救急車です。 日本の消防署は、24時間体制で活動しています。火災や救急救命の通報があると、すぐに現場に駆けつけます。日本の消防署の隊員は、命を救うために、日々訓練を重ねています。 日本の消防署は、地域の人々の安全を守るために、なくてはならない存在です。火災や救急救命の通報があったときには、すぐに駆けつけてくれるので、安心して暮らすことができます。

---

生成AIブログ(2)「チェック柄のスリッパ」 by Gemini Pro

（この文章は生成AIで作成したものです。正確性や完全に事実に基づくものである保証はできないことをご了承ください。）

このチェック柄のスリッパは、とても履き心地がよく、足が蒸れにくいです。また、底が厚手で、足音が気になりません。私はこのスリッパを3年ほど履いていて、とても気に入っています。 このスリッパは、シンプルなデザインなので、どんな服装にも合わせやすいです。私は普段、ジーンズやスラックスを履いていますが、このスリッパを履くと、足元がすっきりとまとまります。 このスリッパは、とても軽くて、持ち運びにも便利です。私はこのスリッパを旅行に持っていくこともあります。ホテルや旅館のスリッパは、使い捨てのものが多いので、自分のスリッパを持っていくと便利です。 このスリッパは、洗濯機で洗うことができます。私は月に1回ほど、洗濯機で洗っています。洗うと、スリッパが清潔になり、気持ちよく履くことができます。 このスリッパは、とてもコスパがいいです。私はこのスリッパを3年ほど履いていて、まだ壊れていません。スリッパは毎日履くものなので、コスパがいいのはとても助かります。 このスリッパは、足に負担がかかりにくいので、長時間履いていても疲れにくいです。私はこのスリッパを履いて、一日中歩き回っても、足が疲れにくくなりました。 このスリッパは、冬でも足が冷えにくいです。私はこのスリッパを履いて、冬でも足が冷えることがなくなりました。 このスリッパは、とても静かです。私はこのスリッパを履いて、フローリングの上を歩いても、足音が気になりません。

---

まとめ

Vertex AI Studio を利用すると簡単に生成 AI モデルのプロトタイピングやテストをすることができます。またサンプルコードも作成してくれます。
AppSheet で作成したアプリをフロントエンドとして利用することで、アプリのプロトタイプ作成を迅速に行うことができます。今回のようにリリースされたばかりの Gemini Pro を試してみたいといったときには最適な組み合わせではないでしょうか。