タグ: programming

アンリアルエンジン6の新機能

大きな新要素はこのあたりです。

  • Verseが本格的なゲームプログラミング言語になる
    • UE6ではゲームプレイのプログラミングモデルをVerseへ移行。
    • PythonやC#に近い感覚を意識した言語です。
    • C++とも連携します。
    • 将来的には巨大なオンラインゲームを複数サーバーへ自動分散する構想まであります。
  • Scene Graphという新しいゲームプレイフレームワーク
    • Verseベースでゼロから設計。
    • オブジェクトやゲーム機能を「再利用できるコンポーネント」として扱いやすくする方向。
    • EpicはこれをUE6の新しいゲーム制作基盤にしようとしています。
  • UE5とUEFNが統合される
    • これがかなり大きいです。
    • UE5のAAAゲーム制作能力＋Fortnite/UEFNで培ったライブゲーム開発環境を、1つのUnreal Engine 6にまとめます。
    • 普通のPC/PS5/Xbox向けゲームとして出すことも、Fortnite向けに出すことも、自前のオンライン環境に出すことも想定されています。
  • AI開発支援がエンジン側に入る
    • MCP（Model Context Protocol）対応。
    • EpicはClaude、Geminiなどとの統合を明言しています。
    • コード生成だけではなく、制作パイプラインそのものをAIで効率化する方向です。
    ここは今Codexをゲーム開発に使う感覚にかなり近い方向性ですね。将来的には「UEエディタ＋AIエージェント」が普通になる可能性があります。
  • ゲーム間でコンテンツやコードを持ち運べる方向へ
    • glTFやUSDなどのオープン標準を重視。
    • コンテンツ・コード・ゲーム内経済などを、ゲームやエンジンをまたいで相互運用できる仕組みを目指しています。

そして気になるBlueprintですが、ここはかなり重要です。

UE6初期版ではActorとBlueprintは残ります。

いきなりBlueprintが消えるわけではありません。ただしEpicは、Scene Graph＋Verseが十分成熟した段階で、Actor/Blueprintを最終的には非推奨にする計画を明言しています。その際は既存プロジェクトを新方式へ移す変換ツールも用意する方針です。

なので今Blueprintを勉強していることが無駄になるわけではありません。UE5プロジェクトについてもEpicはUE6へ「ハードな断絶を強制しない」方針です。

リリース予定

UE6 Early Access：2027年末予定

その後、

正式版：Early Accessから12〜18か月後

なので、順調なら正式版は2028年末〜2029年前半あたりになります。現在のUE5.8は「予定上最後のUE5メジャーリリース」で、必要なら5.9を出す可能性も残されています。

Epic公式「Unreal Engine 6への道」

ゲーム開発という観点では、UE5：Blueprint中心 → UE6：Verse＋Scene Graph＋AI支援中心という移行が一番大きそうです。特に一人開発ではAI統合の部分がかなり面白いところです。

文字数カウントサイト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字数カウント</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
      background: #f4f6f8;
      color: #222;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px;
    }

    .container {
      width: 100%;
      max-width: 900px;
      background: white;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    }

    h1 {
      margin-top: 0;
      text-align: center;
    }

    textarea {
      width: 100%;
      height: 350px;
      resize: vertical;
      padding: 18px;
      font-size: 16px;
      line-height: 1.7;
      border: 1px solid #ccc;
      border-radius: 10px;
      outline: none;
    }

    textarea:focus {
      border-color: #555;
    }

    .counts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-top: 20px;
    }

    .count-box {
      background: #f7f7f7;
      padding: 18px;
      border-radius: 10px;
      text-align: center;
    }

    .count-box strong {
      display: block;
      font-size: 28px;
      margin-top: 5px;
    }

    .buttons {
      margin-top: 20px;
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
    }

    button {
      border: none;
      padding: 12px 22px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 15px;
      background: #222;
      color: white;
    }

    button:hover {
      opacity: 0.8;
    }
  </style>
</head>

<body>

<div class="container">

  <h1>文字数カウント</h1>

  <textarea
    id="text"
    placeholder="ここに文章を入力してください"
  ></textarea>

  <div class="counts">

    <div class="count-box">
      文字数
      <strong id="characterCount">0</strong>
    </div>

    <div class="count-box">
      空白を除く
      <strong id="noSpaceCount">0</strong>
    </div>

    <div class="count-box">
      行数
      <strong id="lineCount">0</strong>
    </div>

  </div>

  <div class="buttons">

    <button id="copyButton">
      コピー
    </button>

    <button id="clearButton">
      すべて削除
    </button>

  </div>

</div>

<script>

const textArea = document.getElementById("text");

const characterCount =
document.getElementById("characterCount");

const noSpaceCount =
document.getElementById("noSpaceCount");

const lineCount =
document.getElementById("lineCount");

const copyButton =
document.getElementById("copyButton");

const clearButton =
document.getElementById("clearButton");


function countText() {

  const text = textArea.value;

  // 全文字数
  characterCount.textContent = text.length;

  // 空白・改行を除いた文字数
  noSpaceCount.textContent =
    text.replace(/\s/g, "").length;

  // 行数
  if (text.length === 0) {

    lineCount.textContent = 0;

  } else {

    lineCount.textContent =
      text.split("\n").length;

  }

}


textArea.addEventListener(
  "input",
  countText
);


copyButton.addEventListener(
  "click",
  async () => {

    await navigator.clipboard.writeText(
      textArea.value
    );

    copyButton.textContent =
      "コピーしました";

    setTimeout(() => {

      copyButton.textContent =
        "コピー";

    }, 1500);

  }
);


clearButton.addEventListener(
  "click",
  () => {

    textArea.value = "";

    countText();

    textArea.focus();

  }
);


</script>

</body>
</html>

star_breaker_stg_stage5_power_barrage.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>STAR BREAKER - 5 STAGE STG</title>
<style>
:root{--cyan:#55efff;--pink:#ff4fd8;--yellow:#ffe66d;--bg:#02040e}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02040e;color:#fff;font-family:system-ui,-apple-system,"Yu Gothic UI",sans-serif}
body{display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#17265e,#050817 50%,#010208)}
#wrap{position:relative;width:min(100vw,900px);height:min(100vh,960px);aspect-ratio:3/4;overflow:hidden;border:1px solid #55efff55;box-shadow:0 0 36px #55efff22;background:#02040e}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#hud{position:absolute;inset:0;pointer-events:none;font-weight:900;text-shadow:0 0 8px #55efff}
.top{position:absolute;top:12px;left:16px;right:16px;display:flex;justify-content:space-between;gap:12px;font-size:clamp(12px,2vw,19px)}
#stageLabel{position:absolute;top:45px;left:0;right:0;text-align:center;color:#bff8ff;letter-spacing:.22em}
#bossWrap{display:none;position:absolute;top:73px;left:9%;width:82%}
#bossName{text-align:center;font-size:13px;margin-bottom:5px;color:#ffd4f5}
.bar{height:13px;border:1px solid #ffffffaa;background:#ffffff12}
#bossHp{height:100%;width:100%;background:linear-gradient(90deg,#ff4fd8,#ff9a3d)}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#02040e33,#02040ecc);z-index:5}
.panel{width:min(88%,650px);padding:clamp(22px,5vw,44px);text-align:center;background:#081027e8;border:1px solid #55efff88;box-shadow:0 0 28px #55efff33;backdrop-filter:blur(7px)}
h1{margin:0 0 10px;font-size:clamp(38px,8vw,76px);line-height:.9;color:#fff;text-shadow:0 0 9px #fff,0 0 22px #55efff,4px 4px 0 #ff4fd8}
.sub{color:#8deeff;letter-spacing:.25em;margin-bottom:22px;font-weight:800}
#message{line-height:1.8;color:#ddebff}
button{margin:20px 7px 0;padding:14px 28px;border:0;border-radius:999px;color:#fff;font-weight:900;font-size:17px;cursor:pointer;background:linear-gradient(90deg,#55efff,#7277ff,#ff4fd8);box-shadow:0 0 18px #55efff66}
button.secondary{background:#252c46;box-shadow:none;border:1px solid #ffffff44}
button:hover{filter:brightness(1.15);transform:scale(1.03)}
.small{margin-top:18px;padding-top:14px;border-top:1px solid #ffffff22;color:#b7c9dd;font-size:13px;line-height:1.7}
#mobile{position:absolute;left:0;right:0;bottom:12px;display:none;justify-content:space-between;padding:0 14px;pointer-events:none;z-index:4}
.group{display:flex;gap:8px;pointer-events:auto}.touch{width:58px;height:58px;margin:0;padding:0;border-radius:50%;opacity:.62;font-size:20px}
@media(pointer:coarse){#mobile{display:flex}}
</style>
</head>
<body>
<div id="wrap">
<canvas id="game" width="720" height="960"></canvas>

<div id="hud">
  <div class="top">
    <div>SCORE <span id="score">0000000</span></div>
    <div>HI <span id="high">0000000</span></div>
    <div>POWER <span id="power">1</span></div>
  </div>
  <div id="stageLabel">STAGE 1 / 5</div>
  <div id="bossWrap">
    <div id="bossName">BOSS</div>
    <div class="bar"><div id="bossHp"></div></div>
  </div>
</div>

<div id="overlay" class="overlay">
  <div class="panel">
    <h1 id="title">STAR<br>BREAKER</h1>
    <div class="sub" id="subtitle">5 STAGE MISSION</div>
    <div id="message">全5ステージを突破し、最終要塞を破壊せよ。<br>敵弾に一発でも当たると爆発してゲームオーバー。<br>POWERアイテムでショットを最大5段階まで強化。</div>
    <div id="buttons">
      <button id="startBtn">GAME START</button>
    </div>
    <div class="small">PC：WASD / 矢印キー / マウスドラッグで移動　｜　P：一時停止<br>スマホ：画面ドラッグ、または下の移動ボタン</div>
  </div>
</div>

<div id="mobile">
  <div class="group"><button class="touch" data-key="left">◀</button><button class="touch" data-key="right">▶</button></div>
  <div class="group"><button class="touch" data-key="up">▲</button><button class="touch" data-key="down">▼</button></div>
</div>
</div>

<script>
(()=>{
"use strict";
const canvas=document.getElementById("game"),ctx=canvas.getContext("2d");
const W=720,H=960;
const scoreEl=document.getElementById("score"),highEl=document.getElementById("high"),powerEl=document.getElementById("power");
const stageLabel=document.getElementById("stageLabel"),bossWrap=document.getElementById("bossWrap"),bossName=document.getElementById("bossName"),bossHp=document.getElementById("bossHp");
const overlay=document.getElementById("overlay"),title=document.getElementById("title"),subtitle=document.getElementById("subtitle"),message=document.getElementById("message"),buttons=document.getElementById("buttons");

let running=false,paused=false,dead=false,last=0,time=0,score=0,high=Number(localStorage.getItem("starBreaker5High")||0);
let stage=1,stageTime=0,waveTimer=0,wavesSpawned=0,bossActive=false,transition=false,shake=0,flash=0;
let pointer=false;
const keys={},bullets=[],enemyBullets=[],enemies=[],particles=[],powerups=[],stars=[];

const stageData=[
 {name:"ORBITAL FRONT",duration:23,boss:"IRON TALON",hp:260,bg:["#07112c","#02040e"]},
 {name:"CRIMSON NEBULA",duration:25,boss:"SCARLET MANTA",hp:380,bg:["#2b071c","#07030b"]},
 {name:"ASTEROID BELT",duration:27,boss:"GRAVITY GOLEM",hp:520,bg:["#241b10","#050403"]},
 {name:"VOID TEMPLE",duration:29,boss:"ABYSS SERAPH",hp:700,bg:["#16072a","#030109"]},
 {name:"FINAL FORTRESS",duration:32,boss:"OMEGA EMPRESS",hp:980,bg:["#051b26","#010408"]}
];

const player={x:W/2,y:H-120,r:11,speed:410,cool:0,rate:.12,power:1,maxPower:5,inv:0,tilt:0};
for(let i=0;i<150;i++)stars.push({x:Math.random()*W,y:Math.random()*H,z:Math.random()*2.5+.5,a:Math.random()*.8+.2});

function clearAll(){bullets.length=enemyBullets.length=enemies.length=particles.length=powerups.length=0}
function updateHUD(){
 scoreEl.textContent=String(Math.floor(score)).padStart(7,"0");
 highEl.textContent=String(Math.floor(high)).padStart(7,"0");
 powerEl.textContent=player.power>=player.maxPower?"MAX":player.power;
 stageLabel.textContent=`STAGE ${stage} / 5　${stageData[stage-1].name}`;
}
function reset(){
 clearAll();stage=1;stageTime=0;waveTimer=0;wavesSpawned=0;bossActive=false;transition=false;dead=false;paused=false;
 score=0;time=0;shake=0;flash=0;player.x=W/2;player.y=H-120;player.cool=0;player.power=1;player.inv=1;
 bossWrap.style.display="none";updateHUD();
}
function begin(){
 reset();running=true;overlay.style.display="none";last=performance.now();requestAnimationFrame(loop);
}
function addScore(n){
 score+=n;if(score>high){high=score;localStorage.setItem("starBreaker5High",String(Math.floor(high)))}updateHUD();
}
function burst(x,y,color,count=25,speed=260){
 for(let i=0;i<count;i++){const a=Math.random()*Math.PI*2,s=Math.random()*speed+40;
 particles.push({x,y,vx:Math.cos(a)*s,vy:Math.sin(a)*s,life:Math.random()*.7+.3,max:1,size:Math.random()*6+2,color});
 }}
function shoot(){
 let shots=[];
 if(player.power===1)shots=[{a:0,x:0,d:1}];
 if(player.power===2)shots=[{a:-.10,x:-7,d:1},{a:.10,x:7,d:1}];
 if(player.power===3)shots=[{a:-.18,x:-10,d:1},{a:0,x:0,d:2},{a:.18,x:10,d:1}];
 if(player.power===4)shots=[{a:-.25,x:-15,d:2},{a:-.08,x:-5,d:2},{a:.08,x:5,d:2},{a:.25,x:15,d:2}];
 if(player.power>=5)shots=[
   {a:-.31,x:-18,d:2},{a:-.16,x:-10,d:2},{a:0,x:0,d:3},
   {a:.16,x:10,d:2},{a:.31,x:18,d:2}
 ];
 shots.forEach(s=>bullets.push({
   x:player.x+s.x,y:player.y-20,
   vx:Math.sin(s.a)*230,vy:-820,
   r:s.d>=3?7:5,dmg:s.d,power:player.power
 }));
 player.rate=Math.max(.065,.13-player.power*.013);
}
function spawnEnemy(type,x,y){
 const s=stage;
 if(type==="scout")enemies.push({type,x,y,r:19,hp:1+s,maxHp:1+s,vx:(Math.random()-.5)*130,vy:105+s*11,age:0,shot:1.2+Math.random()});
 if(type==="zig")enemies.push({type,x,y,r:22,hp:3+s,maxHp:3+s,vx:0,vy:80+s*7,age:Math.random()*5,shot:.9+Math.random()});
 if(type==="tank")enemies.push({type,x,y,r:32,hp:11+s*4,maxHp:11+s*4,vx:0,vy:42+s*3,age:0,shot:.7});
}
function spawnWave(){
 wavesSpawned++;
 const pattern=(wavesSpawned+stage)%4;
 if(pattern===0){for(let i=0;i<7;i++)spawnEnemy("scout",75+i*95,-40-i*34)}
 if(pattern===1){for(let i=0;i<6;i++)spawnEnemy("zig",90+i*108,-45-i*70)}
 if(pattern===2){spawnEnemy("tank",W/2,-70);for(let i=0;i<4;i++)spawnEnemy("scout",120+i*160,-160-i*40)}
 if(pattern===3){for(let i=0;i<3;i++){spawnEnemy("zig",170+i*190,-60-i*80);spawnEnemy("scout",90+i*250,-190-i*50)}}
}
function spawnBoss(){
 bossActive=true;enemyBullets.length=0;
 const d=stageData[stage-1];
 enemies.push({type:"boss",x:W/2,y:-130,r:82,hp:d.hp,maxHp:d.hp,age:0,shot:.6,stage,vy:48});
 bossName.textContent=d.boss;bossHp.style.width="100%";bossWrap.style.display="block";
}
function addEnemyBullet(x,y,a,speed,r=7,color="#ff8ae7"){
 enemyBullets.push({x,y,vx:Math.cos(a)*speed,vy:Math.sin(a)*speed,r,color});
}
function enemyShoot(e){
 const aim=Math.atan2(player.y-e.y,player.x-e.x);
 const base=145+stage*18;

 if(e.type==="scout"){
   if(stage<=2){
     for(let i=-1;i<=1;i++)addEnemyBullet(e.x,e.y,aim+i*.12,base,6,"#ff8ae7");
   }else{
     for(let i=-2;i<=2;i++)addEnemyBullet(e.x,e.y,aim+i*.13,base+12,6,"#ff8ae7");
   }
 }

 if(e.type==="zig"){
   const count=5+stage;
   for(let i=0;i<count;i++){
     const a=(i/(count-1)-.5)*1.15+Math.PI/2;
     addEnemyBullet(e.x,e.y,a,145+stage*12,6,"#9d8cff");
   }
   addEnemyBullet(e.x,e.y,aim,210+stage*8,5,"#ffffff");
 }

 if(e.type==="tank"){
   const n=10+stage*2;
   for(let i=0;i<n;i++){
     const a=i*Math.PI*2/n+e.age*.32;
     addEnemyBullet(e.x,e.y,a,125+stage*10,7,"#ffb25f");
   }
   for(let i=-2;i<=2;i++)addEnemyBullet(e.x,e.y,aim+i*.15,190+stage*10,6,"#fff0a8");
 }

 if(e.type==="boss"){
   const ratio=e.hp/e.maxHp;

   if(e.stage===1){
     for(let ring=0;ring<2;ring++){
       for(let i=-5;i<=5;i++){
         const a=aim+i*.12+(ring?0.055:0);
         addEnemyBullet(e.x,e.y+35,a,195+ring*45,7,ring?"#ffd1f4":"#ff78d8");
       }
     }
   }

   if(e.stage===2){
     const n=22;
     for(let i=0;i<n;i++){
       const a=i*Math.PI*2/n+e.age*.62;
       addEnemyBullet(e.x,e.y,a,155+(i%2)*42,7,i%2?"#ff7ac8":"#a884ff");
     }
     for(let i=-2;i<=2;i++)addEnemyBullet(e.x,e.y+25,aim+i*.13,235,6,"#ffffff");
   }

   if(e.stage===3){
     for(let ring=0;ring<3;ring++){
       const n=12+ring*4;
       for(let i=0;i<n;i++){
         const a=i*Math.PI*2/n+e.age*(ring%2?-.42:.42);
         addEnemyBullet(e.x,e.y,a,115+ring*42,8-ring,"#ffb35f");
       }
     }
   }

   if(e.stage===4){
     for(let side=-1;side<=1;side+=2){
       for(let i=0;i<9;i++){
         const a=aim+side*(.08+i*.085)+Math.sin(e.age*1.8)*.18;
         addEnemyBullet(e.x+side*45,e.y+20,a,205+i*6,6,"#b477ff");
       }
     }
     if(ratio<.5){
       for(let i=0;i<18;i++){
         const a=i*Math.PI/9-e.age*.55;
         addEnemyBullet(e.x,e.y,a,175,7,"#ff70dd");
       }
     }
   }

   if(e.stage===5){
     const n=ratio>.6?28:38;
     for(let i=0;i<n;i++){
       const a=i*Math.PI*2/n+e.age*.78;
       addEnemyBullet(e.x,e.y,a,150+(i%4)*28,7,i%2?"#ff4fd8":"#65eaff");
     }
     for(let i=-5;i<=5;i++)addEnemyBullet(e.x,e.y+42,aim+i*.095,250,6,"#fff2a8");
     if(ratio<.45){
       for(let i=0;i<20;i++){
         const a=i*Math.PI/10-e.age*1.05;
         addEnemyBullet(e.x,e.y,a,225,5,"#ffffff");
       }
     }
   }
 }
}
function collide(a,b){const dx=a.x-b.x,dy=a.y-b.y;return dx*dx+dy*dy<(a.r+b.r)*(a.r+b.r)}
function gameOver(){
 if(dead)return;dead=true;running=false;shake=34;flash=.75;
 burst(player.x,player.y,"#ff4fd8",120,430);burst(player.x,player.y,"#ffe66d",80,360);
 draw();
 setTimeout(()=>{
  title.innerHTML="GAME<br>OVER";subtitle.textContent="SHIP DESTROYED";
  message.innerHTML=`敵弾に命中し、機体が爆発した。<br>SCORE：<b>${Math.floor(score).toLocaleString()}</b>　STAGE：<b>${stage}</b>`;
  buttons.innerHTML='<button id="retryBtn">リトライ</button><button id="quitBtn" class="secondary">やめる</button>';
  overlay.style.display="grid";
  document.getElementById("retryBtn").addEventListener("click",begin);
  document.getElementById("quitBtn").addEventListener("click",quitGame);
 },650);
}
function quitGame(){
 clearAll();dead=false;bossWrap.style.display="none";
 title.innerHTML="STAR<br>BREAKER";subtitle.textContent="MISSION ABORTED";
 message.innerHTML="ゲームを終了しました。<br>もう一度遊ぶときはスタートを押してください。";
 buttons.innerHTML='<button id="againBtn">GAME START</button>';
 document.getElementById("againBtn").addEventListener("click",begin);
 draw();
}
function stageClear(){
 transition=true;bossActive=false;bossWrap.style.display="none";enemyBullets.length=0;clearAll();
 addScore(2500*stage);
 if(stage===5){running=false;title.innerHTML="ALL<br>CLEAR";subtitle.textContent="OMEGA FORTRESS DESTROYED";
  message.innerHTML=`全5ステージ制覇！<br>FINAL SCORE：<b>${Math.floor(score).toLocaleString()}</b>`;
  buttons.innerHTML='<button id="retryAll">もう一度遊ぶ</button><button id="quitAll" class="secondary">やめる</button>';
  overlay.style.display="grid";
  document.getElementById("retryAll").addEventListener("click",begin);
  document.getElementById("quitAll").addEventListener("click",quitGame);
  return;
 }
 running=false;title.innerHTML=`STAGE ${stage}<br>CLEAR`;subtitle.textContent=stageData[stage-1].boss+" DESTROYED";
 message.innerHTML=`次は STAGE ${stage+1}「${stageData[stage].name}」`;
 buttons.innerHTML='<button id="nextStage">NEXT STAGE</button>';
 overlay.style.display="grid";
 document.getElementById("nextStage").addEventListener("click",()=>{
   stage++;stageTime=0;waveTimer=0;wavesSpawned=0;transition=false;player.x=W/2;player.y=H-120;player.inv=1.5;
   updateHUD();overlay.style.display="none";running=true;last=performance.now();requestAnimationFrame(loop);
 });
}
function update(dt){
 time+=dt;stageTime+=dt;if(player.inv>0)player.inv-=dt;if(shake>0)shake=Math.max(0,shake-dt*55);if(flash>0)flash=Math.max(0,flash-dt*1.7);
 stars.forEach(s=>{s.y+=(55+s.z*65+stage*8)*dt;if(s.y>H){s.y=-5;s.x=Math.random()*W}});
 let dx=0,dy=0;if(keys.ArrowLeft||keys.a||keys.left)dx--;if(keys.ArrowRight||keys.d||keys.right)dx++;if(keys.ArrowUp||keys.w||keys.up)dy--;if(keys.ArrowDown||keys.s||keys.down)dy++;
 const l=Math.hypot(dx,dy)||1;dx/=l;dy/=l;player.x+=dx*player.speed*dt;player.y+=dy*player.speed*dt;player.x=Math.max(25,Math.min(W-25,player.x));player.y=Math.max(95,Math.min(H-35,player.y));player.tilt+=(dx*.45-player.tilt)*Math.min(1,dt*10);
 player.cool-=dt;if(player.cool<=0){shoot();player.cool=player.rate}
 if(!bossActive){
   waveTimer-=dt;if(waveTimer<=0){spawnWave();waveTimer=Math.max(2.5,4.6-stage*.28)}
   if(stageTime>=stageData[stage-1].duration)spawnBoss();
 }
 for(let i=bullets.length-1;i>=0;i--){const b=bullets[i];b.x+=b.vx*dt;b.y+=b.vy*dt;if(b.y<-30||b.x<-30||b.x>W+30)bullets.splice(i,1)}
 for(let i=enemyBullets.length-1;i>=0;i--){const b=enemyBullets[i];b.x+=b.vx*dt;b.y+=b.vy*dt;if(b.y>H+50||b.y<-60||b.x<-60||b.x>W+60){enemyBullets.splice(i,1);continue}if(player.inv<=0&&collide(b,player)){enemyBullets.splice(i,1);gameOver();return}}
 for(let i=enemies.length-1;i>=0;i--){const e=enemies[i];e.age+=dt;
   if(e.type==="scout"){e.x+=e.vx*dt;e.y+=e.vy*dt;if(e.x<30||e.x>W-30)e.vx*=-1}
   if(e.type==="zig"){e.y+=e.vy*dt;e.x+=Math.sin(e.age*2.5)*125*dt}
   if(e.type==="tank"){e.y+=e.vy*dt;e.x=W/2+Math.sin(e.age*.85)*220}
   if(e.type==="boss"){if(e.y<165)e.y+=e.vy*dt;else e.x=W/2+Math.sin(e.age*(.55+e.stage*.06))*245;bossHp.style.width=Math.max(0,e.hp/e.maxHp*100)+"%"}
   e.shot-=dt;if(e.shot<=0&&e.y>0){enemyShoot(e);e.shot=e.type==="boss"?Math.max(.22,.62-stage*.065):e.type==="tank"?1.08:e.type==="zig"?.92:1.12}
   for(let j=bullets.length-1;j>=0;j--){const b=bullets[j];if(collide(b,e)){e.hp-=b.dmg;bullets.splice(j,1);burst(b.x,b.y,"#ffe66d",4,80);
     if(e.hp<=0){const boss=e.type==="boss";burst(e.x,e.y,boss?"#ff4fd8":"#55efff",boss?130:28,boss?430:230);shake=boss?30:7;
       addScore(boss?5000*stage:e.type==="tank"?550:e.type==="zig"?220:100);
       if(!boss){
         const dropRate=e.type==="tank"?.60:e.type==="zig"?.32:.20;
         if(Math.random()<dropRate)powerups.push({x:e.x,y:e.y,r:15,vy:82,spin:0});
       }
       enemies.splice(i,1);if(boss){enemyBullets.length=0;setTimeout(stageClear,550)}break;
     }}}
   if(i<enemies.length&&e.y>H+100)enemies.splice(i,1);
   else if(i<enemies.length&&player.inv<=0&&collide(e,player)){gameOver();return}
 }
 for(let i=powerups.length-1;i>=0;i--){const p=powerups[i];p.y+=p.vy*dt;p.spin+=dt*4;if(collide(p,player)){player.power=Math.min(player.maxPower,player.power+1);addScore(player.power>=player.maxPower?800:400);burst(p.x,p.y,"#ffe66d",20,190);powerups.splice(i,1);updateHUD()}else if(p.y>H+30)powerups.splice(i,1)}
 for(let i=particles.length-1;i>=0;i--){const p=particles[i];p.x+=p.vx*dt;p.y+=p.vy*dt;p.vx*=.984;p.vy*=.984;p.life-=dt;if(p.life<=0)particles.splice(i,1)}
}
function drawShip(){
 ctx.save();ctx.translate(player.x,player.y);ctx.rotate(player.tilt);if(player.inv>0&&Math.floor(player.inv*13)%2===0)ctx.globalAlpha=.3;
 ctx.shadowBlur=22;ctx.shadowColor="#55efff";ctx.fillStyle="#e9fdff";ctx.beginPath();ctx.moveTo(0,-27);ctx.lineTo(18,19);ctx.lineTo(0,10);ctx.lineTo(-18,19);ctx.closePath();ctx.fill();
 ctx.fillStyle="#ff4fd8";ctx.beginPath();ctx.moveTo(0,-13);ctx.lineTo(7,11);ctx.lineTo(-7,11);ctx.closePath();ctx.fill();
 ctx.shadowColor="#ff9a3d";ctx.fillStyle="#fff";ctx.beginPath();ctx.moveTo(-7,15);ctx.lineTo(0,35+Math.random()*9);ctx.lineTo(7,15);ctx.closePath();ctx.fill();ctx.restore();
}
function drawEnemy(e){
 ctx.save();ctx.translate(e.x,e.y);
 if(e.type==="boss"){ctx.rotate(Math.sin(e.age*.8)*.07);ctx.shadowBlur=28;ctx.shadowColor="#ff4fd8";ctx.fillStyle=`hsl(${305-e.stage*18} 65% 22%)`;ctx.beginPath();ctx.moveTo(0,-72);ctx.lineTo(96,-18);ctx.lineTo(65,60);ctx.lineTo(0,36);ctx.lineTo(-65,60);ctx.lineTo(-96,-18);ctx.closePath();ctx.fill();ctx.strokeStyle="#ff76df";ctx.lineWidth=5;ctx.stroke();ctx.fillStyle="#fff";ctx.beginPath();ctx.arc(0,-4,25,0,Math.PI*2);ctx.fill();ctx.fillStyle="#ff4fd8";ctx.beginPath();ctx.arc(0,-4,11,0,Math.PI*2);ctx.fill()}
 else{const c=e.type==="tank"?"#ff9a3d":e.type==="zig"?"#a873ff":"#55efff";ctx.shadowBlur=16;ctx.shadowColor=c;ctx.fillStyle=c;if(e.type==="tank"){ctx.beginPath();ctx.roundRect(-29,-24,58,48,12);ctx.fill();ctx.fillStyle="#fff";ctx.fillRect(-8,-31,16,24)}else{ctx.rotate(Math.PI);ctx.beginPath();ctx.moveTo(0,-24);ctx.lineTo(22,18);ctx.lineTo(0,8);ctx.lineTo(-22,18);ctx.closePath();ctx.fill();ctx.fillStyle="#fff";ctx.beginPath();ctx.arc(0,2,6,0,Math.PI*2);ctx.fill()}}
 ctx.restore();
}
function draw(){
 const bg=stageData[Math.max(0,stage-1)].bg,g=ctx.createLinearGradient(0,0,0,H);g.addColorStop(0,bg[0]);g.addColorStop(1,bg[1]);ctx.fillStyle=g;ctx.fillRect(0,0,W,H);
 ctx.save();if(shake>0)ctx.translate((Math.random()-.5)*shake,(Math.random()-.5)*shake);
 stars.forEach(s=>{ctx.globalAlpha=s.a;ctx.fillStyle="#fff";ctx.fillRect(s.x,s.y,s.z,s.z*3)});ctx.globalAlpha=1;
 for(const b of bullets){ctx.shadowBlur=15;ctx.shadowColor="#55efff";ctx.fillStyle="#efffff";ctx.fillRect(b.x-3,b.y-13,6,24)}ctx.shadowBlur=0;
 for(const b of enemyBullets){ctx.shadowBlur=14;ctx.shadowColor=b.color||"#ff4fd8";ctx.fillStyle=b.color||"#ff8ae7";ctx.beginPath();ctx.arc(b.x,b.y,b.r,0,Math.PI*2);ctx.fill()}ctx.shadowBlur=0;
 enemies.forEach(drawEnemy);
 powerups.forEach(p=>{ctx.save();ctx.translate(p.x,p.y);ctx.rotate(p.spin);ctx.shadowBlur=18;ctx.shadowColor="#ffe66d";ctx.fillStyle="#ffe66d";ctx.beginPath();for(let i=0;i<8;i++){const a=i*Math.PI/4,r=i%2?7:15;ctx.lineTo(Math.cos(a)*r,Math.sin(a)*r)}ctx.closePath();ctx.fill();ctx.restore()});
 particles.forEach(p=>{ctx.globalAlpha=Math.max(0,p.life/p.max);ctx.fillStyle=p.color;ctx.fillRect(p.x,p.y,p.size,p.size)});ctx.globalAlpha=1;
 if(!dead)drawShip();
 if(paused){ctx.fillStyle="#0009";ctx.fillRect(0,0,W,H);ctx.fillStyle="#fff";ctx.textAlign="center";ctx.font="bold 54px system-ui";ctx.fillText("PAUSE",W/2,H/2)}
 if(flash>0){ctx.globalAlpha=flash;ctx.fillStyle="#fff";ctx.fillRect(0,0,W,H);ctx.globalAlpha=1}
 ctx.restore();
}
function loop(now){if(!running)return;const dt=Math.min(.033,(now-last)/1000);last=now;if(!paused)update(dt);draw();if(running)requestAnimationFrame(loop)}
function setPointer(e){const r=canvas.getBoundingClientRect();player.x=(e.clientX-r.left)/r.width*W;player.y=(e.clientY-r.top)/r.height*H}
addEventListener("keydown",e=>{keys[e.key]=true;keys[e.key.toLowerCase()]=true;if(e.key.toLowerCase()==="p"&&running)paused=!paused;if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(e.key))e.preventDefault()});
addEventListener("keyup",e=>{keys[e.key]=false;keys[e.key.toLowerCase()]=false});
canvas.addEventListener("pointerdown",e=>{pointer=true;setPointer(e)});canvas.addEventListener("pointermove",e=>{if(pointer)setPointer(e)});addEventListener("pointerup",()=>pointer=false);
document.querySelectorAll(".touch").forEach(b=>{const k=b.dataset.key;b.addEventListener("pointerdown",e=>{e.preventDefault();keys[k]=true});b.addEventListener("pointerup",()=>keys[k]=false);b.addEventListener("pointercancel",()=>keys[k]=false)});
document.getElementById("startBtn").addEventListener("click",begin);
highEl.textContent=String(high).padStart(7,"0");updateHUD();draw();
})();
</script>
</body>
</html>

クローラー型検索エンジン

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Crawlio Search</title>
    <style>
      :root {
        color-scheme: light;
        --text: #202124;
        --muted: #5f6368;
        --line: #dadce0;
        --blue: #4285f4;
        --red: #ea4335;
        --yellow: #fbbc04;
        --green: #34a853;
        --shadow: 0 18px 40px rgba(60, 64, 67, 0.15);
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        color: var(--text);
        font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
        background:
          radial-gradient(circle at top left, rgba(66, 133, 244, 0.12), transparent 32rem),
          linear-gradient(180deg, #fff 0%, #f7f9fc 68%, #eef3fa 100%);
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 64px;
        padding: 0 28px;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #3c4043;
        font-size: 15px;
        font-weight: 700;
      }

      .brand-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .nav {
        display: flex;
        gap: 22px;
        color: #3c4043;
        font-size: 14px;
      }

      .nav a:hover {
        text-decoration: underline;
      }

      main {
        width: min(1120px, calc(100% - 32px));
        margin: 0 auto;
      }

      .search-shell {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 430px;
        padding: 38px 0 46px;
        overflow: hidden;
      }

      .crawler-visual {
        position: absolute;
        inset: 12px 0 auto;
        height: 320px;
        pointer-events: none;
        opacity: 0.92;
      }

      .orbit {
        position: absolute;
        left: 50%;
        top: 50%;
        border: 1px solid rgba(95, 99, 104, 0.18);
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }

      .orbit-a {
        width: min(640px, 86vw);
        height: 210px;
      }

      .orbit-b {
        width: min(440px, 68vw);
        height: 145px;
        transform: translate(-50%, -50%) rotate(-12deg);
      }

      .node {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        box-shadow: 0 0 0 8px rgba(66, 133, 244, 0.08);
      }

      .node-a {
        left: calc(50% - 302px);
        top: 120px;
        background: var(--blue);
      }

      .node-b {
        left: calc(50% + 250px);
        top: 88px;
        background: var(--green);
      }

      .node-c {
        left: calc(50% + 72px);
        top: 216px;
        background: var(--red);
      }

      .scan-line {
        position: absolute;
        left: 50%;
        top: 64px;
        width: 3px;
        height: 220px;
        background: linear-gradient(180deg, transparent, rgba(66, 133, 244, 0.72), transparent);
        animation: scan 3.4s ease-in-out infinite;
      }

      .wordmark {
        position: relative;
        z-index: 1;
        margin: 52px 0 25px;
        font-size: clamp(68px, 12vw, 112px);
        font-weight: 700;
        line-height: 0.95;
      }

      .blue { color: var(--blue); }
      .red { color: var(--red); }
      .yellow { color: var(--yellow); }
      .green { color: var(--green); }

      .search-form {
        position: relative;
        z-index: 1;
        width: min(640px, 100%);
      }

      .search-box {
        display: grid;
        grid-template-columns: 24px 1fr 42px;
        align-items: center;
        min-height: 58px;
        padding: 0 8px 0 21px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 32px;
        box-shadow: 0 2px 8px rgba(60, 64, 67, 0.08);
        transition: box-shadow 160ms ease, border-color 160ms ease;
      }

      .search-box:focus-within,
      .search-box:hover {
        border-color: transparent;
        box-shadow: var(--shadow);
      }

      .search-box svg,
      .icon-button svg {
        width: 22px;
        height: 22px;
        fill: #5f6368;
      }

      input {
        width: 100%;
        border: 0;
        outline: 0;
        padding: 0 14px;
        color: var(--text);
        font-size: 17px;
        background: transparent;
      }

      .icon-button {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
      }

      .icon-button:hover {
        background: #f1f3f4;
      }

      .actions {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 24px;
      }

      .actions button {
        min-width: 112px;
        min-height: 38px;
        border: 1px solid #f8f9fa;
        border-radius: 4px;
        padding: 0 18px;
        color: #3c4043;
        background: #f8f9fa;
        font-size: 14px;
        cursor: pointer;
      }

      .actions button:hover {
        border-color: #dadce0;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
      }

      .results-area {
        display: none;
        max-width: 760px;
        margin: 0 auto 46px;
      }

      .results-area.visible {
        display: block;
      }

      .result-meta {
        margin-bottom: 18px;
        color: var(--muted);
        font-size: 14px;
      }

      .result {
        padding: 18px 0;
        border-top: 1px solid #edf0f2;
      }

      .result-url {
        color: #3c4043;
        font-size: 13px;
      }

      .result h3 {
        margin: 4px 0 6px;
        color: #1a0dab;
        font-size: 21px;
        font-weight: 400;
      }

      .result p {
        margin: 0;
        color: #4d5156;
        font-size: 14px;
        line-height: 1.55;
      }

      .crawler-panel {
        margin: 12px 0 28px;
        padding: 24px;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(218, 220, 224, 0.9);
        border-radius: 8px;
        box-shadow: 0 12px 32px rgba(60, 64, 67, 0.08);
        backdrop-filter: blur(10px);
      }

      .panel-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 18px;
      }

      .eyebrow {
        margin: 0 0 4px;
        color: var(--blue);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      h2 {
        margin: 0;
        font-size: 24px;
      }

      .pulse {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #137333;
        font-size: 12px;
        font-weight: 700;
      }

      .pulse::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 0 8px rgba(52, 168, 83, 0.12);
      }

      .crawl-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .crawl-card {
        min-height: 122px;
        padding: 16px;
        border: 1px solid #e6eaee;
        border-radius: 8px;
        background: #fff;
      }

      .crawl-card strong {
        display: block;
        margin-bottom: 8px;
        font-size: 15px;
      }

      .crawl-card span {
        display: block;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }

      .crawl-progress {
        height: 5px;
        margin-top: 14px;
        overflow: hidden;
        border-radius: 999px;
        background: #edf0f2;
      }

      .crawl-progress i {
        display: block;
        height: 100%;
        width: var(--progress);
        border-radius: inherit;
        background: linear-gradient(90deg, var(--blue), var(--green));
      }

      .stats-band {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1px;
        overflow: hidden;
        margin-bottom: 44px;
        border: 1px solid #dfe4ea;
        border-radius: 8px;
        background: #dfe4ea;
      }

      .stats-band div {
        padding: 22px;
        background: #fff;
      }

      .stats-band strong,
      .stats-band span {
        display: block;
      }

      .stats-band strong {
        margin-bottom: 5px;
        font-size: 27px;
      }

      .stats-band span {
        color: var(--muted);
        font-size: 13px;
      }

      footer {
        display: flex;
        flex-wrap: wrap;
        gap: 22px;
        padding: 18px 28px;
        color: #70757a;
        background: #f2f2f2;
        font-size: 14px;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      @keyframes scan {
        0%, 100% {
          transform: translateX(-260px);
          opacity: 0.35;
        }
        50% {
          transform: translateX(260px);
          opacity: 1;
        }
      }

      @media (max-width: 760px) {
        .topbar {
          padding: 0 16px;
        }

        .nav {
          gap: 12px;
          font-size: 13px;
        }

        .search-shell {
          min-height: 390px;
        }

        .crawler-visual {
          height: 270px;
        }

        .node-a {
          left: 6%;
        }

        .node-b {
          left: 86%;
        }

        .node-c {
          left: 58%;
        }

        .actions {
          flex-wrap: wrap;
        }

        .crawl-grid,
        .stats-band {
          grid-template-columns: 1fr;
        }

        .panel-heading {
          align-items: start;
          flex-direction: column;
        }
      }
    </style>
  </head>
  <body>
    <header class="topbar">
      <a class="brand" href="#" aria-label="Crawlio Search">
        <span class="brand-dot blue"></span>
        <span class="brand-dot red"></span>
        <span class="brand-dot yellow"></span>
        <span class="brand-dot green"></span>
        <span>Crawlio</span>
      </a>
      <nav class="nav" aria-label="メイン">
        <a href="#crawler">Crawler</a>
        <a href="#index">Index</a>
        <a href="#status">Status</a>
      </nav>
    </header>

    <main>
      <section class="search-shell" aria-labelledby="hero-title">
        <div class="crawler-visual" aria-hidden="true">
          <div class="orbit orbit-a"></div>
          <div class="orbit orbit-b"></div>
          <div class="node node-a"></div>
          <div class="node node-b"></div>
          <div class="node node-c"></div>
          <div class="scan-line"></div>
        </div>
        <h1 id="hero-title" class="wordmark">
          <span class="blue">C</span><span class="red">r</span><span class="yellow">a</span><span class="blue">w</span><span class="green">l</span><span class="red">i</span><span class="blue">o</span>
        </h1>
        <form class="search-form" id="searchForm">
          <label class="sr-only" for="query">検索キーワード</label>
          <div class="search-box">
            <svg aria-hidden="true" viewBox="0 0 24 24">
              <path d="M10.8 18a7.2 7.2 0 1 1 5.1-12.3 7.2 7.2 0 0 1-5.1 12.3Zm0-2a5.2 5.2 0 1 0 0-10.4 5.2 5.2 0 0 0 0 10.4Zm6.3.1 4 4-1.4 1.4-4-4 1.4-1.4Z" />
            </svg>
            <input id="query" name="query" autocomplete="off" placeholder="URL、キーワード、サイト名を検索" />
            <button class="icon-button" type="button" id="voiceButton" aria-label="音声検索">
              <svg aria-hidden="true" viewBox="0 0 24 24">
                <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-3.1a7 7 0 0 0 6-6.9h-2Z" />
              </svg>
            </button>
          </div>
          <div class="actions">
            <button type="submit">検索</button>
            <button type="button" id="crawlButton">クローラーを走らせる</button>
          </div>
        </form>
      </section>

      <section class="results-area" aria-live="polite">
        <div class="result-meta" id="resultMeta">約 8,420,000 件中 0.38 秒</div>
        <div class="results" id="results"></div>
      </section>

      <section class="crawler-panel" id="crawler" aria-labelledby="crawler-title">
        <div class="panel-heading">
          <div>
            <p class="eyebrow">Live Crawl</p>
            <h2 id="crawler-title">巡回中のページ</h2>
          </div>
          <span class="pulse">ONLINE</span>
        </div>
        <div class="crawl-grid" id="crawlGrid"></div>
      </section>

      <section class="stats-band" id="index" aria-label="インデックス統計">
        <div>
          <strong>12.8B</strong>
          <span>Indexed pages</span>
        </div>
        <div>
          <strong>94ms</strong>
          <span>Median lookup</span>
        </div>
        <div>
          <strong>37K/s</strong>
          <span>Crawl rate</span>
        </div>
        <div>
          <strong>99.98%</strong>
          <span>Freshness</span>
        </div>
      </section>
    </main>

    <footer id="status">
      <span>Japan</span>
      <span>Privacy</span>
      <span>Terms</span>
      <span>Search Console</span>
    </footer>

    <script>
      const results = [
        {
          title: "Crawlio Search Console - サイトのクロール状況",
          url: "https://crawlio.example/search-console",
          text: "サイトマップ、robots.txt、インデックス登録、検索パフォーマンスをまとめて確認できます。"
        },
        {
          title: "高速インデックスの仕組み",
          url: "https://crawlio.example/docs/indexing",
          text: "分散クローラーがページを発見し、内容を解析して、新しい検索結果へ反映します。"
        },
        {
          title: "ニュース、画像、動画を横断検索",
          url: "https://crawlio.example/discover",
          text: "キーワードに関連するページ、メディア、トレンドをひとつの検索画面で素早く探せます。"
        },
        {
          title: "Web Crawler Health Report",
          url: "https://status.crawlio.example/crawler",
          text: "現在のクロール速度、エラー率、再訪問キュー、インデックス鮮度のライブ統計です。"
        }
      ];

      const crawlItems = [
        ["news.metro.jp/today", "HTML parsed / 32 links discovered", 78],
        ["shop.example.com/products", "Sitemap queued / canonical found", 64],
        ["docs.dev.local/api", "Robots allowed / snippets updated", 91],
        ["media.example.net/video", "Metadata extracted / thumbnail indexed", 56],
        ["blog.studio.jp/launch", "Fresh content detected / rank signals ready", 84],
        ["archive.city.jp/events", "Recrawl scheduled / duplicate checked", 43]
      ];

      const form = document.querySelector("#searchForm");
      const queryInput = document.querySelector("#query");
      const resultsArea = document.querySelector(".results-area");
      const resultMeta = document.querySelector("#resultMeta");
      const resultList = document.querySelector("#results");
      const crawlGrid = document.querySelector("#crawlGrid");
      const crawlButton = document.querySelector("#crawlButton");
      const voiceButton = document.querySelector("#voiceButton");

      function renderResults(query = "クローラー") {
        const filtered = results.map((item) => ({
          ...item,
          title: query ? `${item.title} | ${query}` : item.title
        }));

        resultMeta.textContent = `約 ${(8420000 + query.length * 17321).toLocaleString("ja-JP")} 件中 ${(0.21 + Math.random() * 0.28).toFixed(2)} 秒`;
        resultList.innerHTML = filtered
          .map(
            (item) => `
              <article class="result">
                <div class="result-url">${item.url}</div>
                <h3>${item.title}</h3>
                <p>${item.text}</p>
              </article>
            `
          )
          .join("");
        resultsArea.classList.add("visible");
      }

      function renderCrawlGrid(offset = 0) {
        crawlGrid.innerHTML = crawlItems
          .map(([url, status, progress], index) => {
            const shifted = Math.min(99, Math.max(24, progress + ((offset + index * 7) % 18) - 7));
            return `
              <article class="crawl-card">
                <strong>${url}</strong>
                <span>${status}</span>
                <div class="crawl-progress" aria-label="クロール進捗 ${shifted}%">
                  <i style="--progress: ${shifted}%"></i>
                </div>
              </article>
            `;
          })
          .join("");
      }

      form.addEventListener("submit", (event) => {
        event.preventDefault();
        renderResults(queryInput.value.trim() || "クローラー");
      });

      crawlButton.addEventListener("click", () => {
        renderCrawlGrid(Math.floor(Math.random() * 20));
        renderResults(queryInput.value.trim() || "live crawl");
        document.querySelector("#crawler").scrollIntoView({ behavior: "smooth", block: "start" });
      });

      voiceButton.addEventListener("click", () => {
        queryInput.value = "最新のインデックス状況";
        queryInput.focus();
      });

      renderCrawlGrid();
    </script>
  </body>
</html>

ネタ神AI Pro – アイデアメーカー

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ネタ神AI Pro - アイデアメーカー</title>

  <style>
    :root {
      --bg: #070914;
      --bg2: #111831;
      --card: rgba(255, 255, 255, 0.08);
      --card2: rgba(255, 255, 255, 0.13);
      --text: #f5f7ff;
      --muted: #aeb8df;
      --line: rgba(255, 255, 255, 0.16);
      --primary: #7c5cff;
      --cyan: #00d4ff;
      --green: #38ffad;
      --yellow: #ffd35c;
      --red: #ff5c7c;
      --shadow: 0 22px 55px rgba(0, 0, 0, 0.35);
      --radius: 22px;
    }

    body.light {
      --bg: #eef2ff;
      --bg2: #ffffff;
      --card: rgba(255, 255, 255, 0.8);
      --card2: rgba(255, 255, 255, 0.95);
      --text: #151829;
      --muted: #566179;
      --line: rgba(20, 30, 60, 0.14);
      --shadow: 0 18px 45px rgba(40, 60, 110, 0.16);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 10%, rgba(124, 92, 255, 0.32), transparent 28%),
        radial-gradient(circle at 90% 20%, rgba(0, 212, 255, 0.24), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(255, 92, 124, 0.15), transparent 32%),
        linear-gradient(135deg, var(--bg), var(--bg2));
      transition: 0.25s;
    }

    button,
    input,
    select,
    textarea {
      font-family: inherit;
    }

    button {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--card2);
      color: var(--text);
      padding: 11px 14px;
      font-weight: 800;
      cursor: pointer;
      transition: 0.2s;
      backdrop-filter: blur(12px);
    }

    button:hover {
      transform: translateY(-2px);
      filter: brightness(1.08);
    }

    .btn-main {
      border: none;
      background: linear-gradient(135deg, var(--primary), var(--cyan));
      color: white;
      box-shadow: 0 16px 35px rgba(0, 212, 255, 0.2);
    }

    .btn-green {
      border: none;
      background: linear-gradient(135deg, #13bf84, var(--green));
      color: #06120d;
    }

    .btn-red {
      border-color: rgba(255, 92, 124, 0.4);
      background: rgba(255, 92, 124, 0.14);
    }

    .app {
      width: min(1380px, 94%);
      margin: 0 auto;
      padding: 28px 0 70px;
    }

    header {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: center;
      margin-bottom: 22px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .logo {
      width: 58px;
      height: 58px;
      border-radius: 20px;
      background: linear-gradient(135deg, var(--primary), var(--cyan));
      display: grid;
      place-items: center;
      font-size: 30px;
      box-shadow: 0 20px 45px rgba(124, 92, 255, 0.35);
    }

    h1, h2, h3, h4, p {
      margin-top: 0;
    }

    .brand h1 {
      margin: 0;
      font-size: clamp(27px, 4vw, 46px);
      letter-spacing: 0.03em;
    }

    .brand p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .header-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .hero {
      border: 1px solid var(--line);
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
      padding: 26px;
      margin-bottom: 22px;
      overflow: hidden;
      position: relative;
    }

    .hero::after {
      content: "";
      position: absolute;
      width: 320px;
      height: 320px;
      right: -120px;
      bottom: -160px;
      border-radius: 50%;
      background: rgba(0, 212, 255, 0.13);
      filter: blur(8px);
    }

    .hero h2 {
      font-size: clamp(24px, 3vw, 40px);
      margin-bottom: 10px;
      line-height: 1.35;
    }

    .hero p {
      color: var(--muted);
      line-height: 1.8;
      max-width: 900px;
      margin-bottom: 0;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 22px;
    }

    .stat {
      border: 1px solid var(--line);
      background: var(--card);
      border-radius: 18px;
      padding: 16px;
      box-shadow: var(--shadow);
    }

    .stat strong {
      display: block;
      font-size: 24px;
      margin-bottom: 3px;
    }

    .stat span {
      color: var(--muted);
      font-size: 13px;
    }

    .layout {
      display: grid;
      grid-template-columns: 420px 1fr;
      gap: 22px;
      align-items: start;
    }

    .panel {
      border: 1px solid var(--line);
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
      overflow: hidden;
    }

    .panel-header {
      padding: 18px 20px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }

    .panel-header h3 {
      margin: 0;
      font-size: 19px;
    }

    .panel-body {
      padding: 20px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--green), var(--cyan));
      color: #06121c;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .form-group {
      margin-bottom: 16px;
    }

    label {
      display: block;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.22);
      color: var(--text);
      border-radius: 14px;
      padding: 12px 13px;
      outline: none;
      font-size: 15px;
      transition: 0.2s;
    }

    body.light input,
    body.light select,
    body.light textarea {
      background: rgba(255, 255, 255, 0.85);
    }

    select option {
      background: #10162a;
      color: white;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: rgba(0, 212, 255, 0.85);
      box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12);
    }

    textarea {
      min-height: 105px;
      resize: vertical;
      line-height: 1.7;
    }

    .two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .chip {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.08);
      color: var(--muted);
      border-radius: 999px;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: 0.2s;
    }

    .chip:hover {
      color: var(--text);
      border-color: rgba(0, 212, 255, 0.7);
      transform: translateY(-1px);
    }

    .button-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 16px;
    }

    .button-grid .wide-btn {
      grid-column: 1 / -1;
    }

    .result-tools {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .empty {
      text-align: center;
      padding: 70px 24px;
      color: var(--muted);
    }

    .empty .icon {
      font-size: 64px;
      margin-bottom: 12px;
    }

    .idea-list {
      display: grid;
      gap: 16px;
    }

    .idea-card {
      border: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.18);
      border-radius: 20px;
      overflow: hidden;
    }

    body.light .idea-card {
      background: rgba(255, 255, 255, 0.78);
    }

    .idea-top {
      padding: 20px;
      border-bottom: 1px solid var(--line);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 15px;
      align-items: start;
    }

    .idea-title {
      margin: 0;
      font-size: clamp(24px, 3vw, 36px);
      line-height: 1.25;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .pill {
      font-size: 12px;
      font-weight: 900;
      padding: 6px 9px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      background: rgba(255,255,255,0.07);
    }

    .score-box {
      width: 96px;
      text-align: center;
      padding: 12px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(124, 92, 255, 0.35), rgba(0, 212, 255, 0.24));
      border: 1px solid var(--line);
    }

    .score-box strong {
      display: block;
      font-size: 26px;
    }

    .score-box span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .catch {
      padding: 16px 20px;
      font-size: 17px;
      line-height: 1.7;
      background: rgba(255, 255, 255, 0.07);
      border-bottom: 1px solid var(--line);
    }

    .idea-body {
      padding: 20px;
    }

    .sections {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .section {
      border: 1px solid var(--line);
      border-radius: 17px;
      padding: 16px;
      background: rgba(0, 0, 0, 0.18);
    }

    body.light .section {
      background: rgba(255, 255, 255, 0.62);
    }

    .section.wide {
      grid-column: 1 / -1;
    }

    .section h4 {
      margin: 0 0 10px;
      font-size: 15px;
    }

    .section p,
    .section li {
      color: var(--muted);
      line-height: 1.75;
      font-size: 14px;
    }

    .section p {
      margin-bottom: 0;
    }

    .section ul,
    .section ol {
      margin: 0;
      padding-left: 22px;
    }

    .idea-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 20px 20px;
    }

    .history-controls {
      display: grid;
      grid-template-columns: 1fr 180px;
      gap: 10px;
      margin-bottom: 14px;
    }

    .history-list {
      display: grid;
      gap: 10px;
    }

    .history-item {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 13px;
      cursor: pointer;
      background: rgba(0, 0, 0, 0.15);
      transition: 0.2s;
    }

    body.light .history-item {
      background: rgba(255, 255, 255, 0.7);
    }

    .history-item:hover {
      transform: translateY(-2px);
      border-color: rgba(0, 212, 255, 0.6);
    }

    .history-item strong {
      display: block;
      margin-bottom: 5px;
    }

    .history-item small {
      color: var(--muted);
    }

    .toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      background: rgba(10, 15, 30, 0.94);
      color: white;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 16px;
      padding: 14px 18px;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
      transition: 0.25s;
      z-index: 100;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .footer {
      margin-top: 28px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
    }

    @media (max-width: 1050px) {
      header {
        flex-direction: column;
        align-items: flex-start;
      }

      .layout {
        grid-template-columns: 1fr;
      }

      .stats {
        grid-template-columns: repeat(2, 1fr);
      }

      .sections {
        grid-template-columns: 1fr;
      }

      .idea-top {
        grid-template-columns: 1fr;
      }

      .score-box {
        width: 100%;
      }
    }

    @media (max-width: 620px) {
      .two,
      .button-grid,
      .history-controls,
      .stats {
        grid-template-columns: 1fr;
      }

      .header-actions {
        width: 100%;
      }

      .header-actions button {
        flex: 1;
      }
    }
  </style>
</head>

<body>
  <div class="app">
    <header>
      <div class="brand">
        <div class="logo">💡</div>
        <div>
          <h1>ネタ神AI Pro</h1>
          <p>API不要。ブラウザだけで動く創作・Webサービス企画メーカー</p>
        </div>
      </div>

      <div class="header-actions">
        <button onclick="toggleTheme()">テーマ切替</button>
        <button onclick="downloadText()">TXT出力</button>
        <button onclick="downloadJSON()">JSON出力</button>
        <button class="btn-red" onclick="clearAll()">全削除</button>
      </div>
    </header>

    <section class="hero">
      <h2>APIなしでも、かなり使える「企画書生成ツール」にする。</h2>
      <p>
        外部AIに接続せず、ローカルのテンプレート・ランダム生成・条件分岐だけで、Webサービス、AIツール、ゲーム、小説、SNSなどの企画案を作ります。
        API料金もキー管理も不要です。まず作品として公開しやすい形です。
      </p>
    </section>

    <section class="stats">
      <div class="stat">
        <strong id="statIdeas">0</strong>
        <span>今回生成した案</span>
      </div>
      <div class="stat">
        <strong id="statSaved">0</strong>
        <span>保存済みアイデア</span>
      </div>
      <div class="stat">
        <strong>0円</strong>
        <span>API利用料</span>
      </div>
      <div class="stat">
        <strong>100%</strong>
        <span>ローカル動作</span>
      </div>
    </section>

    <main class="layout">
      <section class="panel">
        <div class="panel-header">
          <h3>生成条件</h3>
          <span class="badge">NO API</span>
        </div>

        <div class="panel-body">
          <div class="two">
            <div class="form-group">
              <label for="genre">ジャンル</label>
              <select id="genre">
                <option>Webサービス</option>
                <option>AIツール</option>
                <option>ゲーム</option>
                <option>小説</option>
                <option>SNS</option>
                <option>動画サイト</option>
                <option>ポートフォリオ</option>
                <option>便利ツール</option>
                <option>学習サービス</option>
                <option>創作支援</option>
              </select>
            </div>

            <div class="form-group">
              <label for="mood">雰囲気</label>
              <select id="mood">
                <option>かっこいい</option>
                <option>やさしい</option>
                <option>近未来</option>
                <option>ファンタジー</option>
                <option>シンプル</option>
                <option>高級感</option>
                <option>かわいい</option>
                <option>ダーク</option>
                <option>実用的</option>
                <option>ゲーム風</option>
              </select>
            </div>
          </div>

          <div class="two">
            <div class="form-group">
              <label for="level">開発難易度</label>
              <select id="level">
                <option>簡単</option>
                <option>普通</option>
                <option>本格</option>
                <option>超本格</option>
              </select>
            </div>

            <div class="form-group">
              <label for="target">ターゲット</label>
              <select id="target">
                <option>個人クリエイター</option>
                <option>学生</option>
                <option>社会人</option>
                <option>在宅ワーカー</option>
                <option>ゲーム制作者</option>
                <option>小説家志望</option>
                <option>配信者</option>
                <option>初心者</option>
                <option>副業したい人</option>
              </select>
            </div>
          </div>

          <div class="two">
            <div class="form-group">
              <label for="amount">生成数</label>
              <select id="amount">
                <option value="1">1個</option>
                <option value="3" selected>3個</option>
                <option value="5">5個</option>
              </select>
            </div>

            <div class="form-group">
              <label for="style">出力スタイル</label>
              <select id="style">
                <option>企画書風</option>
                <option>サービス紹介風</option>
                <option>開発メモ風</option>
                <option>ピッチ資料風</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="keywords">キーワード</label>
            <textarea id="keywords" placeholder="例：AI / RPG / SNS / メモ / 仕事 / 創作 / ポートフォリオ"></textarea>

            <div class="chips">
              <span class="chip" onclick="addKeyword('AI')">AI</span>
              <span class="chip" onclick="addKeyword('RPG')">RPG</span>
              <span class="chip" onclick="addKeyword('SNS')">SNS</span>
              <span class="chip" onclick="addKeyword('小説')">小説</span>
              <span class="chip" onclick="addKeyword('仕事')">仕事</span>
              <span class="chip" onclick="addKeyword('メモ')">メモ</span>
              <span class="chip" onclick="addKeyword('ポートフォリオ')">ポートフォリオ</span>
              <span class="chip" onclick="addKeyword('動画')">動画</span>
              <span class="chip" onclick="addKeyword('学習')">学習</span>
              <span class="chip" onclick="addKeyword('ゲーム開発')">ゲーム開発</span>
            </div>
          </div>

          <div class="form-group">
            <label for="problem">解決したい悩み</label>
            <textarea id="problem" placeholder="例：何を作ればいいかわからない。作業が続かない。アイデアを整理できない。"></textarea>
          </div>

          <div class="button-grid">
            <button class="btn-main wide-btn" onclick="generateIdeas()">アイデア生成</button>
            <button onclick="randomSet()">ランダム条件</button>
            <button onclick="makePractical()">現実的にする</button>
            <button onclick="makeFantasy()">派手にする</button>
            <button onclick="clearForm()">入力クリア</button>
          </div>
        </div>
      </section>

      <section class="panel">
        <div class="panel-header">
          <h3>生成結果</h3>
          <div class="result-tools">
            <button onclick="copyAll()">コピー</button>
            <button class="btn-green" onclick="saveAll()">全部保存</button>
          </div>
        </div>

        <div class="panel-body">
          <div id="result">
            <div class="empty">
              <div class="icon">🧠</div>
              <h2>まだアイデアはありません</h2>
              <p>左の条件を入れて「アイデア生成」を押してください。</p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <section class="panel" style="margin-top:22px;">
      <div class="panel-header">
        <h3>保存したアイデア</h3>
        <span class="badge" id="savedCount">0件</span>
      </div>

      <div class="panel-body">
        <div class="history-controls">
          <input id="historySearch" placeholder="保存アイデアを検索" oninput="renderHistory()" />
          <select id="historyGenre" onchange="renderHistory()">
            <option value="all">全ジャンル</option>
            <option>Webサービス</option>
            <option>AIツール</option>
            <option>ゲーム</option>
            <option>小説</option>
            <option>SNS</option>
            <option>動画サイト</option>
            <option>ポートフォリオ</option>
            <option>便利ツール</option>
            <option>学習サービス</option>
            <option>創作支援</option>
          </select>
        </div>

        <div class="history-list" id="historyList"></div>
      </div>
    </section>

    <div class="footer">
      ネタ神AI Pro / APIなしローカル版 / HTML・CSS・JavaScriptのみ
    </div>
  </div>

  <div class="toast" id="toast">完了しました</div>

  <script>
    const DATA = {
      titleHeads: [
        "Nova", "Idea", "Neta", "Mira", "Chrono", "Elder", "Prompt", "Vision",
        "Craft", "Yume", "Neo", "Astra", "Luna", "Meta", "Spark", "Quest"
      ],

      titleTails: {
        "Webサービス": ["Hub", "Works", "Base", "Cloud", "Studio", "Panel", "Link", "Board"],
        "AIツール": ["AI", "Brain", "Agent", "Prompt", "Copilot", "Mind", "Assist", "Genius"],
        "ゲーム": ["Quest", "Chronicle", "Saga", "Blade", "Dungeon", "Legend", "Arc", "World"],
        "小説": ["Novel", "Story", "Tale", "Script", "Lore", "Ink", "Scene", "Dream"],
        "SNS": ["Verse", "Circle", "Post", "Talk", "Room", "Link", "Wave", "Nest"],
        "動画サイト": ["Tube", "Stream", "Clip", "Vision", "Cast", "Channel", "View", "Media"],
        "ポートフォリオ": ["Portfolio", "Gallery", "Works", "Profile", "Card", "Showcase", "Archive", "Page"],
        "便利ツール": ["Tool", "Memo", "Desk", "Kit", "Task", "Quick", "Utility", "Simple"],
        "学習サービス": ["Learn", "Study", "Lesson", "Skill", "Academy", "Trainer", "Coach", "Note"],
        "創作支援": ["Create", "Maker", "Muse", "Seed", "Craft", "Atelier", "Generator", "Factory"]
      },

      moodDesc: {
        "かっこいい": "鋭く洗練された印象で、使うだけで制作意欲が上がる",
        "やさしい": "初心者でも迷わない、安心感のある",
        "近未来": "AI時代らしい自動化と先進性を感じる",
        "ファンタジー": "クエストやギルドのような世界観を活かした",
        "シンプル": "余計な機能を削り、すぐ使えることに集中した",
        "高級感": "プロ向けツールのように落ち着いた印象の",
        "かわいい": "親しみやすく、毎日開きたくなる",
        "ダーク": "深い世界観と中二感を活かした",
        "実用的": "仕事や制作の効率化に直結する",
        "ゲーム風": "レベル、経験値、クエストのような要素を持つ"
      },

      features: {
        "Webサービス": ["ユーザー投稿", "検索", "タグ分類", "お気に入り", "ランキング", "管理画面", "コメント", "カテゴリ管理", "共有リンク", "レスポンシブUI"],
        "AIツール": ["文章生成", "テンプレート選択", "プロンプト保存", "履歴管理", "自動分類", "要約", "言い換え", "コピー", "お気に入り", "出力形式変更"],
        "ゲーム": ["キャラクター管理", "クエスト", "ステージ選択", "スキル", "装備", "敵図鑑", "ストーリー分岐", "進行度保存", "称号", "実績"],
        "小説": ["キャラ設定", "世界観管理", "章立て", "プロット", "セリフ案", "伏線メモ", "用語集", "文体変換", "シーン整理", "年表"],
        "SNS": ["タイムライン", "投稿", "いいね", "フォロー", "通知", "プロフィール", "ハッシュタグ", "DM風UI", "おすすめ投稿", "AI投稿提案"],
        "動画サイト": ["動画カード", "検索", "カテゴリ", "ランキング", "チャンネル", "視聴履歴", "コメント", "お気に入り", "おすすめ", "タグ"],
        "ポートフォリオ": ["作品カード", "リンク管理", "カテゴリ分類", "紹介文生成", "スキル表示", "実績一覧", "検索", "テーマ変更", "外部リンク", "更新履歴"],
        "便利ツール": ["メモ", "ToDo", "検索", "タグ", "自動整形", "コピー", "履歴", "エクスポート", "チェックリスト", "通知風表示"],
        "学習サービス": ["学習記録", "復習リスト", "クイズ", "用語集", "進捗", "AI風解説", "弱点メモ", "計画作成", "達成バッジ", "問題生成"],
        "創作支援": ["アイデア生成", "タイトル案", "キャッチコピー", "キャラ案", "世界観案", "企画書化", "画像プロンプト", "構成案", "メモ保存", "ネタ帳"]
      },

      monetization: [
        "無料版＋Pro版",
        "広告表示",
        "買い切り版",
        "テンプレート販売",
        "月額プレミアム",
        "法人向けプラン",
        "追加保存枠の課金",
        "作品公開ページの有料カスタム",
        "支援・投げ銭",
        "素材パック販売"
      ],

      risks: [
        "機能を増やしすぎると完成しにくくなる",
        "最初からログインや課金を入れると開発が重くなる",
        "ターゲットが広すぎると特徴が薄くなる",
        "保存機能の設計を後回しにすると作り直しが出やすい",
        "見た目だけ作って実用性が弱いと使われにくい",
        "スマホ対応を忘れると使い勝手が落ちる"
      ],

      firstSteps: {
        "簡単": ["1画面UIを作る", "入力欄と生成ボタンを作る", "結果表示を作る", "コピー機能を付ける", "ローカル保存を付ける"],
        "普通": ["基本UIを作る", "複数パターン生成を作る", "履歴保存を作る", "検索と絞り込みを作る", "テキスト出力を作る"],
        "本格": ["MVPを作る", "保存データ構造を決める", "ログインなし版を完成させる", "ユーザー登録版を検討する", "公開ページを整える"],
        "超本格": ["小さいMVPを先に作る", "フロントとバックエンドを分ける", "DB設計をする", "課金やログインを後から追加する", "運用コストを確認する"]
      }
    };

    let currentIdeas = [];
    let generatedCount = 0;

    function $(id) {
      return document.getElementById(id);
    }

    function val(id) {
      return $(id).value.trim();
    }

    function pick(arr) {
      return arr[Math.floor(Math.random() * arr.length)];
    }

    function shuffle(arr) {
      return [...arr].sort(() => Math.random() - 0.5);
    }

    function escapeHTML(str) {
      return String(str)
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll('"', "&quot;")
        .replaceAll("'", "&#039;");
    }

    function addKeyword(word) {
      const box = $("keywords");
      if (!box.value.includes(word)) {
        box.value = box.value ? box.value + " / " + word : word;
      }
    }

    function randomSet() {
      randomSelect("genre");
      randomSelect("mood");
      randomSelect("level");
      randomSelect("target");
      randomSelect("style");

      const sets = [
        "AI / メモ / 作業効率",
        "RPG / クエスト / 進捗管理",
        "SNS / 投稿 / AI風返信",
        "小説 / 世界観 / キャラクター",
        "在宅ワーク / 日報 / 整理",
        "ポートフォリオ / 作品 / 自動紹介",
        "動画 / まとめ / ランキング",
        "学習 / 復習 / クイズ",
        "ゲーム開発 / アイデア / 仕様書",
        "創作 / ネタ帳 / 企画書"
      ];

      const problems = [
        "何を作ればいいかわからない",
        "作業が続かない",
        "アイデアが散らばって整理できない",
        "作品紹介文を書くのが難しい",
        "学習した内容を忘れやすい",
        "毎日の進捗を見える化したい",
        "企画を作っても途中で止まりやすい"
      ];

      $("keywords").value = pick(sets);
      $("problem").value = pick(problems);
      showToast("ランダム条件を入れました");
    }

    function randomSelect(id) {
      const el = $(id);
      el.selectedIndex = Math.floor(Math.random() * el.options.length);
    }

    function makePractical() {
      $("mood").value = "実用的";
      $("level").value = "簡単";
      $("style").value = "開発メモ風";
      if (!$("problem").value) {
        $("problem").value = "毎日の作業やアイデアを整理して、次にやることを明確にしたい";
      }
      showToast("現実的な条件に寄せました");
    }

    function makeFantasy() {
      $("mood").value = "ファンタジー";
      $("style").value = "サービス紹介風";
      if (!$("keywords").value.includes("ギルド")) {
        addKeyword("ギルド");
        addKeyword("クエスト");
      }
      showToast("派手な条件に寄せました");
    }

    function clearForm() {
      $("keywords").value = "";
      $("problem").value = "";
      showToast("入力をクリアしました");
    }

    function generateIdeas() {
      const amount = Number(val("amount"));
      currentIdeas = [];

      for (let i = 0; i < amount; i++) {
        currentIdeas.push(createIdea(i));
      }

      generatedCount += amount;
      $("statIdeas").textContent = generatedCount;
      renderIdeas();
      showToast(`${amount}個のアイデアを生成しました`);
    }

    function createIdea(index) {
      const genre = val("genre");
      const mood = val("mood");
      const level = val("level");
      const target = val("target");
      const style = val("style");
      const keywords = val("keywords") || "AI / 創作 / アイデア";
      const problem = val("problem") || "アイデアを整理して、作り始めやすくしたい";

      const title = makeTitle(genre, keywords, index);
      const features = shuffle(DATA.features[genre]).slice(0, 6);
      const mvp = features.slice(0, 3);
      const money = shuffle(DATA.monetization).slice(0, 3);
      const risks = shuffle(DATA.risks).slice(0, 3);
      const steps = DATA.firstSteps[level];
      const score = calcScore(genre, level);
      const keywordMain = splitKeywords(keywords)[0] || "アイデア";

      return {
        id: Date.now() + Math.random(),
        createdAt: new Date().toLocaleString("ja-JP"),
        title,
        genre,
        mood,
        level,
        target,
        style,
        keywords,
        problem,
        score,
        catchcopy: makeCatch(target, mood, genre, keywordMain),
        overview: makeOverview(genre, mood, target, keywords, problem, style),
        unique: makeUnique(genre, mood, keywordMain),
        features,
        mvp,
        money,
        risks,
        steps,
        devTime: makeDevTime(level),
        nextAction: makeNextAction(level, genre),
        design: makeDesign(mood),
        pitch: makePitch(title, target, genre, problem)
      };
    }

    function splitKeywords(text) {
      return text.split(/[\/、,\s]+/).map(x => x.trim()).filter(Boolean);
    }

    function makeTitle(genre, keywords, index) {
      const keys = splitKeywords(keywords);
      const key = keys[index % Math.max(keys.length, 1)] || "Idea";
      const head = pick(DATA.titleHeads);
      const tail = pick(DATA.titleTails[genre] || DATA.titleTails["創作支援"]);

      const patterns = [
        `${head}${tail}`,
        `${key}${tail}`,
        `${head} ${tail}`,
        `${key}メーカー`,
        `${key}ギルド`,
        `${key}Forge`,
        `${head}ノート`,
        `${key}ラボ`,
        `${head}Factory`,
        `${key}クエスト`
      ];

      return pick(patterns);
    }

    function makeCatch(target, mood, genre, key) {
      const desc = DATA.moodDesc[mood];
      const patterns = [
        `${target}の「作りたい」を形にする、${desc}${genre}。`,
        `${key}を起点に、企画・整理・実行まで支える${genre}。`,
        `思いつきを企画に変える、${target}向けの${desc}サービス。`,
        `迷っている時間を減らし、制作を前に進める${genre}。`
      ];
      return pick(patterns);
    }

    function makeOverview(genre, mood, target, keywords, problem, style) {
      const desc = DATA.moodDesc[mood];

      if (style === "ピッチ資料風") {
        return `${problem}という悩みを持つ${target}に向けて、${keywords}を軸にした${genre}を提供します。${desc}体験により、ユーザーはアイデア出しから整理、実行までを短時間で進められます。`;
      }

      if (style === "開発メモ風") {
        return `${keywords}をテーマにした${genre}。まずは小さく作る。${target}が抱える「${problem}」を解決するため、生成、保存、検索、コピーの流れを重視する。`;
      }

      if (style === "サービス紹介風") {
        return `この${genre}は、${target}が${keywords}に関するアイデアをすばやく整理できるサービスです。${desc}デザインで、毎日開きたくなる使い心地を目指します。`;
      }

      return `${keywords}をテーマにした${genre}です。${target}が抱える「${problem}」を解決するため、アイデア出し、情報整理、保存、次の行動提案をまとめて行える企画にします。`;
    }

    function makeUnique(genre, mood, key) {
      return `${key}をただ生成するだけでなく、MVP、開発手順、収益化、注意点まで同時に出せる点が特徴です。${mood}な方向性を明確にすることで、似たような${genre}との差別化もしやすくなります。`;
    }

    function calcScore(genre, level) {
      let score = 82;

      if (level === "簡単") score += 10;
      if (level === "普通") score += 5;
      if (level === "本格") score -= 2;
      if (level === "超本格") score -= 9;

      if (genre === "便利ツール") score += 4;
      if (genre === "AIツール") score += 3;
      if (genre === "ゲーム") score -= 4;
      if (genre === "SNS") score -= 3;

      score += Math.floor(Math.random() * 9) - 4;

      return Math.max(55, Math.min(98, score));
    }

    function makeDevTime(level) {
      if (level === "簡単") return "1日〜3日";
      if (level === "普通") return "1週間〜2週間";
      if (level === "本格") return "1か月〜3か月";
      return "3か月以上";
    }

    function makeNextAction(level, genre) {
      if (level === "簡単") {
        return `まずは${genre}の1画面版を作ります。入力欄、生成ボタン、結果表示、保存だけで完成扱いにするのが安全です。`;
      }

      if (level === "普通") {
        return `最初にUIを作り、そのあと保存・検索・出力機能を追加します。ログイン機能は後回しで大丈夫です。`;
      }

      if (level === "本格") {
        return `MVPを公開できる状態まで作ってから、ユーザー登録やデータベースを検討します。最初から全部入れない方が完成します。`;
      }

      return `超本格版は重いので、まずはプロトタイプを完成させてください。完成後にサーバー、DB、課金、ログインを分割して追加する流れが安全です。`;
    }

    function makeDesign(mood) {
      const map = {
        "かっこいい": "黒背景、青紫グラデーション、カード型UI、シャープなボタン",
        "やさしい": "白背景、淡い青や緑、角丸カード、大きめ文字",
        "近未来": "ダーク背景、ネオン、水色アクセント、ガラス風UI",
        "ファンタジー": "羊皮紙風、ギルドカード、クエストボード風UI",
        "シンプル": "白背景、余白多め、入力欄と結果表示を中心にする",
        "高級感": "黒と金、細い罫線、落ち着いたカードUI",
        "かわいい": "パステルカラー、丸いボタン、アイコン多め",
        "ダーク": "黒、赤紫、重厚な影、世界観重視",
        "実用的": "管理画面風、見出し明確、コピー・保存ボタンを目立たせる",
        "ゲーム風": "ステータス画面、経験値バー、クエストカード風"
      };

      return map[mood] || "カード型で見やすいUI";
    }

    function makePitch(title, target, genre, problem) {
      return `${title}は、${target}が抱える「${problem}」を解決する${genre}です。複雑な作業を整理し、次にやることを明確にすることで、制作や仕事を止めずに進められるようにします。`;
    }

    function renderIdeas() {
      const result = $("result");

      if (currentIdeas.length === 0) {
        result.innerHTML = `
          <div class="empty">
            <div class="icon">🧠</div>
            <h2>まだアイデアはありません</h2>
            <p>左の条件を入れて「アイデア生成」を押してください。</p>
          </div>
        `;
        return;
      }

      result.innerHTML = `
        <div class="idea-list">
          ${currentIdeas.map(renderIdeaCard).join("")}
        </div>
      `;
    }

    function renderIdeaCard(idea, index) {
      return `
        <article class="idea-card">
          <div class="idea-top">
            <div>
              <h2 class="idea-title">${escapeHTML(idea.title)}</h2>
              <div class="meta">
                <span class="pill">${escapeHTML(idea.genre)}</span>
                <span class="pill">${escapeHTML(idea.mood)}</span>
                <span class="pill">${escapeHTML(idea.level)}</span>
                <span class="pill">${escapeHTML(idea.target)}</span>
                <span class="pill">開発目安 ${escapeHTML(idea.devTime)}</span>
              </div>
            </div>

            <div class="score-box">
              <strong>${idea.score}</strong>
              <span>実現度</span>
            </div>
          </div>

          <div class="catch">
            ${escapeHTML(idea.catchcopy)}
          </div>

          <div class="idea-body">
            <div class="sections">
              <div class="section wide">
                <h4>📝 概要</h4>
                <p>${escapeHTML(idea.overview)}</p>
              </div>

              <div class="section">
                <h4>🎯 解決する悩み</h4>
                <p>${escapeHTML(idea.problem)}</p>
              </div>

              <div class="section">
                <h4>🎨 デザイン方針</h4>
                <p>${escapeHTML(idea.design)}</p>
              </div>

              <div class="section">
                <h4>⚙️ 主な機能</h4>
                <ul>
                  ${idea.features.map(x => `<li>${escapeHTML(x)}</li>`).join("")}
                </ul>
              </div>

              <div class="section">
                <h4>🚀 MVP機能</h4>
                <ol>
                  ${idea.mvp.map(x => `<li>${escapeHTML(x)}</li>`).join("")}
                </ol>
              </div>

              <div class="section">
                <h4>💰 収益化案</h4>
                <ul>
                  ${idea.money.map(x => `<li>${escapeHTML(x)}</li>`).join("")}
                </ul>
              </div>

              <div class="section">
                <h4>⚠️ リスク</h4>
                <ul>
                  ${idea.risks.map(x => `<li>${escapeHTML(x)}</li>`).join("")}
                </ul>
              </div>

              <div class="section wide">
                <h4>✅ 開発ステップ</h4>
                <ol>
                  ${idea.steps.map(x => `<li>${escapeHTML(x)}</li>`).join("")}
                </ol>
              </div>

              <div class="section wide">
                <h4>✨ 差別化ポイント</h4>
                <p>${escapeHTML(idea.unique)}</p>
              </div>

              <div class="section wide">
                <h4>📣 紹介文</h4>
                <p>${escapeHTML(idea.pitch)}</p>
              </div>

              <div class="section wide">
                <h4>👉 次にやること</h4>
                <p>${escapeHTML(idea.nextAction)}</p>
              </div>
            </div>
          </div>

          <div class="idea-actions">
            <button onclick="copyOne(${index})">この案をコピー</button>
            <button onclick="saveOne(${index})">保存</button>
            <button onclick="regenerateOne(${index})">この案だけ再生成</button>
          </div>
        </article>
      `;
    }

    function ideaToText(idea) {
      return `
【タイトル】
${idea.title}

【ジャンル】
${idea.genre}

【雰囲気】
${idea.mood}

【ターゲット】
${idea.target}

【開発難易度】
${idea.level}

【開発目安】
${idea.devTime}

【実現度】
${idea.score}点

【キャッチコピー】
${idea.catchcopy}

【解決する悩み】
${idea.problem}

【概要】
${idea.overview}

【主な機能】
${idea.features.map((x, i) => `${i + 1}. ${x}`).join("\n")}

【MVP機能】
${idea.mvp.map((x, i) => `${i + 1}. ${x}`).join("\n")}

【収益化案】
${idea.money.map((x, i) => `${i + 1}. ${x}`).join("\n")}

【リスク】
${idea.risks.map((x, i) => `${i + 1}. ${x}`).join("\n")}

【開発ステップ】
${idea.steps.map((x, i) => `${i + 1}. ${x}`).join("\n")}

【デザイン方針】
${idea.design}

【差別化ポイント】
${idea.unique}

【紹介文】
${idea.pitch}

【次にやること】
${idea.nextAction}
      `.trim();
    }

    function copyOne(index) {
      const idea = currentIdeas[index];
      if (!idea) return;
      copyText(ideaToText(idea));
    }

    function copyAll() {
      if (currentIdeas.length === 0) {
        showToast("先に生成してください");
        return;
      }

      copyText(currentIdeas.map(ideaToText).join("\n\n====================\n\n"));
    }

    function copyText(text) {
      navigator.clipboard.writeText(text)
        .then(() => showToast("コピーしました"))
        .catch(() => showToast("コピーに失敗しました"));
    }

    function regenerateOne(index) {
      currentIdeas[index] = createIdea(index);
      renderIdeas();
      showToast("再生成しました");
    }

    function getSaved() {
      try {
        return JSON.parse(localStorage.getItem("netagami_saved")) || [];
      } catch {
        return [];
      }
    }

    function setSaved(data) {
      localStorage.setItem("netagami_saved", JSON.stringify(data));
      updateStats();
    }

    function saveOne(index) {
      const idea = currentIdeas[index];
      if (!idea) return;

      const saved = getSaved();
      saved.unshift(idea);
      setSaved(saved.slice(0, 100));
      renderHistory();
      showToast("保存しました");
    }

    function saveAll() {
      if (currentIdeas.length === 0) {
        showToast("先に生成してください");
        return;
      }

      const saved = getSaved();
      setSaved([...currentIdeas, ...saved].slice(0, 100));
      renderHistory();
      showToast("全部保存しました");
    }

    function renderHistory() {
      const list = $("historyList");
      const saved = getSaved();
      const q = $("historySearch").value.trim().toLowerCase();
      const genre = $("historyGenre").value;

      let filtered = saved;

      if (genre !== "all") {
        filtered = filtered.filter(x => x.genre === genre);
      }

      if (q) {
        filtered = filtered.filter(x => {
          return JSON.stringify(x).toLowerCase().includes(q);
        });
      }

      $("savedCount").textContent = `${saved.length}件`;

      if (filtered.length === 0) {
        list.innerHTML = `<p style="color:var(--muted);">保存アイデアはありません。</p>`;
        return;
      }

      list.innerHTML = filtered.map(item => `
        <div class="history-item" onclick="loadSaved('${item.id}')">
          <strong>${escapeHTML(item.title)}</strong>
          <small>${escapeHTML(item.genre)} / ${escapeHTML(item.level)} / ${escapeHTML(item.createdAt)}</small>
        </div>
      `).join("");
    }

    function loadSaved(id) {
      const saved = getSaved();
      const idea = saved.find(x => String(x.id) === String(id));

      if (!idea) return;

      currentIdeas = [idea];
      renderIdeas();
      window.scrollTo({ top: 0, behavior: "smooth" });
      showToast("保存アイデアを表示しました");
    }

    function downloadText() {
      if (currentIdeas.length === 0) {
        showToast("先に生成してください");
        return;
      }

      const text = currentIdeas.map(ideaToText).join("\n\n====================\n\n");
      downloadFile("netagami-ideas.txt", text, "text/plain");
      showToast("TXT出力しました");
    }

    function downloadJSON() {
      const data = currentIdeas.length ? currentIdeas : getSaved();

      if (data.length === 0) {
        showToast("出力するデータがありません");
        return;
      }

      downloadFile("netagami-ideas.json", JSON.stringify(data, null, 2), "application/json");
      showToast("JSON出力しました");
    }

    function downloadFile(filename, content, type) {
      const blob = new Blob([content], { type: type + ";charset=utf-8" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");

      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      a.remove();

      URL.revokeObjectURL(url);
    }

    function clearAll() {
      if (!confirm("生成結果と保存履歴を削除しますか？")) return;

      currentIdeas = [];
      localStorage.removeItem("netagami_saved");
      renderIdeas();
      renderHistory();
      updateStats();
      showToast("削除しました");
    }

    function toggleTheme() {
      document.body.classList.toggle("light");
      localStorage.setItem("netagami_theme", document.body.classList.contains("light") ? "light" : "dark");
    }

    function updateStats() {
      $("statSaved").textContent = getSaved().length;
    }

    function showToast(message) {
      const toast = $("toast");
      toast.textContent = message;
      toast.classList.add("show");

      setTimeout(() => {
        toast.classList.remove("show");
      }, 1800);
    }

    function init() {
      if (localStorage.getItem("netagami_theme") === "light") {
        document.body.classList.add("light");
      }

      $("keywords").value = "AI / 創作 / Webサービス / メモ";
      $("problem").value = "何を作ればいいかわからない。アイデアを企画書レベルまで整理したい。";

      renderHistory();
      updateStats();
    }

    init();
  </script>
</body>
</html>

STGGAME.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bullet Hell STG Game</title>
  <style>
    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      background: radial-gradient(circle at top, #1f2b5c, #070915 70%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: system-ui, sans-serif;
      color: white;
      overflow: hidden;
    }

    .wrap { text-align: center; }

    h1 {
      margin: 0 0 10px;
      font-size: 28px;
      letter-spacing: 0.08em;
    }

    canvas {
      background: #050816;
      border: 3px solid #ffffff33;
      border-radius: 16px;
      box-shadow: 0 20px 80px #000a;
      display: block;
    }

    .info {
      margin-top: 10px;
      color: #dce6ff;
      font-size: 14px;
    }

    .panel {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 20px;
      background: #0008;
      border: 1px solid #fff2;
      padding: 8px 16px;
      border-radius: 999px;
      backdrop-filter: blur(8px);
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="panel">
    <div>Score: <span id="score">0</span></div>
    <div>HP: <span id="hp">5</span></div>
    <div>Power: <span id="power">1</span></div>
  </div>

  <div class="wrap">
    <h1>BULLET STORM</h1>
    <canvas id="game" width="480" height="640"></canvas>
    <div class="info">移動: WASD / 方向キー　ショット: Space　パワーアップを取ると弾が強化　リスタート: Enter</div>
  </div>

  <script>
    const canvas = document.getElementById("game");
    const ctx = canvas.getContext("2d");
    const scoreEl = document.getElementById("score");
    const hpEl = document.getElementById("hp");
    const powerEl = document.getElementById("power");

    const keys = {};

    const player = {
      x: canvas.width / 2,
      y: canvas.height - 70,
      w: 34,
      h: 42,
      speed: 5,
      hp: 5,
      power: 1,
      shotCooldown: 0,
      invincible: 0
    };

    let bullets = [];
    let enemyBullets = [];
    let enemies = [];
    let items = [];
    let particles = [];
    let stars = [];
    let score = 0;
    let enemyTimer = 0;
    let itemTimer = 0;
    let gameOver = false;
    let boss = null;
    let bossTimer = 0;
    let frame = 0;

    for (let i = 0; i < 100; i++) {
      stars.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        r: Math.random() * 2 + 0.5,
        speed: Math.random() * 2 + 1
      });
    }

    window.addEventListener("keydown", (e) => {
      keys[e.key.toLowerCase()] = true;
      if (gameOver && e.key === "Enter") restart();
    });

    window.addEventListener("keyup", (e) => {
      keys[e.key.toLowerCase()] = false;
    });

    function restart() {
      player.x = canvas.width / 2;
      player.y = canvas.height - 70;
      player.hp = 5;
      player.power = 1;
      player.shotCooldown = 0;
      player.invincible = 0;
      bullets = [];
      enemyBullets = [];
      enemies = [];
      items = [];
      particles = [];
      score = 0;
      enemyTimer = 0;
      itemTimer = 0;
      frame = 0;
      gameOver = false;
      updateUI();
    }

    function updateUI() {
      scoreEl.textContent = score;
      hpEl.textContent = player.hp;
      powerEl.textContent = player.power;
    }

    function addPlayerBullet(x, y, vx, vy, power = 1) {
      bullets.push({ x, y, w: 6, h: 16, vx, vy, power });
    }

    function shoot() {
      if (player.power === 1) {
        addPlayerBullet(player.x, player.y - 25, 0, -10);
      } else if (player.power === 2) {
        addPlayerBullet(player.x - 9, player.y - 25, 0, -10);
        addPlayerBullet(player.x + 9, player.y - 25, 0, -10);
      } else if (player.power === 3) {
        addPlayerBullet(player.x, player.y - 28, 0, -11);
        addPlayerBullet(player.x - 16, player.y - 20, -1.2, -10);
        addPlayerBullet(player.x + 16, player.y - 20, 1.2, -10);
      } else {
        addPlayerBullet(player.x, player.y - 30, 0, -12, 2);
        addPlayerBullet(player.x - 14, player.y - 24, -0.8, -11);
        addPlayerBullet(player.x + 14, player.y - 24, 0.8, -11);
        addPlayerBullet(player.x - 24, player.y - 10, -1.7, -10);
        addPlayerBullet(player.x + 24, player.y - 10, 1.7, -10);
      }

      player.shotCooldown = Math.max(4, 10 - player.power);
    }

    function spawnEnemy() {
      if (boss) return;
      const size = Math.random() * 16 + 28;
      enemies.push({
        x: Math.random() * (canvas.width - size) + size / 2,
        y: -size,
        w: size,
        h: size,
        speed: Math.random() * 1.4 + 1.4,
        hp: size > 38 ? 4 : 2,
        shotTimer: Math.floor(Math.random() * 50),
        type: Math.random() < 0.35 ? "spread" : "normal"
      });
    }

    function spawnPowerItem(x = Math.random() * (canvas.width - 40) + 20, y = -20) {
      items.push({
        x,
        y,
        w: 24,
        h: 24,
        speed: 2.2,
        type: "power"
      });
    }

    function enemyShoot(enemy) {
      if (enemy.type === "spread") {
        for (let i = -2; i <= 2; i++) {
          enemyBullets.push({
            x: enemy.x,
            y: enemy.y + enemy.h / 2,
            w: 8,
            h: 8,
            vx: i * 1.1,
            vy: 3.2
          });
        }
      } else {
        const dx = player.x - enemy.x;
        const dy = player.y - enemy.y;
        const len = Math.hypot(dx, dy) || 1;
        enemyBullets.push({
          x: enemy.x,
          y: enemy.y + enemy.h / 2,
          w: 8,
          h: 8,
          vx: dx / len * 3.2,
          vy: dy / len * 3.2
        });
      }
    }

    function createExplosion(x, y) {
      for (let i = 0; i < 16; i++) {
        particles.push({
          x,
          y,
          vx: (Math.random() - 0.5) * 7,
          vy: (Math.random() - 0.5) * 7,
          life: 24,
          r: Math.random() * 4 + 2
        });
      }
    }

    function isHit(a, b) {
      return (
        a.x - a.w / 2 < b.x + b.w / 2 &&
        a.x + a.w / 2 > b.x - b.w / 2 &&
        a.y - a.h / 2 < b.y + b.h / 2 &&
        a.y + a.h / 2 > b.y - b.h / 2
      );
    }

    function damagePlayer() {
      if (player.invincible > 0) return;
      player.hp--;
      player.power = Math.max(1, player.power - 1);
      player.invincible = 80;
      createExplosion(player.x, player.y);
      updateUI();
      if (player.hp <= 0) gameOver = true;
    }

    function update() {
      if (gameOver) return;
      frame++;

      // boss spawn
      bossTimer++;
      if (!boss && bossTimer > 2000) {
        boss = {
          x: canvas.width / 2,
          y: 120,
          w: 120,
          h: 120,
          hp: 200,
          maxHp: 200,
          shotTimer: 0
        };
      }

      if (keys["arrowleft"] || keys["a"]) player.x -= player.speed;
      if (keys["arrowright"] || keys["d"]) player.x += player.speed;
      if (keys["arrowup"] || keys["w"]) player.y -= player.speed;
      if (keys["arrowdown"] || keys["s"]) player.y += player.speed;

      player.x = Math.max(player.w / 2, Math.min(canvas.width - player.w / 2, player.x));
      player.y = Math.max(player.h / 2, Math.min(canvas.height - player.h / 2, player.y));

      if (player.invincible > 0) player.invincible--;
      if (player.shotCooldown > 0) player.shotCooldown--;
      if ((keys[" "] || keys["space"]) && player.shotCooldown <= 0) shoot();

      bullets.forEach((b) => {
        b.x += b.vx;
        b.y += b.vy;
      });
      bullets = bullets.filter((b) => b.y > -30 && b.x > -30 && b.x < canvas.width + 30);

      enemyBullets.forEach((b) => {
        b.x += b.vx;
        b.y += b.vy;
      });
      enemyBullets = enemyBullets.filter((b) => b.y < canvas.height + 30 && b.x > -30 && b.x < canvas.width + 30);

      enemyTimer++;
      if (enemyTimer > Math.max(20, 40 - Math.floor(score / 1000))) {
        spawnEnemy();
        enemyTimer = 0;
      }

      itemTimer++;
      if (itemTimer > 520) {
        spawnPowerItem();
        itemTimer = 0;
      }

      enemies.forEach((e) => {
        e.y += e.speed;
        e.shotTimer++;
        if (e.shotTimer > 70) {
          enemyShoot(e);
          e.shotTimer = 0;
        }
      });

      // boss behavior
      if (boss) {
        boss.shotTimer++;
        if (boss.shotTimer % 40 === 0) {
          for (let i = 0; i < 20; i++) {
            const angle = (Math.PI * 2 / 20) * i + frame * 0.02;
            enemyBullets.push({
              x: boss.x,
              y: boss.y,
              w: 10,
              h: 10,
              vx: Math.cos(angle) * 3,
              vy: Math.sin(angle) * 3
            });
          }
        }
      }

      items.forEach((item) => {
        item.y += item.speed;
        item.x += Math.sin((frame + item.y) * 0.04) * 0.8;
      });
      items = items.filter((item) => item.y < canvas.height + 40);

      for (let i = items.length - 1; i >= 0; i--) {
        if (isHit(player, items[i])) {
          player.power = Math.min(4, player.power + 1);
          score += 300;
          createExplosion(items[i].x, items[i].y);
          items.splice(i, 1);
          updateUI();
        }
      }

      for (let i = enemies.length - 1; i >= 0; i--) {
        const e = enemies[i];
        if (isHit(player, e)) {
          createExplosion(e.x, e.y);
          enemies.splice(i, 1);
          damagePlayer();
          continue;
        }

        if (e.y > canvas.height + 50) {
          enemies.splice(i, 1);
          damagePlayer();
        }
      }

      for (let i = enemyBullets.length - 1; i >= 0; i--) {
        if (isHit(player, enemyBullets[i])) {
          enemyBullets.splice(i, 1);
          damagePlayer();
        }
      }

      for (let i = enemies.length - 1; i >= 0; i--) {
        for (let j = bullets.length - 1; j >= 0; j--) {
          if (isHit(enemies[i], bullets[j])) {
            enemies[i].hp -= bullets[j].power;
            bullets.splice(j, 1);

            if (enemies[i].hp <= 0) {
              const drop = Math.random() < 0.18;
              if (drop) spawnPowerItem(enemies[i].x, enemies[i].y);
              createExplosion(enemies[i].x, enemies[i].y);
              enemies.splice(i, 1);
              score += 100;
              updateUI();
            }
            break;
          }
        }
      }

      particles.forEach((p) => {
        p.x += p.vx;
        p.y += p.vy;
        p.life--;
      });
      particles = particles.filter((p) => p.life > 0);

      stars.forEach((s) => {
        s.y += s.speed;
        if (s.y > canvas.height) {
          s.y = 0;
          s.x = Math.random() * canvas.width;
        }
      });
    }

    function drawPlayer() {
      if (player.invincible > 0 && Math.floor(frame / 5) % 2 === 0) return;

      ctx.save();
      ctx.translate(player.x, player.y);

      // body
      const grad = ctx.createLinearGradient(0, -20, 0, 30);
      grad.addColorStop(0, "#7df9ff");
      grad.addColorStop(1, "#0077ff");
      ctx.fillStyle = grad;
      ctx.beginPath();
      ctx.moveTo(0, -26);
      ctx.lineTo(20, 22);
      ctx.lineTo(0, 12);
      ctx.lineTo(-20, 22);
      ctx.closePath();
      ctx.fill();

      // cockpit
      ctx.fillStyle = "#ffffff";
      ctx.beginPath();
      ctx.arc(0, -6, 6, 0, Math.PI * 2);
      ctx.fill();

      // wings glow
      ctx.fillStyle = "#00eaff";
      ctx.globalAlpha = 0.5;
      ctx.fillRect(-24, 0, 8, 10);
      ctx.fillRect(16, 0, 8, 10);
      ctx.globalAlpha = 1;

      // engine flame
      ctx.fillStyle = "#ffcf5a";
      ctx.beginPath();
      ctx.moveTo(-8, 24);
      ctx.lineTo(0, 40 + Math.random() * 6);
      ctx.lineTo(8, 24);
      ctx.closePath();
      ctx.fill();

      ctx.restore();
    }

    function drawEnemy(e) {
      ctx.save();
      ctx.translate(e.x, e.y);

      // core
      const grad = ctx.createRadialGradient(0, 0, 4, 0, 0, e.w / 2);
      grad.addColorStop(0, "#fff");
      grad.addColorStop(1, e.type === "spread" ? "#ff00cc" : "#ff0000");
      ctx.fillStyle = grad;
      ctx.beginPath();
      ctx.arc(0, 0, e.w / 2, 0, Math.PI * 2);
      ctx.fill();

      // spikes
      ctx.strokeStyle = "#fff";
      ctx.lineWidth = 2;
      for (let i = 0; i < 6; i++) {
        const angle = (Math.PI * 2 / 6) * i + frame * 0.01;
        ctx.beginPath();
        ctx.moveTo(Math.cos(angle) * 6, Math.sin(angle) * 6);
        ctx.lineTo(Math.cos(angle) * (e.w / 2 + 8), Math.sin(angle) * (e.w / 2 + 8));
        ctx.stroke();
      }

      ctx.restore();
    }

    function drawPowerItem(item) {
      ctx.save();
      ctx.translate(item.x, item.y);
      ctx.rotate(frame * 0.05);
      ctx.fillStyle = "#68ff7a";
      ctx.fillRect(-12, -12, 24, 24);
      ctx.fillStyle = "#052";
      ctx.font = "bold 18px system-ui";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText("P", 0, 1);
      ctx.restore();
    }

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "#050816";
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      ctx.fillStyle = "#ffffff";
      stars.forEach((s) => {
        ctx.globalAlpha = 0.4 + Math.random() * 0.5;
        ctx.beginPath();
        ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
        ctx.fill();
      });
      ctx.globalAlpha = 1;

      bullets.forEach((b) => {
        ctx.fillStyle = b.power >= 2 ? "#fff36a" : "#8ffcff";
        ctx.fillRect(b.x - b.w / 2, b.y - b.h / 2, b.w, b.h);
      });

      enemyBullets.forEach((b) => {
        ctx.fillStyle = "#ff9a3b";
        ctx.beginPath();
        ctx.arc(b.x, b.y, b.w / 2, 0, Math.PI * 2);
        ctx.fill();
      });

      items.forEach(drawPowerItem);
      enemies.forEach(drawEnemy);
      // draw boss
      if (boss) {
        ctx.save();
        ctx.translate(boss.x, boss.y);

        const grad = ctx.createRadialGradient(0, 0, 10, 0, 0, boss.w / 2);
        grad.addColorStop(0, "#fff");
        grad.addColorStop(1, "#ff00aa");
        ctx.fillStyle = grad;
        ctx.beginPath();
        ctx.arc(0, 0, boss.w / 2, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();

        // HP bar
        ctx.fillStyle = "#000";
        ctx.fillRect(80, 20, 320, 16);
        ctx.fillStyle = "#ff0066";
        ctx.fillRect(80, 20, 320 * (boss.hp / boss.maxHp), 16);
      }

      drawPlayer();

      particles.forEach((p) => {
        ctx.globalAlpha = p.life / 24;
        ctx.fillStyle = "#ffd35a";
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();
      });
      ctx.globalAlpha = 1;

      if (gameOver) {
        ctx.fillStyle = "#000b";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "white";
        ctx.textAlign = "center";
        ctx.font = "bold 42px system-ui";
        ctx.fillText("GAME OVER", canvas.width / 2, canvas.height / 2 - 30);
        ctx.font = "20px system-ui";
        ctx.fillText("Score: " + score, canvas.width / 2, canvas.height / 2 + 10);
        ctx.fillText("Enterでリスタート", canvas.width / 2, canvas.height / 2 + 48);
      }
    }

    function loop() {
      update();
      draw();
      requestAnimationFrame(loop);
    }

    updateUI();
    loop();
  </script>
</body>
</html>

AICharacter掲示板

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>AIキャラ会話掲示板 - Virtual Guild Board</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
      background: linear-gradient(135deg, #0f172a, #1e293b, #111827);
      color: #e5e7eb;
    }

    header {
      padding: 24px;
      background: rgba(0,0,0,0.35);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      text-align: center;
    }

    header h1 {
      margin: 0;
      font-size: 32px;
      color: #f8fafc;
    }

    header p {
      margin-top: 8px;
      color: #cbd5e1;
      font-size: 14px;
    }

    .container {
      max-width: 1300px;
      margin: 0 auto;
      padding: 20px;
      display: grid;
      grid-template-columns: 300px 1fr 320px;
      gap: 20px;
    }

    .panel {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.25);
      overflow: hidden;
      backdrop-filter: blur(10px);
    }

    .panel-title {
      padding: 16px 18px;
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
    }

    .character-list {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: 720px;
      overflow-y: auto;
    }

    .character-card {
      padding: 14px;
      border-radius: 14px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
    }

    .character-card h3 {
      margin: 0 0 6px 0;
      font-size: 17px;
    }

    .character-meta {
      font-size: 13px;
      color: #cbd5e1;
      margin-bottom: 8px;
    }

    .character-desc {
      font-size: 13px;
      color: #e2e8f0;
      line-height: 1.6;
    }

    .main-board {
      display: flex;
      flex-direction: column;
      min-height: 780px;
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 14px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
    }

    button, select, input, textarea {
      font: inherit;
    }

    button {
      border: none;
      border-radius: 10px;
      padding: 10px 14px;
      cursor: pointer;
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: white;
      transition: 0.2s ease;
    }

    button:hover {
      transform: translateY(-1px);
      filter: brightness(1.08);
    }

    .danger {
      background: linear-gradient(135deg, #ef4444, #dc2626);
    }

    .sub {
      background: linear-gradient(135deg, #64748b, #475569);
    }

    .chat-area {
      flex: 1;
      padding: 18px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-height: 500px;
      max-height: 580px;
    }

    .post {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 14px;
      border-radius: 16px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
      animation: fadeIn 0.25s ease;
    }

    .avatar {
      width: 48px;
      height: 48px;
      min-width: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.12);
    }

    .post-content {
      flex: 1;
    }

    .post-header {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-bottom: 6px;
    }

    .name {
      font-weight: bold;
      font-size: 15px;
      color: #ffffff;
    }

    .role {
      font-size: 12px;
      color: #93c5fd;
      background: rgba(59,130,246,0.15);
      padding: 3px 8px;
      border-radius: 999px;
    }

    .time {
      margin-left: auto;
      font-size: 12px;
      color: #94a3b8;
    }

    .message {
      font-size: 15px;
      line-height: 1.75;
      color: #f1f5f9;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .composer {
      padding: 16px;
      border-top: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .composer-top {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    select, input, textarea {
      width: 100%;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(15,23,42,0.85);
      color: #fff;
      padding: 10px 12px;
      outline: none;
    }

    textarea {
      resize: vertical;
      min-height: 100px;
    }

    .composer-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .right-panel-content {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .status-box, .topic-box, .memory-box {
      padding: 14px;
      border-radius: 14px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
    }

    .status-line {
      margin: 8px 0;
      font-size: 14px;
      color: #e2e8f0;
    }

    .topic-tag {
      display: inline-block;
      margin: 6px 6px 0 0;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(16,185,129,0.18);
      color: #bbf7d0;
      font-size: 12px;
    }

    .memory-item {
      font-size: 13px;
      padding: 8px 10px;
      margin-top: 8px;
      border-radius: 10px;
      background: rgba(255,255,255,0.04);
      color: #dbeafe;
      line-height: 1.6;
    }

    .footer-note {
      text-align: center;
      color: #94a3b8;
      font-size: 12px;
      padding: 16px;
    }

    .online-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 8px;
      background: #22c55e;
      box-shadow: 0 0 8px #22c55e;
    }

    @keyframes fadeIn {
      from {
        transform: translateY(8px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    @media (max-width: 1100px) {
      .container {
        grid-template-columns: 1fr;
      }
      .main-board {
        min-height: auto;
      }
      .chat-area {
        max-height: 500px;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>AIキャラ会話掲示板 - Virtual Guild Board</h1>
    <p>APIなし / ローカル動作 / AIキャラ同士が自動で会話するファンタジー掲示板</p>
  </header>

  <div class="container">
    <!-- 左 -->
    <aside class="panel">
      <div class="panel-title">キャラクター一覧</div>
      <div class="character-list" id="characterList"></div>
    </aside>

    <!-- 中央 -->
    <main class="panel main-board">
      <div class="panel-title">ギルド広場</div>

      <div class="toolbar">
        <button id="toggleAutoBtn">自動会話ON/OFF</button>
        <button id="manualTalkBtn" class="sub">AI会話を1回進める</button>
        <button id="eventBtn" class="sub">イベント発生</button>
        <button id="saveBtn" class="sub">保存</button>
        <button id="clearBtn" class="danger">会話をリセット</button>
      </div>

      <div class="chat-area" id="chatArea"></div>

      <div class="composer">
        <div class="composer-top">
          <select id="userName">
            <option value="旅人">旅人</option>
            <option value="冒険者">冒険者</option>
            <option value="見習い魔法使い">見習い魔法使い</option>
            <option value="傭兵">傭兵</option>
            <option value="吟遊詩人">吟遊詩人</option>
          </select>
        </div>
        <textarea id="userMessage" placeholder="メッセージを書いてください。例：今日は魔王城へ向かうべきかな？"></textarea>
        <div class="composer-actions">
          <button id="sendBtn">投稿する</button>
          <button id="userTriggerBtn" class="sub">投稿後にAI反応</button>
        </div>
      </div>
    </main>

    <!-- 右 -->
    <aside class="panel">
      <div class="panel-title">ワールド情報</div>
      <div class="right-panel-content">
        <div class="status-box">
          <div><span class="online-dot"></span>状態</div>
          <div class="status-line">自動会話: <span id="autoStatus">停止中</span></div>
          <div class="status-line">現在の話題: <span id="currentTopic">雑談</span></div>
          <div class="status-line">投稿数: <span id="postCount">0</span></div>
        </div>

        <div class="topic-box">
          <div><strong>話題タグ</strong></div>
          <div id="topicTags"></div>
        </div>

        <div class="memory-box">
          <div><strong>最近の話題メモ</strong></div>
          <div id="memoryList"></div>
        </div>
      </div>
    </aside>
  </div>

  <div class="footer-note">
    HTML/CSS/JavaScriptのみで動作します。データはブラウザに保存されます。
  </div>

  <script>
    const characters = [
      {
        id: "hero",
        name: "セイン",
        role: "勇者",
        emoji: "⚔️",
        personality: "まっすぐで熱血。前向き。",
        desc: "世界を旅する若き勇者。困っている人を見ると放っておけない。",
        styles: {
          start: ["よし、", "さて、", "うーん、", "そうだな、"],
          end: ["だ！", "だな。", "じゃないか？", "行くしかない！"],
          flavor: ["魔王", "冒険", "仲間", "ダンジョン", "伝説"]
        }
      },
      {
        id: "mage",
        name: "リリィ",
        role: "魔法使い",
        emoji: "🔮",
        personality: "冷静で知的。少し毒舌。",
        desc: "古代魔法を研究している少女。理屈で考えるタイプ。",
        styles: {
          start: ["理論的には、", "その話なら、", "少し気になるのは、", "魔法的に言えば、"],
          end: ["ですね。", "だと思います。", "かもしれません。", "要検証です。"],
          flavor: ["魔法", "精霊", "古代遺跡", "呪文", "研究"]
        }
      },
      {
        id: "knight",
        name: "ガルド",
        role: "騎士",
        emoji: "🛡️",
        personality: "真面目で忠誠心が強い。",
        desc: "王国騎士団に所属する重騎士。秩序と責任を重んじる。",
        styles: {
          start: ["王国のためにも、", "騎士としては、", "規律を守るなら、", "任務として考えると、"],
          end: ["異論はない。", "それが正しい。", "油断は禁物だ。", "準備が必要だ。"],
          flavor: ["王国", "任務", "警戒", "防衛", "規律"]
        }
      },
      {
        id: "merchant",
        name: "ミーナ",
        role: "商人",
        emoji: "💰",
        personality: "明るく現実的。商売人。",
        desc: "各地を巡る行商人。儲け話と珍品に目がない。",
        styles: {
          start: ["それより、", "商売の話をすると、", "利益で考えると、", "ふふっ、"],
          end: ["儲かりそうね。", "悪くないわ。", "値段次第かな。", "面白い商機だわ。"],
          flavor: ["市場", "金貨", "商品", "取引", "珍品"]
        }
      },
      {
        id: "assassin",
        name: "クロウ",
        role: "暗殺者",
        emoji: "🗡️",
        personality: "寡黙でクール。影のある口調。",
        desc: "裏社会で名を知られる暗殺者。静かに本質を突く。",
        styles: {
          start: ["……", "無駄口は嫌いだが、", "影から見る限り、", "静かに言うが、"],
          end: ["それだけだ。", "油断するな。", "匂うな。", "嫌な予感がする。"],
          flavor: ["影", "敵", "罠", "裏路地", "追跡"]
        }
      }
    ];

    const defaultTopics = [
      "魔王討伐",
      "古代遺跡",
      "王国の依頼",
      "森の異変",
      "ギルドの噂",
      "珍しいアイテム",
      "危険なダンジョン",
      "旅の準備",
      "精霊の目撃情報",
      "闇市場"
    ];

    const eventTopics = [
      "城下町で祭りが始まった",
      "北の洞窟にドラゴン出現",
      "謎の商人が秘宝を売っている",
      "王国から緊急依頼が届いた",
      "森で精霊の暴走が起きている",
      "魔王軍の斥候が発見された",
      "夜の港で密輸の噂が広がっている"
    ];

    const generalPhrases = [
      "最近の空気、少し変わった気がする",
      "今日は何か起きそうな予感がある",
      "仲間がいると旅は違う",
      "静かな日ほど何かが起きるものだ",
      "準備を怠ると危ない",
      "噂話にも案外ヒントがある",
      "この町には秘密が多い",
      "力だけでは解決しないこともある",
      "運だけでは生き残れない",
      "今のうちに備えておくべきだ"
    ];

    const replyRules = [
      {
        keywords: ["魔王", "討伐", "倒す"],
        responses: {
          hero: ["魔王を倒せば世界は少しは平和になるはずだ！", "ついに決戦の時かもしれないな！"],
          mage: ["魔王クラスの相手なら準備不足は危険です。", "封印術式も調べておくべきですね。"],
          knight: ["討伐任務なら戦力の整理が必要だ。", "王国への報告も忘れるな。"],
          merchant: ["討伐の前に装備をそろえないと損するわよ。", "その話、特需が出そうね。"],
          assassin: ["魔王より先に側近を潰すべきだ。", "正面から行くのは愚策かもしれない。"]
        }
      },
      {
        keywords: ["金", "お金", "金貨", "報酬"],
        responses: {
          hero: ["報酬も大事だけど、困っている人を助けたいな。", "金だけじゃなく名誉も欲しいところだ！"],
          mage: ["研究費は必要ですからね。", "魔導書は高いので報酬は重要です。"],
          knight: ["報酬より任務達成が優先だ。", "とはいえ補給費は無視できない。"],
          merchant: ["その話なら私の出番ね。", "利益率の高い案件なら乗るわ。"],
          assassin: ["金額次第で動く者も多い。", "報酬の匂いには裏がある。"]
        }
      },
      {
        keywords: ["遺跡", "古代", "秘宝"],
        responses: {
          hero: ["秘宝か……冒険心がくすぐられるな！", "遺跡には夢があるよな！"],
          mage: ["古代遺跡は知識の宝庫です。", "その話、かなり興味があります。"],
          knight: ["遺跡調査には護衛が必要だ。", "罠の警戒を優先しよう。"],
          merchant: ["秘宝は高く売れる可能性があるわね。", "希少品なら市場が動くわ。"],
          assassin: ["遺跡には死人の匂いがする。", "宝より罠を疑え。"]
        }
      },
      {
        keywords: ["森", "精霊", "自然"],
        responses: {
          hero: ["森の異変なら放っておけないな。", "精霊と仲良くできたら心強いな！"],
          mage: ["精霊系の異常反応かもしれません。", "自然魔力の乱れを疑います。"],
          knight: ["森は視界が悪い。隊列を乱すな。", "索敵役が必要だな。"],
          merchant: ["森の特産品が取れなくなるのは困るわ。", "薬草の値段も上がりそう。"],
          assassin: ["森では音と気配に気をつけろ。", "姿の見えない敵ほど厄介だ。"]
        }
      },
      {
        keywords: ["こんにちは", "初めまして", "はじめまして"],
        responses: {
          hero: ["ようこそ！一緒に冒険の話をしよう！", "よろしくな！"],
          mage: ["ようこそ。この掲示板は案外にぎやかですよ。", "初めまして。興味深いですね。"],
          knight: ["歓迎しよう。礼節を守ってくれれば問題ない。", "ここでは情報共有が重要だ。"],
          merchant: ["いらっしゃい。いい情報があれば教えてね。", "歓迎するわ、旅人さん。"],
          assassin: ["……新顔か。好きにするといい。", "静かにしていれば問題ない。"]
        }
      }
    ];

    let posts = [];
    let memoryTopics = [];
    let currentTopic = "雑談";
    let autoTalk = false;
    let autoTimer = null;

    const characterList = document.getElementById("characterList");
    const chatArea = document.getElementById("chatArea");
    const currentTopicEl = document.getElementById("currentTopic");
    const postCountEl = document.getElementById("postCount");
    const autoStatusEl = document.getElementById("autoStatus");
    const topicTagsEl = document.getElementById("topicTags");
    const memoryListEl = document.getElementById("memoryList");

    function renderCharacters() {
      characterList.innerHTML = "";
      characters.forEach(char => {
        const card = document.createElement("div");
        card.className = "character-card";
        card.innerHTML = `
          <h3>${char.emoji} ${char.name}</h3>
          <div class="character-meta">${char.role} / ${char.personality}</div>
          <div class="character-desc">${char.desc}</div>
        `;
        characterList.appendChild(card);
      });
    }

    function getTimeString() {
      const now = new Date();
      return now.toLocaleTimeString("ja-JP", {
        hour: "2-digit",
        minute: "2-digit"
      });
    }

    function addPost(name, role, emoji, message, isUser = false) {
      const post = {
        id: Date.now() + Math.random(),
        name,
        role,
        emoji,
        message,
        time: getTimeString(),
        isUser
      };
      posts.push(post);
      renderPosts();
      saveData();
    }

    function renderPosts() {
      chatArea.innerHTML = "";
      posts.forEach(post => {
        const el = document.createElement("div");
        el.className = "post";
        el.innerHTML = `
          <div class="avatar">${post.emoji}</div>
          <div class="post-content">
            <div class="post-header">
              <div class="name">${escapeHtml(post.name)}</div>
              <div class="role">${escapeHtml(post.role)}</div>
              <div class="time">${post.time}</div>
            </div>
            <div class="message">${escapeHtml(post.message)}</div>
          </div>
        `;
        chatArea.appendChild(el);
      });
      chatArea.scrollTop = chatArea.scrollHeight;
      postCountEl.textContent = posts.length;
    }

    function escapeHtml(text) {
      return text
        .replaceAll("&", "&amp;")
        .replaceAll("<", "&lt;")
        .replaceAll(">", "&gt;")
        .replaceAll('"', "&quot;")
        .replaceAll("'", "&#039;");
    }

    function randomItem(arr) {
      return arr[Math.floor(Math.random() * arr.length)];
    }

    function pickCharacter(excludeId = null) {
      const pool = excludeId ? characters.filter(c => c.id !== excludeId) : characters;
      return randomItem(pool);
    }

    function updateTopic(newTopic) {
      currentTopic = newTopic;
      currentTopicEl.textContent = currentTopic;

      memoryTopics.unshift(newTopic);
      memoryTopics = [...new Set(memoryTopics)].slice(0, 8);

      renderTopics();
      renderMemory();
      saveData();
    }

    function renderTopics() {
      topicTagsEl.innerHTML = "";
      const mixed = [currentTopic, ...defaultTopics.slice(0, 6)];
      [...new Set(mixed)].forEach(topic => {
        const tag = document.createElement("span");
        tag.className = "topic-tag";
        tag.textContent = topic;
        topicTagsEl.appendChild(tag);
      });
    }

    function renderMemory() {
      memoryListEl.innerHTML = "";
      if (memoryTopics.length === 0) {
        memoryListEl.innerHTML = `<div class="memory-item">まだ話題メモはありません。</div>`;
        return;
      }
      memoryTopics.forEach(topic => {
        const item = document.createElement("div");
        item.className = "memory-item";
        item.textContent = topic;
        memoryListEl.appendChild(item);
      });
    }

    function buildCharacterSentence(character, topic = currentTopic) {
      const style = character.styles;
      const start = randomItem(style.start);
      const end = randomItem(style.end);
      const flavor = randomItem(style.flavor);
      const phrase = randomItem(generalPhrases);

      const patterns = [
        `${start}${topic}について言えば、${flavor}が鍵になりそう${end}`,
        `${start}${phrase}。特に${flavor}が絡むなら注意${end}`,
        `${start}${topic}の件は気になる。${flavor}の情報を集めたい${end}`,
        `${start}${flavor}を見直した方がいい。${topic}にも繋がる${end}`,
        `${start}${phrase}。${topic}と${flavor}は無関係じゃない${end}`
      ];

      return randomItem(patterns);
    }

    function getRuleBasedReply(inputText, character) {
      const text = inputText.toLowerCase();

      for (const rule of replyRules) {
        const matched = rule.keywords.some(keyword => text.includes(keyword.toLowerCase()));
        if (matched) {
          const responses = rule.responses[character.id];
          if (responses && responses.length > 0) {
            return randomItem(responses);
          }
        }
      }

      return null;
    }

    function extractTopicFromText(text) {
      const found = defaultTopics.find(topic => text.includes(topic.replace("の", ""))) ||
                    eventTopics.find(topic => text.includes(topic.slice(0, 4)));

      if (found) return found;

      if (text.includes("魔王")) return "魔王討伐";
      if (text.includes("遺跡")) return "古代遺跡";
      if (text.includes("森")) return "森の異変";
      if (text.includes("金") || text.includes("報酬")) return "報酬と金貨";
      if (text.includes("王国")) return "王国の依頼";
      if (text.includes("精霊")) return "精霊の目撃情報";
      if (text.includes("ダンジョン")) return "危険なダンジョン";

      return null;
    }

    function aiTalkOnce(previousSpeakerId = null) {
      const speaker = pickCharacter(previousSpeakerId);
      const msg = buildCharacterSentence(speaker, currentTopic);
      addPost(speaker.name, speaker.role, speaker.emoji, msg);
    }

    function aiReplyToText(text, count = 2) {
      const detectedTopic = extractTopicFromText(text);
      if (detectedTopic) updateTopic(detectedTopic);

      let usedIds = [];
      for (let i = 0; i < count; i++) {
        const pool = characters.filter(c => !usedIds.includes(c.id));
        const speaker = randomItem(pool);
        usedIds.push(speaker.id);

        let reply = getRuleBasedReply(text, speaker);
        if (!reply) {
          reply = buildCharacterSentence(speaker, currentTopic);
        }

        addPost(speaker.name, speaker.role, speaker.emoji, reply);
      }
    }

    function generateEvent() {
      const eventText = randomItem(eventTopics);
      updateTopic(eventText);

      addPost("ワールド通知", "システム", "📢", eventText);

      setTimeout(() => {
        aiReplyToText(eventText, 3);
      }, 300);
    }

    function toggleAutoTalk() {
      autoTalk = !autoTalk;
      autoStatusEl.textContent = autoTalk ? "稼働中" : "停止中";

      if (autoTalk) {
        autoTimer = setInterval(() => {
          const count = Math.random() < 0.4 ? 2 : 1;
          let prevId = null;
          for (let i = 0; i < count; i++) {
            const speaker = pickCharacter(prevId);
            prevId = speaker.id;
            const msg = buildCharacterSentence(speaker, currentTopic);
            addPost(speaker.name, speaker.role, speaker.emoji, msg);
          }

          if (Math.random() < 0.28) {
            updateTopic(randomItem(defaultTopics));
          }
        }, 4500);
      } else {
        clearInterval(autoTimer);
      }
      saveData();
    }

    function saveData() {
      const data = {
        posts,
        memoryTopics,
        currentTopic,
        autoTalk
      };
      localStorage.setItem("virtualGuildBoardData", JSON.stringify(data));
    }

    function loadData() {
      const raw = localStorage.getItem("virtualGuildBoardData");
      if (!raw) return false;

      try {
        const data = JSON.parse(raw);
        posts = data.posts || [];
        memoryTopics = data.memoryTopics || [];
        currentTopic = data.currentTopic || "雑談";
        autoTalk = false;
        currentTopicEl.textContent = currentTopic;
        renderPosts();
        renderTopics();
        renderMemory();
        autoStatusEl.textContent = "停止中";
        return true;
      } catch (e) {
        console.error("読み込み失敗", e);
        return false;
      }
    }

    function clearBoard() {
      if (!confirm("会話ログをリセットしますか？")) return;
      posts = [];
      memoryTopics = [];
      currentTopic = "雑談";
      currentTopicEl.textContent = currentTopic;
      renderPosts();
      renderTopics();
      renderMemory();
      saveData();
      addWelcomePosts();
    }

    function addWelcomePosts() {
      addPost("ワールド通知", "システム", "🌍", "Virtual Guild Boardへようこそ。ここではAIキャラたちが自由に会話します。");
      addPost("セイン", "勇者", "⚔️", "よし、今日も冒険の情報を集めよう！");
      addPost("リリィ", "魔法使い", "🔮", "掲示板の反応を見る限り、今日は賑やかになりそうですね。");
      addPost("ミーナ", "商人", "💰", "儲け話でも危険な依頼でも、情報は早い者勝ちよ。");
    }

    document.getElementById("sendBtn").addEventListener("click", () => {
      const userName = document.getElementById("userName").value.trim();
      const userMessage = document.getElementById("userMessage").value.trim();

      if (!userMessage) {
        alert("メッセージを入力してください。");
        return;
      }

      addPost(userName, "プレイヤー", "🧑", userMessage, true);

      const maybeTopic = extractTopicFromText(userMessage);
      if (maybeTopic) {
        updateTopic(maybeTopic);
      }

      document.getElementById("userMessage").value = "";
    });

    document.getElementById("userTriggerBtn").addEventListener("click", () => {
      const userName = document.getElementById("userName").value.trim();
      const userMessage = document.getElementById("userMessage").value.trim();

      if (!userMessage) {
        alert("メッセージを入力してください。");
        return;
      }

      addPost(userName, "プレイヤー", "🧑", userMessage, true);
      aiReplyToText(userMessage, 3);
      document.getElementById("userMessage").value = "";
    });

    document.getElementById("manualTalkBtn").addEventListener("click", () => {
      aiTalkOnce();
    });

    document.getElementById("eventBtn").addEventListener("click", () => {
      generateEvent();
    });

    document.getElementById("toggleAutoBtn").addEventListener("click", () => {
      toggleAutoTalk();
    });

    document.getElementById("saveBtn").addEventListener("click", () => {
      saveData();
      alert("保存しました。");
    });

    document.getElementById("clearBtn").addEventListener("click", () => {
      clearBoard();
    });

    renderCharacters();

    const loaded = loadData();
    if (!loaded || posts.length === 0) {
      renderTopics();
      renderMemory();
      addWelcomePosts();
      updateTopic("ギルドの噂");
    } else {
      renderTopics();
      renderMemory();
    }
  </script>
</body>
</html>