法人のお客さま
お問い合わせ
ビジネスブログ

Vertex AI の Claude 3.5 Sonnet 用のアプリを開発し、Googleサイトで埋め込んで使ってみた

著者写真

ソリューションエンジニア
柊 秀寅

2025年4月4日掲載

キービジュアル

概要

前回の記事（8月の記事と10月の記事）で、Google Cloud の Vertex AI を活用して、フロントエンドとバックエンドを開発する方法を紹介しました。

「Vertex AI を利用して Google サイトにマルチターンプロンプトを構築してみた」(2024年8月公開)

「Vertex AI のマルチモーダルのサンプルコードを触ってみた」(2024年10月公開)

今回は、Anthropic 社が開発した最新の生成AIモデルである「Claude 3.5 Sonnet」を用いてアプリケーションを作成し、それを Google サイトに埋め込んで利用する手順を解説します。

目次

1. Claude 3.5 Sonnet とは？

「Claude 3.5 Sonnet」は、Anthropic 社によって開発された最新の生成 AI モデルであり、様々な優れた特性を備えています。ここでは、その強みについて解説します。

1.1 高い生成品質とコンテクスト理解能力

Claude 3.5 Sonnet は、自然な言語生成能力が高く、文脈を深く理解することができます。この能力により、ユーザーの入力に対して自然で一貫性のある応答を生成することが可能です。具体的な会話シナリオや複雑な質問応答においても、高い精度で解決策を提示できます。

1.2 アーティファクト処理機能

Claude 3.5 Sonnet は「Artifacts」機能を活用することで、画像やファイルなどのメディアを扱うことができます。この機能を用いることで、例えば画像の解析や特定のファイルフォーマットの変換など、ユーザーのさまざまなニーズに応じたアプリケーションを迅速に開発することが可能です。

1.3 現在の制約と将来の展望

現時点では、GCP で提供されている Anthropic社 の Claude モデルは、テキストクエリとイメージファイルの処理に限定されています。この点についてはやや残念に感じるかもしれませんが、今後のアップデートで更なる機能拡充が期待されます。特に音声や動画の処理が追加されることで、さらに多様なシナリオに対応できるようになるでしょう。

2. アプリ開発

2.1 環境の整備

まず、Anthropic 社の Claude モデルを Vertex AI 経由で利用するために、Vertex AI のコンソールで必要な API 設定を行います。

Claude モデルを利用するために、Vertex AI の ModelGarden にアクセスします。

モデル検索から Claude 3.5 を検索し、Claude 3.5 Sonnet v2 を選択します。
※本記事では Claude 3.5 Sonnet v2 バージョンをもとに作成していますが、現在、3.7 バージョンも利用可能です。詳細は ModelGarden を参考にしてください。

もし、次のようなメッセージが表示される場合は、Vertex AI API を有効にしてください。

次に、Enable ボタンをクリックして、Claude 3.5 Sonnet v2 API を有効化します。

有効化した Claude モデルを利用するために、次のコマンドで SDK を端末にインストールしてください。

pip install -U 'anthropic[vertex]'

2.2 アプリケーションの開発

以下のサンプルソースコードを使って FastAPI アプリケーションを構築します。サンプルソースは下記の公式サイトを参考にしています。

Anthropic の Claude モデルのドキュメント

API の初期化: FastAPI アプリケーションと SDK のセットアップ

# 必要なライブラリをインポート
import json
import base64
from fastapi import FastAPI, status
from fastapi.responses import JSONResponse
from anthropic import AnthropicVertex

# FastAPI アプリケーションのインスタンスを生成
app = FastAPI()

定数の定義: プロジェクト ID 、リージョン、モデル、制約の設定

# プロジェクト ID を設定
PROJECT_ID = "your-project-id"

# リージョンを設定
REGION = "your-region"

# 使用するモデルのバージョンを設定
MODEL = "claude-3-5-sonnet-v2@20241022"

# 最大トークン数を設定
MAX_TOKENS = 1024

Vertex AI のクライアントの初期化: クライアントを生成し API のリクエストを容易にする

# Vertex AI クライアントの初期化
client = AnthropicVertex(project_id=PROJECT_ID, region=REGION)

プロンプトと画像ファイルの定義: プロンプトの設定とローカル画像の指定

# プロンプトの定義
PROMPT = "添付した画像を解釈してください。"

# ローカル画像ファイルのパスを設定
IMAGE_PATH = "path/to/your/image.jpg"

エンドポイント作成: 画像エンコードからプロンプト送信、JSON レスポンス生成までの流れ

# Claude 3.5 Sonnet のプロンプトを処理するエンドポイント
@app.post("/prompt")
async def prompt_claude_endpoint():
    try:
        # 画像のエンコード
        with open(IMAGE_PATH, "rb") as image_file:
            encoded_image = base64.b64encode(image_file.read()).decode('utf-8')
            image_content = {
                "type": "image",
                "source": {
                    "type": "base64",
                    "media_type": "image/jpeg",  # メディアタイプを設定
                    "data": encoded_image  # BASE64 エンコードされた画像データ
                }
            }

        # メッセージの作成
        messages = [
            {
                "role": "user",
                "content": [image_content, {"type": "text", "text": PROMPT}]
            }
        ]

        # Claude 3.5 Sonnet にリクエストを送信
        message = client.messages.create(
            model=MODEL,
            max_tokens=MAX_TOKENS,
            messages=messages
        )

        # レスポンスを JSON 形式で返す
        return JSONResponse(content=json.loads(message.model_dump_json()), status_code=200)

    except Exception as err:
        # エラーハンドリング
        return JSONResponse(content={"error": str(err)}, status_code=500)"

注意事項:

このサンプルでは、PROMPT や IMAGE_PATH を固定値として使用していますが、実際のアプリケーションではこれらの値をフロントエンドからリクエストとして受け取るように実装することを推奨します。これにより、ユーザーの入力に応じた動的な操作が可能となります。

2.3 アプリケーションのデプロイ

以上のコードをローカル環境やクラウド環境でデプロイし、アプリケーションを起動します。例えば、Docker を用いたデプロイメントも可能です。

3. Google サイトに埋め込む

FastAPI アプリケーションが動作している URL を取得し、Google サイトに埋め込みます。Google サイト以外にも埋め込んで利用することも可能ですが、今回は Google サイトに埋め込んで試してみます。Google サイトへの埋め込み手順は、前回の記事で解説していますので、「Vertex AI を利用して Google サイトにマルチターンプロンプトを構築してみた」を参照してください。

4. 画像推論で動作確認

ここでは、以下の画像を使用して、Claude 3.5 Sonnet に解釈を依頼します。

レスポンスは以下の通りで、画像の内容に関する詳細の内容が正しく推論できていることが確認できます。

回答結果：
この画像には、雪が降る中で庭にいるラグドールと思われる猫が写っています。猫は白とグレーの長い毛並みを持ち、特徴的な青い目をしています。背景には芝生があり、その上に薄く雪が積もっているようです。猫は石畳のようなテラスの上に立っており、その横には黒い金属製の何かの脚（おそらく物干し台やテーブルの脚）が見えます。壁面には横縞模様のサイディングが施されています。猫は冬の寒さにも関わらず、その豊かな毛並みのおかげで快適そうに見えます。

5. まとめ

Vertex AI の Claude モデル用のアプリを構築し、利用してみた感想としては、以下の点が特徴的でした。

  • 優れた文章作成能力
  • 画像解釈の精度の高さ

しかし、Vertex AI の Claude モデルは、最新の 3.7 バージョンでもテキストと画像以外の処理ができない制約があり、この点についてはやや残念です。また、WEB 検索機能がないため、インターネット上の情報を直接取得することができません。これらの制約を解消したいのであれば、Gemini モデルを利用することをお勧めします。Gemini モデルの構築については下記の記事を参照してください。

「Vertex AI のマルチモーダルのサンプルコードを触ってみた」

制限はあるものの、Claude モデルは文章生成能力や画像解釈精度が非常に高いことがわかりましたので、皆さんも是非使ってみてください。

以下にソフトバンクが提供しているVertex AI DIY プランについて紹介させていただきます。

Vertex AI DIY プランについて

Vertex AI の別の機能である Vertex AI Search を利用することで、社内文章の検索など、さらに多様なニーズに対応することができます。

Vertex AI Search を使って生成 AI を構築してみませんか？
ソフトバンクのエンジニアが構築をサポートします。

Vertex AI DIY プランでは、以下の頭にある3つのことをご体験いただけます。

DIY プランでは Claude 3.5 Sonnet も利用可能になりました。これにより、高度な AI ソリューションを構築できるようになります。

関連サービス

Vertex AI DIYプラン

Vertex AI Search を使って社内文書を検索する生成AIを構築してみませんか？
ソフトバンクのエンジニアが構築をサポートします。
Google の生成AIの導入を考えている方はもちろん、どのようなものか確認したいという方でもご活用いただけます。

Looker

Looker は定義から集計、可視化の一連のデータ分析プロセスをカバーする BI ツールを超えるデータプラットフォームです。ソフトバンクは、顧客のニーズに合わせて柔軟なサポートを提供し、Looker を活用したデータドリブンな企業変革を支援しています。

Google Cloud

Google サービスを支える、信頼性に富んだクラウドサービスです。お客さまのニーズにあわせて利用可能なコンピューティングサービスに始まり、データから価値を導き出す情報分析や、最先端の機械学習技術が搭載されています。

MSPサービス

MSP（Managed Service Provider）サービスは、お客さまのパブリッククラウドの導入から運用までをトータルでご提供するマネージドサービスです。

 ＼ 業務課題をデジタルで支援 ／

デジタルツールの選定から導入の手引きまで、中小規模のお客さまへわかりやすくお伝えします。

中小規模のお客さま向けサイトをみる

メールマガジン登録（無料）
ビジネスに役立つ記事やウェビナー情報をお届けします。

おすすめの記事

条件に該当するページがございません

法人のお客さま向け イベント

イベント・セミナー

ビジネスに役立つ 資料ダウンロード

資料ダウンロード

「今」と「未来」を発信 ソフトバンクのビジネスブログ

ビジネスブログ

クラウドテクノロジーブログ

クラウドテクノロジーブログ