会員サイト

はい、承知いたしました。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": [
            // ... 各単語の位置情報など ...
        ]
      }
    ]
  }
}
```

/**
 * HTTP POSTリクエストを処理してテキストを翻訳するウェブアプリ
 * @param {Object} e - Apps Scriptのイベントオブジェクト
 * @return {ContentService.TextOutput} - JSON形式のレスポンス
 */
function doPost(e) {
  let response;
  try {
    // POSTされたリクエストボディをJSONとしてパース
    const params = JSON.parse(e.postData.contents);
    const text = params.text;
    const sourceLang = params.source;
    const targetLang = params.target;

    // 必須パラメータ（text, source, target）が存在するかチェック
    if (!text || !sourceLang || !targetLang) {
      // パラメータが不足している場合のエラーレスポンス
      response = {
        'error': "リクエストに必須パラメータ（text, source, target）がありません。"
      };
      // エラーレスポンスをJSON形式で返す
      return ContentService.createTextOutput(JSON.stringify(response))
                         .setMimeType(ContentService.MimeType.JSON);
    }

    // LanguageAppサービスを使用して翻訳を実行
    const translatedText = LanguageApp.translate(text, sourceLang, targetLang);

    // 成功レスポンスを作成
    response = {
      'translatedText': translatedText
    };

  } catch (err) {
    // JSONのパースエラーやその他の予期せぬエラーを処理
    response = {
      'error': 'リクエストの処理中にエラーが発生しました: ' + err.message
    };
  }

  // 最終的なレスポンスをJSON形式で返す
  return ContentService.createTextOutput(JSON.stringify(response))
                     .setMimeType(ContentService.MimeType.JSON);
}