@chocodrop/mcp 0.1.0-alpha.0

package/runtime/site/public/immersive-launcher.js

@@ -0,0 +1,175 @@
+import ensureThree from './load-three.js';
+import { ensureChocoDrop } from './load-chocodrop.js';
+
+const statusEl = document.getElementById('statusMessage');
+const startButton = document.getElementById('startXR');
+const backButton = document.getElementById('backToDashboard');
+const canvasContainer = document.getElementById('canvasContainer');
+const chocoPWA = window.chocoPWA || null;
+
+let renderer = null;
+let scene = null;
+let camera = null;
+let dropInstance = null;
+let xrSession = null;
+
+function updateStatus(message) {
+  if (statusEl) {
+    statusEl.textContent = message;
+  }
+}
+
+function logImmersive(tag, details = {}) {
+  if (!chocoPWA || typeof chocoPWA.appendLog !== 'function') {
+    return;
+  }
+  const entry = { tag, ...details };
+  chocoPWA.appendLog(entry).catch((error) => {
+    console.warn('⚠️ XRログ書き込みに失敗しました', error);
+  });
+}
+
+async function prepareScene() {
+  if (renderer) {
+    return;
+  }
+
+  const THREE = await ensureThree;
+  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.8));
+  renderer.setSize(canvasContainer.clientWidth, canvasContainer.clientHeight);
+  renderer.xr.enabled = true;
+
+  canvasContainer.innerHTML = '';
+  canvasContainer.appendChild(renderer.domElement);
+
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color('#05070d');
+
+  camera = new THREE.PerspectiveCamera(
+    65,
+    canvasContainer.clientWidth / canvasContainer.clientHeight,
+    0.1,
+    100
+  );
+  camera.position.set(0, 1.6, 3);
+
+  const hemiLight = new THREE.HemisphereLight(0xffffff, 0x1f2937, 1.2);
+  scene.add(hemiLight);
+
+  const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
+  dirLight.position.set(4, 6, 2);
+  scene.add(dirLight);
+
+  const grid = new THREE.GridHelper(12, 24, 0x6f35bc, 0x312663);
+  scene.add(grid);
+
+  const { createChocoDrop } = await ensureChocoDrop();
+  dropInstance = createChocoDrop(scene, {
+    camera,
+    renderer,
+    sceneOptions: {
+      enableMouseInteraction: false,
+      showLocationIndicator: false,
+      defaultObjectScale: 1.2
+    },
+    uiOptions: {
+      skipServiceDialog: true,
+      enableServerHealthCheck: false,
+      showGuidedOnboarding: false
+    }
+  });
+
+  renderer.setAnimationLoop(() => {
+    renderer.render(scene, camera);
+  });
+
+  updateStatus('準備完了。XR体験を開始できます。');
+}
+
+async function startXRSession(autoTriggered = false) {
+  if (!navigator.xr) {
+    updateStatus('XR API をサポートしていない環境です。Quest 3 または対応ブラウザで再度お試しください。');
+    startButton.disabled = true;
+    logImmersive('xr-unsupported', { userAgent: navigator.userAgent });
+    return;
+  }
+
+  if (xrSession) {
+    updateStatus('XR セッションは既に実行中です。');
+    return;
+  }
+
+  startButton.disabled = true;
+  updateStatus('XR セッションを初期化しています...');
+
+  try {
+    await prepareScene();
+    const session = await navigator.xr.requestSession('immersive-vr', {
+      optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
+    });
+
+    session.addEventListener('end', () => {
+      xrSession = null;
+      startButton.disabled = false;
+      updateStatus('XR セッションが終了しました。再開するにはもう一度タップしてください。');
+      logImmersive('xr-session-ended', {});
+    });
+
+    await renderer.xr.setSession(session);
+    xrSession = session;
+    updateStatus('XR セッションを開始しました。ヘッドセットで体験をお楽しみください。');
+    logImmersive('xr-session-started', { autoTriggered });
+  } catch (error) {
+    console.error('XR session failed', error);
+    startButton.disabled = false;
+    updateStatus(`XR 開始に失敗しました: ${error.message}`);
+    logImmersive('xr-start-error', { message: error.message });
+  }
+}
+
+function handleResize() {
+  if (!renderer || !camera) return;
+  const width = canvasContainer.clientWidth;
+  const height = canvasContainer.clientHeight;
+  renderer.setSize(width, height);
+  camera.aspect = width / height;
+  camera.updateProjectionMatrix();
+}
+
+function navigateBack() {
+  window.location.href = '/index.html';
+}
+
+async function recordLaunchTimestamp() {
+  if (!chocoPWA || typeof chocoPWA.saveSession !== 'function') return;
+  try {
+    const existing = (await chocoPWA.loadSession()) || {};
+    await chocoPWA.saveSession({
+      ...existing,
+      lastXRLaunchAt: new Date().toISOString()
+    });
+  } catch (error) {
+    console.warn('⚠️ XR 起動時刻の保存に失敗しました', error);
+  }
+}
+
+function init() {
+  startButton.addEventListener('click', () => {
+    startXRSession(false);
+    recordLaunchTimestamp();
+  });
+
+  backButton.addEventListener('click', navigateBack);
+  window.addEventListener('resize', handleResize);
+
+  if (window.location.hash.includes('autoplay')) {
+    // ブラウザ制約によりユーザー操作が必要な場合あり
+    setTimeout(() => startXRSession(true), 350);
+    recordLaunchTimestamp();
+  } else {
+    updateStatus('没入準備が整いました。ヘッドセットを装着して「XR体験を開始する」をタップしてください。');
+  }
+}
+
+init();

package/runtime/site/public/immersive.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>ChocoDrop Immersive</title>
+    <link rel="manifest" href="/manifest.webmanifest">
+    <meta name="theme-color" content="#0f172a">
+    <link rel="apple-touch-icon" href="/icons/icon-192.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" href="/icons/icon-192.png">
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js"
+            }
+        }
+    </script>
+    <script type="module" src="/pwa-bootstrap.js"></script>
+    <style>
+        :root {
+            color-scheme: dark;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: radial-gradient(circle at top, rgba(111, 53, 188, 0.35), #020617 65%);
+            min-height: 100%;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            display: grid;
+            place-items: center;
+            color: #e2e8f0;
+        }
+
+        main {
+            width: min(640px, 90vw);
+            padding: 32px;
+            border-radius: 24px;
+            background: rgba(15, 23, 42, 0.72);
+            backdrop-filter: blur(18px);
+            box-shadow: 0 30px 80px rgba(15, 23, 42, 0.45);
+            display: grid;
+            gap: 24px;
+        }
+
+        h1 {
+            margin: 0;
+            font-size: clamp(1.5rem, 2.6vw, 2.2rem);
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: #f8fafc;
+        }
+
+        #statusMessage {
+            margin: 0;
+            font-size: 0.95rem;
+            line-height: 1.6;
+            color: #cbd5f5;
+        }
+
+        .actions {
+            display: grid;
+            gap: 12px;
+        }
+
+        button {
+            border: none;
+            border-radius: 16px;
+            padding: 18px 24px;
+            font-size: 1.05rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+        }
+
+        button.primary {
+            background: linear-gradient(135deg, #6f35bc, #7c3aed);
+            color: white;
+            box-shadow: 0 20px 40px rgba(111, 53, 188, 0.35);
+        }
+
+        button.secondary {
+            background: rgba(148, 163, 184, 0.15);
+            color: #f8fafc;
+            border: 1px solid rgba(148, 163, 184, 0.3);
+        }
+
+        button:disabled {
+            opacity: 0.55;
+            cursor: not-allowed;
+        }
+
+        button:not(:disabled):hover {
+            transform: translateY(-2px);
+        }
+
+        .tips {
+            border-radius: 16px;
+            border: 1px solid rgba(148, 163, 184, 0.15);
+            padding: 16px 20px;
+            background: rgba(30, 41, 59, 0.55);
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+
+        .tips h2 {
+            margin: 0 0 8px 0;
+            font-size: 1rem;
+            color: #f8fafc;
+        }
+
+        .tips ul {
+            margin: 0;
+            padding-left: 20px;
+            color: #cbd5f5;
+        }
+
+        #canvasContainer {
+            position: relative;
+            width: 100%;
+            height: 320px;
+            border-radius: 18px;
+            overflow: hidden;
+            border: 1px solid rgba(148, 163, 184, 0.12);
+            background: rgba(15, 23, 42, 0.8);
+        }
+
+        @media (max-width: 520px) {
+            main {
+                padding: 24px;
+                border-radius: 20px;
+            }
+
+            #canvasContainer {
+                height: 240px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>🚀 Immersive Launcher</h1>
+        <p id="statusMessage">XR デバイスを検出しています...</p>
+        <div class="actions">
+            <button id="startXR" class="primary">XR体験を開始する</button>
+            <button id="backToDashboard" class="secondary">サーバーダッシュボードへ戻る</button>
+        </div>
+        <section class="tips">
+            <h2>実機テストのポイント</h2>
+            <ul>
+                <li>Quest 3 は最新のシステムアップデートを適用してください。</li>
+                <li>初回はヘッドセット内のブラウザで HTTPS URL を直接入力し、インストール登録します。</li>
+                <li>再訪時はホームアイコンから開き、表示された「XR体験を開始する」をタップするだけです。</li>
+            </ul>
+        </section>
+        <div id="canvasContainer" aria-hidden="true"></div>
+    </main>
+    <script type="module" src="./immersive-launcher.js"></script>
+</body>
+</html>