Google Cloud Vision AIとCloud Runで画像差分チェックアプリを作る方法｜プログラミング初心者向け開発チュートリアル

SHARE

こんな悩みを解決できます

毎月の請求書や料金表のチェック、目視でやっていて大変…。

修正前と修正後の画像のどこが違うのか、簡単に見つけたい！

プログラミング初心者だけど、業務を効率化するWebアプリを作ってみたい！

読者さん
読者さん

2つの料金表画像のどこが違うのか、瞬時にわかるようなWebアプリが欲しいんです。でも、プログラミングは難しそうで…。

ロベルト
ロベルト

その悩み、よくわかります。Google Cloudのサービスを使えば、初心者でも驚くほど簡単に高機能なWebアプリが作れますよ。

この記事では、プログラミング初心者の方でもコピペで進められるように、2つの画像から文字情報を読み取り、その違いをハイライト表示するWebアプリケーションの作り方を、ステップ・バイ・ステップで解説します。

この記事でわかること
  • Google CloudのVision AI(OCR)とCloud Runの基本的な使い方
  • Python(Flask)を使った簡単なWebアプリの作り方
  • ローカルPCで開発したアプリをインターネットに公開(デプロイ)する全手順
  • 開発中につまずきやすいエラーとその解決策

目次

  1. どんな技術を使うの？
  2. 開発スタート！5つのステップで完成
    1. ステップ1：準備をする
    2. ステップ2：開発環境の準備
    3. ステップ3：アプリケーションの作成
  3. ステップ4：Google Cloudの設定 (APIの有効化)
  4. ステップ5：アプリの公開（デプロイ）
  5. つまずきやすいエラーと解決策
  6. まとめ：小さな自動化から始めよう

どんな技術を使うの？

今回作成するアプリでは、Google Cloudが提供する強力なサービスを組み合わせます。難しい部分はすべてGoogleにお任せできるのがポイントです。

サービス名役割
Google Vision AI画像の文字を読み取るOCR機能を担当。人間が目で読むのと同じように、画像内のテキストを高精度で抽出します。
Google Cloud Run作成したWebアプリをインターネットに公開する場所。サーバー管理が不要で、アクセスがあった時だけ動くので経済的です。
Python (Flask)Webアプリ本体のプログラミング言語。Flaskはシンプルで初心者にも学びやすい人気のフレームワークです。
読者さん
読者さん

なるほど！色々なツールを組み合わせるんですね。少し試すだけなら、料金はかからないのでしょうか？

ロベルト
ロベルト

各サービスには寛大な無料枠があるので、個人的に試す範囲ならまず間違いなく無料で利用できます。安心して挑戦しましょう。

開発スタート！5つのステップで完成

ここからは、実際にアプリを開発していく手順を解説します。全体像は以下の5ステップです。

ステップ1：準備をする

開発に必要なアカウントやツールをPCにインストールします。

ステップ2：開発環境の準備

アプリのファイルを入れるフォルダを作成します。

ステップ3：アプリケーションの作成

PythonやHTMLのコードを書いて、アプリ本体を作ります。

ステップ4：Google Cloudの設定

Vision AIなどのサービスを使えるように有効化します。

ステップ5：アプリの公開（デプロイ）

完成したアプリをインターネットに公開します。

ステップ1：準備をする

本格的な開発に入る前に、まずは必要なものを揃えましょう。

  1. Google Cloudアカウントとプロジェクト: 公式サイトからアカウントを作成し、新しいプロジェクトを作っておきます。無料トライアルが利用可能です。
  2. Python: パソコンにインストールされていない場合、公式サイトからダウンロードします。
  3. gcloud CLI: あなたのPCからGoogle Cloudを操作する必須ツールです。こちらのガイドに従ってインストールします。
  4. テキストエディタ: コードを書くためのソフトです。Visual Studio Codeなどが無料で高機能なのでおすすめです。
Google Cloud初心者のためのgcloud CLIセットアップ完全マニュアル【Windows版】 Google Cloud初心者のためのgcloud CLIセットアップ完全マニュアル【Windows版】 【初心者必見】無料で使えるPCプログラミングアプリはこれ！選び方から使い方まで徹底解説 【初心者必見】無料で使えるPCプログラミングアプリはこれ！選び方から使い方まで徹底解説
gcloud CLIのインストールは順調？

gcloud CLIのインストール中にいくつか質問されますが、基本的には初期設定のままで大丈夫です。「Single User」を選び、「Bundled Python」にチェックが入っていることを確認して進めるのが、トラブルが少なくおすすめです。

インストールが完了したら、PCのターミナル（WindowsならGoogle Cloud SDK Shell、Macならターミナル）で以下のコマンドを実行し、Googleアカウントと連携させましょう。

gcloud init

画面の指示に従ってログインし、今回使用するGoogle Cloudのプロジェクトを選択すれば、PCとクラウドの連携は完了です。

ステップ2：開発環境の準備

次に、あなたのPC上にアプリケーションのファイルを入れておくためのフォルダを作成します。

デスクトップなど、分かりやすい場所に `image-diff-app` という名前のフォルダを新規作成してください。

フォルダを作成したら、ターミナルでそのフォルダに移動し、今回のアプリで必要になるPythonライブラリをインストールします。

# フォルダに移動する (Windowsの例)
cd Desktop/image-diff-app

# 必要なライブラリをインストール
pip install Flask google-cloud-vision gunicorn

ステップ3：アプリケーションの作成

いよいよコーディングです！先ほど作成した `image-diff-app` フォルダの中に、以下の5つのファイルを順番に作成していきます。コードはすべてコピー＆ペーストでOKです。

最終的なフォルダ構成は以下のようになります。

image-diff-app/
├── app.py
├── Dockerfile
├── requirements.txt
└── templates/
　　├── index.html
　　└── result.html

1. requirements.txt

まずは、このアプリが動作するために必要なライブラリの一覧を記述したファイルを作成します。Cloud Runは、このファイルを見て環境を再現してくれます。

ファイル名: requirements.txt
Flask==3.0.3
google-cloud-vision==3.7.2
gunicorn==22.0.0

2. WebページのHTMLファイル

次に、Webページの見た目を作るHTMLファイルを用意します。`image-diff-app`フォルダの中に、必ず `templates` という名前の新しいフォルダを作成し、その中に以下の2つのファイルを作成してください。

ファイル名: templates/index.html （アップロード画面）
<!doctype html>
<title>画像差分検出アプリ</title>
<h1>料金表の画像を2つアップロードしてください</h1>
<form method=post enctype=multipart/form-data>
  <p>画像A: <input type=file name=file_a></p>
  <p>画像B: <input type=file name=file_b></p>
  <input type=submit value=比較する>
</form>
ファイル名: templates/result.html （比較結果画面）
<!doctype html>
<title>比較結果</title>
<h1>比較結果</h1>
<p><a href="/">もう一度試す</a></p>
<div>
  {{ result|safe }}
</div>
ここに注意

Flaskは `templates` という名前のフォルダの中にあるHTMLファイルしか見つけられません。フォルダの名前や場所を間違えると、後でエラーの原因になりますので注意してください。

3. メインプログラム (app.py)

いよいよアプリケーションの心臓部となるPythonプログラムを作成します。画像の受け取り、Vision AIへの送信、結果の表示といった一連の流れを処理します。

ファイル名: app.py
import os
import difflib
from flask import Flask, request, render_template, redirect, url_for
from google.cloud import vision

app = Flask(__name__)

def analyze_image(image_content):
"""Vision AI OCRを使って画像からテキストを抽出する関数"""
client = vision.ImageAnnotatorClient()
image = vision.Image(content=image_content)

response = client.document_text_detection(image=image)

if response.error.message:
raise Exception(
f'{response.error.message}\nFor more info on error messages, check: '
'https://cloud.google.com/apis/design/errors'
)

return response.full_text_annotation.text

@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
if 'file_a' not in request.files or 'file_b' not in request.files:
return redirect(request.url)

file_a = request.files['file_a']
file_b = request.files['file_b']

if file_a.filename == '' or file_b.filename == '':
return redirect(request.url)

if file_a and file_b:
content_a = file_a.read()
content_b = file_b.read()

try:
text_a = analyze_image(content_a)
text_b = analyze_image(content_b)
except Exception as e:
return f"Vision APIでエラーが発生しました: {e}"

diff = difflib.HtmlDiff()
result_html = diff.make_file(
text_a.splitlines(),
text_b.splitlines(),
fromdesc="画像A",
todesc="画像B"
)

return render_template('result.html', result=result_html)

return render_template('index.html')

if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0', port=int(os.environ.get('PORT', 8080)))

4. Dockerfile

最後に、Cloud Runに対して「このアプリをどうやって動かせばいいか」を指示するための設計図となる `Dockerfile` を作成します。このファイルのおかげで、どんな環境でも同じようにアプリを動かすことができます。

ファイル名: Dockerfile
# ベースとなるPythonの環境を指定
FROM python:3.9-slim

# 環境変数を設定
ENV APP_HOME /app
WORKDIR $APP_HOME

# 必要なファイルをコピー
COPY . ./

# ライブラリをインストール
RUN pip install -r requirements.txt

# アプリケーションを実行するコマンド
CMD exec gunicorn --bind :$PORT --workers 1 --threads 8 app:app

お疲れ様でした！これで、アプリケーションを構成するすべてのファイルが揃いました。

ステップ4：Google Cloudの設定 (APIの有効化)

プログラムの準備ができたので、次はGoogle Cloud側でサービスを使えるように「APIを有効化」する作業を行います。ターミナル（Google Cloud SDK Shell）から簡単なコマンドを実行するだけです。

以下のコマンドを1行ずつ実行し、Vision AIとCloud RunのAPIを有効化してください。`[YOUR_PROJECT_ID]` の部分は、あなたが使用しているプロジェクトIDに置き換えます。

# Vision AI API を有効化
gcloud services enable vision.googleapis.com --project=[YOUR_PROJECT_ID]

# Cloud Run API を有効化
gcloud services enable run.googleapis.com --project=[YOUR_PROJECT_ID]
読者さん
読者さん

APIっていうのは、何かの機能を使うための「許可証」みたいなものでしょうか？

ロベルト
ロベルト

その通りです。プロジェクトごとに、どのサービスを利用するかを宣言する手続きだと思ってください。これで準備は万端です！

ステップ5：アプリの公開（デプロイ）

いよいよクライマックスです！あなたのPCの中にあるアプリケーションを、インターネットの世界に公開します。この作業を「デプロイ」と呼びます。

読者さん
読者さん

ついに公開…！なんだか緊張しますね。

大丈夫、コマンド一発で完了します。ターミナルで `image-diff-app` フォルダにいることを確認して、以下のコマンドを実行してください。

デプロイコマンド
gcloud run deploy image-diff-app --source . --platform managed --region asia-northeast1 --project=[YOUR_PROJECT_ID] --allow-unauthenticated

`[YOUR_PROJECT_ID]`はあなたのプロジェクトIDに、`region`は日本のユーザー向けなら `asia-northeast1` (東京) がおすすめです。

コマンドを実行すると、いくつか質問されますが `Y` を押して進めてください。数分待つと、`Service URL:` という行に、あなたのアプリのURLが表示されます。そのURLにアクセスすれば、作成したアプリが動いているはずです！

つまずきやすいエラーと解決策

開発にはエラーがつきものです。ここでは、このチュートリアルで遭遇しやすい代表的なエラーを2つ紹介します。焦らず対処すれば大丈夫です。

デプロイ中に「PERMISSION_DENIED」エラーが出る
これは、ビルドを担当する作業員ロボット（サービスアカウント）の権限不足が原因です。以下のコマンドを実行して、ロボットに「編集者」という強力な権限を与えてあげることで解決します。

1. まず、自分のプロジェクト番号を調べます。

gcloud projects describe [YOUR_PROJECT_ID]

2. 調べたプロジェクト番号を使って、権限を付与します。

gcloud projects add-iam-policy-binding [YOUR_PROJECT_ID] –member=”serviceAccount:[PROJECT_NUMBER]@cloudbuild.gserviceaccount.com” –role=”roles/editor”
アプリにアクセスすると「Internal Server Error」と表示される
これは、アプリのプログラム内部でエラーが起きているサインです。原因の9割は「HTMLファイルが見つからない」というものです。 エラーログに「TemplateNotFound: index.html」と表示されていたら、それが原因です。 解決策は、PCのフォルダ構成を確認すること。`index.html` と `result.html` が、必ず `templates` という名前のフォルダの中に格納されているか確認してください。修正したら、もう一度デプロイすれば直ります。

まとめ：小さな自動化から始めよう

今回は、Google Cloudのサービスを組み合わせて、実用的な画像比較Webアプリケーションを作成する手順を解説しました。

今回のポイント
  • Vision AIを使えば、専門知識がなくても高度なOCR機能をアプリに組み込める。
  • Cloud Runを使えば、サーバー管理の手間なく、低コストでアプリを公開できる。
  • 開発中のエラーは、ログをしっかり読めば必ず解決のヒントが隠されている。
読者さん
読者さん

自分にもアプリが作れるなんて、感動です！応用すれば、もっと色々なことができそうですね。

ロベルト
ロベルト

その通りです。プログラミングは、身の回りの「面倒くさい」を解決するための最高のツールです。ぜひ今回の経験を自信に、次のステップに進んでみてください。

この記事が、あなたの「はじめの一歩」の助けになれば幸いです。

前の記事

【解決】FacebookでOGP画像が表示されない原因はURL…

次の記事

reCAPTCHAがGoogle Cloudへ移行！放置でOK…