このチュートリアルでは、Google Cloud Vision APIを使って光学文字認識を行うアプリを作ります。
光学文字認識(OCR)アプリではウェブビューでJavaScriptのTesseract.jsを使って光学文字認識を行いましたが、日本語の認識精度があまりよくありませんでした。Google Cloud Vision APIを使うとはるかに精度の良い光学文字認識が行えます。
Google Cloud Vision APIの呼び出しにはGoogle Apps Script(GAS)を使います。GASのスクリプトはGoogle Gemini 2.5 Proで書いています。バイブコーディングです。
Google Cloud Vision APIは1月1,000回まで無料ですが、それ以降は1,000回 あたり$1.50課金されます。
Google Apps Scriptの設定
API呼び出し処理を行うサーバー側のプログラムをGoogle Apps Scriptに設定します。
Gemini 2.5 Pro を使って Google Apps Script を書く
無料のアカウントでもこちらからGemini 2.5 Proが使えます。
プロンプト
Google Apps ScriptでVision APIを使ってOCRするウェブアプリを作りたい。JSONでBase64画像をPOSTで受け取り、返すJSONには、認識したテキスト全文と、Vision APIからの生のレスポンスデータの両方を含める。Vision APIのAPIキーはスクリプトプロパティから読み込む。返答
Google Apps Scriptだけではなく、Vision APIの設定からウェブアプリとしてのデプロイ方法、使い方まで詳しく教えてくれます。わからないところはGeminiに聞けば詳しく説明してくれます。たとえばこんな感じに。「コードをもっと詳しく説明して」
はい、承知いたしました。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": [
// ... 各単語の位置情報など ...
]
}
]
}
}
```App Inventorアプリ
ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"CloudOCR"と名前を付けます。
デザイン編集
🔒 このページは以下の会員レベルで閲覧できます
