会員サイト

はい、承知いたしました。
App Inventorで描いた絵をGoogle AI（Gemini）で分析し、説明と改善点を返すGoogle Apps Scriptのウェブアプリケーションを作成します。

App Inventor側の実装はご自身でされるとのことですので、Google Apps Script側の設定方法とコードを提供します。

全体の流れ
App Inventor:

Canvasに絵を描く。

描いた絵をBase64形式でエンコードする。

Base64文字列をJSONに含めて、Google Apps Scriptで作成したウェブアプリのURLにPOSTリクエストを送信する。

Google Apps Script (今回作成するもの):

App InventorからのPOSTリクエストを受け取る。

JSONからBase64形式の画像データを取り出す。

スクリプトプロパティに保存したAPIキーを読み込む。

Google AI (Gemini Pro Vision) APIに画像データとプロンプトを送信する。

Geminiから返ってきた「説明」と「改善点の提案」をJSON形式で整形する。

整形したJSONをApp Inventorに返す。

App Inventor:

Google Apps Scriptから返ってきたJSONを解析し、結果をアプリに表示する。

それでは、Google Apps Scriptの設定とコードを以下に示します。

/**
 * App InventorからのPOSTリクエストを処理する関数
 * @param {Object} e - App Inventorから送信されるイベントオブジェクト
 * @return {ContentService.TextOutput} - Gemini APIからの結果をJSON形式で返す
 */
function doPost(e) {
  // エラーハンドリング
  try {
    // 1. App Inventorから送信されたJSONデータを解析
    const postData = JSON.parse(e.postData.contents);
    const base64Image = postData.image; // App Inventor側で "image" というキーに設定

    // 2. スクリプトプロパティからAPIキーを読み込む
    const API_KEY = PropertiesService.getScriptProperties().getProperty('API_KEY');
    if (!API_KEY) {
      return createErrorResponse('APIキーが設定されていません。');
    }

    // 3. Gemini APIのエンドポイントURL
    const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro-vision:generateContent?key=${API_KEY}`;

    // 4. Gemini APIに送信するリクエストボディを作成
    const payload = {
      "contents": [{
        "parts": [{
          "text": "この絵を説明して、改善点を提案してください。説明と提案は明確に分けて記述してください。"
        }, {
          "inline_data": {
            "mime_type": "image/png", // App InventorのCanvasはPNG形式
            "data": base64Image
          }
        }]
      }]
    };

    // 5. Gemini APIにリクエストを送信するための設定
    const options = {
      'method': 'post',
      'contentType': 'application/json',
      'payload': JSON.stringify(payload),
      'muteHttpExceptions': true // エラーレスポンスを例外ではなくオブジェクトとして取得
    };

    // 6. APIにリクエストを送信
    const response = UrlFetchApp.fetch(API_URL, options);
    const responseCode = response.getResponseCode();
    const responseBody = response.getContentText();

    if (responseCode !== 200) {
       return createErrorResponse(`APIリクエストエラー: ${responseCode} ${responseBody}`);
    }
    
    // 7. APIからのレスポンスを解析
    const resultJson = JSON.parse(responseBody);
    
    // レスポンスの構造をチェックし、テキスト部分を取得
    let generatedText = "解析結果を取得できませんでした。";
    if (resultJson.candidates && resultJson.candidates.length > 0 &&
        resultJson.candidates[0].content && resultJson.candidates[0].content.parts &&
        resultJson.candidates[0].content.parts.length > 0) {
      generatedText = resultJson.candidates[0].content.parts[0].text;
    } else {
       // Geminiからのレスポンスが期待した形式でない場合
       return createErrorResponse(`予期しないAPIレスポンス形式です: ${responseBody}`);
    }

    // 8. App Inventorに返すJSONを作成
    const output = JSON.stringify({
      "status": "success",
      "result": generatedText
    });

    // 9. 結果をJSON形式で返す
    return ContentService.createTextOutput(output).setMimeType(ContentService.MimeType.JSON);

  } catch (error) {
    // スクリプト全体で発生したエラーをキャッチ
    return createErrorResponse(`スクリプトエラー: ${error.toString()}`);
  }
}

/**
 * エラーレスポンスを生成するヘルパー関数
 * @param {string} message - エラーメッセージ
 * @return {ContentService.TextOutput} - エラー情報を格納したJSONオブジェクト
 */
function createErrorResponse(message) {
  const errorOutput = JSON.stringify({
    "status": "error",
    "message": message
  });
  return ContentService.createTextOutput(errorOutput).setMimeType(ContentService.MimeType.JSON);
}

はい、承知いたしました。Google Apps Script (GAS) を使用して、Base64エンコードされた画像をJSON形式で受け取り、Google Cloud Vision APIでOCR処理を行うウェブアプリの作成方法を解説します。

完成したウェブアプリは、以下の仕様を満たします。

  * HTTP POSTリクエストで動作します。
  * `{"base64Image": "..."}` という形式のJSONを受け取ります。
  * Vision APIのAPIキーは、コードに直接書き込まず、安全なスクリプトプロパティから読み込みます。
  * 処理結果として、認識したテキスト全体 (`text`) と、Vision APIからの生のレスポンス (`rawResponse`) を含むJSONを返します。

-----

## 1\. Google Apps Script コード

まず、GASプロジェクトに記述するコードです。以下のコードをスクリプトエディタにコピー＆ペーストしてください。

```javascript
/**
 * POSTリクエストを受け取り、Vision APIでOCRを実行するメイン関数
 * @param {Object} e - GASがPOSTリクエスト時に自動的に渡すイベントオブジェクト
 * @returns {ContentService.TextOutput} - JSON形式のレスポンス
 */
function doPost(e) {
  try {
    // 1. リクエストボディからBase64画像データを取得
    if (!e.postData || !e.postData.contents) {
      return createJsonResponse({ error: 'Invalid request body.' }, 400);
    }
    const postData = JSON.parse(e.postData.contents);
    const base64Image = postData.base64Image;

    if (!base64Image) {
      return createJsonResponse({ error: 'The "base64Image" key is missing in the JSON payload.' }, 400);
    }

    // 2. スクリプトプロパティからAPIキーを読み込む
    const apiKey = PropertiesService.getScriptProperties().getProperty('VISION_API_KEY');
    if (!apiKey) {
      return createJsonResponse({ error: 'Vision API key is not set in Script Properties.' }, 500);
    }

    // 3. Vision APIへのリクエストを作成
    const visionApiUrl = `https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`;
    const payload = {
      requests: [
        {
          image: {
            content: base64Image,
          },
          features: [
            {
              // 高精度なOCRのためにDOCUMENT_TEXT_DETECTIONを推奨
              type: 'DOCUMENT_TEXT_DETECTION', 
            },
          ],
        },
      ],
    };

    const options = {
      method: 'post',
      contentType: 'application/json',
      payload: JSON.stringify(payload),
      muteHttpExceptions: true, // APIからのエラーレスポンスを正しく受け取るため
    };

    // 4. Vision APIを呼び出し
    const response = UrlFetchApp.fetch(visionApiUrl, options);
    const responseCode = response.getResponseCode();
    const visionResponse = JSON.parse(response.getContentText());

    // Vision APIからのエラーをハンドリング
    if (responseCode !== 200) {
      return createJsonResponse({
        error: 'Vision API returned an error.',
        details: visionResponse,
      }, responseCode);
    }
    
    // 5. レスポンスからテキスト全体を抽出
    // ?. (オプショナルチェイニング) を使い、プロパティが存在しない場合でもエラーを防ぐ
    const fullText = visionResponse.responses[0]?.fullTextAnnotation?.text || '';

    // 6. 成功レスポンスを生成
    const result = {
      text: fullText,
      rawResponse: visionResponse,
    };

    return createJsonResponse(result, 200);

  } catch (error) {
    // JSONのパース失敗など、その他の予期せぬエラーをハンドリング
    return createJsonResponse({
      error: 'An unexpected error occurred.',
      details: error.message,
    }, 500);
  }
}

/**
 * JSON形式のレスポンスを生成するヘルパー関数
 * @param {Object} data - レスポンスとして返すオブジェクト
 * @param {number} statusCode - HTTPステータスコード (GASでは直接設定不可だが、ログ等のため)
 * @returns {ContentService.TextOutput}
 */
function createJsonResponse(data, statusCode) {
  // GASではHTTPステータスコードを直接設定できないため、
  // 返却するJSONデータにエラー情報を含めることでクライアント側で処理を分岐させます。
  console.log(`Response (Status ${statusCode}): ${JSON.stringify(data)}`);
  return ContentService.createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}
```

-----

## 2\. セットアップ手順

コードを動作させるには、いくつかの準備が必要です。

### ステップ1: Cloud Vision APIの有効化とAPIキーの取得

1.  **Google Cloudプロジェクト**に移動し、Vision APIを使用したいプロジェクトを選択または新規作成します。
2.  ナビゲーションメニューから **[APIとサービス] \> [ライブラリ]** を選択します。
3.  「**Cloud Vision API**」を検索し、**[有効にする]** をクリックします。
4.  次に、**[APIとサービス] \> [認証情報]** に移動します。
5.  **[+ 認証情報を作成]** をクリックし、**[API キー]** を選択します。
6.  作成されたAPIキーをコピーしておきます。セキュリティのため、このキーには適切な制限（IPアドレス制限やAPI制限など）をかけることを強く推奨します。

### ステップ2: スクリプトプロパティにAPIキーを設定

APIキーをコードに直接書き込むのは危険です。GASのスクリプトプロパティ機能を使って安全に管理します。

1.  GASのスクリプトエディタ画面で、左側のメニューから**歯車アイコン (プロジェクトの設定)** をクリックします。
2.  「**スクリプト プロパティ**」のセクションで、**[スクリプト プロパティを追加]** をクリックします。
3.  以下の通りに設定し、**[スクリプト プロパティを保存]** をクリックします。
      * **プロパティ:** `VISION_API_KEY`
      * **値:** 先ほどコピーしたAPIキー

-----

## 3\. ウェブアプリとしてデプロイ

スクリプトを外部から呼び出せるように、ウェブアプリとしてデプロイします。

1.  スクリプトエディタの右上にある **[デプロイ]** ボタンをクリックし、**[新しいデプロイ]** を選択します。
2.  種類の選択で**歯車アイコン**をクリックし、**[ウェブアプリ]** を選択します。
3.  以下の通り設定します。
      * **説明:** (任意) Vision API OCR Web App など
      * **次のユーザーとして実行:** **自分**
      * **アクセスできるユーザー:** **全員**
4.  **[デプロイ]** をクリックします。
5.  初回デプロイ時には「承認が必要です」というポップアップが表示されるので、指示に従ってアカウントへのアクセスを許可してください。
6.  デプロイが完了すると「**ウェブアプリのURL**」が表示されるので、このURLをコピーします。これがAPIのエンドポイントになります。

-----

## 4\. 使い方 (curlでのテスト例)

デプロイしたウェブアプリをテストするには、`curl` コマンドや他のAPIテストツール（Postmanなど）が使用できます。

まず、テストしたい画像をBase64形式にエンコードします。macOSやLinuxでは以下のコマンドでエンコードできます。

```bash
base64 -i path/to/your/image.png -o image.txt
```

次に、`curl` を使ってPOSTリクエストを送信します。

```bash
# ウェブアプリのURLをあなたのものに置き換えてください
WEB_APP_URL="ここにデプロイしたウェブアプリのURLを貼り付け"

# Base64エンコードされた画像データをファイルから読み込み、JSONを作成して送信
curl -L -X POST "${WEB_APP_URL}" \
-H "Content-Type: application/json" \
-d '{ "base64Image": "'"$(cat image.txt)"'" }'
```

### 成功時のレスポンス例

```json
{
  "text": "これはテスト用の\n画像です。\nGoogle Cloud Vision\n",
  "rawResponse": {
    "responses": [
      {
        "fullTextAnnotation": {
          "pages": [
            // ... Vision APIからの詳細なレスポンスデータ ...
          ],
          "text": "これはテスト用の\n画像です。\nGoogle Cloud Vision\n"
        },
        "textAnnotations": [
            // ... 各単語の位置情報など ...
        ]
      }
    ]
  }
}
```

はい、承知いたしました。Google Apps Script (GAS) を使用して、Base64エンコードされた画像をJSON形式で受け取り、Google Cloud Vision APIでOCR処理を行うウェブアプリの作成方法を解説します。

完成したウェブアプリは、以下の仕様を満たします。

  * HTTP POSTリクエストで動作します。
  * `{"base64Image": "..."}` という形式のJSONを受け取ります。
  * Vision APIのAPIキーは、コードに直接書き込まず、安全なスクリプトプロパティから読み込みます。
  * 処理結果として、認識したテキスト全体 (`text`) と、Vision APIからの生のレスポンス (`rawResponse`) を含むJSONを返します。

-----

## 1\. Google Apps Script コード

まず、GASプロジェクトに記述するコードです。以下のコードをスクリプトエディタにコピー＆ペーストしてください。

```javascript
/**
 * POSTリクエストを受け取り、Vision APIでOCRを実行するメイン関数
 * @param {Object} e - GASがPOSTリクエスト時に自動的に渡すイベントオブジェクト
 * @returns {ContentService.TextOutput} - JSON形式のレスポンス
 */
function doPost(e) {
  try {
    // 1. リクエストボディからBase64画像データを取得
    if (!e.postData || !e.postData.contents) {
      return createJsonResponse({ error: 'Invalid request body.' }, 400);
    }
    const postData = JSON.parse(e.postData.contents);
    const base64Image = postData.base64Image;

    if (!base64Image) {
      return createJsonResponse({ error: 'The "base64Image" key is missing in the JSON payload.' }, 400);
    }

    // 2. スクリプトプロパティからAPIキーを読み込む
    const apiKey = PropertiesService.getScriptProperties().getProperty('VISION_API_KEY');
    if (!apiKey) {
      return createJsonResponse({ error: 'Vision API key is not set in Script Properties.' }, 500);
    }

    // 3. Vision APIへのリクエストを作成
    const visionApiUrl = `https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`;
    const payload = {
      requests: [
        {
          image: {
            content: base64Image,
          },
          features: [
            {
              // 高精度なOCRのためにDOCUMENT_TEXT_DETECTIONを推奨
              type: 'DOCUMENT_TEXT_DETECTION', 
            },
          ],
        },
      ],
    };

    const options = {
      method: 'post',
      contentType: 'application/json',
      payload: JSON.stringify(payload),
      muteHttpExceptions: true, // APIからのエラーレスポンスを正しく受け取るため
    };

    // 4. Vision APIを呼び出し
    const response = UrlFetchApp.fetch(visionApiUrl, options);
    const responseCode = response.getResponseCode();
    const visionResponse = JSON.parse(response.getContentText());

    // Vision APIからのエラーをハンドリング
    if (responseCode !== 200) {
      return createJsonResponse({
        error: 'Vision API returned an error.',
        details: visionResponse,
      }, responseCode);
    }
    
    // 5. レスポンスからテキスト全体を抽出
    // ?. (オプショナルチェイニング) を使い、プロパティが存在しない場合でもエラーを防ぐ
    const fullText = visionResponse.responses[0]?.fullTextAnnotation?.text || '';

    // 6. 成功レスポンスを生成
    const result = {
      text: fullText,
      rawResponse: visionResponse,
    };

    return createJsonResponse(result, 200);

  } catch (error) {
    // JSONのパース失敗など、その他の予期せぬエラーをハンドリング
    return createJsonResponse({
      error: 'An unexpected error occurred.',
      details: error.message,
    }, 500);
  }
}

/**
 * JSON形式のレスポンスを生成するヘルパー関数
 * @param {Object} data - レスポンスとして返すオブジェクト
 * @param {number} statusCode - HTTPステータスコード (GASでは直接設定不可だが、ログ等のため)
 * @returns {ContentService.TextOutput}
 */
function createJsonResponse(data, statusCode) {
  // GASではHTTPステータスコードを直接設定できないため、
  // 返却するJSONデータにエラー情報を含めることでクライアント側で処理を分岐させます。
  console.log(`Response (Status ${statusCode}): ${JSON.stringify(data)}`);
  return ContentService.createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}
```

-----

## 2\. セットアップ手順

コードを動作させるには、いくつかの準備が必要です。

### ステップ1: Cloud Vision APIの有効化とAPIキーの取得

1.  **Google Cloudプロジェクト**に移動し、Vision APIを使用したいプロジェクトを選択または新規作成します。
2.  ナビゲーションメニューから **[APIとサービス] \> [ライブラリ]** を選択します。
3.  「**Cloud Vision API**」を検索し、**[有効にする]** をクリックします。
4.  次に、**[APIとサービス] \> [認証情報]** に移動します。
5.  **[+ 認証情報を作成]** をクリックし、**[API キー]** を選択します。
6.  作成されたAPIキーをコピーしておきます。セキュリティのため、このキーには適切な制限（IPアドレス制限やAPI制限など）をかけることを強く推奨します。

### ステップ2: スクリプトプロパティにAPIキーを設定

APIキーをコードに直接書き込むのは危険です。GASのスクリプトプロパティ機能を使って安全に管理します。

1.  GASのスクリプトエディタ画面で、左側のメニューから**歯車アイコン (プロジェクトの設定)** をクリックします。
2.  「**スクリプト プロパティ**」のセクションで、**[スクリプト プロパティを追加]** をクリックします。
3.  以下の通りに設定し、**[スクリプト プロパティを保存]** をクリックします。
      * **プロパティ:** `VISION_API_KEY`
      * **値:** 先ほどコピーしたAPIキー

-----

## 3\. ウェブアプリとしてデプロイ

スクリプトを外部から呼び出せるように、ウェブアプリとしてデプロイします。

1.  スクリプトエディタの右上にある **[デプロイ]** ボタンをクリックし、**[新しいデプロイ]** を選択します。
2.  種類の選択で**歯車アイコン**をクリックし、**[ウェブアプリ]** を選択します。
3.  以下の通り設定します。
      * **説明:** (任意) Vision API OCR Web App など
      * **次のユーザーとして実行:** **自分**
      * **アクセスできるユーザー:** **全員**
4.  **[デプロイ]** をクリックします。
5.  初回デプロイ時には「承認が必要です」というポップアップが表示されるので、指示に従ってアカウントへのアクセスを許可してください。
6.  デプロイが完了すると「**ウェブアプリのURL**」が表示されるので、このURLをコピーします。これがAPIのエンドポイントになります。

-----

## 4\. 使い方 (curlでのテスト例)

デプロイしたウェブアプリをテストするには、`curl` コマンドや他のAPIテストツール（Postmanなど）が使用できます。

まず、テストしたい画像をBase64形式にエンコードします。macOSやLinuxでは以下のコマンドでエンコードできます。

```bash
base64 -i path/to/your/image.png -o image.txt
```

次に、`curl` を使ってPOSTリクエストを送信します。

```bash
# ウェブアプリのURLをあなたのものに置き換えてください
WEB_APP_URL="ここにデプロイしたウェブアプリのURLを貼り付け"

# Base64エンコードされた画像データをファイルから読み込み、JSONを作成して送信
curl -L -X POST "${WEB_APP_URL}" \
-H "Content-Type: application/json" \
-d '{ "base64Image": "'"$(cat image.txt)"'" }'
```

### 成功時のレスポンス例

```json
{
  "text": "これはテスト用の\n画像です。\nGoogle Cloud Vision\n",
  "rawResponse": {
    "responses": [
      {
        "fullTextAnnotation": {
          "pages": [
            // ... Vision APIからの詳細なレスポンスデータ ...
          ],
          "text": "これはテスト用の\n画像です。\nGoogle Cloud Vision\n"
        },
        "textAnnotations": [
            // ... 各単語の位置情報など ...
        ]
      }
    ]
  }
}
```