Claude API などを使う「AIツール」を、お客さんの現場で確実に動かすための作り方を、2つの方式に分けて解説します。どちらを選ぶかは「誰が・どこで使うか」で決まります。
HTMLやPWAなど。AIを使うツールの作り方は、下の「APIツールの作り方」を参照してください。
必ず「お客さんが実際に使う環境」で確認を。とくに会社のPC(社内ネットワーク)で動くかは要チェックです。
Gumroad・BASE・Stripe など、使い慣れた決済サービスをそのまま利用できます。
審査を通過すると「認定パートナー」として掲載されます。
AI(Claude APIなど)を使うツールには「APIキー」が必要です。このキーをどう扱うかで、ツールが 「動く/動かない」 と 「API代を誰が払うか」 が決まります。作り方は大きく2つあります。
api.anthropic.com への直接アクセスを塞いでいることがあります。スマホや家庭の回線では動いても、お客さんの会社のPCでは動かない――ということが起こり得ます。だからこそ「誰が・どこで使うツールか」で方式を選びます。| 比べるポイント | 方式1:中継サーバー型 | 方式2:ブラウザ直結型 |
|---|---|---|
| 想定するお客さん | 会社・製造業の現場 | 個人・ネット環境が自由な人 |
| 会社の固いネットワーク | 通りやすい ◎ | 塞がれることがある △ |
| 買い手の手間 | 設定ゼロ・キー不要 ◎ | 自分のキーを用意して入力 △ |
| API代を払う人 | 出品者(上限管理が要る) | 買い手(出品者は0円)◎ |
| 作る手間 | 中継サーバー(GAS)が要る | HTML一枚で済む ◎ |
| おすすめ用途 | 社内利用が前提のツール | 軽い・お試し系のツール |
ブラウザと Claude API の間に、自分の「中継サーバー(GAS)」をはさみます。APIキーは中継サーバーの中に隠すので、お客さんはキーに触れません。
Google(GAS)を経由するのがポイント。製造業の会社でも Google への通信は許可されていることが多いため、api.anthropic.com が直接塞がれている環境でも通りやすくなります。(運営の「納品書OCR」も同じ方式です)
Code.gs に下の中継コードを貼るANTHROPIC_API_KEY を保存する(キーをコードに直接書かない)/exec のURLを取得PROXY_URL に、その /exec URL を貼る// スクリプトプロパティに保存したキーを読み込む const API_KEY = PropertiesService.getScriptProperties() .getProperty('ANTHROPIC_API_KEY'); function doPost(e) { try { const req = JSON.parse(e.postData.contents); const res = UrlFetchApp.fetch('https://api.anthropic.com/v1/messages', { method: 'post', contentType: 'application/json', headers: { 'x-api-key': API_KEY, 'anthropic-version': '2023-06-01' }, payload: JSON.stringify({ model: 'claude-sonnet-4-6', max_tokens: 1024, messages: req.messages }), muteHttpExceptions: true }); return ContentService.createTextOutput(res.getContentText()) .setMimeType(ContentService.MimeType.JSON); } catch (err) { return ContentService.createTextOutput( JSON.stringify({ error: String(err) }) ).setMimeType(ContentService.MimeType.JSON); } }
// ↓ デプロイで取得した /exec のURLに差し替える const PROXY_URL = 'https://script.google.com/macros/s/xxxxx/exec'; async function ask(text) { const r = await fetch(PROXY_URL, { method: 'POST', // ★Content-Typeは付けない(付けるとCORSエラーになる) body: JSON.stringify({ messages: [{ role: 'user', content: text }] }) }); const data = await r.json(); return data.content[0].text; }
fetch に Content-Type: application/json を付けると、CORSエラー(接続できない)になります。あえてヘッダを付けないのがコツです。GAS側は e.postData.contents でちゃんと受け取れます。ブラウザから Claude API を直接呼びます。買い手が自分のAPIキーを入力し、そのキーはブラウザの中(localStorage)にだけ保存され、どこにも送られません。
localStorage に保存するanthropic-dangerous-direct-browser-access ヘッダが必須)// 買い手が入力したキーをブラウザ内に保存/読み出し function saveKey(v){ localStorage.setItem('anthropic_key', v.trim()); } function getKey(){ return localStorage.getItem('anthropic_key') || ''; } async function ask(text) { const r = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'content-type': 'application/json', 'x-api-key': getKey(), 'anthropic-version': '2023-06-01', // ★ブラウザ直結に必須のヘッダ 'anthropic-dangerous-direct-browser-access': 'true' }, body: JSON.stringify({ model: 'claude-sonnet-4-6', max_tokens: 1024, messages: [{ role: 'user', content: text }] }) }); const data = await r.json(); return data.content[0].text; }
api.anthropic.com への直接アクセスが塞がれ、「Failed to fetch」で動かないことがあります(スマホ・家庭回線では動きます)。社内利用が前提のツールには、方式2は不向きです。その場合は方式1を選んでください。api.anthropic.com への直接アクセスがブロックされていると起こります。方式1(中継サーバー型)に切り替えると、Google経由になるため通りやすくなります。審査を通過すると「認定パートナー」として掲載。決済は使い慣れたサービスをそのまま使えます。まずはお気軽にご相談ください。
出品について相談する