メインコンテンツまでスキップ

4. What We Built

構想から実装、そして体験へ 私たちが作り上げた「Nagesen Gacha Live」は、シンプルな概念を高度な技術で実現したプロダクトです。

ユーザーシナリオ シーン：配信者の部屋 配信者の手元にガチャマシンがある。視聴者は画面越しにそれを見ている。 アクション：投げ銭 視聴者がウォレットを起動し、投げ銭ボタンのクリックでUSDCによる支払い処理される。 リアクション：ガチャマシンが回る 決済確認と同時に、画面の向こうでガチャマシンが動き出す。LEDにはbasename（またはアドレス）と金額が表示され、カプセルが転がる音がライブで聞こえる。 シェア：体験の拡散 当たりが出た！Farcasterで即座にシェア。Basescanで記録が確認できる。

SNS（Farcaster）とのシームレスな連携機能は、体験を盛り上げます。ガチャの結果を即座にソーシャルメディアでシェアできることで、「体験の共有」が、バイラル効果を生み出す仕組みにつながります。また、今後様々なプラットフォームでMini Appの提供がはじまり、一貫した操作性を提供できそうです。

技術概要​

Nagesen Gacha Live は、USDC 決済（Base L2）をトリガーに ESP32 デバイス（ガチャマシン等）を遠隔操作できる IoT × ブロックチェーン基盤です。HTTP 402（Payment Required）を拡張した X402 プロトコル の考え方を取り入れ、少額決済とリアルタイム制御をつなぎます。

  • コンセプト: 「投げ銭＝参加体験」へ。支払いがそのまま物理デバイスの動作に直結。

主な特徴​

  • リアルタイム制御: WebSocket による即時コマンド配信
  • ブロックチェーン決済: Base Network 上の USDC に対応
  • X402 準拠の支払い要求: 402 応答で支払い要件と署名を提示
  • ライブ映像: デバイスの動作をリアルタイム視聴
  • 料金設計: デバイス毎に可変・固定料金を設定可能
  • セキュリティ: HMAC-SHA256 による署名、Nonce/有効期限、オンチェーン検証

システム構成（例）​

  • Nagesen Gacha Live（ESP32_001）
    • 種別: ガチャマシン / 料金: 任意設定（デフォルト $0.000 USDC） / 特徴: チップジャー型
  • Gacha Live Demo（ESP32_002）
    • 種別: ガチャマシン / 料金: 固定 $0.123 USDC / 特徴: 固定料金デモ

参考アーキテクチャ図:

xCockpit Architecture

技術スタック​

  • フロントエンド: React 18 + Vite 5 / Radix UI / Tailwind CSS / TanStack Query
  • ウォレット連携: Coinbase Wallet SDK, OnchainKit
  • バックエンド: Node.js + TypeScript / Express / ws
  • ブロックチェーン: Base（Mainnet 8453 / Sepolia 84532）, ethers.js v6, USDC（ERC-20）

X402 ベースの処理フロー（概要）​

  1. クライアントがデバイス操作を要求
  2. サーバが 402（Payment Required）で支払い要件と署名を返却
  3. ユーザがウォレットで USDC 支払いを実行
  4. サーバがオンチェーンで支払いを検証
  5. 検証成功後、サーバから ESP32 へコマンド送信→実行

API エンドポイント（抜粋）​

  • デバイス管理: GET /api/devices, GET /api/devices/:id, POST /api/devices/:id/commands/:command, POST /api/devices/:id/fee, GET /api/devices/:id/fee
  • 支払い: POST /api/payments/verify, GET /api/payments/:walletAddress
  • システム: GET /api/websocket/status, GET /api/admin/health

セットアップ（簡易）​

前提: Node.js 18+, npm または yarn, MetaMask/Coinbase Wallet

  1. 依存関係のインストール
npm install
  1. 環境変数の設定（例）
cp .env.example .env

.env 例:

NETWORK=your_network_here
BASE_SEPOLIA_RPC=https://your_rpc_endpoint_here
BASE_SEPOLIA_USDC=0x036CbD53842c5426634e7929541eC2318f3dCF7e
X402_HMAC_SECRET=your_secret_key_here
PAYMENT_RECIPIENT=0xYourRecipientAddressHere
VITE_API_URL=http://localhost:5000
VITE_WS_URL=ws://localhost:5000
  1. 開発起動（例）
# バックエンド
npm run dev

# フロントエンド（別ターミナル）
cd client
npm run dev

利用方法（例）​

  1. 右上の「Connect Wallet」でウォレット接続
  2. 可変料金デバイスは「Set Fee」で金額を設定
  3. 「Play Gacha」で支払い承認→自動でデバイス動作
  4. 左側の映像でリアルタイム確認

参考リンク: