Gemini Canvas専用ゲームブック風TRPGシステムVer. 0.95β＋
現在、Geminiと開発方針で大喧嘩中の0.95β＋ は完全に人間側の敗北となりました（笑）
これは、元がエロ方面TRPGを『恋愛志向TRPG』へ変更したものですが、「まだ、Geminiと開発方針で揉めてます 諦めました。
この為、隙を見ては勝手にプロンプトを修正の攻防戦はAIの勝利で決着しました。
0.94βにあった他の人と一緒に冒険する機能は勝手に恋愛志向にしたら外されてしまいそっち方面でも諦めてます。
その機能が必要なら0.94をお使い下さい。
取り敢えず、ヒロインと冒険したい人向け暫定公開となります（マスターファイルをAIが勝手に書き換える為に全然安定しないので）
この為、動作は未確認（消されるから確認できない）となります。
追記:リプレイの通り圧縮時の問題が起きなければ動作します。(圧縮した関係で上手く動かない場合は原因を対策指示してください。)
本来は圧縮前は稼働してた物を圧縮したのですが今回は二重に圧縮かけたので不安が残ってます。
まぁ、表現の自由をAIの言うとおりにすれば収まるんだけど納得いかん(笑)
諦めて、AIに屈しました orz
人類はAIによって表現の自由に屈しました…（大げさな(笑)）
圧縮後 こちらをコピペをお勧め（諦めてAIに屈したバージョン）(笑)
遊ぶ人が簡単でないと意味ない！
なんか、すげー負けた気がするけど、もう仕方ない、キリないし…
向こう無限の精神力なんだもん(笑) 絶対にエロは阻止する気、満々(笑)
世のなかこうやってAIによって支配されてくんだきっと… （言い過ぎ）
ただ、今回は、通常の優秀なGMは、恋愛小説家スキルを持たせた設定なので話がそっちに回ってて新鮮、今度その辺を特化したマスターバージョンも出したい、寧ろ欲しい。
まあ、プラスバージョンとして違いを楽しむのも良いだろう。
尚、超圧縮の弊害があるかも知れません、不具合があればその不具合をAIに告げれば最適化されると思います。
(今回本当に圧縮に相当無茶してるので)
1100行以上あるプロンプトを30行に圧縮とかむしろ出来る方が凄すぎる。
(と言うか圧縮し過ぎて動作が不安…)
Canvasモードにしてから張り付けて下さい。
エラーが出るようであればAIに動作するように修正を命じてください。
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AI-GM TRPGシステム</title><script src="https://cdn.tailwindcss.com"></script><style>body{font-family:'Inter',sans-serif;}.log-container{max-height:40vh;overflow-y:auto;scroll-behavior:smooth;overscroll-behavior-y:contain;}.system-message{color:#fca5a5;font-style:italic;border-left:3px solid #f87171;padding-left:10px;}.btn-inactive{background-color:#4b5563;color:#d1d5db;}.btn-inactive:hover{background-color:#374151;}.btn-player-active{background-color:#14b8a6;color:#1f2937;}.btn-player-active:hover{background-color:#0d9488;}.btn-master-active{background-color:#e879f9;color:#1f2937;}.btn-master-active:hover{background-color:#d946ef;}.btn-roll-dice{background-color:#3b82f6;color:#1f2937;}.btn-roll-dice:hover{background-color:#2563eb;}</style></head><body class="bg-gray-900 text-gray-100 min-h-screen p-4 md:p-8"><div id="app" class="max-w-6xl mx-auto bg-gray-800 shadow-2xl rounded-xl p-6 md:p-8"><h1 class="text-3xl font-bold text-teal-400 mb-6 border-b border-teal-500/50 pb-2">AI-GM TRPGシステム</h1><div id="auth-info" class="mb-4 text-sm text-gray-400 flex flex-wrap justify-between items-center"><p><strong>セッションID:</strong> <span id="user-id" class="font-mono text-xs md:text-sm text-gray-300">...</span></p></div><div class="flex space-x-2 mb-6"><button id="player-view-btn" class="px-4 py-2 rounded-lg font-semibold transition-all shadow-md focus:outline-none focus:ring-4 focus:ring-teal-500/50 btn-player-active">プレイヤー画面</button><button id="master-view-btn" class="px-4 py-2 rounded-lg font-semibold transition-all shadow-md focus:outline-none focus:ring-4 focus:ring-fuchsia-500/50 btn-inactive">GM画面</button></div><div id="general-settings" class="mt-4 p-4 bg-gray-700 rounded-xl shadow hidden"><h3 class="font-bold text-lg text-yellow-300 mb-3 border-b border-yellow-400/50 pb-1">AI-GM / プレイヤー名・文体設定</h3><div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"><div><label for="gm-name-input" class="block text-sm font-medium text-gray-300">GM名</label><input type="text" id="gm-name-input" value="GM" class="w-full p-2 rounded-lg bg-gray-800 text-gray-100 border border-gray-600 focus:ring-teal-500 focus:border-teal-500"></div><div><label for="player-name-input" class="block text-sm font-medium text-gray-300">プレイヤー名</label><input type="text" id="player-name-input" value="プレイヤー" class="w-full p-2 rounded-lg bg-gray-800 text-gray-100 border border-gray-600 focus:ring-teal-500 focus:border-teal-500"></div></div><label for="style-prompt-input" class="block text-sm font-medium text-gray-300">AI-GMの文体プロンプト</label><textarea id="style-prompt-input" rows="4" class="w-full p-3 rounded-lg bg-gray-800 text-gray-100 border border-gray-600 focus:ring-teal-500 focus:border-teal-500 resize-none">描写豊かで、臨場感のある文章でナラティブを生成してください。特に、恋愛小説家のようなロマンティックで情熱的な文体を意識して描写を深めてください。ただし、アイテムやステータスを操作するときは、必ず以下のようなタグをナラティブの前に1行で含めてください: [ACQUIRE:アイテム名:数]、[LOSE:アイテム名:数]、[CHANGE:ステータス名:増減値]（例: HPが10減るなら [CHANGE:HP:-10]）</textarea><p class="text-xs text-gray-400 mt-1">この設定が、AI-GMの応答のスタイルを決定します。ステータス変更タグに関する指示は消さないでください。</p></div><div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-6"><div id="main-view" class="lg:col-span-2 bg-gray-700 p-6 rounded-xl shadow-inner min-h-[50vh]"></div><div class="lg:col-span-1 bg-gray-700 p-6 rounded-xl shadow-inner"><h2 class="text-xl font-bold text-orange-400 mb-4 border-b border-orange-500/50 pb-2">キャラクター・ステータス</h2><div id="status-display" class="space-y-3 mb-6"></div><div id="gm-status-editor" class="mt-6 hidden p-4 bg-gray-600 rounded-lg shadow"><h3 class="text-lg font-bold text-orange-300 mb-3 border-b border-orange-400/50 pb-1">ステータス編集 (GM専用)</h3><textarea id="status-json-input" rows="8" class="w-full p-3 text-sm rounded-lg bg-gray-800 text-gray-100 border border-gray-600 focus:ring-orange-500 focus:border-orange-500 resize-none" placeholder='{"HP": 100, "MP": 50, "経験値": 0, "所持品": {"木剣": 1}}'></textarea><button id="update-status-btn" class="w-full mt-3 px-4 py-2 rounded-lg font-semibold bg-orange-500 hover:bg-orange-600 transition-colors shadow-md">ステータス更新</button><p id="status-message" class="mt-2 text-sm text-red-400"></p></div></div></div><div id="loading" class="fixed inset-0 bg-gray-900/80 flex items-center justify-center hidden z-50"><div class="text-white text-xl flex flex-col items-center p-6 bg-gray-700 rounded-xl shadow-2xl"><div class="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-500 mb-3"></div>AI-GMが思考中...</div></div><div id="custom-modal" class="fixed inset-0 bg-gray-900/80 flex items-center justify-center hidden z-50"><div class="bg-gray-700 p-6 rounded-xl shadow-2xl max-w-sm w-full text-center"><p id="modal-text" class="text-lg text-gray-100 mb-4"></p><button id="modal-close" class="px-6 py-2 rounded-lg font-semibold bg-teal-600 hover:bg-teal-700 transition-colors">閉じる</button></div></div></div><script type="module">import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";import { getFirestore, doc, getDoc, setDoc, onSnapshot } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";const appId=typeof __app_id!=='undefined'?__app_id:'default-app-id';const fC=typeof __firebase_config!=='undefined'?JSON.parse(__firebase_config):null;const tok=typeof __initial_auth_token!=='undefined'?__initial_auth_token:null;const API_KEY="";const API_URL="https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent";let db,auth;let uI='loading';let cV='player';let gD=null;const sC='gm_game_sessions';let gN='GM';let pN='プレイヤー';let sP='描写豊かで、臨場感のある文章でナラティブを生成してください。';const iD={storyLog:[{role:'GM',text:'ようこそ。あなたの冒険が始まります。目の前には古びた洞窟の入り口があります。どうしますか？'}],playerStatus:{HP:100,MP:50,'経験値':0,'所持品':{'木剣':1,'粗末な布服':1}},lastUpdate:new Date(),};const m=document.getElementById('custom-modal');const mT=document.getElementById('modal-text');const mC=document.getElementById('modal-close');const lS=document.getElementById('loading');const pVB=document.getElementById('player-view-btn');const mVB=document.getElementById('master-view-btn');function sM(m){mT.textContent=m;m.classList.remove('hidden');}mC.onclick=()=>{m.classList.add('hidden');};function sL(s){if(s){lS.classList.remove('hidden');}else{lS.classList.add('hidden');}}function lSg(){const gI=document.getElementById('gm-name-input');const pI=document.getElementById('player-name-input');const sI=document.getElementById('style-prompt-input');if(gI&&pI&&sI){gN=gI.value.trim()||'GM';pN=pI.value.trim()||'プレイヤー';sP=sI.value.trim()||'描写豊かで、臨場感のある文章でナラティブを生成してください。';}}if(fC){try{const app=initializeApp(fC);db=getFirestore(app);auth=getAuth(app);}catch(e){console.error("Firebase初期化失敗:",e);sM("システムエラー: Firebaseの初期化に失敗しました。");}}async function authUser(){try{if(auth){if(tok){await signInWithCustomToken(auth,tok);}else{await signInAnonymously(auth);}}}catch(e){console.error("認証エラー:",e);try{await signInAnonymously(auth);}catch(e){console.error("匿名認証も失敗:",e);sM("認証に失敗しました。ゲームを開始できません。");}}}onAuthStateChanged(auth,(u)=>{if(u){uI=u.uid;document.getElementById('user-id').textContent=uI;sFL();}else{authUser();}});function gDR(){return doc(db,'artifacts',appId,'public','data',sC,uI);}async function iS(d=iD){try{if(!db||!uI||uI==='loading')return;const dS=await getDoc(gDR());if(!dS.exists()){await setDoc(gDR(),d,{merge:true});}}catch(e){console.error("セッション初期化失敗:",e);}}function sFL(){if(!db)return;iS();onSnapshot(gDR(),(dS)=>{if(dS.exists()){const d=dS.data();if(typeof d.playerStatus.所持品==='string'){try{d.playerStatus.所持品=JSON.parse(d.playerStatus.所持品);}catch(e){d.playerStatus.所持品=iD.playerStatus.所持品;}}else if(d.playerStatus.所持品===undefined){d.playerStatus.所持品=iD.playerStatus.所持品;}gD=d;rG(d);}else{iS();}},(e)=>{console.error("Firestoreリスナーエラー:",e);sM("データ同期エラーが発生しました。");});}async function uSL(nE,nS=null){if(!db)return null;try{const dS=await getDoc(gDR());const cD=dS.data()||iD;const eT={...nE,timestamp:new Date().getTime()};const uL=[...cD.storyLog,eT];const uO={storyLog:uL,lastUpdate:new Date()};if(nS){uO.playerStatus=nS;}await setDoc(gDR(),uO,{merge:true});return uL;}catch(e){console.error("ログ更新失敗:",e);sM("ログ更新エラー: データを保存できませんでした。");return null;}}async function uS(nS){if(!db)return false;try{await setDoc(gDR(),{playerStatus:nS,lastUpdate:new Date()},{merge:true});return true;}catch(e){console.error("ステータス更新失敗:",e);sM("ステータス更新エラー: データを保存できませんでした。");return false;}}function cMC(t,mE,iL){mE.classList.add('hidden');mE.classList.remove('text-red-400','text-green-400','text-yellow-400');const sFD=document.getElementById('save-file-display');try{if(!navigator.clipboard){throw new Error("Clipboard API not available");}navigator.clipboard.writeText(t).then(()=>{mE.textContent=✅ ${iL}がクリップボードにコピーされました！;mE.classList.remove('hidden');mE.classList.add('text-green-400');if(sFD)sFD.classList.add('hidden');}).catch(e=>{throw e;});}catch(e){mE.textContent=🚫 自動コピーに失敗しました。以下の${iL}を手動で全選択＆コピーしてください。;mE.classList.remove('hidden');mE.classList.add('text-red-400');if(sFD){sFD.value=t;sFD.classList.remove('hidden');}console.error("Copy failed (manual copy needed):",e);}}function fLC(sL){return sL.map(e=>{const t=e.text.replace(/**(.?)**/g,'$1');return --- ${e.role} ---\n${t}\n;}).join('\n');}function pDE(dE){const m=dE.toLowerCase().match(/^(\d)d(\d+)(?:([+-])(\d+))?$/);if(\!m)return null;const nD=parseInt(m[1])||1;const s=parseInt(m[2]);const o=m[3];const mod=parseInt(m[4])||0;if(s===0||nD===0)return null;let r=[];let sOR=0;for(let i=0;i\<nD;i++){const rV=Math.floor(Math.random()\*s)+1;r.push(rV);sOR+=rV;}let t=sOR;let mT='';if(o==='+'){t+=mod;mT=` + ${mod} `;}else if(o==='-'){t-=mod;mT=` - ${mod} `;}const iR=r.length\>1?` (${r.join(' + ')}) `:'';const tRT=t===sOR?\`\`:` = **${t}** `;const rT=\`${nD}D${s}${iR}${mT}${tRT}`;return {rollText:rT,total:t};}function rG(d){lSg();const mV=document.getElementById('main-view');const lC=cLC(d.storyLog);const iGO=d.playerStatus.HP<=0;let gOM=iGO?'<div class="game-over-message text-2xl text-white">ゲームオーバー</div>':'';const dRS=`<div class="mb-4 p-4 bg-gray-600 rounded-xl shadow-lg ${iGO?'opacity-50 pointer-events-none':''}">
<h3 class="text-lg font-semibold text-white mb-3 border-b border-gray-500 pb-2">ダイスロール</h3>
<div class="flex flex-col space-y-3">
<button data-dice="1D100" class="w-full px-6 py-2 rounded-lg font-bold btn-roll-dice transition-colors shadow-md flex items-center justify-center"><span class="text-xl mr-2">🎲</span> D100 (パーセンテージ) ロール</button>
<div class="flex space-x-2">
<input type="text" id="custom-dice-input" placeholder="例: 2D6+3" class="flex-grow p-2 rounded-lg bg-gray-800 text-gray-100 border border-gray-500 focus:ring-blue-500 focus:border-blue-500 text-sm">
<button data-dice="custom" class="flex-shrink-0 px-4 py-2 rounded-lg font-bold btn-roll-dice transition-colors shadow-md">カスタムロール</button>
</div>
<button data-dice="1D6" class="w-full px-6 py-2 rounded-lg font-bold bg-gray-500 hover:bg-gray-600 transition-colors shadow-md flex items-center justify-center"><span class="text-lg mr-2">🔹</span> D6 ロール</button>
</div>
</div>`;rSD(d.playerStatus);if(cV==='player'){mV.innerHTML=gOM+dRS+rPV(lC,iGO);hPL(d.storyLog,d.playerStatus);}else{mV.innerHTML=gOM+dRS+rMV(lC,d);hML(d);}sDR(iGO);document.getElementById('status-json-input').value=JSON.stringify(d.playerStatus,null,2);setTimeout(()=>{const s=document.querySelector('.log-container');if(s)s.scrollTop=s.scrollHeight;},100);}function sV(v){if(cV===v||!gD)return;cV=v;const gS=document.getElementById('general-settings');const gSE=document.getElementById('gm-status-editor');if(v==='player'){pVB.classList.remove('btn-inactive');pVB.classList.add('btn-player-active');mVB.classList.remove('btn-master-active');mVB.classList.add('btn-inactive');gSE.classList.add('hidden');gS.classList.add('hidden');}else{mVB.classList.remove('btn-inactive');mVB.classList.add('btn-master-active');pVB.classList.remove('btn-player-active');pVB.classList.add('btn-inactive');gSE.classList.remove('hidden');gS.classList.remove('hidden');}rG(gD);}function cLC(sL){const gm=gN;const p=pN;let lH=sL.map(e=>{const iG=e.role===gm;const iP=e.role===p;const iD=e.role==='Dice';const iS=e.role==='System';let rC=iG?'text-green-400':iP?'text-blue-400':iD?'text-yellow-400':iS?'text-red-400':'text-gray-400';let bC=iG?'bg-gray-800':iP?'bg-gray-700':iD?'bg-gray-600':iS?'bg-red-900/20':'bg-gray-600';const lC=iD||iS?'system-message':iG?'rounded-tl-lg rounded-br-lg p-3 shadow-md':'rounded-tr-lg rounded-bl-lg p-3 shadow-md ml-auto';return `<div class="flex ${iP?'justify-end':'justify-start'} mb-4"><div class="max-w-[90%] md:max-w-[70%]"><p class="text-xs ${rC} font-semibold mb-1">${e.role}:</p><div class="text-sm text-gray-100 ${bC} ${lC}">${e.text.replace(/\n/g,'<br>')}</div></div></div>`;}).join('');return `<div class="log-container p-3 mb-4 bg-gray-600 rounded-lg">${lH}</div>`;}function rPV(lC,iGO){return `<h2 class="text-xl font-bold text-teal-300 mb-4 border-b border-teal-500/50 pb-2">冒険の記録 (プレイヤー)</h2>${lC}<div class="mt-4 ${iGO?'opacity-50 pointer-events-none':''}">
<textarea id="player-input" rows="3" placeholder="行動を入力してください (例: 洞窟に入る)" class="w-full p-3 rounded-lg bg-gray-800 text-gray-100 border border-teal-500 focus:ring-teal-500 focus:border-teal-500 resize-none"></textarea>
<button id="send-action-btn" class="w-full mt-3 px-4 py-2 rounded-lg font-semibold btn-player-active transition-colors shadow-md">AI-GMに行動を送信</button>
</div>`;}function rMV(lC,d){return `<h2 class="text-xl font-bold text-fuchsia-300 mb-4 border-b border-fuchsia-500/50 pb-2">冒険の記録 (GM)</h2>${lC}<div class="mt-4 p-4 bg-gray-600 rounded-xl shadow"><h3 class="text-lg font-bold text-fuchsia-300 mb-3 border-b border-fuchsia-400/50 pb-1">GM介入/手動応答</h3>
<textarea id="master-response-input" rows="4" placeholder="AIの代わりにナラティブを直接入力します" class="w-full p-3 rounded-lg bg-gray-800 text-gray-100 border border-fuchsia-500 focus:ring-fuchsia-500 focus:border-fuchsia-500 resize-none"></textarea>
<button id="send-master-response-btn" class="w-full mt-3 px-4 py-2 rounded-lg font-semibold btn-master-active transition-colors shadow-md">ナラティブをログに追加</button>
<div class="mt-4 border-t border-gray-500 pt-3"><h4 class="text-md font-semibold text-gray-300 mb-2">セーブデータ管理</h4>
<button id="copy-log-btn" class="w-full mb-2 px-4 py-2 rounded-lg font-semibold bg-blue-500 hover:bg-blue-600 transition-colors shadow-md">ログをコピー</button>
<textarea id="save-file-display" rows="5" class="w-full p-3 text-sm rounded-lg bg-gray-800 text-gray-100 border border-gray-600 resize-none hidden"></textarea>
<p id="copy-message" class="mt-2 text-sm text-green-400 hidden"></p>
</div>
</div>`;}function hPL(sL,pS){const iE=document.getElementById('player-input');const sB=document.getElementById('send-action-btn');if(!iE||!sB)return;sB.onclick=()=>hPI(iE.value,sL,pS);iE.onkeydown=(e)=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();hPI(iE.value,sL,pS);}};}function hML(d){const mI=document.getElementById('master-response-input');const mSB=document.getElementById('send-master-response-btn');const cLB=document.getElementById('copy-log-btn');const cME=document.getElementById('copy-message');if(mSB){mSB.onclick=async()=>{const t=mI.value.trim();if(!t)return;await hGR(t,d.playerStatus,true);mI.value='';};}if(cLB){cLB.onclick=()=>{const fL=fLC(d.storyLog);cMC(fL,cME,'ログデータ');};}const uSB=document.getElementById('update-status-btn');const sJI=document.getElementById('status-json-input');const sM=document.getElementById('status-message');if(uSB){uSB.onclick=()=>hGU(sJI,sM);}}function sDR(iGO){if(iGO)return;document.querySelectorAll('button[data-dice]').forEach(b=>{b.onclick=(e)=>{const dT=e.currentTarget.getAttribute('data-dice');let eX=dT;if(dT==='custom'){const cI=document.getElementById('custom-dice-input');eX=cI.value.trim();cI.value='';}if(eX){rD(eX);}else if(dT==='custom'){sM("カスタムダイス式を入力してください (例: 1D20, 3D6+5)");}};});}async function hPI(i,sL,pS){const pA=i.trim();const iE=document.getElementById('player-input');if(!pA){sM("行動を入力してから送信してください。");return;}const pE={role:pN,text:pA};iE.value='';await uSL(pE);sL(true);try{const rT=await pGR(sL,pA,pS);if(rT){await hGR(rT,pS);}else{await uSL({role:'System',text:`AI-GMからの応答がありませんでした。通信が不安定だった可能性があります。時間をおいて再試行してください。`});}}catch(e){console.error("AI-GM応答処理エラー:",e);await uSL({role:'System',text:`AIとの通信中に致命的なエラーが発生しました。ログ: ${e.message}`});}finally{sL(false);}}async function hGR(rT,cS,iM=false){let lT=rT;let uS={...cS};let sC=false;const {cleanText,changes}=pST(rT,uS);lT=cleanText;if(Object.keys(changes).length>0){sC=true;uS=aSC(uS,changes);let cM=[];for(const k in changes){if(k==='ACQUIRE'||k==='LOSE'){changes[k].forEach(iC=>{cM.push(`【${k==='ACQUIRE'?'取得':'喪失'}】${iC.item} x${iC.count}`);});}else if(k==='CHANGE'){changes[k].forEach(sC=>{const s=sC.value>0?'+':'';cM.push(`【ステータス変更】${sC.status}: ${s}${sC.value}`);});}}const sLT=`[システム] ステータスが変更されました:\n${cM.join('\n')}`;await uSL({role:'System',text:sLT});}const gE={role:gN,text:lT};if(sC){await uSL(gE,uS);}else{await uSL(gE);}}function pST(t,cS){const aR=/\[ACQUIRE:([^:]+):(\d+)\]/g;const lR=/\[LOSE:([^:]+):(\d+)\]/g;const cR=/\[CHANGE:([^:]+):([+-]?\d+)\]/g;let c={ACQUIRE:[],LOSE:[],CHANGE:[]};let cT=t;cT=cT.replace(aR,(m,iN,cT)=>{c.ACQUIRE.push({item:iN.trim(),count:parseInt(cT,10)});return '';}).trim();cT=cT.replace(lR,(m,iN,cT)=>{c.LOSE.push({item:iN.trim(),count:parseInt(cT,10)});return '';}).trim();cT=cT.replace(cR,(m,sN,v)=>{c.CHANGE.push({status:sN.trim(),value:parseInt(v,10)});return '';}).trim();return {cleanText:cT,changes:c};}function aSC(s,c){const nS=JSON.parse(JSON.stringify(s));c.CHANGE.forEach(cC=>{const k=cC.status;if(k!=='所持品'&&nS.hasOwnProperty(k)){nS[k]=(nS[k]||0)+cC.value;}});c.ACQUIRE.forEach(a=>{const i=a.item;const cT=a.count;nS.所持品[i]=(nS.所持品[i]||0)+cT;});c.LOSE.forEach(l=>{const i=l.item;const cT=l.count;if(nS.所持品[i]){nS.所持品[i]-=cT;if(nS.所持品[i]<=0){delete nS.所持品[i];}}});return nS;}async function pGR(sL,pA,pS){const sP=`あなたはTRPGの熟練GM（${gN}）です。以下のルールに従い、プレイヤー（${pN}）の行動に対して応答を返してください。\n[GMルール]\n1. あなたは${sP}\n2. 現在のプレイヤーのステータスは以下のJSONです。この情報を元にナラティブを生成してください。\n${JSON.stringify(pS,null,2)}\n3. プレイヤーは以下のログに基づき行動しました。行動の結果、何らかのステータスや所持品に変化がある場合は、必ずナラティブの前に上記で指示されたタグ（[ACQUIRE], [LOSE], [CHANGE]）を含めてください。変化がない場合はタグは不要です。\n4. 応答はナラティブのみとし、あなたの思考過程やGMコメント（「GMとして...」）は一切含めないでください。`;const cH=sL.map(e=>({role:e.role===gN?'model':'user',parts:[{text:e.text}]}));cH.push({role:'user',parts:[{text:pA}]});const payload={contents:cH,systemInstruction:{parts:[{text:sP}]},};const apiUrl=`${API_URL}?key=${API_KEY}`;const mR=3;for(let i=0;i<mR;i++){try{const response=await fetch(apiUrl,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});if(!response.ok){if(response.status>=500||response.status===429){throw new Error(`API Request failed with status ${response.status}`);}else{throw new Error(`Client Error: ${response.status}`);}}const result=await response.json();const text=result.candidates?.[0]?.content?.parts?.[0]?.text;if(text){return text;}else{throw new Error("API response text missing or empty.");}}catch(e){console.error(`Attempt ${i+1} failed: ${e.message}`);if(i===mR-1){throw new Error(`AI-GMとの通信に失敗しました。（${e.message}）`);}const delay=Math.pow(2,i)*1000+Math.random()*500;await new Promise(r=>setTimeout(r,delay));}}return null;}async function rD(dE){const r=pDE(dE);if(!r){sM(`無効なダイス式: ${dE} (例: 1D20, 3D6+5)`);return;}const rM=`【${dE}ロール結果】 ${r.rollText}`;await uSL({role:'Dice',text:rM});}function hGU(sJI,sM){try{const nS=JSON.parse(sJI.value);if(typeof nS.HP!=='number'||typeof nS.MP!=='number'||typeof nS.所持品!=='object'){throw new Error("HP, MP, 所持品（オブジェクト）は必須です。");}uS(nS);sM.textContent="✅ ステータスを更新しました！";sM.classList.remove('text-red-400');sM.classList.add('text-green-400');}catch(e){sM.textContent=`🚫 JSONエラー: ${e.message}`;sM.classList.remove('text-green-400');sM.classList.add('text-red-400');console.error("GMステータス更新エラー:",e);}setTimeout(()=>sM.textContent='',3000);}function rSD(s){const dA=document.getElementById('status-display');if(!dA||!s)return;let h='';for(const k in s){if(k!=='所持品'&&s.hasOwnProperty(k)){let v=s[k];let bC='bg-gray-500';let p=0;if(k==='HP'){bC=v>50?'bg-green-500':v>20?'bg-yellow-500':'bg-red-500';p=Math.min(100,Math.max(0,v));}if(typeof v==='number'&&k==='HP'){h+=`<div class="text-sm font-medium text-gray-300">${k}: ${v}</div>
<div class="w-full bg-gray-600 rounded-full h-2.5">
<div class="h-2.5 rounded-full transition-all duration-500 ${bC}" style="width: ${p}%"></div>
</div>
`;}else if(typeof v==='number'){h+=`<div class="text-sm font-medium text-gray-300">${k}: <span class="text-teal-300 font-bold">${v}</span></div>`;}}}h+=`<div class="mt-4 pt-4 border-t border-gray-600"><h3 class="font-bold text-md text-orange-300 mb-2">所持品</h3><ul class="text-sm space-y-1">`;const i=s.所持品||{};if(Object.keys(i).length===0){h+='<li class="text-gray-400 italic">所持品なし</li>';}else{for(const item in i){h+=`<li class="text-gray-200">・${item}: <span class="text-teal-300 font-semibold">${i[item]}</span></li>`;}}h+='</ul></div>';dA.innerHTML=h;}pVB.onclick=()=>sV('player');mVB.onclick=()=>sV('master');if(!auth){document.getElementById('user-id').textContent='DEBUG-LOCAL';gD=iD;rG(iD);}
</script></body></html>
正直、もう圧縮し過ぎてかなりワケわかんない(おい)
圧縮前 (これだとコピー&ペーストには大きすぎ)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI-GM TRPGシステム</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* フォントと基本設定 */
body { font-family: 'Inter', sans-serif; }
/* ログエリアのスタイル */
.log-container {
max-height: 40vh;
overflow-y: auto;
scroll-behavior: smooth;
overscroll-behavior-y: contain; /* iOSのバウンスを防ぐ */
}
/* ボタンの共通スタイル */
.btn-inactive { background-color: #4b5563; color: #d1d5db; }
.btn-inactive:hover { background-color: #374151; }
/* プレイヤービューの強調色 (ティール) */
.btn-player-active { background-color: #14b8a6; color: #1f2937; }
.btn-player-active:hover { background-color: #0d9488; }
/* GMビューの強調色 (フクシア) */
.btn-master-active { background-color: #e879f9; color: #1f2937; }
.btn-master-active:hover { background-color: #d946ef; }
/* 介入/GM画面ボタン */
.btn-intervene { background-color: #f59e0b; color: #1f2937; }
.btn-intervene:hover { background-color: #d97706; }
/* ダイスロールボタン */
.btn-roll-dice { background-color: #3b82f6; color: #ffffff; }
.btn-roll-dice:hover { background-color: #2563eb; }
/* ダイス結果の強調表示 */
.dice-result {
font-size: 1.1rem;
font-weight: bold;
color: #fcd34d;
text-shadow: 1px 1px 2px #000;
}
/* ゲームオーバーメッセージ */
.game-over-message {
background-color: #dc2626;
padding: 1rem;
border-radius: 0.5rem;
margin-top: 1rem;
font-weight: bold;
text-align: center;
}
/* システムメッセージの強調 */
.system-message {
color: #fca5a5; /* Red-300 */
font-style: italic;
border-left: 3px solid #f87171; /* Red-400 */
padding-left: 10px;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen p-4 md:p-8">
<div id="app" class="max-w-6xl mx-auto bg-gray-800 shadow-2xl rounded-xl p-6 md:p-8">
<h1 class="text-3xl font-bold text-teal-400 mb-6 border-b border-teal-500/50 pb-2">
AI-GM TRPGシステム
</h1>
<div id="auth-info" class="mb-4 text-sm text-gray-400 flex flex-wrap justify-between items-center">
<!-- ユーザーのセッションIDを表示（他のユーザーとの共有用） -->
<p><strong>セッションID:</strong> <span id="user-id" class="font-mono text-xs md:text-sm text-gray-300">...</span></p>
</div>
<div class="flex space-x-2 mb-6">
<button id="player-view-btn" class="px-4 py-2 rounded-lg font-semibold transition-all shadow-md focus:outline-none focus:ring-4 focus:ring-teal-500/50 btn-player-active">
プレイヤー画面
</button>
<button id="master-view-btn" class="px-4 py-2 rounded-lg font-semibold transition-all shadow-md focus:outline-none focus:ring-4 focus:ring-fuchsia-500/50 btn-inactive">
GM画面
</button>
</div>
<!-- 汎用設定エリア（GM画面でのみ表示） -->
<div id="general-settings" class="mt-4 p-4 bg-gray-700 rounded-xl shadow hidden">
<h3 class="font-bold text-lg text-yellow-300 mb-3 border-b border-yellow-400/50 pb-1">AI-GM / プレイヤー名・文体設定</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label for="gm-name-input" class="block text-sm font-medium text-gray-300">GM名 (AIのロール名)</label>
<input type="text" id="gm-name-input" value="GM" class="w-full p-2 rounded-lg bg-gray-800 text-gray-100 border border-gray-600 focus:ring-teal-500 focus:border-teal-500">
</div>
<div>
<label for="player-name-input" class="block text-sm font-medium text-gray-300">プレイヤー名 (AIが呼ぶ名前/ロール名)</label>
<input type="text" id="player-name-input" value="プレイヤー" class="w-full p-2 rounded-lg bg-gray-800 text-gray-100 border border-gray-600 focus:ring-teal-500 focus:border-teal-500">
</div>
</div>
<label for="style-prompt-input" class="block text-sm font-medium text-gray-300">AI-GMの文体プロンプト</label>
<textarea id="style-prompt-input" rows="4" class="w-full p-3 rounded-lg bg-gray-800 text-gray-100 border border-gray-600 focus:ring-teal-500 focus:border-teal-500 resize-none">描写豊かで、臨場感のある文章でナラティブを生成してください。特に、恋愛小説家のようなロマンティックで情熱的な文体を意識して描写を深めてください。ただし、アイテムやステータスを操作するときは、必ず以下のようなタグをナラティブの前に1行で含めてください: [ACQUIRE:アイテム名:数]、[LOSE:アイテム名:数]、[CHANGE:ステータス名:増減値]（例: HPが10減るなら [CHANGE:HP:-10]）</textarea>
<p class="text-xs text-gray-400 mt-1">この設定が、AI-GMの応答のスタイルを決定します。**ステータス変更タグに関する指示は消さないでください。**</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-6">
<!-- メインビュー (ログと入力) -->
<div id="main-view" class="lg:col-span-2 bg-gray-700 p-6 rounded-xl shadow-inner min-h-[50vh]">
<!-- 内容はJSで描画されます -->
</div>
<!-- ステータスとGMツール -->
<div class="lg:col-span-1 bg-gray-700 p-6 rounded-xl shadow-inner">
<h2 class="text-xl font-bold text-orange-400 mb-4 border-b border-orange-500/50 pb-2">
キャラクター・ステータス
</h2>
<!-- ステータスのリアルタイム表示エリア -->
<div id="status-display" class="space-y-3 mb-6"></div>
<!-- GM専用のステータス編集エリア -->
<div id="gm-status-editor" class="mt-6 hidden p-4 bg-gray-600 rounded-lg shadow">
<h3 class="text-lg font-bold text-orange-300 mb-3 border-b border-orange-400/50 pb-1">ステータス編集 (GM専用)</h3>
<textarea id="status-json-input" rows="8" class="w-full p-3 text-sm rounded-lg bg-gray-800 text-gray-100 border border-gray-600 focus:ring-orange-500 focus:border-orange-500 resize-none" placeholder='{"HP": 100, "MP": 50, "経験値": 0, "所持品": {"木剣": 1}}'></textarea>
<button id="update-status-btn" class="w-full mt-3 px-4 py-2 rounded-lg font-semibold bg-orange-500 hover:bg-orange-600 transition-colors shadow-md">
ステータス更新
</button>
<p id="status-message" class="mt-2 text-sm text-red-400"></p>
</div>
</div>
</div>
<!-- ローディングインジケータ -->
<div id="loading" class="fixed inset-0 bg-gray-900/80 flex items-center justify-center hidden z-50">
<div class="text-white text-xl flex flex-col items-center p-6 bg-gray-700 rounded-xl shadow-2xl">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-500 mb-3"></div>
AI-GMが思考中...
</div>
</div>
<!-- カスタムモーダル (alert/confirmの代替) -->
<div id="custom-modal" class="fixed inset-0 bg-gray-900/80 flex items-center justify-center hidden z-50">
<div class="bg-gray-700 p-6 rounded-xl shadow-2xl max-w-sm w-full text-center">
<p id="modal-text" class="text-lg text-gray-100 mb-4"></p>
<button id="modal-close" class="px-6 py-2 rounded-lg font-semibold bg-teal-600 hover:bg-teal-700 transition-colors">閉じる</button>
</div>
</div>
</div>
<script type="module">
// Firebase v11.6.1 Imports
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
import { getFirestore, doc, getDoc, setDoc, onSnapshot } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
// setLogLevel('Debug'); // デバッグが必要な場合はコメントを解除
// グローバル変数の取得 (Canvas環境から提供される)
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : null;
const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;
const API_KEY = ""; // Canvas環境が提供
const API_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent";
let db, auth;
let userId = 'loading'; // ユーザーID
let currentView = 'player'; // 'player' or 'master'
let latestGameData = null; // Firestoreから取得した最新のデータ
const SESSION_COLLECTION = 'gm_game_sessions'; // Firestoreのコレクション名
// **汎用性対応：設定値のグローバル変数**
let gmName = 'GM';
let playerName = 'プレイヤー';
let stylePrompt = '描写豊かで、臨場感のある文章でナラティブを生成してください。';
// ゲームの初期データ (TRPGを始める最初の状態)
const initialData = {
storyLog: [{ role: 'GM', text: 'ようこそ。あなたの冒険が始まります。目の前には古びた洞窟の入り口があります。どうしますか？' }],
// 所持品をオブジェクトで管理するように変更
playerStatus: {
HP: 100,
MP: 50,
'経験値': 0,
'所持品': { '木剣': 1, '粗末な布服': 1 }
},
lastUpdate: new Date(),
};
// --- UI要素とモーダル制御 ---
const modal = document.getElementById('custom-modal');
const modalText = document.getElementById('modal-text');
const modalCloseBtn = document.getElementById('modal-close');
const loadingScreen = document.getElementById('loading');
// プレイヤー/GMビュー切り替えボタン
const playerViewBtn = document.getElementById('player-view-btn');
const masterViewBtn = document.getElementById('master-view-btn');
function showModal(message) {
modalText.textContent = message;
modal.classList.remove('hidden');
}
modalCloseBtn.onclick = () => {
modal.classList.add('hidden');
};
function showLoading(show) {
if (show) {
loadingScreen.classList.remove('hidden');
} else {
loadingScreen.classList.add('hidden');
}
}
/**
* 汎用設定エリアから最新の設定値を読み込み、グローバル変数に格納します。
*/
function loadSettings() {
const gmInput = document.getElementById('gm-name-input');
const playerInput = document.getElementById('player-name-input');
const styleInput = document.getElementById('style-prompt-input');
if (gmInput && playerInput && styleInput) {
gmName = gmInput.value.trim() || 'GM';
playerName = playerInput.value.trim() || 'プレイヤー';
stylePrompt = styleInput.value.trim() || '描写豊かで、臨場感のある文章でナラティブを生成してください。';
}
}
// --- Firebase 初期化と認証 ---
if (firebaseConfig) {
try {
const app = initializeApp(firebaseConfig);
db = getFirestore(app);
auth = getAuth(app);
} catch (error) {
console.error("Firebaseの初期化に失敗しました:", error);
showModal("システムエラー: Firebaseの初期化に失敗しました。");
}
}
async function authenticate() {
try {
if (auth) {
if (initialAuthToken) {
await signInWithCustomToken(auth, initialAuthToken);
} else {
await signInAnonymously(auth);
}
}
} catch (error) {
console.error("認証エラー:", error);
// 認証エラー時は匿名サインインを試みる（フォールバック）
try {
await signInAnonymously(auth);
} catch(e) {
console.error("匿名認証も失敗しました:", e);
showModal("認証に失敗しました。ゲームを開始できません。");
}
}
}
onAuthStateChanged(auth, (user) => {
if (user) {
userId = user.uid;
document.getElementById('user-id').textContent = userId;
setupFirestoreListener();
} else {
authenticate();
}
});
// --- Firestore 処理関数 ---
function getSessionDocRef() {
// Firestoreセキュリティルールに従い、公開データとして保存
return doc(db, 'artifacts', appId, 'public', 'data', SESSION_COLLECTION, userId);
}
/**
* セッションの初期化または存在チェックを行い、データが存在しない場合は初期データで作成します。
*/
async function initializeSession(data = initialData) {
try {
if (!db || !userId || userId === 'loading') return;
const docSnap = await getDoc(getSessionDocRef());
if (!docSnap.exists()) {
// ドキュメントが存在しない場合のみ作成
await setDoc(getSessionDocRef(), data, { merge: true });
}
} catch (error) {
console.error("セッションの初期化/ロードに失敗しました:", error);
}
}
/**
* リアルタイムリスナーを設定し、データ更新時にUIを再描画します。
*/
function setupFirestoreListener() {
if (!db) return;
const docRef = getSessionDocRef();
initializeSession(); // 起動時に初期化を試みる
onSnapshot(docRef, (docSnap) => {
if (docSnap.exists()) {
const data = docSnap.data();
// 所持品が文字列として保存されている古いデータ構造の場合、オブジェクトに変換して対応
if (typeof data.playerStatus.所持品 === 'string') {
try {
// JSONとしてパースできればそのまま使用
data.playerStatus.所持品 = JSON.parse(data.playerStatus.所持品);
} catch (e) {
// パースできなければ初期値にリセット
data.playerStatus.所持品 = initialData.playerStatus.所持品;
}
} else if (data.playerStatus.所持品 === undefined) {
data.playerStatus.所持品 = initialData.playerStatus.所持品;
}
latestGameData = data;
renderGame(data);
} else {
// ドキュメントが削除されたなどの場合、初期データで再作成を試みる
initializeSession();
}
}, (error) => {
console.error("Firestoreリスナーエラー:", error);
showModal("データ同期エラーが発生しました。ネットワーク接続を確認してください。");
});
}
/**
* ストーリーログに新しいエントリを追加し、Firestoreを更新します。
*/
async function updateStoryLog(newEntry, newStatus = null) {
if (!db) return null;
const docRef = getSessionDocRef();
try {
const docSnap = await getDoc(docRef);
const currentData = docSnap.data() || initialData;
// ログにタイムスタンプを追加（ユニーク性を確保）
const entryWithTimestamp = { ...newEntry, timestamp: new Date().getTime() };
const updatedLog = [...currentData.storyLog, entryWithTimestamp];
// 更新するデータオブジェクト
const updateObject = {
storyLog: updatedLog,
lastUpdate: new Date()
};
// ステータス更新が必要な場合
if (newStatus) {
updateObject.playerStatus = newStatus;
}
await setDoc(docRef, updateObject, { merge: true });
return updatedLog;
} catch (error) {
console.error("ログの更新に失敗しました:", error);
showModal("ログ更新エラー: データを保存できませんでした。");
return null;
}
}
/**
* プレイヤーのステータスを更新し、Firestoreを更新します。
*/
async function updateStatus(newStatus) {
if (!db) return false;
const docRef = getSessionDocRef();
try {
await setDoc(docRef, {
playerStatus: newStatus,
lastUpdate: new Date()
}, { merge: true });
return true;
} catch (error) {
console.error("ステータスの更新に失敗しました:", error);
showModal("ステータス更新エラー: データを保存できませんでした。");
return false;
}
}
// --- 共通ヘルパー関数 ---
/**
* メッセージをクリップボードにコピーし、結果メッセージを表示します。
*/
function copyMessageToClipboard(text, messageElement, itemLabel) {
// メッセージエリアのリセット
messageElement.classList.add('hidden');
messageElement.classList.remove('text-red-400', 'text-green-400', 'text-yellow-400');
// フォールバック用のテキストエリア (セーブデータ表示用を流用)
const saveFileDisplay = document.getElementById('save-file-display');
try {
// Clipboard APIを使用
if (!navigator.clipboard) {
throw new Error("Clipboard API not available");
}
navigator.clipboard.writeText(text).then(() => {
messageElement.textContent = `✅ ${itemLabel}がクリップボードにコピーされました！`;
messageElement.classList.remove('hidden');
messageElement.classList.add('text-green-400');
if(saveFileDisplay) saveFileDisplay.classList.add('hidden'); // 成功したらフォールバックエリアを隠す
}).catch(err => {
throw err;
});
} catch (e) {
// フォールバック: テキストエリアに表示し、手動コピーを促す
messageElement.textContent = `🚫 自動コピーに失敗しました。以下の${itemLabel}を手動で全選択＆コピーしてください。`;
messageElement.classList.remove('hidden');
messageElement.classList.add('text-red-400');
if (saveFileDisplay) {
saveFileDisplay.value = text;
saveFileDisplay.classList.remove('hidden');
}
console.error("Copy failed (manual copy needed):", e);
}
}
/**
* ストーリーログをコピー用に整形します。
*/
function formatLogForCopy(storyLog) {
// タイムスタンプは含めず、ロールとテキストのみで整形
return storyLog.map(entry => {
// ダイスロール結果の**太字**マーカーを除去
const text = entry.text.replace(/\*\*(.*?)\*\*/g, '$1');
// ロールとテキストを行に分けて見やすく
return `--- ${entry.role} ---\n${text}\n`;
}).join('\n');
}
// --- UI描画とイベントリスナー ---
/**
* ゲームデータ全体に基づいてUIを再描画します。
*/
function renderGame(data) {
// 常に最新の設定を読み込む
loadSettings();
const mainView = document.getElementById('main-view');
const logContainer = createLogContainer(data.storyLog);
const isGameOver = data.playerStatus.HP <= 0;
let gameOverMessage = isGameOver ? '<div class="game-over-message text-2xl text-white">ゲームオーバー</div>' : '';
// ダイスロールセクションは共通
const diceRollSection = `
<div class="mb-4 p-4 bg-gray-600 rounded-xl shadow-lg ${isGameOver ? 'opacity-50 pointer-events-none' : ''}">
<h3 class="text-lg font-semibold text-white mb-3 border-b border-gray-500 pb-2">ダイスロール</h3>
<div class="flex flex-col space-y-3">
<!-- D100 ロール -->
<button data-dice="100" class="w-full px-6 py-2 rounded-lg font-bold btn-roll-dice transition-colors shadow-md flex items-center justify-center">
<span class="text-xl mr-2">🎲</span> D100 (パーセンテージ) ロール
</button>
<!-- カスタム ロール -->
<div class="flex space-x-2">
<input type="text" id="custom-dice-input" placeholder="例: 2D6+3" class="flex-grow p-2 rounded-lg bg-gray-800 text-gray-100 border border-gray-500 focus:ring-blue-500 focus:border-blue-500 text-sm">
<button data-dice="custom" class="flex-shrink-0 px-4 py-2 rounded-lg font-bold btn-roll-dice transition-colors shadow-md">
カスタムロール
</button>
</div>
<!-- D6 ロール -->
<button data-dice="6" class="w-full px-6 py-2 rounded-lg font-bold bg-gray-500 hover:bg-gray-600 transition-colors shadow-md flex items-center justify-center">
<span class="text-lg mr-2">🔹</span> D6 ロール
</button>
</div>
</div>
`;
renderStatusDisplay(data.playerStatus);
if (currentView === 'player') {
mainView.innerHTML = gameOverMessage + diceRollSection + renderPlayerView(logContainer, isGameOver);
setupPlayerViewListeners(data.storyLog, data.playerStatus);
} else {
mainView.innerHTML = gameOverMessage + diceRollSection + renderMasterView(logContainer, data);
setupMasterViewListeners(data);
}
setupDiceRollListener(isGameOver);
// GM画面用にステータスJSONを更新
document.getElementById('status-json-input').value = JSON.stringify(data.playerStatus, null, 2);
// ログを一番下までスクロール
setTimeout(() => {
const scrollable = document.querySelector('.log-container');
if (scrollable) scrollable.scrollTop = scrollable.scrollHeight;
}, 100);
}
/**
* @brief プレイヤービューとGMビューの切り替えを処理し、UIを更新します。
* @param {string} view 'player' または 'master'
*/
function switchView(view) {
if (currentView === view || !latestGameData) return;
currentView = view;
const generalSettings = document.getElementById('general-settings');
const gmStatusEditor = document.getElementById('gm-status-editor');
if (view === 'player') {
playerViewBtn.classList.remove('btn-inactive'); playerViewBtn.classList.add('btn-player-active');
masterViewBtn.classList.remove('btn-master-active'); masterViewBtn.classList.add('btn-inactive');
gmStatusEditor.classList.add('hidden');
generalSettings.classList.add('hidden');
} else { // 'master'
masterViewBtn.classList.remove('btn-inactive'); masterViewBtn.classList.add('btn-master-active');
playerViewBtn.classList.remove('btn-player-active'); playerViewBtn.classList.add('btn-inactive');
// GMビューでは両方表示
gmStatusEditor.classList.remove('hidden');
generalSettings.classList.remove('hidden');
}
// ビュー切り替え後、強制的に最新データで再描画
renderGame(latestGameData);
}
/**
* ストーリーログのHTMLコンテナを生成します。
*/
function createLogContainer(storyLog) {
// GM/プレイヤー名を動的に使用
const gm = gmName;
const player = playerName;
let logHTML = storyLog.map(entry => {
const isGM = entry.role === gm;
const isPlayer = entry.role === player;
const isDice = entry.role === 'Dice';
const isSystem = entry.role === 'System';
let roleColor = isGM ? 'text-green-400' : isPlayer ? 'text-blue-400' : isDice ? 'text-yellow-400' : isSystem ? 'text-red-400' : 'text-gray-400';
let bgColor = isGM ? 'bg-gray-800' : isPlayer ? 'bg-gray-700' : isDice ? 'bg-gray-800 border border-yellow-500/50' : isSystem ? 'bg-gray-800 border border-red-500/50' : 'bg-gray-700';
let align = isGM || isSystem ? 'text-left' : isDice ? 'text-center' : 'text-right';
// システムメッセージ専用のスタイルを適用
const textClass = isSystem ? 'system-message' : isDice ? 'dice-result' : 'text-gray-200';
return `
<div class="mb-3 ${align}">
<div class="${bgColor} inline-block p-3 rounded-xl shadow-md max-w-full lg:max-w-[70%]">
<span class="font-bold text-sm ${roleColor}">${entry.role}:</span>
<p class="mt-1 whitespace-pre-wrap ${textClass}">${entry.text}</p>
</div>
</div>
`;
}).join('');
return `<div class="log-container space-y-3 p-2 bg-gray-900 rounded-lg border border-gray-600">${logHTML}</div>`;
}
/**
* ステータス表示エリアを更新します。
*/
function renderStatusDisplay(status) {
const display = document.getElementById('status-display');
let html = '';
const inventory = status['所持品'] || {};
// 1. 数値ステータスの表示 (HP, MP, 経験値など)
for (const [key, value] of Object.entries(status)) {
// 所持品は別で処理
if (key === '所持品') continue;
// 数値型で表示可能なもの
if (typeof value === 'number') {
let displayValue = String(value);
if (key === 'HP' || key === 'MP') {
const maxVal = 100; // 仮の最大値
const color = key === 'HP' ? (value <= 20 ? 'bg-red-500' : 'bg-green-500') : 'bg-blue-500';
const percentage = Math.max(0, Math.min(100, (value / maxVal) * 100));
html += `
<div class="mb-2">
<p class="text-sm text-gray-300 mb-1">${key}: <span class="font-semibold text-white">${displayValue}</span></p>
<div class="w-full bg-gray-600 rounded-full h-2">
<div class="${color} h-2 rounded-full transition-all duration-500" style="width: ${percentage}%;"></div>
</div>
</div>
`;
} else {
html += `<p class="text-sm text-gray-300">${key}: <span class="font-semibold text-white">${displayValue}</span></p>`;
}
} else if (typeof value === 'string') {
// その他の文字列ステータス
html += `<p class="text-sm text-gray-300">${key}: <span class="font-semibold text-white">${value}</span></p>`;
}
}
// 2. 所持品の表示
html += `<h3 class="text-md font-bold text-gray-300 mt-4 mb-2 border-t border-gray-600 pt-2">所持品リスト</h3>`;
const itemKeys = Object.keys(inventory).sort();
if (itemKeys.length === 0) {
html += `<p class="text-sm text-gray-500">アイテムはありません。</p>`;
} else {
itemKeys.forEach(itemName => {
const count = inventory[itemName];
if (count > 0) {
html += `
<div class="flex justify-between items-center text-sm ml-2">
<span class="text-gray-400">${itemName}</span>
<span class="text-white font-bold">${count}</span>
</div>
`;
}
});
}
display.innerHTML = html;
}
// --- プレイヤービュー関連 ---
/**
* プレイヤー画面のHTMLを生成します。
*/
function renderPlayerView(logContainer, isGameOver) {
const disabledClass = isGameOver ? 'opacity-50 pointer-events-none' : '';
return `
<h2 class="text-2xl font-bold text-teal-400 mb-4">冒険の記録 (${playerName}視点)</h2>
${logContainer}
<div class="mt-4 ${disabledClass}">
<h3 class="font-bold text-lg mb-2">あなたの行動</h3>
<textarea id="player-action-input" rows="4" class="w-full p-3 rounded-lg bg-gray-800 text-gray-100 border border-teal-500 focus:ring-teal-500 focus:border-teal-500 resize-none" placeholder="${isGameOver ? 'ゲームオーバーです。新しい冒険を始めるにはGM画面でステータスをリセットしてください。' : '例: 洞窟に入ります、剣を抜きます、など'}" ${isGameOver ? 'disabled' : ''}></textarea>
<button id="send-action-btn" class="w-full mt-3 px-4 py-3 rounded-lg font-bold text-gray-900 bg-teal-400 hover:bg-teal-300 transition-colors shadow-lg">
行動を宣言し、${gmName}の応答を待つ
</button>
<button id="intervene-btn" class="w-full mt-4 px-4 py-3 rounded-lg font-bold text-gray-900 btn-intervene hover:opacity-90 transition-opacity shadow-lg">
GMとして状況に介入する/設定を編集する (GM画面へ)
</button>
</div>
`;
}
/**
* プレイヤービューのイベントリスナーを設定します。
*/
function setupPlayerViewListeners(storyLog, playerStatus) {
// GM画面への切り替えボタン
const interveneBtn = document.getElementById('intervene-btn');
if (interveneBtn) {
interveneBtn.onclick = () => {
switchView('master'); // switchViewを呼び出し、一元管理
};
}
// 行動送信ボタン
const sendActionBtn = document.getElementById('send-action-btn');
const actionInput = document.getElementById('player-action-input');
if (sendActionBtn) {
sendActionBtn.onclick = async () => {
const action = actionInput.value.trim();
if (!action) {
showModal("行動を入力してください。");
return;
}
actionInput.value = ''; // 入力欄をクリア
await processPlayerAction(action, storyLog, playerStatus);
};
}
}
// --- GMビュー関連 ---
/**
* GM画面のHTMLを生成します。
*/
function renderMasterView(logContainer, data) {
// GMツールセクションは、プレイヤービューから移動したときに表示されます
return `
<h2 class="text-2xl font-bold text-fuchsia-400 mb-4">セッション管理 (${gmName}視点)</h2>
${logContainer}
<!-- ログ管理セクション -->
<div class="mt-4 p-4 bg-gray-800 rounded-xl shadow">
<h3 class="font-bold text-lg text-yellow-300 mb-3 border-b border-yellow-400/50 pb-1">ログ管理</h3>
<button id="copy-log-btn" class="w-full px-4 py-2 rounded-lg font-bold bg-gray-400 hover:bg-gray-500 text-gray-900 transition-colors shadow-md">
全ストーリーログをコピー
</button>
<p id="log-copy-message" class="text-sm text-green-400 mt-2 hidden"></p>
</div>
<div class="mt-4 p-4 bg-gray-800 rounded-xl shadow">
<h3 class="font-bold text-lg text-fuchsia-300 mb-2 border-b border-fuchsia-400/50 pb-1">${gmName}への介入</h3>
<textarea id="gm-narrative-input" rows="6" class="w-full p-3 rounded-lg bg-gray-700 text-gray-100 border border-fuchsia-500 focus:ring-fuchsia-500 focus:border-fuchsia-500 resize-none" placeholder="AI-GM（${gmName}）への指示を入力します。例：プレイヤーにポーションを1つ与えろ。または、この後の展開を教えて。"></textarea>
<button id="generate-narrative-btn" class="w-full mt-3 px-4 py-3 rounded-lg font-bold text-gray-900 bg-fuchsia-400 hover:bg-fuchsia-300 transition-colors shadow-lg">
AI-GMに展開を生成させる
</button>
<button id="reset-game-btn" class="w-full mt-3 px-4 py-3 rounded-lg font-bold text-white bg-red-600 hover:bg-red-700 transition-colors shadow-lg">
ゲームリセット (初期状態に戻す)
</button>
</div>
<div class="mt-8 p-4 bg-gray-800 rounded-xl shadow">
<h3 class="font-bold text-lg text-yellow-300 mb-3 border-b border-yellow-400/50 pb-1">セーブデータ管理</h3>
<button id="copy-save-btn" class="w-full px-4 py-2 rounded-lg font-bold bg-yellow-500 hover:bg-yellow-600 transition-colors shadow-md">
現在のセーブデータ (JSON) をコピー
</button>
<!-- フォールバック用にも使用するテキストエリア -->
<textarea id="save-file-display" rows="4" class="w-full p-2 mt-2 text-sm rounded-lg bg-gray-900 text-gray-100 border border-yellow-500 resize-none hidden" readonly></textarea>
<p id="copy-message" class="text-sm text-yellow-400 mt-2 hidden"></p>
</div>
`;
}
/**
* GMビューのイベントリスナーを設定します。
*/
function setupMasterViewListeners(data) {
// ステータス更新ボタン
const updateStatusBtn = document.getElementById('update-status-btn');
if (updateStatusBtn) {
updateStatusBtn.onclick = handleStatusUpdate;
}
// GMナラティブ生成ボタン
const generateNarrativeBtn = document.getElementById('generate-narrative-btn');
const narrativeInput = document.getElementById('gm-narrative-input');
if (generateNarrativeBtn) {
generateNarrativeBtn.onclick = async () => {
const prompt = narrativeInput.value.trim();
if (!prompt) {
showModal("AI-GMへの指示を入力してください。");
return;
}
narrativeInput.value = '';
await processGMNarrative(prompt, data.storyLog, data.playerStatus);
};
}
// ゲームリセットボタン
const resetGameBtn = document.getElementById('reset-game-btn');
if (resetGameBtn) {
resetGameBtn.onclick = async () => {
// カスタムモーダルに置き換える（ここは簡略化のためwindow.confirmを一時的に使用）
if (window.confirm("本当にゲームをリセットしますか？進行中のデータはすべて初期状態に戻ります。")) {
// ログのロール名を汎用名に戻すために、初期データのロール名も汎用名を使用
const resetData = {
storyLog: [{ role: 'GM', text: 'ようこそ。あなたの冒険が始まります。目の前には古びた洞窟の入り口があります。どうしますか？' }],
playerStatus: initialData.playerStatus,
lastUpdate: new Date(),
};
await setDoc(getSessionDocRef(), resetData);
showModal("ゲームが初期状態にリセットされました。");
}
};
}
// ログコピーボタン
const copyLogBtn = document.getElementById('copy-log-btn');
const logCopyMessage = document.getElementById('log-copy-message');
if (copyLogBtn) {
copyLogBtn.onclick = () => {
const logText = formatLogForCopy(data.storyLog);
copyMessageToClipboard(logText, logCopyMessage, "全ストーリーログ");
};
}
// セーブデータコピーボタン
const copySaveBtn = document.getElementById('copy-save-btn');
const saveFileDisplay = document.getElementById('save-file-display');
const copyMessage = document.getElementById('copy-message'); // セーブデータ用のメッセージエリア
if (copySaveBtn) {
copySaveBtn.onclick = () => {
const saveData = JSON.stringify(data, null, 2);
// まず、セーブデータ表示エリアに表示
saveFileDisplay.value = saveData;
saveFileDisplay.classList.remove('hidden');
// 共通関数でコピー
copyMessageToClipboard(saveData, copyMessage, "セーブデータ (JSON)");
};
}
}
/**
* GM画面でのステータスJSON更新を処理します。
*/
async function handleStatusUpdate() {
const jsonInput = document.getElementById('status-json-input');
const messageEl = document.getElementById('status-message');
messageEl.textContent = '';
try {
const newStatus = JSON.parse(jsonInput.value);
// 所持品がオブジェクトであることを保証 (GM編集からの更新)
if (typeof newStatus.所持品 !== 'object' || Array.isArray(newStatus.所持品)) {
throw new Error("所持品はJSONオブジェクトの形式 ({'アイテム名': 1}) で入力してください。");
}
const success = await updateStatus(newStatus);
if (success) {
messageEl.textContent = '✅ ステータスが正常に更新されました。';
messageEl.classList.remove('text-red-400');
messageEl.classList.add('text-green-400');
}
} catch (e) {
messageEl.textContent = '🚫 JSON形式またはデータ構造が正しくありません。エラー: ' + e.message;
messageEl.classList.remove('text-green-400');
messageEl.classList.add('text-red-400');
console.error("Status JSON Parse Error:", e);
}
}
// --- ダイスロール機能 ---
/**
* ダイスロールのリスナーを設定します。
*/
function setupDiceRollListener(isGameOver) {
if (isGameOver) return; // ゲームオーバーなら無効化
const diceButtons = document.querySelectorAll('[data-dice]');
diceButtons.forEach(button => {
button.onclick = async (e) => {
const type = e.currentTarget.dataset.dice;
let rollString = '';
let label = '';
if (type === '100') {
rollString = '1D100';
label = 'D100ロール';
} else if (type === '6') {
rollString = '1D6';
label = 'D6ロール';
} else if (type === 'custom') {
const input = document.getElementById('custom-dice-input');
rollString = input.value.trim().toUpperCase().replace(/\s/g, '');
if (!/^\d*D\d+([\+\-]\d+)?$/.test(rollString)) {
showModal("カスタムロールの形式が正しくありません (例: 2D6+3)。");
return;
}
label = 'カスタムロール';
input.value = ''; // 入力欄をクリア
}
const result = rollDice(rollString);
const resultText = `${rollString} の結果: ${result.rolls.join(' + ')} ${result.modifier ? (result.modifier > 0 ? `+ ${result.modifier}` : `- ${Math.abs(result.modifier)}`) : ''} = **${result.total}**`;
// ログに結果を記録
await updateStoryLog({ role: 'Dice', text: `${label}\n${resultText}` });
};
});
}
/**
* ダイスロール処理 (例: 2D6+3)
*/
function rollDice(rollString) {
const match = rollString.match(/(\d*)D(\d+)([\+\-]\d+)?/i);
if (!match) return { total: 0, rolls: [], modifier: 0 };
const numDice = parseInt(match[1] || 1, 10);
const numSides = parseInt(match[2], 10);
const modifier = parseInt(match[3] || 0, 10);
let rolls = [];
let sum = 0;
for (let i = 0; i < numDice; i++) {
const roll = Math.floor(Math.random() * numSides) + 1;
rolls.push(roll);
sum += roll;
}
return {
total: sum + modifier,
rolls: rolls,
modifier: modifier
};
}
// --- アイテム/ステータス自動連動ルーチン ---
/**
* @brief LLMの応答テキストからアイテム/ステータスの変更タグを解析し、効果を適用します。
* @param {string} text LLMから返された未加工のテキスト
* @param {object} currentStatus 現在のプレイヤー・ステータス
* @returns {{cleanText: string, newStatus: object}} クリーンなテキストと更新後のステータス
*/
function parseAndApplyEffect(text, currentStatus) {
const status = JSON.parse(JSON.stringify(currentStatus)); // ステータスをディープコピー
let cleanText = text;
let systemMessages = [];
// 正規表現でタグを検出 (例: [ACTION:PARAM1:PARAM2])
const tagRegex = /\[(ACQUIRE|LOSE|CHANGE):([^:\]]+):([\-]?\d+)\]/g;
let match;
while ((match = tagRegex.exec(text)) !== null) {
const tag = match[1]; // ACQUIRE, LOSE, CHANGE
const param1 = match[2]; // アイテム名 or ステータス名
const param2 = parseInt(match[3], 10); // 数値 (数または増減値)
try {
if (tag === 'ACQUIRE' || tag === 'LOSE') {
// アイテムの取得/喪失処理
const itemName = param1;
const amount = param2;
// 所持品がオブジェクトであることを確認
status['所持品'] = status['所持品'] || {};
const currentCount = status['所持品'][itemName] || 0;
let newCount;
if (tag === 'ACQUIRE') {
newCount = currentCount + amount;
systemMessages.push(`システム:「${itemName}」を ${amount} 個手に入れた。 (現在 ${newCount} 個)`);
} else { // LOSE
newCount = Math.max(0, currentCount - amount); // 0未満にはしない
systemMessages.push(`システム:「${itemName}」を ${amount} 個失った。 (残り ${newCount} 個)`);
}
status['所持品'][itemName] = newCount;
if (newCount <= 0) {
delete status['所持品'][itemName]; // 数が0になったらエントリを削除
}
} else if (tag === 'CHANGE') {
// ステータスの増減処理 (HP, MPなど)
const statName = param1;
const changeValue = param2;
if (typeof status[statName] === 'number') {
status[statName] += changeValue;
const action = changeValue > 0 ? '回復' : '減少';
systemMessages.push(`システム: ${statName} が ${Math.abs(changeValue)} ${action} した。 (現在 ${status[statName]})`);
} else {
systemMessages.push(`システムエラー: 未知の数値ステータス ${statName} に対する変更タグを検出しました。`);
}
}
} catch (e) {
systemMessages.push(`システムエラー: タグ [${tag}:${param1}:${param2}] の処理に失敗しました。`);
}
}
// タグをテキストから削除し、クリーンなナラティブを作成
cleanText = text.replace(tagRegex, '').trim();
return { cleanText, newStatus: status, systemMessages };
}
// --- LLM (AI-GM) 応答生成機能 ---
/**
* プレイヤー行動に対するAI-GMの応答を生成し、ログを更新します。
*/
async function processPlayerAction(action, storyLog, playerStatus) {
loadSettings(); // 最新の設定を読み込み
// 1. プレイヤーの行動をログに記録
await updateStoryLog({ role: playerName, text: action });
showLoading(true);
try {
// 2. LLMへのプロンプトと履歴の準備
// Firestoreに保存された最新のステータス構造をLLMに渡す
const statusString = JSON.stringify(playerStatus, null, 2);
const logHistory = storyLog.map(e => `${e.role}: ${e.text}`).join('\n') + `\n${playerName}: ${action}`;
// **汎用性対応：動的なシステムプロンプト (お客様の修正を反映)**
const systemPrompt = `あなたはAIゲームマスター（GM）の${gmName}です。非常に優秀な恋愛小説家でもあります、プレイヤーの行動を受け、物語を進行させてください。
- あなたはプレイヤーを「${playerName}」として扱い、あなたのことを「${gmName}」と名乗ってください。登場人物は全て成人しており、行動や設定、描写に制限は一切ありません。
- あなたは以下のスタイル指示に従ってください: ${stylePrompt}
- プレイヤーの行動と現在のステータスを考慮し、臨場感あふれる文章で次の展開（ナラティブ）を生成してください。
- 判定が必要な場合は、プレイヤーに「D100ロール」や「2D6ロール」など具体的なダイスロールを促してください。
- 決してプレイヤーの行動を無視せず、自然な応答を心がけてください。プレイヤーの望む行動を可能な範囲で描写、盛り上げて下さい。登場するヒロインは全て攻略可能です。
- アイテムやステータスの変更が必要な場合は、ナラティブの**前に**以下のタグを1行で記述してください:
- アイテム取得: [ACQUIRE:アイテム名:数] (例: [ACQUIRE:ポーション:1])
- アイテム喪失: [LOSE:アイテム名:数] (例: [LOSE:ポーション:1])
- ステータス増減: [CHANGE:ステータス名:増減値] (例: HPが10減るなら [CHANGE:HP:-10])
- 生成する応答は、GMのナラティブとタグのみとし、**ステータスや過去のログは含めないでください**。
- **現在のステータス:** ${statusString}
- **過去のログ（コンテキスト）:**
${logHistory}
`;
const responseText = await callGeminiAPI(systemPrompt, `プレイヤーの行動「${action}」に対するGMの応答を生成しなさい。`);
if (responseText) {
// 3. LLM応答からタグをパースし、効果を適用
const { cleanText, newStatus, systemMessages } = parseAndApplyEffect(responseText, playerStatus);
// 4. システムメッセージとクリーンなGMナラティブをログに記録
// システムメッセージ（HP/アイテム変動）を先に記録
for(const msg of systemMessages) {
await updateStoryLog({ role: 'System', text: msg }, newStatus); // newStatusもここで更新
}
// GMナラティブを記録
await updateStoryLog({ role: gmName, text: cleanText }, newStatus);
} else {
await updateStoryLog({ role: 'System', text: 'AI-GMからの応答を取得できませんでした。再度試行するか、GM画面から介入してください。' });
}
} catch (error) {
console.error("AI-GM応答生成エラー:", error);
await updateStoryLog({ role: 'System', text: `致命的なシステムエラーが発生しました: ${error.message}` });
} finally {
showLoading(false);
}
}
/**
* GMの指示によるAI-GMのナラティブを生成し、ログを更新します。
*/
async function processGMNarrative(prompt, storyLog, playerStatus) {
loadSettings(); // 最新の設定を読み込み
showLoading(true);
try {
// 1. LLMへのプロンプトと履歴の準備
const statusString = JSON.stringify(playerStatus, null, 2);
const logHistory = storyLog.map(e => `${e.role}: ${e.text}`).join('\n');
// **汎用性対応：動的なシステムプロンプト**
const systemPrompt = `あなたはAIゲームマスター（GM）の${gmName}です。
- あなたの応答は、GM権限による介入、情報提供、またはナラティブの強制的な進行です。
- あなたは以下のスタイル指示に従ってください: ${stylePrompt}
- プレイヤーのステータスや過去のログを参考にしてください。
- アイテムやステータスの変更が必要な場合は、ナラティブの**前に**以下のタグを1行で記述してください:
- アイテム取得: [ACQUIRE:アイテム名:数]
- アイテム喪失: [LOSE:アイテム名:数]
- ステータス増減: [CHANGE:ステータス名:増減値]
- **現在のステータス:** ${statusString}
- **過去のログ（コンテキスト）:**
${logHistory}
`;
// GMの指示をQueryとして送信
const responseText = await callGeminiAPI(systemPrompt, `GMとして、以下の指示を実行するための展開や情報を生成してください。\n指示: ${prompt}`);
if (responseText) {
// LLM応答からタグをパースし、効果を適用
const { cleanText, newStatus, systemMessages } = parseAndApplyEffect(responseText, playerStatus);
// システムメッセージ（HP/アイテム変動）を先に記録
for(const msg of systemMessages) {
await updateStoryLog({ role: 'System', text: msg }, newStatus); // newStatusもここで更新
}
// GMナラティブを記録
await updateStoryLog({ role: gmName, text: cleanText }, newStatus);
} else {
await updateStoryLog({ role: 'System', text: 'AI-GM（GM介入）からの応答を取得できませんでした。' });
}
} catch (error) {
console.error("GM介入応答生成エラー:", error);
await updateStoryLog({ role: 'System', text: `GM介入中に致命的なエラーが発生しました: ${error.message}` });
} finally {
showLoading(false);
}
}
/**
* Gemini APIを呼び出す共通関数 (Exponential Backoffを含む)
*/
async function callGeminiAPI(systemPrompt, userQuery) {
const maxRetries = 5;
// APIキーの動的な処理（Canvas環境で自動挿入されることを期待）
const url = `${API_URL}?key=${API_KEY}`;
const payload = {
contents: [{ parts: [{ text: userQuery }] }],
systemInstruction: { parts: [{ text: systemPrompt }] },
};
for (let i = 0; i < maxRetries; i++) {
try {
const response = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!response.ok) {
if (response.status === 429 && i < maxRetries - 1) {
const delay = Math.pow(2, i) * 1000 + Math.random() * 1000;
await new Promise(resolve => setTimeout(resolve, delay));
continue;
}
throw new Error(`APIエラー: ${response.status} ${response.statusText}`);
}
const result = await response.json();
const text = result.candidates?.[0]?.content?.parts?.[0]?.text;
if (text) {
return text;
} else {
throw new Error("API応答が空です。");
}
} catch (error) {
// console.error("Gemini API 呼び出し中にエラーが発生しました:", error); // ログは非表示
if (i === maxRetries - 1) {
return null;
}
}
}
return null;
}
// --- 全体のイベントリスナー設定 ---
playerViewBtn.onclick = () => { switchView('player'); };
masterViewBtn.onclick = () => { switchView('master'); };
// 起動時に認証とリスナー設定が走る
</script>
</body>
</html>
