POCX
ログイン無料で始める

チュートリアル

チュートリアル

素のアプリから、署名済み規約・失効可能なセッション・証拠トレイルを備えた保護済みPoCまで導く、6つのステップバイステップガイドです。

1. Next.jsアプリをエンドツーエンドで保護する約10分

全行程を体験します。PoCを作成し、Next.jsアプリにSDKを組み込み、その後自分自身が評価者としてゲートを通過して、クライアントが目にする流れを正確に把握します。

  1. サインアップする

    /signup を開いてメールアドレスを入力します。POCXが6桁のコードを送信します。パスワードを考える必要も、漏洩の心配もありません。コードを入力すればダッシュボードに入れます。

  2. PoCを作成する

    ダッシュボードで New PoC をクリックし、各フィールドを入力します。それぞれが実際の役割を持ちます。
    • Name（名前） — ホスト型ゲートに表示され、規約内の {{POC_NAME}} に差し込まれます。
    • Owner entity + registration number（所有者事業体と登記番号） — あなたの会社です。Terms of Access全体を通じて知的財産の所有者として明記されます。
    • Client entity（クライアント事業体） — PoCを評価する組織です。署名する個人とともに規約に拘束されます。
    • Purpose（目的） — 評価者がPoCを利用できる範囲を限定します（「…の目的に限り」）。
    • Brand color（ブランドカラー） — ホスト型ゲートのアクセントカラーです。ログインページが当社ではなく、あなたのブランドに見えるようにします。

  3. 3つの環境変数をコピーする

    ダッシュボード → 対象のPoC → Overview を開き、認証情報をアプリの .env.local にコピーします。
    .env.local
    POCX_URL=https://pocx.dev
POCX_PROJECT_KEY=pocx_pk_…
POCX_SECRET=pocx_sk_…   # server-side only — never expose to the browser

  4. SDKをダウンロードする

    依存関係のないTypeScriptファイル1つを、プロジェクトに直接取り込みます。
    terminal
    curl -o lib/pocx.ts https://pocx.dev/sdk/pocx.ts

  5. ゲートを組み込む

    プロジェクトルートに proxy.ts を作成します（Next.js 16の場合）。Next.js 15以前ではファイル名を middleware.ts とし、proxy の代わりに middleware をエクスポートします。
    proxy.ts
    import { createPocxGate } from "./lib/pocx";

const gate = createPocxGate();

export const proxy = gate.nextProxy();
export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

  6. 保護対象アプリのURLを設定する

    ダッシュボード → 対象のPoC → Settings で Protected app URL にアプリの稼働先（デプロイ先のURLなど）を設定します。ゲートが評価者を戻す先は、この登録済みURLだけです。これがフローの復路を安全なものにしています。

  7. 自分を評価者として招待する

    ダッシュボード → 対象のPoC → Evaluators を開き、自分のメールアドレスを追加します。ログインコードが届くのは許可リスト上のメールアドレスだけで、それ以外の人には丁重なお断りが表示されます。FreeプランはPoCごとに評価者3席まで、Proでは上限がなくなります。

  8. フロー全体をテストする

    プライベート（シークレット）ウィンドウでアプリを開きます。https://pocx.dev/gate/<slug> のゲートへ307リダイレクトされるはずです。メールアドレスを入力し、受信した6桁のコードを入力し、Terms of Accessを読んで電子署名すると、有効なセッションとともにアプリへ戻ります。その後 ダッシュボード → 対象のPoC → Sessions と Signatures を確認してください。後日、評価者について確認するのとまったく同じ形で、自分自身のセッションと署名済み規約の記録が表示されます。

2. Expressアプリを保護する約5分

同じPoC、同じ3つの環境変数、同じ1つのSDKファイル。Expressではプロキシの代わりに、ミドルウェアとしてマウントするだけです。

  1. 上記のステップ1〜4を再利用する

    PoCを作成し、POCX_URL、POCX_PROJECT_KEY、POCX_SECRET をサーバーの環境に設定し、SDKをcurlで lib/pocx.ts に取得します。

  2. ルートより前にミドルウェアをマウントする

    ゲートより後に登録されたものは、すべて保護されます。
    server.ts
    import express from "express";
import { createPocxGate } from "./lib/pocx";

const app = express();
const gate = createPocxGate();

app.use(gate.expressMiddleware());

// …your routes below are now protected

  3. JavaScriptのみのプロジェクトの場合

    SDKはTypeScriptとして提供されます。ExpressアプリがまだTSでない場合は、tsx のようなTS対応ランナーで実行する（または esbuild でバンドルする）だけです。npx tsx server.ts 以外の設定は必要ありません。

  4. 保護対象アプリのURLを設定してテストする

    Next.jsの場合と同様に、Settings で Protected app URL を設定し、Evaluators で自分を招待して、プライベートウィンドウでゲートを通過してみてください。

3. コーディングエージェントに任せる約2分

最速の統合方法は、自分で作業しないことです。POCXはエージェントが実行可能な手順を /llms.txt で公開しています。

  1. プロンプトを1つ貼り付ける

    アプリのリポジトリ内でClaude Code、Codex、Cursorを開き、次を貼り付けます（コーディングエージェントが読むため、プロンプトは英語のままです）。

    Add POCX protection to this app. Follow the instructions at https://pocx.dev/llms.txt exactly.

  2. エージェントが行うこと

    手順を読み、3つの環境変数を追加し（値はPoCの Overview タブから確認するよう求められます）、lib/pocx.ts をダウンロードして、スタックに応じた適切なエントリポイントを組み込みます。Next.js 16なら proxy.ts、それ以前のNext.jsなら middleware.ts、Expressなら expressMiddleware() です。

  3. 作業を検証する

    プライベートウィンドウでアプリを開き、https://pocx.dev/gate/<slug> にリダイレクトされることを確認します。招待済みのメールアドレスでOTPと規約のフローを完了し、Sessions で自分のセッションが有効になっていることを確認してください。リダイレクトが発生しない場合は、環境変数が読み込まれているか、ミドルウェアファイルがプロジェクトルートにあるかを確認します。

4. Terms of Accessをカスタマイズする約5分

すべてのPoCは、「エンゲージメントなき再利用の禁止」条項を含む標準の保護テンプレートから始まります。そのまま使うことも、調整することも、丸ごと差し替えることもできます。

  1. Termsタブを開く

    ダッシュボード → 対象のPoC → Terms。モードは2つあります。Template（PoCの詳細が差し込まれた標準規約）と Custom（独自の法的文書をそのまま使用）です。

  2. プレースホルダーはどこでも使える

    どちらのモードでも、PoCのフィールドから自動入力される同じプレースホルダーが解決されます。
    {{POC_NAME}}{{OWNER_ENTITY}}{{OWNER_REG_NO}}{{CLIENT_ENTITY}}{{PURPOSE}}{{SUPPORT_EMAIL}}{{TERMS_VERSION}}

  3. ライブプレビューを確認する

    Termsタブには、評価者に表示されるものと同じ、完全に解決済みのテキストが表示されます。プレビューの内容は、署名・ハッシュ化・PDF化される内容とバイト単位で一致します。

  4. バージョン更新の仕組みを理解する

    同じバージョンのままテキストを編集した場合、適用されるのは今後の署名者だけです。バージョンを上げると、すべての評価者は次のリクエストが通る前に再同意を求められます。変更が重要で、次回の再検証を待たずに直ちに再同意させたい場合は、オプションの 「revoke all live sessions now」（すべての有効セッションを直ちに失効）チェックボックスをオンにしてください。

  5. 署名済みコピーの保存場所を知る

    すべての同意は ダッシュボード → 対象のPoC → Signatures に記録され（タイムスタンプ、IPアドレス、ユーザーエージェント、規約本文そのもののSHA-256ハッシュ付き）、署名済みPDF証明書が署名者にメールで送付されます。

5. 招待・無効化・失効約5分

日々のアクセス管理です。誰がログインできるのか、今誰がログインしているのか、そしてどちらかを変えたいときに使う操作を説明します。

  1. 評価者を追加する

    ダッシュボード → 対象のPoC → Evaluators → メールアドレスを追加します。ログインコードが届くのは、ここに登録されたアドレスだけです。FreeはPoCごとに3席まで、Pro（月額US$39）は無制限です。

  2. 席を無効化する

    評価者を無効化すると、次回のログインがブロックされ、コードを要求できなくなります。現在のセッションがある場合は、期限切れになるか失効させるまで有効なままです。

  3. セッションを失効させる

    ダッシュボード → 対象のPoC → Sessions にすべての有効なセッションが一覧表示され、セッションごとの Revoke と Revoke all が用意されています。SDKは毎分POCXに再検証するため、失効は約60秒以内に保護対象アプリへ反映されます。

  4. PoC全体を一時停止する

    Settings → Pause は、新規ログインと有効セッションの検証をスイッチ1つでブロックします。再開するまでデモは停止状態になります。セッションTTL、アイドルタイムアウト、OTPの有効期限も同じタブで設定できます。

  5. シークレットをローテーションする

    環境ファイルにアクセスできた協力者が離任したときは、Settings → Rotate secret で新しい POCX_SECRET を発行します。古いシークレットで署名された交換は直ちに無効になります。アプリの環境変数を更新して再デプロイしてください。

  6. 終わったらアーカイブする

    評価が終了したら、Settings → Archive でPoCを退役させます。署名を含む記録は、そのまま保存され続けます。

6. 証拠トレイル（Pro）約5分

もしクライアントが、どこか見覚えのあるものをリリースしたら——必要になるのは記録です。POCXはすべてのプランで初日から記録を残し、Proプランでその閲覧が解放されます。

  1. 監査ログが記録するもの

    すべてのOTP要求と拒否、すべてのログイン、すべての規約署名、すべての失効。それぞれに実行者、タイムスタンプ、コンテキストが付きます。createPocxGate() に logEvents: true を追加すると、アプリ内の page_view イベントもストリーミングされ、各評価者が実際にどの画面を開いたかがわかります。

  2. フィルタとエクスポート

    ダッシュボード → 対象のPoC → Audit では評価者やイベント種別でフィルタでき、記録一式をCSVでエクスポートできます。自分の記録用にも、弁護士に渡す用にも。

  3. 証拠の組み合わさり方

    署名記録は、誰が（OTPで検証されたメールアドレス）何に（SHA-256ハッシュが規約本文そのものを固定し、署名済みPDFが同じ文字列の人間可読な証拠になります）同意したかを証明します。監査ログは、同意後に何をしたかを証明します。何が合意され、何がアクセスされたかを示す必要が生じたとき、この3つは自然に整合します。

  4. 記録はアップグレード前から始まっている

    イベントはすべてのプランで初日から記録されます。後からProにアップグレードすると、アップグレード後のイベントだけでなく、全履歴が閲覧できるようになります。

まだ解決しませんか？

よくある質問では「もし〜だったら」というよくある疑問に答えており、ドキュメントでは設定リファレンスとセキュリティモデルの全体を扱っています。