現場で使えるAIアプリの市場
出品者向けガイド

AIツールの作り方と、
出品の流れ

Claude API などを使う「AIツール」を、お客さんの現場で確実に動かすための作り方を、2つの方式に分けて解説します。どちらを選ぶかは「誰が・どこで使うか」で決まります。

出品までの流れ

1

ツールを用意する

HTMLやPWAなど。AIを使うツールの作り方は、下の「APIツールの作り方」を参照してください。

2

動作確認する(いちばん大事)

必ず「お客さんが実際に使う環境」で確認を。とくに会社のPC(社内ネットワーク)で動くかは要チェックです。

3

決済リンクを用意する

Gumroad・BASE・Stripe など、使い慣れた決済サービスをそのまま利用できます。

4

出品を申請する

審査を通過すると「認定パートナー」として掲載されます。

ご確認ください手数料・決済・特定商取引法に関する正式な事項は、利用規約および特定商取引法に基づく表記をご覧ください。

APIツールの作り方

AI(Claude APIなど)を使うツールには「APIキー」が必要です。このキーをどう扱うかで、ツールが 「動く/動かない」「API代を誰が払うか」 が決まります。作り方は大きく2つあります。

大事な前提会社の固い社内ネットワークは、ブラウザから api.anthropic.com への直接アクセスを塞いでいることがあります。スマホや家庭の回線では動いても、お客さんの会社のPCでは動かない――ということが起こり得ます。だからこそ「誰が・どこで使うツールか」で方式を選びます。
共通ルールAPIキーは出品者ご自身で用意・管理してください。マーケット運営はAPI利用料を負担しません。また、お客さんの情報(図面・帳票など)を外部サーバーに送らない設計を心がけてください。

どちらを選ぶ?早見表

比べるポイント方式1:中継サーバー型方式2:ブラウザ直結型
想定するお客さん会社・製造業の現場個人・ネット環境が自由な人
会社の固いネットワーク通りやすい ◎塞がれることがある △
買い手の手間設定ゼロ・キー不要 ◎自分のキーを用意して入力 △
API代を払う人出品者(上限管理が要る)買い手(出品者は0円)◎
作る手間中継サーバー(GAS)が要るHTML一枚で済む ◎
おすすめ用途社内利用が前提のツール軽い・お試し系のツール
迷ったらお客さんが会社のPCで使う/製造業向けなら 方式1。個人利用でネット環境が自由なら 方式2でもOKです。

方式1:中継サーバー型(GAS経由)

会社向け推奨
METHOD 1 | RELAY

お客さんはキー不要・設定ゼロ。固いネットワークでも通りやすい。

ブラウザと Claude API の間に、自分の「中継サーバー(GAS)」をはさみます。APIキーは中継サーバーの中に隠すので、お客さんはキーに触れません。

仕組み
ブラウザ(お客さん) → あなたの中継サーバー(GAS) → Claude API

Google(GAS)を経由するのがポイント。製造業の会社でも Google への通信は許可されていることが多いため、api.anthropic.com が直接塞がれている環境でも通りやすくなります。(運営の「納品書OCR」も同じ方式です)

出品者の手順
  1. Anthropic Console で APIキーを取得する
  2. GAS(Google Apps Script)で新規プロジェクトを作り、Code.gs に下の中継コードを貼る
  3. スクリプトプロパティに ANTHROPIC_API_KEY を保存する(キーをコードに直接書かない)
  4. 「ウェブアプリ」としてデプロイ(実行:自分/アクセス:全員)し、/exec のURLを取得
  5. HTML側の PROXY_URL に、その /exec URL を貼る
  6. 動作確認する
① 中継サーバー側:GAS(Code.gs)
// スクリプトプロパティに保存したキーを読み込む
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);
  }
}
② ツール側:HTML(ブラウザから中継サーバーを呼ぶ)
// ↓ デプロイで取得した /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;
}
つまずきポイントブラウザ側の fetchContent-Type: application/json を付けると、CORSエラー(接続できない)になります。あえてヘッダを付けないのがコツです。GAS側は e.postData.contents でちゃんと受け取れます。
API代の管理方式1はAPI代が出品者負担です。使った分だけ料金がかかるので、お客さんごとの「月の利用上限」をスプレッドシートで管理する仕組みを入れておくと安心です。
メリット
  • お客さんはキー不要・設定ゼロ
  • 固い社内ネットワークでも通りやすい
  • キーが外に出ない(安全)
デメリット・注意
  • 中継サーバー(GAS)の用意が要る
  • API代は出品者負担
  • 上限管理の仕組みが要る

方式2:ブラウザ直結型

METHOD 2 | DIRECT

HTML一枚で作れて、出品者にAPI代がかからない。

ブラウザから Claude API を直接呼びます。買い手が自分のAPIキーを入力し、そのキーはブラウザの中(localStorage)にだけ保存され、どこにも送られません。

仕組み
ブラウザ(お客さん/自分のキーを入力) → Claude API に直接
出品者の手順
  1. HTMLに「APIキー入力欄」を作り、入力値を localStorage に保存する
  2. 下の直接呼び出しコードを書く(anthropic-dangerous-direct-browser-access ヘッダが必須)
  3. HTML一枚をアップロード/配布する(中継サーバーは不要)
  4. 動作確認する(※社内ネットワークでは塞がれることがある)
ツール側:HTML(ブラウザから直接 Claude API を呼ぶ)
// 買い手が入力したキーをブラウザ内に保存/読み出し
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を選んでください。
メリット
  • HTML一枚で作れる(中継不要)
  • 出品者にAPI代がかからない
  • キーは買い手のブラウザ内だけ
デメリット・注意
  • 固い社内NWでは動かないことがある
  • 買い手がキーを用意する手間
  • 会社向けツールには不向き

よくある質問

Q会社のPCで「Failed to fetch」と出て動きません
方式2(ブラウザ直結)の通信が、社内ネットワークで塞がれている可能性が高いです。api.anthropic.com への直接アクセスがブロックされていると起こります。方式1(中継サーバー型)に切り替えると、Google経由になるため通りやすくなります。
QAPIキーをお客さんに渡してもいいですか?
渡さない設計にしてください。方式1ならお客さんはキー不要、方式2ならお客さん自身が自分のキーを入力します。どちらも「自分のキーを他人に渡す」必要はありません。
QAPI代は誰が払うのですか?
方式1なら出品者、方式2なら買い手が払います。いずれの場合も、マーケット運営はAPI利用料を負担しません。方式1を選ぶ場合は、利用上限の管理を入れてコストを把握しておくと安心です。
Qどちらの方式を選べばいいか分かりません
お客さんが会社のPCで使う/製造業向けなら 方式1。個人利用でネット環境が自由なら 方式2でも大丈夫です。上の「早見表」も参考にしてください。

ツールができたら、出品を申請しましょう。

審査を通過すると「認定パートナー」として掲載。決済は使い慣れたサービスをそのまま使えます。まずはお気軽にご相談ください。

出品について相談する