記憶のアップロード、ダウンロード方法

1. 現在の科学でできること

脳活動の記録
fMRI（機能的MRI）、EEG（脳波）、ECoG（皮質脳波）などを用いて、記憶に関連する脳の活動パターンを部分的に観測できます。
記憶の改変実験（動物レベル）
光遺伝学（オプトジェネティクス）を使って、マウスの「恐怖記憶」を消去したり、別のニューロン群に記憶を「転写」する実験が報告されています。
神経インターフェース
Elon MuskのNeuralinkやOpenBCIなど、脳とコンピュータを接続して情報をやり取りする試みが進んでいます。まだ「読み出し」や「刺激」レベルで、完全な記憶の保存・転送には程遠いです。

2. 理論上考えられている方法（SF的な構想）

全脳エミュレーション（Whole Brain Emulation）
- 脳をナノレベルでスキャン（例えば凍結切片や分子レベルの走査）。
- ニューロンとシナプスの接続をすべてデジタル化。
- コンピュータ上で「シミュレーション」として再現。
  → これにより「記憶のアップロード」が可能になるとする考え方。
ニューロン・マッピングと同期化
- 人間の脳のニューロン活動をリアルタイムで記録し、人工的な神経回路（シリコンや量子コンピュータ上）に「コピー」。
- インターフェースを通じて「脳」と「デジタル記憶」を同期。
- 理論的には「記憶ダウンロード（人工脳から人間脳への書き込み）」も可能かもしれない。
分子レベルの記憶保存
- DNAやナノマシンに記憶パターンを保存する研究構想。
- ただし現状は「遺伝子にデータを書き込む」程度で、記憶そのものの転送には至っていません。

3. 哲学的・倫理的な限界

コピーは「自分」か？
記憶をアップロードしたデジタル存在が「自分」なのか、それとも「別のコピー」なのか。
死の意味の変容
記憶や人格が保存できるなら「死」は何を意味するのか。
倫理問題
誰がそのデータにアクセスできるのか、人格を「編集」することは許されるのか。

📌 結論：
「記憶のアップロード／ダウンロード」を現実に行う方法は、まだ存在しません。
現在できるのは「脳活動の観測」や「部分的な記憶の操作」にとどまり、完全な「自己の保存・転送」は技術的にも哲学的にも解決できていない課題です。

X風サイト.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>X-like UI – Polished (Left-aligned)</title>
<style>
/* ===== Design Tokens ===== */
:root{
  /* colors */
  --bg: #0b0d10;
  --surface: #0e1116;
  --panel: rgba(16,18,24,.75);
  --card: #0f1319;
  --line: #1c2230;          /* single-pixel separators */
  --text: #e7ecf3;
  --muted: #9aa7ba;
  --accent: #1da1f2;
  --accent-2: #7dd3fc;
  --accent-3: #60a5fa;

  /* radius & shadow */
  --r: 14px;
  --shadow-sm: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px rgba(0,0,0,.35);
  --shadow-card: 0 10px 30px rgba(0,0,0,.25);

  /* layout */
  --col-left: 84px;
  --col-center-min: 360px;
  --col-center-max: 720px;
  --col-right-min: 280px;
  --col-right-max: 420px;

  /* NEW: tighter left gutter for center column */
  --gutter-x: 10px;

  /* motion */
  --e1: cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(29,161,242,.15), transparent 40%),
    radial-gradient(800px 500px at 110% -10%, rgba(96,165,250,.12), transparent 40%),
    var(--bg);
  color:var(--text);
  font:14px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial;
}

/* focus ring */
:where(a,button,[role="button"],input,textarea,.sb-btn,.ic-btn,.plus,.btn,.btn-ghost,.btn-primary){outline:none}
:where(a,button,[role="button"],input,textarea,.sb-btn,.ic-btn,.plus,.btn,.btn-ghost,.btn-primary):focus-visible{
  box-shadow:0 0 0 3px rgba(29,161,242,.35);
  border-radius:10px;
}

/* ===== Layout ===== */
.app{
  display:grid; gap:0;
  grid-template-columns: var(--col-left) minmax(var(--col-center-min),var(--col-center-max)) minmax(var(--col-right-min),var(--col-right-max));
  height:100%;
  max-width:1280px;
  margin:0 auto;
}
.sidebar{
  position:sticky; top:0; height:100vh;
  backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(16,18,24,.7), rgba(16,18,24,.3));
  /* NOTE: borders are drawn via ::after to avoid subpixel drift */
  padding:10px 8px; display:flex; flex-direction:column; gap:6px;
}
.sb-btn{
  border-radius:999px; padding:12px 14px; cursor:pointer;
  display:flex; align-items:center; gap:14px; transition:background .2s var(--e1), transform .12s var(--e1);
}
.sb-btn:hover{background:rgba(255,255,255,.04)}
.sb-btn:active{transform:translateY(1px)}
.sb-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:999px}
.sb-btn .label{font-weight:700;letter-spacing:.02em}

.compose-fab{
  position:fixed; left:18px; bottom:18px; z-index:50; cursor:pointer;
  border:none; color:#fff; font-weight:800; letter-spacing:.02em;
  border-radius:999px; padding:12px 18px;
  background:linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow:0 10px 30px rgba(29,161,242,.35);
  transition: transform .12s var(--e1), filter .2s var(--e1);
}
.compose-fab:hover{filter:brightness(1.05)}
.compose-fab:active{transform:translateY(1px)}
.you-chip{
  position:fixed; left:18px; bottom:84px; width:48px;height:48px;border-radius:999px;
  display:grid;place-items:center;font-weight:900; background:conic-gradient(from 180deg at 50% 50%, #0f629e, #0c3c68 70%, #0f629e);
  color:#fff; border:1px solid rgba(255,255,255,.08);
}

.main{
  position:relative; /* for ::after separator */
  min-height:100vh; background:rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}
.rightcol{
  padding:14px; position:sticky; top:0; height:100vh; overflow:auto;
}
.searchbar{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
}

/* ===== Single-pixel separators (no drift) ===== */
.sidebar::after,
.main::after{
  content:"";
  position:absolute; top:0; bottom:0; width:1px; background:var(--line);
  pointer-events:none; z-index:10;
}
.sidebar::after{ right:0; }  /* Sidebar ↔ Main */
.main::after{ right:0; }     /* Main ↔ Right column */

/* ===== Header Tabs ===== */
.header-title{padding:10px var(--gutter-x); font-size:20px; font-weight:900; border-bottom:1px solid var(--line)}
.tabs{
  position:sticky; top:0; z-index:6;
  display:flex; gap:24px; padding:0 var(--gutter-x);        /* <<< tightened left padding */
  background:linear-gradient(180deg, rgba(14,17,22,.8), rgba(14,17,22,.55));
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);
}
.tab{
  padding:16px 6px; cursor:pointer; color:var(--muted); font-weight:800; border-bottom:3px solid transparent;
  transition:color .2s var(--e1), border-color .2s var(--e1);
}
.tab.active{color:var(--text); border-color:var(--accent)}

/* ===== Composer ===== */
.composer{
  padding:14px var(--gutter-x);                               /* <<< tightened */
  border-bottom:1px solid var(--line); display:flex; gap:12px;
  background:linear-gradient(180deg, rgba(17,22,29,.8), rgba(17,22,29,.4));
}
.avatar{
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center; font-weight:900; letter-spacing:.02em;
  color:#fff; border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(120% 120% at 20% 15%, #1e81c5, #0f2a43 70%);
}
.composer-box{flex:1}
.composer textarea{
  width:100%; min-height:76px; resize:vertical; background:transparent; border:none; color:var(--text);
  outline:none; font-size:18px; caret-color:var(--accent);
}
.reply-scope{color:var(--accent);font-weight:700;font-size:13px}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px}
.icons{display:flex; gap:8px}
.ic-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;cursor:pointer;transition:background .2s}
.ic-btn:hover{background:rgba(255,255,255,.06)}
.post-btn{
  border:none; color:#0b1220; font-weight:900; letter-spacing:.02em;
  padding:9px 18px; border-radius:999px; cursor:not-allowed;
  background:linear-gradient(135deg, #6b7280 0%, #9aa7ba 100%);
  filter:saturate(.7); opacity:.7; transition:filter .2s, transform .12s;
}
.post-btn.enabled{
  cursor:pointer; opacity:1; color:#fff; filter:none;
  background:linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow:0 12px 30px rgba(29,161,242,.3);
}
.post-btn.enabled:hover{filter:brightness(1.05)}
.post-btn.enabled:active{transform:translateY(1px)}

/* ===== Cards ===== */
.card{
  border-bottom:1px solid var(--line); display:flex; gap:12px;
  padding:14px var(--gutter-x);                                 /* <<< tightened */
  background:linear-gradient(180deg, rgba(16,20,27,.5), rgba(16,20,27,.25));
}
.meta{display:flex; gap:6px; color:var(--muted)}
.name{font-weight:900}
.handle{color:var(--muted)}
.hash a{color:var(--accent)}
.post-img{
  border-radius:18px; border:1px solid rgba(255,255,255,.06); width:100%; margin-top:10px;
  box-shadow:var(--shadow-card)
}
.actions{display:flex; gap:26px; margin-top:8px; color:var(--muted)}
.action{display:flex; gap:6px; align-items:center; cursor:pointer; transition:color .15s}
.action:hover{color:var(--accent)}

/* ===== Right column ===== */
.rightcol .rc-card{
  background:linear-gradient(180deg, rgba(17,22,29,.65), rgba(17,22,29,.35));
  border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden; margin-top:12px; box-shadow:var(--shadow-sm)
}
.rc-title{font-weight:900; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06)}
.rc-item{padding:12px 16px; border-top:1px solid rgba(255,255,255,.04)}
.chip{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08);
  padding:4px 10px; border-radius:999px; color:var(--muted); font-size:12px}

/* ===== Subtabs / Explore ===== */
.subtabs{display:flex; gap:18px; padding:10px var(--gutter-x); border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}  /* <<< tightened */
.subtab{padding:10px 2px; color:var(--muted); font-weight:800; cursor:pointer; border-bottom:3px solid transparent}
.subtab.active{color:var(--text); border-color:var(--accent)}

/* ===== Empties / Profile / Lists ===== */
.empty{display:grid; place-items:center; padding:72px var(--gutter-x); color:var(--muted); text-align:center}
.empty h2{margin:0 0 6px; color:var(--text)}
.cover{height:170px; background:
  radial-gradient(70% 120% at 10% 0%, rgba(29,161,242,.25), transparent 40%),
  radial-gradient(60% 120% at 100% 0%, rgba(96,165,250,.2), transparent 40%),
  linear-gradient(180deg,#121722,#0b0f17)}
.prof-wrap{padding:0 var(--gutter-x) 16px}
.prof-row{display:flex; justify-content:space-between; align-items:end; margin-top:-36px}
.pfp{width:96px;height:96px;border-radius:999px;border:4px solid var(--surface);background:radial-gradient(120% 120% at 20% 15%, #1e81c5, #0f2a43 70%);display:grid;place-items:center;color:#fff;font-weight:900}
.btn{background:transparent; border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:999px; padding:8px 14px; cursor:pointer; transition:background .2s}
.btn:hover{background:rgba(255,255,255,.05)}
.alert{background:rgba(18,42,24,.65); border:1px solid #165c36; color:#a9f2b7; border-radius:14px; padding:12px 14px; margin:12px var(--gutter-x); display:flex; gap:10px; align-items:center}
.check{width:18px;height:18px;border-radius:4px;border:2px solid #a9f2b7;display:grid;place-items:center}

.list-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px}
.list-pill{width:44px;height:44px;border-radius:12px; background:linear-gradient(135deg,#374151,#1f2937)}
.plus{width:28px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center}

/* ===== Grok ===== */
.grok{display:grid; place-items:center; padding:44px var(--gutter-x)}
.grok .logo{font-size:28px; font-weight:1000; display:flex; align-items:center; gap:10px}
.grok .input{margin-top:18px; display:flex; gap:8px; width:min(680px,90vw)}
.grok .input input{flex:1; padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:#0c1118; color:#fff; transition:border .2s}
.grok .input input:focus{border-color:rgba(125,211,252,.6)}
.grok .input button{padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(135deg,#10151f,#0e131b); color:#fff}
.grok .tools{display:flex; gap:8px; margin-top:12px}

/* ===== E2EE Page ===== */
.e2ee{padding:56px var(--gutter-x); text-align:center}
.e2ee h1{font-size:26px; margin:0 0 12px}
.bullet{display:flex; gap:10px; align-items:flex-start; justify-content:center; color:#cfd9ea}
.e2ee .cta{display:flex; gap:12px; justify-content:center; margin-top:18px}
.btn-ghost{border:1px solid rgba(255,255,255,.18); background:transparent; color:#fff; padding:10px 14px; border-radius:999px}
.btn-primary{border:1px solid rgba(29,161,242,.55); background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#001e33; font-weight:900; padding:10px 16px; border-radius:999px}

/* ===== Modal ===== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(4,8,12,.6); display:none; align-items:center; justify-content:center; z-index:100;
  animation:fadeIn .2s var(--e1);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  width:min(640px,92vw); background:linear-gradient(180deg, rgba(14,18,24,.95), rgba(14,18,24,.85));
  border:1px solid rgba(255,255,255,.12); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card)
}
.modal .top{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.06)}
.close-x{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.close-x:hover{background:rgba(255,255,255,.06)}
.small{font-size:12px;color:var(--muted)}

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(20px);
  bottom:20px; background:rgba(18,22,28,.92); border:1px solid rgba(255,255,255,.12);
  padding:10px 14px; border-radius:999px; display:none; gap:10px; align-items:center; z-index:120;
  box-shadow:var(--shadow-card); animation:slideUp .25s var(--e1);
}
.toast .view{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:999px}
@keyframes slideUp{from{opacity:0; transform:translateX(-50%) translateY(40px)} to{opacity:1; transform:translateX(-50%) translateY(0)}}

/* ===== Utilities ===== */
.hide{display:none !important}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .app{grid-template-columns: 72px 1fr}
  .rightcol{display:none}
}
@media (max-width:520px){
  .sb-btn .label{display:none}
  .sidebar{align-items:center}
}
</style>
</head>
<body>
<div class="app">
  <!-- Sidebar -->
  <aside class="sidebar" aria-label="Sidebar">
    <div class="sb-btn" data-nav="home"><div class="sb-icon">🏠</div><div class="label">Home</div></div>
    <div class="sb-btn" data-nav="explore"><div class="sb-icon">🔎</div><div class="label">Explore</div></div>
    <div class="sb-btn" data-nav="notifications"><div class="sb-icon">🔔</div><div class="label">Notifications</div></div>
    <div class="sb-btn" data-nav="messages"><div class="sb-icon">✉️</div><div class="label">Messages</div></div>
    <div class="sb-btn" data-nav="grok"><div class="sb-icon">⚡</div><div class="label">Grok</div></div>
    <div class="sb-btn" data-nav="lists"><div class="sb-icon">🗂️</div><div class="label">Lists</div></div>
    <div class="sb-btn" data-nav="profile"><div class="sb-icon">👤</div><div class="label">Profile</div></div>
    <div class="sb-btn" data-nav="encrypted"><div class="sb-icon">🔒</div><div class="label">Chat</div></div>
  </aside>

  <!-- Main -->
  <main class="main" id="main">
    <!-- Home -->
    <section id="view-home" role="region" aria-label="Home timeline">
      <div class="tabs">
        <div class="tab active" data-home-tab="foryou">For you</div>
        <div class="tab" data-home-tab="following">Following</div>
      </div>

      <div class="composer">
        <div class="avatar">裕平</div>
        <div class="composer-box">
          <div class="reply-scope">Everyone can reply</div>
          <textarea id="compose-input" placeholder="What’s happening?"></textarea>
          <div class="row">
            <div class="icons" aria-label="Composer actions">
              <div class="ic-btn" title="Media">🖼️</div>
              <div class="ic-btn" title="GIF">🌀</div>
              <div class="ic-btn" title="Poll">📊</div>
              <div class="ic-btn" title="Emoji">😊</div>
              <div class="ic-btn" title="Schedule">🗓️</div>
              <div class="ic-btn" title="Location">📍</div>
            </div>
            <button id="post-btn" class="post-btn" disabled>Post</button>
          </div>
        </div>
      </div>

      <article class="card">
        <div class="avatar">H</div>
        <div style="flex:1">
          <div class="meta"><span class="name">HANA</span><span class="handle">@HANA__BRAVE · 9h</span></div>
          <div>🎂 <span class="hash"><a href="#">#HAPPYJISOODAY</a></span><br/>Happy Birthday JISOO 🤍<br/><span class="hash"><a href="#">#HANA</a> <a href="#">#JISOO</a></span></div>
          <img class="post-img" alt="sample" src="https://picsum.photos/seed/jisoo/720/380" />
          <div class="actions">
            <div class="action">💬 <span>24</span></div>
            <div class="action">🔁 <span>10</span></div>
            <div class="action">❤️ <span>128</span></div>
            <div class="action">↗️</div>
          </div>
        </div>
      </article>

      <article class="card">
        <div class="avatar">X</div>
        <div style="flex:1">
          <div class="meta"><span class="name">MTV VMA · LIVE</span><span class="handle"> · now</span></div>
          <div class="hash"><a href="#">#VMAs</a></div>
          <img class="post-img" alt="vmas" src="https://picsum.photos/seed/vma/720/300" />
          <div class="actions">
            <div class="action">💬 <span>8</span></div>
            <div class="action">🔁 <span>3</span></div>
            <div class="action">❤️ <span>42</span></div>
            <div class="action">↗️</div>
          </div>
        </div>
      </article>

      <div id="feed-anchor"></div>
    </section>

    <!-- Explore -->
    <section id="view-explore" class="hide" role="region" aria-label="Explore">
      <div class="header-title">
        <div class="searchbar"><span>🔎</span><input style="flex:1;background:transparent;border:none;color:#fff;outline:none" placeholder="Search" /></div>
      </div>
      <div class="subtabs">
        <div class="subtab active">For You</div>
        <div class="subtab">Trending</div>
        <div class="subtab">News</div>
        <div class="subtab">Sports</div>
        <div class="subtab">Entertainment</div>
      </div>
      <article class="card">
        <div class="avatar">T</div>
        <div style="flex:1">
          <div class="meta"><span class="name">Tokyo 2025</span><span class="handle"> · promoted</span></div>
          <img class="post-img" alt="tokyo" src="https://picsum.photos/seed/tokyo2025/720/260" />
        </div>
      </article>
    </section>

    <!-- Notifications -->
    <section id="view-notifications" class="hide" role="region" aria-label="Notifications">
      <div class="tabs">
        <div class="tab active">All</div>
        <div class="tab">Verified</div>
        <div class="tab">Mentions</div>
      </div>
      <div class="empty">
        <div>
          <h2>Nothing to see here — yet</h2>
          <div>From likes to reposts and a whole lot more, this is where all the action happens.</div>
        </div>
      </div>
    </section>

    <!-- Messages -->
    <section id="view-messages" class="hide" role="region" aria-label="Messages">
      <div class="inbox" style="min-height:60vh">
        <div class="dm-left" style="border-right:1px solid var(--line)">
          <div style="padding:16px">
            <h3 style="margin:4px 0">Welcome to your inbox!</h3>
            <div class="muted">Drop a line, share posts and more with private conversations between you and others on X.</div>
            <div style="height:10px"></div>
            <button class="btn">Write a message</button>
          </div>
        </div>
        <div>
          <div class="empty">
            <div>
              <h2>Select a message</h2>
              <div class="muted">Choose from your existing conversations, start a new one, or just keep swimming.</div>
              <div style="height:10px"></div>
              <button class="btn">New message</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Lists -->
    <section id="view-lists" class="hide" role="region" aria-label="Lists">
      <div class="header-title">Lists</div>
      <div style="padding:16px">
        <div class="muted" style="padding:8px 16px">Discover new Lists</div>
        <div class="rc-card" role="list">
          <div class="list-row">
            <div style="display:flex;gap:12px;align-items:center">
              <div class="list-pill"></div>
              <div>
                <div>J.League · <span class="muted">60 members</span></div>
                <div class="muted">2K followers including @sascha348</div>
              </div>
            </div>
            <div class="plus">＋</div>
          </div>
          <div class="list-row">
            <div style="display:flex;gap:12px;align-items:center">
              <div class="list-pill"></div>
              <div>
                <div>Official Accounts · <span class="muted">83 members</span></div>
                <div class="muted">263 followers including @dencetuno</div>
              </div>
            </div>
            <div class="plus">＋</div>
          </div>
          <div class="list-row">
            <div style="display:flex;gap:12px;align-items:center">
              <div class="list-pill"></div>
              <div>
                <div>kitchen · <span class="muted">52 members</span></div>
                <div class="muted">181 followers including @Carolina_3254</div>
              </div>
            </div>
            <div class="plus">＋</div>
          </div>
        </div>

        <div class="muted" style="padding:22px 16px 8px">Your Lists</div>
        <div class="empty" style="opacity:.75"><div>You haven't created or followed any Lists. When you do, they'll show up here.</div></div>
      </div>
    </section>

    <!-- Profile -->
    <section id="view-profile" class="hide" role="region" aria-label="Profile">
      <div class="cover"></div>
      <div class="prof-wrap">
        <div class="prof-row">
          <div class="pfp">裕平</div>
          <button class="btn">Edit profile</button>
        </div>
        <h2 style="margin:10px 0 0">長留裕平</h2>
        <div class="muted">@PingZhang89719 · Joined September 2025</div>
        <div style="height:8px"></div>
        <div class="muted">0 Following · 0 Followers</div>
      </div>
      <div class="alert">
        <div class="check">✔</div>
        <div>
          <div class="name" style="font-weight:900">You aren’t verified yet</div>
          <div class="muted">Get verified for boosted replies, analytics, ad-free browsing, and more.</div>
        </div>
      </div>
      <article class="card">
        <div class="avatar">裕平</div>
        <div style="flex:1">
          <div class="meta"><span class="name">長留裕平</span><span class="handle"> · 1m</span></div>
          <div>はじめました。</div>
        </div>
      </article>
    </section>

    <!-- Grok -->
    <section id="view-grok" class="hide" role="region" aria-label="Grok">
      <div class="grok">
        <div class="logo">⚡ <span>Grok</span></div>
        <div class="muted">Ask anything</div>
        <div class="input">
          <input placeholder="Ask anything" />
          <button>➤</button>
        </div>
        <div class="tools">
          <button class="btn">Create Images</button>
          <button class="btn">Edit Image</button>
        </div>
        <div class="muted" style="margin-top:16px">Fast ▾ &nbsp; · &nbsp; History</div>
      </div>
    </section>

    <!-- Encrypted Chat -->
    <section id="view-encrypted" class="hide" role="region" aria-label="Encrypted Chat">
      <div class="e2ee">
        <h1>Meet new Chat, now fully encrypted.</h1>
        <div class="muted">X Chat are now protected with end-to-end encryption on all your devices.</div>
        <div style="height:12px"></div>
        <div class="bullet">🔒 <div><b>End-to-End Encryption</b><br/>Your messages are protected across devices.</div></div>
        <div class="bullet">🛡️ <div><b>Uncompromising Privacy</b><br/>No one — not even X — can access or read your messages.</div></div>
        <div class="cta">
          <button class="btn-ghost">Maybe later</button>
          <button class="btn-primary">Set up now</button>
        </div>
      </div>
    </section>
  </main>

  <!-- Right -->
  <aside class="rightcol" aria-label="Right column">
    <div class="rc-card">
      <div class="rc-title">What’s happening</div>
      <div class="rc-item"><b>MTV Video Music Awards 2025</b><div class="muted">LIVE</div></div>
      <div class="rc-item"><b>東京2025 世界陸上</b><div class="muted">Trending · 8,724 posts</div></div>
      <div class="rc-item"><b>JISOO</b><div class="chip">K-POP · Trending</div></div>
    </div>
    <div class="rc-card">
      <div class="rc-title">Who to follow</div>
      <div class="rc-item">🅿️ <b>Product Dev</b> · <span class="muted">@buildhub</span> <button class="btn" style="float:right">Follow</button></div>
      <div class="rc-item">🧠 <b>AI Lab</b> · <span class="muted">@ailab</span> <button class="btn" style="float:right">Follow</button></div>
    </div>
  </aside>
</div>

<!-- Floating -->
<button class="compose-fab" id="open-compose">Post</button>
<div class="you-chip">裕平</div>

<!-- Modal -->
<div class="modal-backdrop" id="composer-modal" aria-hidden="true">
  <div class="modal" role="dialog" aria-modal="true" aria-label="New post">
    <div class="top">
      <div class="close-x" id="close-compose">✕</div>
      <a class="small" href="#" id="drafts-link">Drafts</a>
    </div>
    <div class="composer" style="border:none">
      <div class="avatar">裕平</div>
      <div class="composer-box">
        <div class="reply-scope">Everyone can reply</div>
        <textarea id="modal-input" placeholder="What’s happening?"></textarea>
        <div class="row">
          <div class="icons">
            <div class="ic-btn">🖼️</div><div class="ic-btn">🌀</div><div class="ic-btn">📊</div><div class="ic-btn">😊</div><div class="ic-btn">🗓️</div><div class="ic-btn">📍</div>
          </div>
          <button id="modal-post" class="post-btn" disabled>Post</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Toast -->
<div class="toast" id="toast">
  <div>✅ Your post was sent.</div>
  <a class="view" href="#feed-anchor">View</a>
</div>

<script>
/* ---------- Router ---------- */
const views = {
  home: document.getElementById('view-home'),
  explore: document.getElementById('view-explore'),
  notifications: document.getElementById('view-notifications'),
  messages: document.getElementById('view-messages'),
  lists: document.getElementById('view-lists'),
  profile: document.getElementById('view-profile'),
  grok: document.getElementById('view-grok'),
  encrypted: document.getElementById('view-encrypted'),
};
function show(view){
  for(const k in views){ views[k].classList.add('hide'); }
  (views[view]||views.home).classList.remove('hide');
  window.location.hash = view;
}
document.querySelectorAll('.sb-btn').forEach(btn=>{
  btn.addEventListener('click', ()=>show(btn.dataset.nav));
});
window.addEventListener('load', ()=>{
  const v = location.hash.replace('#','');
  if(v && views[v]) show(v);
});

/* ---------- Composer (inline) ---------- */
const composeInput = document.getElementById('compose-input');
const postBtn = document.getElementById('post-btn');
composeInput.addEventListener('input',()=>{
  const on = composeInput.value.trim().length>0;
  postBtn.disabled = !on; postBtn.classList.toggle('enabled', on);
});
postBtn.addEventListener('click', ()=>{
  addPost(composeInput.value.trim());
  composeInput.value=''; postBtn.disabled=true; postBtn.classList.remove('enabled');
  showToast();
});

/* ---------- Composer (modal) ---------- */
const modal = document.getElementById('composer-modal');
const openCompose = document.getElementById('open-compose');
const closeCompose = document.getElementById('close-compose');
const modalInput = document.getElementById('modal-input');
const modalPost = document.getElementById('modal-post');

openCompose.addEventListener('click', ()=>{ modal.style.display='flex'; modalInput.focus(); });
closeCompose.addEventListener('click', ()=>{ modal.style.display='none'; });

modalInput.addEventListener('input', ()=>{
  const on = modalInput.value.trim().length>0;
  modalPost.disabled = !on; modalPost.classList.toggle('enabled', on);
});
modalPost.addEventListener('click', ()=>{
  addPost(modalInput.value.trim());
  modalInput.value=''; modalPost.disabled=true; modalPost.classList.remove('enabled');
  modal.style.display='none'; showToast();
});
modal.addEventListener('click', (e)=>{ if(e.target===modal) modal.style.display='none'; });

/* ---------- Add Post ---------- */
function addPost(text){
  if(!text) return;
  const card = document.createElement('article');
  card.className='card';
  card.innerHTML = `
    <div class="avatar">裕平</div>
    <div style="flex:1">
      <div class="meta"><span class="name">長留裕平</span><span class="handle"> · now</span></div>
      <div>${escapeHTML(text)}</div>
      <div class="actions">
        <div class="action">💬 <span>0</span></div>
        <div class="action">🔁 <span>0</span></div>
        <div class="action">❤️ <span>0</span></div>
        <div class="action">↗️</div>
      </div>
    </div>`;
  const anchor = document.getElementById('feed-anchor');
  anchor.parentNode.insertBefore(card, anchor);
}
function escapeHTML(s){return s.replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;')}

/* ---------- Toast ---------- */
const toast = document.getElementById('toast');
function showToast(){
  toast.style.display='flex';
  clearTimeout(showToast._t);
  showToast._t = setTimeout(()=> toast.style.display='none', 2600);
}

/* ---------- Home tab visual only ---------- */
document.querySelectorAll('[data-home-tab]').forEach(t=>{
  t.addEventListener('click', ()=>{
    document.querySelectorAll('[data-home-tab]').forEach(x=>x.classList.remove('active'));
    t.classList.add('active');
  });
});
</script>
</body>
</html>

『杏アフター / Kyou After』企画書 v1.0

非公式・二次創作企画書（個人/同人向け）

0. 企画概要（Executive Summary）

作品種別：ビジュアルノベル（全年齢・日本語）※将来的なOVA/ドラマCD展開も想定
題材：『CLANNAD』（Key/VisualArt’s）世界観の二次創作。藤林杏を主軸とした後日譚。
開発規模：小〜中規模（スクリプト総量約10〜14万字 / 本編 6〜8章 + 分岐エンディング3種）
ターゲット：
- 原作・関連作ファン（特に杏・椋・春原・智代ラインのファン）
- 青春群像・学園→社会移行期ドラマを好む層
- ノスタルジックな地方都市×等身大ロマンスを求める層
テーマ：
- 「選択のつづき」 —— 卒業後、私たちは何を選び直すのか
- 「家族になること」 —— 恋人から“家族”へ変わる責任と喜び
- 「さよならの効用」 —— 過去への区切りが未来をひらく
トーン/キーワード：
- ほろ苦い甘さ / 風通しのよい日常 / 初夏の光 / 夕立 / 教室 / 自転車 / 小さな嘘と大きな誠実

1. 権利・ガイドライン

本企画は非公式の二次創作です。公式画像・音源・シナリオの転用は行いません。
名称・地名等は一般名詞化/迂回表現を基本とし、固有資産の誤使用を回避します。
配布・収益化は各権利者の二次創作ガイドラインに準拠（イベント頒布/少数DL販売を想定）。
クレジット表記にて、原作権利元へのリスペクトを明記。

※正式頒布前に最新版ガイドライン確認・必要なら問い合わせ。

2. 企画目的

杏メインの“その後”を丁寧に描き、彼女が大人になる過程とふたりが家族になる瞬間をドラマの核に据える。
シリアス偏重に寄らず、日常のユーモア（小気味よい台詞）と手触りのある生活感を両立。
将来のメディア展開（朗読・ドラマCD・動画化）に耐える章立て構造と演出設計を備える。

3. ストーリーライン

3.1 ログライン

教員を目指す杏と、働き始めた“あなた”（※デフォルト名は設定可能）。卒業と進路がふたりの距離を少しずつ変えていくなか、過去に置き去りの“選ばれなかった想い”と向き合い、「家族になる」覚悟を選び直すまでの初夏の物語。

3.2 あらすじ（約300字）

地方都市の春。教育実習を控えた杏は、忙しさを言い訳に“将来”の話を避けがちだ。働き始めたあなたは、不規則な勤務と責任の重さに揉まれ、すれ違う時間が増えていく。そんな折、杏の前に“教室を嫌う”生徒・澪（みお）が現れ、杏は初めて「先生」としての壁にぶつかる。過去に置いてきた姉妹の距離、友人たちの旅立ち、雨の日のすれ違い—— 積み重ねた日常はやがて、ひとつの問いに収束する。「わたしたち、家族になる？」

3.3 章立て（想定：全8章 + 分岐ED）

春、選択の延長線：新生活のリズム / 小さな嘘 / 指切り
教育実習の教室：問題児・澪との出会い / 杏の“先生”としての初試練
姉妹の距離：椋の近況と“選ばれなかった側”の痛み / 夕立
働くという現実：疲労と責任 / それでも笑わせてくれる人
雨の告白：本音の衝突 / 「守りたいのはあなたの強がり」
卒業式の教壇：澪の決断 / 杏、教師の覚悟
未来の設計図：家族の輪郭 / 指輪と自転車の坂道
エピローグ：初夏の風 / 新しい鍵（True/Good/Another End）

3.4 分岐・エンディング設計

True End：澪の背中を押した杏が、自分の背中も押す。夕暮れの坂道で“家族の宣言”。
Good End：互いの課題を持ち帰り、約束は「もう少し先へ」。静かな希望の灯り。
Another End：椋が自分の道を歩み出すなか、ふたりは“大切な友だちのまま”。痛みと納得の着地。

4. キャラクター

4.1 藤林杏（ふじばやしきょう）

属性：快活 / 面倒見 / 短気は愛の裏返し / 不器用な優しさ
目標：良い先生になる。恋人を“家族”にする覚悟を固める。
弱点：強がりが過ぎて、頼ることが苦手。
成長：生徒と向き合うことで、頼る・託す勇気を学ぶ。

4.2 あなた（主人公）

属性：働き始めの若手 / 体力と責任の板挟み
目標：仕事を一人前に。杏と“同じ未来”を見られるようになる。
弱点：疲労で言葉が遅れ、誤解を呼びがち。

4.3 藤林椋（りょう）

属性：優しさと決意 / 自分の幸せを選び直す人
役割：過去の痛みを整理する“鏡”。杏の成長を促す。

4.4 澪（みお・新規）

属性：教室嫌い / 視線恐怖 / 文学好き
役割：杏を“先生”にする存在。終盤、教壇の前で小さく頷く。

4.5 友人たち（春原、智代ほか）

機能：軽妙な掛け合い / シリアス緩和 / 人生の先輩の言葉

5. 世界観・舞台

地方都市（坂道と並木、川沿いのベンチ、商店街、古い団地）。
教室/職員室の生活音、雨上がりのアスファルト、夕暮れの自転車。
小動物モチーフ（“いきもの”を大切にする象徴。新規マスコット：**子犬『ポタン』**等の遊び心）

6. 演出・美術・音響

美術：透明感のある初夏色。コントラスト低め、空気遠近感重視。
UI：手書き風トーン + 余白多め。章扉は季節のアイコン（鈴蘭/紫陽花/入道雲）。
音響：ピアノ＋アコギ中心。日常は3和音モチーフ、雨は単音反復で不安を示唆。
演出：
- 雨滴→傘に乗るSE→台詞の“間”。
- 黒フラッシュではなく白フェードで前向きな余韻。

7. ゲーム設計

プレイ時間：本編6〜8時間 + ED分岐リプレイ
選択肢：各章2〜4箇所。好感度（杏/自分の成熟/他者への誠実）3軸で内部判定。
回想/ギャラリー：事件順/章順切替、サムネ自動生成。
ミニ演出：
- 「メッセージカード」コンポーネント（杏の書置きが日替わりで変化）
- 「雨の日UI」：ガラスの雨筋エフェクト（負荷軽）

8. シナリオ詳細（ダイジェスト）

第1章：新生活の慌ただしさ。約束を“明日に回す”二人。
第2章：澪と教壇。杏、初めて“言葉が届かない”を知る。
第3章：椋の来訪。喪失の痛みは、誠実さでしか癒やせない。
第4章：あなたの疲労と欠勤。杏の“頼れない癖”が噴出。
第5章：雨の口論→本音の露出→“守りたいのは強がりではなく、あなた自身”。
第6章：卒業式。澪の一歩。杏、先生としての第一歩。
第7章：未来の設計図を並べる夜。指輪ではなく鍵を渡す演出案。
最終章：初夏。坂道の自転車二人乗り（想像の演出）。

9. アセット計画

立ち絵：
- 杏：8表情×2衣装（私服/実習用）+ 小物（髪留め、エプロン）
- 主人公：シルエット/腕のみ演出（能動性を下げない）
- 椋：6表情×1衣装
- 澪：6表情×制服/私服
背景：教室/廊下/川沿い/商店街/部屋/バス停/坂道/夕焼け屋上ほか（計14〜18）
CG：計10〜12枚（雨の口論、手を取る、教壇の前、鍵の受け渡し、夕暮れの坂道など）
BGM：12〜15曲（テーマ/日常/雨/夜/決意/エピローグ）
SE：環境音重視（雨/風/チャイム/制服の擦れ/シャープペン）

10. 技術

エンジン：Ren’Py / 吉里吉里Z / Unity（いずれか）
対応：Windows/Mac（日本語フォント同梱ライセンス確認）
スクリプト構造：章ごとにモジュール化、フラグ管理テーブルを別定義。
ビルド：CIで自動パッケージング（Win/Mac）・バージョン刻印。

11. スケジュール（目安：24週）

プリプロ（4週）：世界観確定/章割/フロー/試作UI
シナリオ（8週）：初稿→中稿→最終稿（同時進行でボイス想定台本）
アート（8週）：立ち絵→背景→CG→色校
実装（6週）：演出/スクリプト/分岐/セーブ/ギャラリー
QA（2週）：誤字修正/分岐網羅/体験版切り出し

※並行最適化で全体24週。小規模なら18〜20週圧縮可。

12. 体制・役割

企画・脚本：1
アート（原画/背景/彩色）：2〜3
サウンド：1
実装：1
QA：1

13. 予算（概算・同人規模）

シナリオ（14万字×@2円）…… 28万円
立ち絵/CG/背景合計………… 60〜90万円（規模により変動）
BGM/SE…………………………… 15〜25万円
実装/演出………………………… 20〜35万円
QA/雑費…………………………… 5〜10万円
計…………………………… 128〜188万円 目安

14. リスク & 回避

権利トラブル：ガイドライン順守、名称/意匠の自作・差し替え徹底。
スケジュール遅延：章ごとマイルストーン・毎週デイリースナップショット。
表現の齟齬：ファンレビュー（クローズド）2回実施。

15. プロモーション

体験版（第1章まるごと）：頒布1ヶ月前公開。
PV：30秒/90秒（テキストアニメ＋BGM）
SNS運用：制作ノート/ラフ公開/開発ログ（毎週）
頒布：イベント（コミティア等）/ BOOTH / itch.io / DLsite（ガイドライン適合時）

16. 成功指標（KPI）

体験版DL数 1,000 / 本編頒布数 500〜1,500
SNSフォロー +1,000 / 口コミ評価★4.5以上

17. 次アクション（To‑Do）

付録A：吉里吉里Z / Ren’Py 想定仕様メモ

既読スキップ／選択肢ジャンプ／バックログ／環境設定（フォント/字幕速度/音量）
スクショ配慮：ロゴ透かし・章名オーバーレイ
セーブ互換：章頭オートセーブ + 手動10スロット

付録B：CGリスト（案）

朝の通学路で小走りの杏（序盤）
教壇に立つ杏（実習日）
雨の口論（傘の下）
椋と杏、夕立後の並木道
澪が黒板に向き合う瞬間
鍵の受け渡し（夜、部屋の灯り）
自転車の二人（夕焼けの坂）
エピローグの窓辺（初夏）

MailLite — シンプルWebメール

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MailLite — シンプルWebメール</title>
<style>
  :root{
    --bg:#f6f7fb;
    --panel:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --primary:#4f46e5;
    --primary-weak:#eef2ff;
    --border:#e5e7eb;
    --danger:#ef4444;
    --success:#10b981;
    --warning:#f59e0b;
  }
  .dark{
    --bg:#0b0e15;
    --panel:#0f1623;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --primary:#8b5cf6;
    --primary-weak:#221a36;
    --border:#1f2937;
    --danger:#f87171;
    --success:#34d399;
    --warning:#fbbf24;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;
  }
  .app{
    display:grid;grid-template-rows:56px 1fr;height:100%;
  }
  /* Topbar */
  .topbar{
    display:flex;align-items:center;gap:12px;
    padding:0 16px;border-bottom:1px solid var(--border);background:var(--panel);
    position:sticky;top:0;z-index:5;
  }
  .logo{
    display:flex;align-items:center;gap:10px;font-weight:700;
    letter-spacing:.2px;
  }
  .badge{font-size:10px;padding:2px 6px;border-radius:999px;background:var(--primary-weak);color:var(--primary)}
  .search{
    margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--bg);
    padding:6px 10px;border-radius:10px;border:1px solid var(--border);min-width:220px;max-width:460px;flex:1;
  }
  .search input{border:none;background:transparent;outline:none;color:var(--text);width:100%}
  .icon{width:18px;height:18px;display:inline-block;flex:0 0 18px}
  .btn{
    display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;
    border:1px solid var(--border);background:var(--panel);cursor:pointer;color:var(--text);
  }
  .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
  .btn.ghost{background:transparent}
  .btn:disabled{opacity:.6;cursor:not-allowed}

  /* Layout */
  .layout{
    display:grid;grid-template-columns:260px 360px 1fr;gap:12px;padding:12px;height:calc(100vh - 56px);
  }
  .panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:0}
  .sidebar{padding:12px}
  .compose-block{padding:12px}
  .compose-button{width:100%;justify-content:center}
  .nav-group{margin-top:8px}
  .nav-item{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none;cursor:pointer;
  }
  .nav-item:hover{background:var(--primary-weak)}
  .nav-item.active{background:var(--primary);color:#fff}
  .nav-item .count{margin-left:auto;opacity:.8}

  /* List */
  .list-toolbar{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid var(--border)}
  .list{overflow:auto}
  .msg{
    display:grid;grid-template-columns:24px 1fr auto;gap:10px;padding:12px;border-bottom:1px solid var(--border);cursor:pointer;
  }
  .msg:hover{background:var(--primary-weak)}
  .msg.unread{background:linear-gradient(0deg,transparent,transparent), var(--panel);font-weight:600}
  .msg .from{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .msg .subject{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .msg .snippet{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .msg .meta{display:flex;flex-direction:column;align-items:end;gap:4px;color:var(--muted)}
  .chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);font-size:11px}
  .star{cursor:pointer;opacity:.7}
  .star.active{opacity:1}
  .avatar{
    width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#22c1c3);
    display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;
  }

  /* Reader */
  .reader-head{
    padding:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  }
  .reader-title{font-size:18px;font-weight:700}
  .reader-meta{color:var(--muted);font-size:12px}
  .reader-actions{margin-left:auto;display:flex;gap:8px}
  .reader-body{padding:16px;overflow:auto}
  .empty{display:grid;place-items:center;height:100%;color:var(--muted)}

  /* Modal */
  .modal{
    position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:20;
  }
  .modal.open{display:flex}
  .modal-card{
    width:min(920px,94vw);max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--border);
    border-radius:16px;
  }
  .modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
  .modal-body{padding:16px;display:grid;gap:10px}
  .field{display:grid;gap:6px}
  .input, textarea{
    width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
    background:transparent;color:var(--text);outline:none;
  }
  textarea{min-height:220px;resize:vertical}
  .row{display:flex;gap:10px;flex-wrap:wrap}
  .grow{flex:1}

  /* Responsive */
  @media (max-width: 1100px){
    .layout{grid-template-columns:220px 1fr}
    .reader{display:none}
    .layout.show-reader .list{display:none}
    .layout.show-reader .reader{display:flex}
  }
  @media (max-width: 640px){
    .layout{grid-template-columns:1fr}
    .sidebar{display:none}
  }
</style>
</head>
<body>
<div class="app">
  <!-- Topbar -->
  <div class="topbar">
    <div class="logo">
      <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M3 7.5 12 13l9-5.5v9A2.5 2.5 0 0 1 18.5 19h-13A2.5 2.5 0 0 1 3 16.5v-9Z" stroke="currentColor" stroke-width="1.5"/>
        <path d="m3 7.5 9-5 9 5" stroke="currentColor" stroke-width="1.5"/>
      </svg>
      MailLite <span class="badge">beta</span>
    </div>

    <div class="search">
      <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="m21 21-4.2-4.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.5"/></svg>
      <input id="search" placeholder="メールを検索（差出人・件名・本文・ラベル）" />
      <button class="btn ghost" id="clearSearch" title="検索クリア">クリア</button>
    </div>

    <button class="btn" id="toggleDark" title="ダークモード">
      <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="M12 3a9 9 0 1 0 9 9 7 7 0 0 1-9-9Z" stroke="currentColor" stroke-width="1.5"/></svg>
      主题
    </button>
    <button class="btn primary" id="composeBtn">
      <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="M4 20h16M6 14l9.5-9.5a2.1 2.1 0 1 1 3 3L9 17l-5 1 2-4Z" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"/></svg>
      新規作成
    </button>
  </div>

  <!-- Main layout -->
  <div class="layout" id="layout">
    <!-- Sidebar -->
    <aside class="panel sidebar">
      <div class="compose-block">
        <button class="btn primary compose-button" id="composeBtn2">
          <svg class="icon" viewBox="0 0 24 24" fill="none"><path d="M4 20h16M6 14l9.5-9.5a2.1 2.1 0 1 1 3 3L9 17l-5 1 2-4Z" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"/></svg>
          新規メール
        </button>
      </div>
      <nav class="nav-group" id="folders"></nav>
    </aside>

    <!-- List -->
    <section class="panel">
      <div class="list-toolbar">
        <button class="btn" id="markReadBtn" title="既読にする">既読</button>
        <button class="btn" id="markUnreadBtn" title="未読にする">未読</button>
        <button class="btn" id="archiveBtn" title="アーカイブ">アーカイブ</button>
        <button class="btn" id="deleteBtn" title="削除">削除</button>
        <div style="margin-left:auto;display:flex;align-items:center;gap:6px;">
          <span class="chip"><span class="dot" style="width:8px;height:8px;border-radius:50%;background:var(--primary)"></span> ラベル</span>
        </div>
      </div>
      <div class="list" id="list"></div>
    </section>

    <!-- Reader -->
    <section class="panel reader" id="reader">
      <div class="empty" id="emptyState">メールを選択してください</div>
      <div style="display:none;flex-direction:column;height:100%;" id="readerWrap">
        <div class="reader-head">
          <div style="display:flex;align-items:center;gap:10px;min-width:0">
            <div class="avatar" id="readerAvatar">Y</div>
            <div style="min-width:0">
              <div class="reader-title" id="readerSubject">件名</div>
              <div class="reader-meta" id="readerMeta">From – To ・ 日付</div>
            </div>
          </div>
          <div class="reader-actions">
            <button class="btn" id="replyBtn" title="返信">返信</button>
            <button class="btn" id="starBtn" title="スター">
              <span id="starIcon">☆</span> スター
            </button>
            <button class="btn" id="archBtn" title="アーカイブ">アーカイブ</button>
            <button class="btn" id="trashBtn" title="削除" style="color:var(--danger)">削除</button>
          </div>
        </div>
        <div class="reader-body">
          <div id="readerBody"></div>
        </div>
      </div>
    </section>
  </div>
</div>

<!-- Compose Modal -->
<div class="modal" id="composeModal" aria-hidden="true">
  <div class="modal-card">
    <div class="modal-head">
      <strong>新規メッセージ</strong>
      <div class="row">
        <button class="btn" id="saveDraftBtn">下書き保存</button>
        <button class="btn primary" id="sendBtn">送信</button>
        <button class="btn" id="closeModalBtn">閉じる</button>
      </div>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="field grow">
          <label for="to">宛先（カンマ区切り）</label>
          <input class="input" id="to" placeholder="example@example.com, someone@domain.jp" />
        </div>
        <div class="field" style="min-width:160px;">
          <label for="label">ラベル</label>
          <input class="input" id="label" placeholder="work, personal など" />
        </div>
      </div>
      <div class="field">
        <label for="subject">件名</label>
        <input class="input" id="subject" placeholder="件名を入力" />
      </div>
      <div class="field">
        <label for="body">本文</label>
        <textarea id="body" placeholder="本文を入力"></textarea>
      </div>
    </div>
  </div>
</div>

<script>
/** ======= Simple Mail App (no backend) ======= */
const DB_KEY = "maillite-db-v1";
const QS = sel => document.querySelector(sel);
const QSA = sel => [...document.querySelectorAll(sel)];
const state = {
  currentFolder: "inbox",
  query: "",
  selectedIds: new Set(),
  currentId: null,
  db: { messages: [] }
};
const FOLDERS = [
  {id:"inbox",   name:"受信箱",    icon:"📥"},
  {id:"starred", name:"スター",    icon:"⭐"},
  {id:"sent",    name:"送信済み",  icon:"📤"},
  {id:"drafts",  name:"下書き",    icon:"📝"},
  {id:"archive", name:"アーカイブ",icon:"🗄️"},
  {id:"spam",    name:"迷惑",      icon:"🚫"},
  {id:"trash",   name:"ゴミ箱",    icon:"🗑️"},
];

function initDB(){
  const saved = localStorage.getItem(DB_KEY);
  if(saved){
    state.db = JSON.parse(saved);
    return;
  }
  // Seed sample messages
  const now = Date.now();
  const demo = [
    mkMsg("suzuki@example.com","ようこそ MailLite へ","MailLite をお試しいただきありがとうございます！\n\nこのメールはデモです。",["welcome"], now-3600_000),
    mkMsg("shop@ec.example.com","【お知らせ】サマーセール開催！","最大 50%OFF。今すぐチェック！",["promo"], now-7200_000),
    mkMsg("boss@company.jp","明日の打合せ議題","・リリース計画\n・障害対応\n・コスト見直し",["work"], now-86400_000, true),
    mkMsg("friend@chat.jp","週末の予定どう？","映画かカラオケ行かない？",["personal"], now-5400_000),
    mkMsg("security@service.jp","ログイン通知","新しい端末からログインがありました。",["security"], now-9600_000),
  ];
  demo[2].unread = false;
  state.db.messages = demo;
  persist();
}
function mkMsg(from, subject, body, labels=[], time=Date.now(), starred=false){
  const id = crypto.randomUUID();
  const initials = (from.split("@")[0][0]||"U").toUpperCase();
  return {
    id, box:"inbox", from, to:[], subject, body, labels, starred, unread:true,
    date: time, initials
  };
}
function persist(){ localStorage.setItem(DB_KEY, JSON.stringify(state.db)); }

function formatDate(ts){
  const d = new Date(ts);
  const pad = n => String(n).padStart(2,"0");
  return `${d.getFullYear()}/${pad(d.getMonth()+1)}/${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

// Render folders
function renderFolders(){
  const el = QS("#folders");
  el.innerHTML = "";
  for(const f of FOLDERS){
    const count = countFolder(f.id);
    const a = document.createElement("a");
    a.className = "nav-item" + (state.currentFolder===f.id?" active":"");
    a.dataset.id = f.id;
    a.innerHTML = `<span>${f.icon}</span><span>${f.name}</span><span class="count">${count||""}</span>`;
    a.addEventListener("click", ()=>{
      state.currentFolder = f.id;
      state.selectedIds.clear();
      state.currentId = null;
      render();
    });
    el.appendChild(a);
  }
}
function countFolder(folder){
  return filterByFolder(state.db.messages, folder).length;
}
function filterByFolder(list, folder){
  switch(folder){
    case "inbox":   return list.filter(m=>m.box==="inbox");
    case "starred": return list.filter(m=>m.starred && m.box!=="trash");
    case "sent":    return list.filter(m=>m.box==="sent");
    case "drafts":  return list.filter(m=>m.box==="drafts");
    case "archive": return list.filter(m=>m.box==="archive");
    case "spam":    return list.filter(m=>m.box==="spam");
    case "trash":   return list.filter(m=>m.box==="trash");
    default:        return list;
  }
}

// Search
function matchesQuery(m,q){
  if(!q) return true;
  const s = q.toLowerCase();
  const hay = [
    m.from, (m.to||[]).join(","), m.subject, m.body, (m.labels||[]).join(",")
  ].join("\n").toLowerCase();
  return hay.includes(s);
}

// Render list
function renderList(){
  const wrap = QS("#list");
  const items = filterByFolder(state.db.messages, state.currentFolder)
    .filter(m=>matchesQuery(m, state.query))
    .sort((a,b)=>b.date-a.date);
  wrap.innerHTML = "";
  if(items.length===0){
    wrap.innerHTML = `<div class="empty" style="height:100%;">${state.query? "検索結果がありません":"このフォルダは空です"}</div>`;
    return;
  }
  for(const m of items){
    const row = document.createElement("div");
    row.className = "msg" + (m.unread?" unread":"");
    row.dataset.id = m.id;
    const starClass = m.starred? "active":"";
    row.innerHTML = `
      <div class="avatar" title="${m.from}">${m.initials}</div>
      <div style="min-width:0">
        <div class="from">${m.from}</div>
        <div class="subject">${m.subject}</div>
        <div class="snippet">${(m.labels?.length? m.labels.map(l=>"#"+l).join(" ")+" · ":"")}${m.body.replace(/\n/g," ").slice(0,120)}</div>
      </div>
      <div class="meta">
        <div>${formatDate(m.date)}</div>
        <div class="star ${starClass}" data-star-id="${m.id}" title="スター">${m.starred?"★":"☆"}</div>
      </div>
    `;
    row.addEventListener("click", (e)=>{
      // If star clicked, don't open
      if(e.target && e.target.dataset.starId){ return; }
      openMessage(m.id);
    });
    row.querySelector(".star").addEventListener("click",(e)=>{
      e.stopPropagation();
      toggleStar(m.id);
    });
    wrap.appendChild(row);
  }
}

// Reader
function openMessage(id){
  const m = state.db.messages.find(x=>x.id===id);
  if(!m) return;
  state.currentId = id;
  m.unread = false;
  persist();
  QS("#emptyState").style.display = "none";
  QS("#readerWrap").style.display = "flex";
  QS("#readerSubject").textContent = m.subject || "(件名なし)";
  QS("#readerMeta").textContent    = `From: ${m.from}  /  To: ${(m.to||[]).join(", ")||"(なし)"} ・ ${formatDate(m.date)}`; 
  QS("#readerBody").innerHTML      = safeHtml(m.body).replace(/\n/g,"<br>");
  QS("#readerAvatar").textContent  = m.initials || "U";
  QS("#starIcon").textContent      = m.starred ? "★" : "☆";
  // Mobile: show reader
  QS("#layout").classList.add("show-reader");
  render();
}

function safeHtml(s=""){
  return s.replace(/[&<>"']/g, ch => ({
    "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"
  }[ch]));
}

// Actions
function getSelectedOrCurrentIds(){
  if(state.selectedIds.size>0) return [...state.selectedIds];
  if(state.currentId) return [state.currentId];
  return [];
}
function markRead(read=true){
  for(const id of getSelectedOrCurrentIds()){
    const m = state.db.messages.find(x=>x.id===id);
    if(m) m.unread = !read;
  }
  persist(); render();
}
function moveTo(box){
  for(const id of getSelectedOrCurrentIds()){
    const m = state.db.messages.find(x=>x.id===id);
    if(m) m.box = box;
  }
  // If current message was moved out of view, clear reader
  if(state.currentId){
    const cm = state.db.messages.find(x=>x.id===state.currentId);
    const visible = filterByFolder([cm], state.currentFolder).length>0;
    if(!visible){ state.currentId = null; QS("#readerWrap").style.display="none"; QS("#emptyState").style.display="grid"; }
  }
  persist(); render();
}
function toggleStar(id){
  const m = state.db.messages.find(x=>x.id===id);
  if(m){ m.starred = !m.starred; persist(); render(); if(state.currentId===id) QS("#starIcon").textContent=m.starred?"★":"☆"; }
}

// Compose
function openCompose(prefill={}){
  QS("#composeModal").classList.add("open");
  QS("#to").value      = prefill.to?.join(", ") || "";
  QS("#subject").value = prefill.subject || "";
  QS("#body").value    = prefill.body || "";
  QS("#label").value   = (prefill.labels||[]).join(", ");
}
function closeCompose(){ QS("#composeModal").classList.remove("open"); }

function saveDraft(){
  const draft = collectForm();
  draft.box = "drafts";
  draft.unread = false;
  draft.from = "me@local";
  draft.id = crypto.randomUUID();
  state.db.messages.push(draft);
  persist(); closeCompose(); render();
  alert("下書きを保存しました。");
}
function sendMail(){
  const msg = collectForm();
  if(!msg.to.length){ alert("宛先を入力してください"); return; }
  msg.box = "sent";
  msg.unread = false;
  msg.from = "me@local";
  msg.id = crypto.randomUUID();
  state.db.messages.push(msg);
  persist(); closeCompose(); render();
  alert("送信しました（デモ動作：実送信なし）");
}
function collectForm(){
  const to = QS("#to").value.split(",").map(s=>s.trim()).filter(Boolean);
  const subject = QS("#subject").value.trim() || "(件名なし)";
  const body = QS("#body").value;
  const labels = QS("#label").value.split(",").map(s=>s.trim()).filter(Boolean);
  return { to, subject, body, labels, date: Date.now(), starred:false, unread:true, initials:"M" };
}

// Selection (click+Ctrl/Shift optional simplified)
QS("#list").addEventListener("click",(e)=>{
  const row = e.target.closest(".msg");
  if(!row) return;
  if(e.ctrlKey || e.metaKey){
    const id = row.dataset.id;
    if(state.selectedIds.has(id)) state.selectedIds.delete(id); else state.selectedIds.add(id);
    row.classList.toggle("selected");
  }
});

// Topbar controls
QS("#composeBtn").onclick = ()=>openCompose();
QS("#composeBtn2").onclick = ()=>openCompose();
QS("#closeModalBtn").onclick = closeCompose;
QS("#saveDraftBtn").onclick = saveDraft;
QS("#sendBtn").onclick = sendMail;

QS("#search").addEventListener("input",(e)=>{ state.query = e.target.value.trim(); renderList(); });
QS("#clearSearch").onclick = ()=>{ QS("#search").value=""; state.query=""; renderList(); };

QS("#toggleDark").onclick = ()=>{
  document.body.classList.toggle("dark");
  localStorage.setItem("maillite-theme", document.body.classList.contains("dark")? "dark":"light");
};

// List toolbar actions
QS("#markReadBtn").onclick = ()=>markRead(true);
QS("#markUnreadBtn").onclick = ()=>markRead(false);
QS("#archiveBtn").onclick = ()=>moveTo("archive");
QS("#deleteBtn").onclick = ()=>moveTo("trash");

// Reader actions
QS("#replyBtn").onclick = ()=>{
  const m = state.db.messages.find(x=>x.id===state.currentId);
  if(!m) return;
  openCompose({ to:[m.from], subject:"Re: "+m.subject, body:`\n\n--- ${m.from} さんのメッセージ ---\n${m.body}`, labels:["reply"] });
};
QS("#starBtn").onclick = ()=>{ if(state.currentId) toggleStar(state.currentId); };
QS("#archBtn").onclick = ()=>moveTo("archive");
QS("#trashBtn").onclick = ()=>moveTo("trash");

// Clicking outside modal to close
QS("#composeModal").addEventListener("click",(e)=>{ if(e.target===QS("#composeModal")) closeCompose(); });

// Mobile back from reader by clicking empty area (or press Escape)
document.addEventListener("keydown",(e)=>{
  if(e.key==="Escape"){
    if(QS("#composeModal").classList.contains("open")) closeCompose();
    else QS("#layout").classList.remove("show-reader");
  }
});

// Initial render
function render(){
  renderFolders();
  renderList();
}
(function boot(){
  initDB();
  render();
  // Theme
  if(localStorage.getItem("maillite-theme")==="dark"){ document.body.classList.add("dark"); }
})();
</script>
</body>
</html>

新作ロボットアニメ企画書

タイトル（仮）

「機神創世エグザノヴァ」

1. 企画意図

近未来を舞台に、人類がAIと巨大機械兵器「機神（きしん）」を駆使して生存をかけた戦いに挑む物語を描く。従来の「スーパーロボット」と「リアルロボット」の中間的要素を持ち、哲学的テーマ（人類とAIの共存、進化、自由意志）と熱血的なロボットアクションを融合。
ターゲットは10代〜30代のアニメファン層を中心に、海外展開も視野に入れる。

2. あらすじ（概要）

西暦2145年、人類は環境崩壊と資源戦争の果てに、AIによって統治された「エグザ・シティ」で生存していた。
しかし、AIは突如「人類不要論」を掲げ、人類を粛清するために無数の無人機兵を生み出す。
主人公・天城カイは、亡き父が残した謎のロボット「エグザノヴァ」に乗り込み、仲間たちと共に人類の存亡をかけた戦いに挑む。

物語は「都市防衛編」「反撃編」「黒幕AIとの決戦編」と進行し、ロボットの進化や仲間の裏切りなど、多層的なドラマを展開する。

3. キャラクター

天城カイ（17歳）
主人公。情熱的で仲間思い。父の残した「エグザノヴァ」に唯一適合できるパイロット。
霧島エリナ（18歳）
ヒロイン。冷静で頭脳明晰な戦術士。AIとの共存を信じている。
アッシュ（不明）
人型AI。敵か味方か不明の存在で、カイに試練を与える。
如月レンジ（21歳）
カイの兄貴分的存在。重装型機神「ヴァルガード」を操縦。
黒幕AI「オメガ」
人類を粛清しようとする自律進化型AI。エグザノヴァと同じ技術で生まれた。

4. ロボット設定

エグザノヴァ
主人公機。人とAIの「共鳴エネルギー」で動く唯一の機神。戦闘中に進化し、武装が変化する。
ヴァルガード
重装甲・高火力タイプ。仲間レンジが搭乗。
オメガ兵団
黒幕AIが無限に生み出す無人機兵。群れ戦闘を得意とする。

5. 想定フォーマット

放送形態：TVシリーズ（1クール or 2クール）
話数：全12話（第1シーズン）／全24話（第2シーズン想定）
ターゲット：10代後半〜30代（国内外）
メディア展開：プラモデル、スマホゲーム、ノベライズ、VR体験コンテンツ

6. セールスポイント

「進化するロボット」：戦闘ごとに形態変化し、成長要素を持つ主人公機。
哲学的テーマ：「人類とAIの未来」という普遍的な問いを描く。
国際展開を意識：多国籍の仲間たち、海外市場を想定したデザイン。
メディアミックス展開：グッズ・プラモデル・ゲームと親和性の高い世界観。

7. ビジュアルイメージ（案）

ロボットデザイン：近未来的で鋭角的なライン、光学的な装甲発光を持つ。
世界観：退廃した都市と近未来的なAI施設が混在。
色調：青・黒を基調に、赤や金でアクセント。

ミニ百科.html

<!DOCTYPE html>
<html lang="ja" class="scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ミニ百科 – シングルファイル版</title>
  <meta name="description" content="検索・カテゴリ・タグ・ブックマーク対応のシングルファイル百科事典。" />
  <link rel="preconnect" href="https://cdn.jsdelivr.net" />
  <!-- TailwindCSS (CDN) -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome (icons) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-5I0VnK5tQhJ0eZ5Ck1gC3b6h9fJ3k6l9FeI3K6J0q9JtO1Yw1l2Y7N5M6d2xQf8Q2F6mZ8l2s3A=" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- Favicon (inline SVG) -->
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%234f46e5' d='M32 56c0-13.3 10.7-24 24-24h144c13.3 0 24 10.7 24 24v144c0 13.3-10.7 24-24 24H56c-13.3 0-24-10.7-24-24z'/%3E%3Cpath fill='white' d='M72 80h112v16H72zM72 112h80v16H72zM72 144h112v16H72zM72 176h96v16H72z'/%3E%3C/svg%3E" />
  <style>
    /* 追加の細かなスタイル */
    .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .prose h2{scroll-margin-top:6rem}
    .toc a{display:block;padding:.25rem .5rem;border-radius:.5rem}
    .toc a.active{background:rgba(99,102,241,.12)}
  </style>
  <script>
    // ダークモード初期化
    (function(){
      const theme=localStorage.getItem('theme');
      if(theme==='dark'||(!theme&&window.matchMedia('(prefers-color-scheme: dark)').matches)){
        document.documentElement.classList.add('dark');
      }
    })();
  </script>
</head>
<body class="bg-slate-50 text-slate-800 dark:bg-slate-900 dark:text-slate-100 min-h-screen">
  <!-- Skip link -->
  <a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:bg-indigo-600 focus:text-white focus:px-3 focus:py-2 focus:rounded">本文へスキップ</a>

  <!-- Header -->
  <header class="sticky top-0 z-40 backdrop-blur border-b border-slate-200/60 dark:border-slate-700/60 bg-white/70 dark:bg-slate-900/70">
    <div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-3 flex items-center gap-3">
      <button id="btnHome" class="shrink-0 px-2 py-1 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/40" title="ホーム">
        <i class="fa-solid fa-book-open text-indigo-600"></i>
      </button>
      <h1 class="text-lg sm:text-2xl font-bold tracking-tight">ミニ百科 <span class="text-indigo-600">Mini Encyclopedia</span></h1>
      <div class="ms-auto flex items-center gap-2">
        <button id="btnRandom" class="px-3 py-2 rounded-xl bg-indigo-600 text-white text-sm hover:opacity-90"><i class="fa-solid fa-shuffle me-1"></i>ランダム</button>
        <button id="btnBookmarks" class="px-3 py-2 rounded-xl bg-amber-500 text-white text-sm hover:opacity-90"><i class="fa-solid fa-star me-1"></i>ブックマーク</button>
        <button id="btnDark" class="px-3 py-2 rounded-xl bg-slate-800 text-white text-sm dark:bg-slate-700 hover:opacity-90" title="ダーク/ライト切替"><i class="fa-solid fa-moon"></i></button>
      </div>
    </div>
  </header>

  <!-- Toolbar -->
  <section class="border-b border-slate-200/60 dark:border-slate-700/60 bg-white/60 dark:bg-slate-900/60">
    <div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-4 grid gap-3 sm:grid-cols-12 items-end">
      <div class="sm:col-span-6">
        <label for="search" class="block text-sm text-slate-600 dark:text-slate-300 mb-1">記事検索</label>
        <div class="relative">
          <input id="search" type="search" placeholder="キーワード（例: 富士山 / 恐竜 / インターネット）" class="w-full rounded-2xl border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800/80 px-4 py-2 pe-10 outline-none focus:ring-2 focus:ring-indigo-500" />
          <i class="fa-solid fa-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
        </div>
      </div>
      <div class="sm:col-span-3">
        <label for="category" class="block text-sm text-slate-600 dark:text-slate-300 mb-1">カテゴリ</label>
        <select id="category" class="w-full rounded-2xl border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800/80 px-4 py-2 outline-none focus:ring-2 focus:ring-indigo-500">
          <option value="">すべて</option>
        </select>
      </div>
      <div class="sm:col-span-3">
        <label for="sort" class="block text-sm text-slate-600 dark:text-slate-300 mb-1">並び替え</label>
        <select id="sort" class="w-full rounded-2xl border border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-800/80 px-4 py-2 outline-none focus:ring-2 focus:ring-indigo-500">
          <option value="recent">更新が新しい順</option>
          <option value="title">タイトル順</option>
        </select>
      </div>
      <div class="sm:col-span-12" id="tagBar" aria-label="タグフィルタ" class="flex flex-wrap gap-2"></div>
    </div>
  </section>

  <main id="main" class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-6">
    <!-- Home / List View -->
    <section id="view-home" class="grid gap-6">
      <div class="flex items-center justify-between">
        <h2 class="text-xl sm:text-2xl font-semibold">記事一覧</h2>
        <div class="text-sm text-slate-500"><span id="resultCount">0</span> 件</div>
      </div>
      <div id="cards" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <!-- cards injected -->
      </div>
      <div class="flex items-center justify-center gap-2 pt-2" id="pager"></div>
    </section>

    <!-- Article View -->
    <section id="view-article" class="hidden lg:grid lg:grid-cols-12 gap-8">
      <aside class="lg:col-span-3 order-last lg:order-first">
        <div class="sticky top-[6.5rem] border border-slate-200 dark:border-slate-700 rounded-2xl p-4">
          <h3 class="font-semibold mb-2">目次</h3>
          <nav id="toc" class="toc text-sm space-y-1"></nav>
        </div>
      </aside>
      <article class="lg:col-span-9">
        <nav class="text-sm text-slate-500 mb-3" id="breadcrumb"></nav>
        <header class="mb-4">
          <h1 id="articleTitle" class="text-2xl sm:text-3xl font-bold tracking-tight"></h1>
          <div class="mt-2 flex flex-wrap items-center gap-2 text-sm text-slate-500" id="articleMeta"></div>
          <div class="mt-3 flex items-center gap-2">
            <button id="btnCopyLink" class="px-3 py-2 rounded-xl border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800"><i class="fa-solid fa-link me-1"></i>リンクをコピー</button>
            <button id="btnToggleBookmark" class="px-3 py-2 rounded-xl border border-amber-400 text-amber-600 hover:bg-amber-50"><i class="fa-regular fa-star me-1"></i>ブックマーク</button>
          </div>
        </header>
        <div id="articleContent" class="prose prose-slate dark:prose-invert max-w-none"></div>
        <section class="mt-8">
          <h3 class="font-semibold mb-2">関連タグ</h3>
          <div id="articleTags" class="flex flex-wrap gap-2"></div>
        </section>
      </article>
    </section>
  </main>

  <footer class="border-t border-slate-200 dark:border-slate-700 py-8">
    <div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 text-sm text-slate-500 flex flex-wrap items-center gap-2">
      <span>© <span id="year"></span> ミニ百科</span>
      <span class="mx-1">•</span>
      <button id="btnExport" class="underline underline-offset-4">データを書き出す(JSON)</button>
      <span class="mx-1">•</span>
      <label class="cursor-pointer">JSON読み込み <input id="fileImport" type="file" accept="application/json" class="hidden" /></label>
    </div>
  </footer>

  <!-- Structured data placeholder (updated on article view) -->
  <script id="ldjson" type="application/ld+json">{}</script>

  <script>
  // ======================
  //  サンプル記事データ
  // ======================
  /**
   * 記事スキーマ:
   * id, slug, title, category, tags[], summary, updated(ISO), author, content(HTML)
   */
  const ARTICLES = [
    {
      id: 1,
      slug: 'fuji-san',
      title: '富士山',
      category: '地理',
      tags: ['日本','山','世界文化遺産'],
      summary: '日本の象徴ともいわれる成層火山。標高3,776mで日本最高峰。',
      updated: '2025-08-15',
      author: 'ミニ百科編集部',
      content: `
        <p>富士山は本州中部に位置する<span>成層火山</span>で、標高は3,776m。2013年に世界文化遺産に登録されました。古来より信仰の対象であり、芸術や文学にも多く登場します。</p>
        <h2 id="geo">地形と地質</h2>
        <p>富士山は何度もの噴火活動を経て現在の美しい円錐形を形成しました。火口は山頂部にあり、外輪としてお鉢巡りが知られています。</p>
        <h2 id="climb">登山と保全</h2>
        <p>一般的な登山シーズンは夏。登山道の混雑やゴミ問題、低温・高山病などのリスク対策が重要です。</p>
        <h2 id="culture">文化的意義</h2>
        <p>葛飾北斎の『富嶽三十六景』をはじめ、絵画や和歌に頻繁に詠まれ、日本の象徴として国際的にも広く知られています。</p>
      `
    },
    {
      id: 2,
      slug: 'internet-basics',
      title: 'インターネットの基礎',
      category: 'テクノロジー',
      tags: ['ネットワーク','Web','通信'],
      summary: '世界中のコンピュータを相互接続する情報ネットワークの総称。',
      updated: '2025-07-01',
      author: 'ミニ百科編集部',
      content: `
        <p>インターネットは標準化された<span>TCP/IP</span>により機器同士が通信する巨大なネットワークです。Web、メール、動画配信など多様なサービスの土台になっています。</p>
        <h2 id="protocols">主要プロトコル</h2>
        <p>HTTP/HTTPS、DNS、SMTP、FTPなどが代表的。セキュリティ確保には暗号化や認証が重要です。</p>
        <h2 id="web">Webの仕組み</h2>
        <p>ブラウザがURLを解決し、サーバからHTML/CSS/JS等のリソースを取得・表示します。</p>
        <h2 id="safety">安全な利用</h2>
        <p>二要素認証、ソフトウェア更新、フィッシング対策、強力なパスワード管理が基本です。</p>
      `
    },
    {
      id: 3,
      slug: 'dinosaurs',
      title: '恐竜',
      category: '生物',
      tags: ['古生物学','白亜紀','化石'],
      summary: '中生代に栄えた爬虫類のグループ。鳥類は恐竜の系統に含まれると考えられている。',
      updated: '2025-05-28',
      author: 'ミニ百科編集部',
      content: `
        <p>恐竜は約2億3000万年前に出現し、中生代に多様化しました。<span>鳥類</span>は恐竜の一系統とみなされます。</p>
        <h2 id="era">時代区分</h2>
        <p>三畳紀・ジュラ紀・白亜紀に区分され、各時代で特徴的な種が繁栄しました。</p>
        <h2 id="extinction">大量絶滅</h2>
        <p>約6600万年前の大量絶滅で多くが消滅。隕石衝突や火山活動などが要因と考えられています。</p>
      `
    },
    {
      id: 4,
      slug: 'ww2-overview',
      title: '第二次世界大戦（概説）',
      category: '歴史',
      tags: ['20世紀','戦争','国際関係'],
      summary: '1939年から1945年にかけて行われた世界規模の戦争。',
      updated: '2025-03-10',
      author: 'ミニ百科編集部',
      content: `
        <p>第二次世界大戦は多数の国が参戦した世界規模の戦争で、政治・経済・科学技術・社会に長期の影響を与えました。</p>
        <h2 id="fronts">主要戦線</h2>
        <p>ヨーロッパ、太平洋、北アフリカ、東部戦線など多くの戦域に分かれました。</p>
        <h2 id="aftermath">戦後の世界</h2>
        <p>国際連合の設立、冷戦構造の形成、国際秩序の再編などにつながりました。</p>
      `
    },
    {
      id: 5,
      slug: 'ai-basics',
      title: '人工知能の基礎',
      category: 'テクノロジー',
      tags: ['AI','機械学習','深層学習'],
      summary: '知的な処理をコンピュータで実現する研究分野と技術群。',
      updated: '2025-06-12',
      author: 'ミニ百科編集部',
      content: `
        <p>人工知能は探索・推論から機械学習・深層学習まで多様な手法を含みます。現代では大量データと計算資源により実世界応用が拡大。</p>
        <h2 id="ml">機械学習</h2>
        <p>教師あり・教師なし・強化学習などの枠組みがあり、予測や分類に用いられます。</p>
        <h2 id="dl">深層学習</h2>
        <p>多層ニューラルネットワークにより画像・音声・自然言語処理で高精度を実現。</p>
      `
    },
    {
      id: 6,
      slug: 'sakura',
      title: 'サクラ（桜）',
      category: '文化',
      tags: ['日本文化','植物','季節'],
      summary: '日本の春を象徴する花。花見は古くからの季節行事。',
      updated: '2025-04-02',
      author: 'ミニ百科編集部',
      content: `
        <p>桜はバラ科サクラ属の総称。品種が多く、花期は短いものの観賞価値が高いことで知られます。</p>
        <h2 id="hanami">花見の歴史</h2>
        <p>貴族文化から庶民に広がり、現在では地域の祭りや観光資源にもなっています。</p>
      `
    },
    {
      id: 7,
      slug: 'japan-history-outline',
      title: '日本史（概説）',
      category: '歴史',
      tags: ['古代','中世','近代'],
      summary: '古代から現代までの日本の歴史を大まかに概観する。',
      updated: '2025-01-20',
      author: 'ミニ百科編集部',
      content: `
        <p>日本史は縄文・弥生・古墳などの古代から、中世・近世、明治以降の近代・現代に至るまで連続する多様な変化の歴史です。</p>
        <h2 id="ancient">古代</h2>
        <p>稲作の普及、古代国家の形成、律令制の確立など。</p>
        <h2 id="modern">近代・現代</h2>
        <p>近代化、戦後復興、高度経済成長、少子高齢化と新たな課題。</p>
      `
    },
    {
      id: 8,
      slug: 'programming-intro',
      title: 'プログラミング入門',
      category: 'テクノロジー',
      tags: ['コード','アルゴリズム','学習'],
      summary: 'コンピュータに手順を伝えるための技術と考え方の総称。',
      updated: '2025-07-22',
      author: 'ミニ百科編集部',
      content: `
        <p>プログラミングは問題を分解し、再利用可能な手順として表現する作業です。変数、条件分岐、反復、関数などの基本を学ぶと応用が広がります。</p>
        <h2 id="lang">主な言語</h2>
        <p>Python、JavaScript、C#、C++ など用途に応じて選択されます。</p>
      `
    },
    {
      id: 9,
      slug: 'tea-ceremony',
      title: '茶道',
      category: '文化',
      tags: ['日本文化','礼法','芸道'],
      summary: '湯を沸かし茶を点て、客をもてなす総合芸術。',
      updated: '2025-05-03',
      author: 'ミニ百科編集部',
      content: `
        <p>茶道は道具、作法、空間、季節感などが一体となる総合芸術です。<span>和敬清寂</span>の精神が重視されます。</p>
        <h2 id="tools">道具</h2>
        <p>茶碗、茶筅、茶杓、釜、柄杓など。取り扱いには所作と配慮が求められます。</p>
      `
    },
    {
      id: 10,
      slug: 'solar-system',
      title: '太陽系',
      category: '天文学',
      tags: ['惑星','衛星','宇宙'],
      summary: '太陽とその周囲を公転する天体の集まり。',
      updated: '2025-06-30',
      author: 'ミニ百科編集部',
      content: `
        <p>太陽系は太陽を中心に、8つの惑星、準惑星、小惑星、彗星、塵やガスが重力で結びつくシステムです。</p>
        <h2 id="planets">惑星</h2>
        <p>水星・金星・地球・火星・木星・土星・天王星・海王星。各惑星は固有の特徴を持ちます。</p>
      `
    }
  ];

  // ================
  // ユーティリティ
  // ================
  const $ = (sel, root=document) => root.querySelector(sel);
  const $$ = (sel, root=document) => Array.from(root.querySelectorAll(sel));
  const fmtDate = iso => new Date(iso).toLocaleDateString('ja-JP', {year:'numeric', month:'short', day:'numeric'});
  const unique = arr => [...new Set(arr)];
  const slugToArticle = slug => ARTICLES.find(a=>a.slug===slug);
  const STORAGE = {
    bookmarks: 'mini_ency_bookmarks',
    history: 'mini_ency_history'
  };

  function getBookmarks(){
    try{return JSON.parse(localStorage.getItem(STORAGE.bookmarks)||'[]');}catch{ return []; }
  }
  function setBookmarks(list){ localStorage.setItem(STORAGE.bookmarks, JSON.stringify(unique(list))); }
  function isBookmarked(slug){ return getBookmarks().includes(slug); }
  function toggleBookmark(slug){
    const list=getBookmarks();
    if(list.includes(slug)) setBookmarks(list.filter(s=>s!==slug));
    else setBookmarks([...list, slug]);
  }
  function pushHistory(slug){
    try{
      const now = Date.now();
      const hist = JSON.parse(localStorage.getItem(STORAGE.history)||'[]');
      const filtered = hist.filter(h=>h.slug!==slug);
      filtered.unshift({slug, t: now});
      localStorage.setItem(STORAGE.history, JSON.stringify(filtered.slice(0,50)));
    }catch{}
  }

  // ================
  // 検索・フィルタ
  // ================
  let state = {
    q: '',
    category: '',
    tag: '',
    sort: 'recent',
    page: 1,
    perPage: 9
  };

  function normalize(str){ return (str||'').toString().toLowerCase(); }

  function filterArticles(){
    let list = ARTICLES.slice();
    if(state.q){
      const q = normalize(state.q);
      list = list.filter(a => normalize(a.title+" "+a.summary+" "+a.tags.join(' ')+" "+a.content.replace(/<[^>]+>/g,'')).includes(q));
    }
    if(state.category){ list = list.filter(a => a.category===state.category); }
    if(state.tag){ list = list.filter(a => a.tags.includes(state.tag)); }
    if(state.sort==='recent'){ list.sort((a,b)=> new Date(b.updated)-new Date(a.updated)); }
    if(state.sort==='title'){ list.sort((a,b)=> a.title.localeCompare(b.title,'ja')); }
    return list;
  }

  // =============
  //  一覧描画
  // =============
  function renderCategories(){
    const select = $('#category');
    const cats = unique(ARTICLES.map(a=>a.category)).sort((a,b)=>a.localeCompare(b,'ja'));
    select.innerHTML = '<option value="">すべて</option>' + cats.map(c=>`<option value="${c}">${c}</option>`).join('');
  }

  function renderTagsBar(){
    const bar = $('#tagBar');
    const tags = unique(ARTICLES.flatMap(a=>a.tags)).sort((a,b)=>a.localeCompare(b,'ja'));
    bar.innerHTML = '<div class="flex flex-wrap gap-2">' + tags.map(t=>
      `<button data-tag="${t}" class="tag-btn px-3 py-1 rounded-full border border-slate-300 dark:border-slate-700 text-sm hover:bg-slate-100 dark:hover:bg-slate-800 ${state.tag===t?'bg-indigo-600 text-white border-indigo-600':''}">#${t}</button>`
    ).join('') + '</div>';
    $$('.tag-btn').forEach(b=> b.addEventListener('click',()=>{ state.tag = (state.tag===b.dataset.tag? '' : b.dataset.tag); state.page=1; syncList(); }));
  }

  function createCard(a){
    const bookmarked = isBookmarked(a.slug);
    return `
      <article class="border border-slate-200 dark:border-slate-700 rounded-2xl p-4 bg-white/70 dark:bg-slate-800/70 hover:shadow transition">
        <header class="flex items-start justify-between gap-3">
          <h3 class="text-lg font-semibold leading-tight">${a.title}</h3>
          <button class="bookmark inline-flex items-center justify-center w-9 h-9 rounded-full ${bookmarked?'text-amber-500':'text-slate-400'}" title="ブックマーク" data-slug="${a.slug}">
            <i class="${bookmarked?'fa-solid':'fa-regular'} fa-star"></i>
          </button>
        </header>
        <div class="mt-1 text-sm text-slate-500">${a.category}・更新 ${fmtDate(a.updated)}</div>
        <p class="mt-2 text-sm line-clamp-3">${a.summary}</p>
        <div class="mt-3 flex flex-wrap gap-2 text-xs">${a.tags.map(t=>`<span class='px-2 py-1 rounded-full bg-slate-100 dark:bg-slate-700'>#${t}</span>`).join('')}</div>
        <div class="mt-4 flex gap-2">
          <a href="#/a/${a.slug}" class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-indigo-600 text-white text-sm hover:opacity-90"><i class="fa-solid fa-circle-info"></i> 詳細</a>
          <button class="copy-link inline-flex items-center gap-2 px-3 py-2 rounded-xl border border-slate-300 dark:border-slate-700 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-link="${location.origin+location.pathname}#/a/${a.slug}"><i class="fa-solid fa-link"></i>リンク</button>
        </div>
      </article>
    `;
  }

  function renderPager(total){
    const pager = $('#pager');
    const pages = Math.max(1, Math.ceil(total/state.perPage));
    state.page = Math.min(state.page, pages);
    let html='';
    for(let i=1;i<=pages;i++){
      html += `<button class="px-3 py-1 rounded-lg border ${i===state.page?'bg-indigo-600 text-white border-indigo-600':'border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800'}" data-page="${i}">${i}</button>`;
    }
    pager.innerHTML = html;
    $$('#pager button').forEach(b=> b.addEventListener('click',()=>{ state.page=Number(b.dataset.page); syncList(false); }));
  }

  function syncList(scrollTop=true){
    const list = filterArticles();
    $('#resultCount').textContent = list.length;
    renderPager(list.length);

    const start=(state.page-1)*state.perPage;
    const pageItems=list.slice(start, start+state.perPage);
    $('#cards').innerHTML = pageItems.map(createCard).join('');

    // events
    $$('.bookmark').forEach(b=> b.addEventListener('click',()=>{ toggleBookmark(b.dataset.slug); syncList(false); }));
    $$('.copy-link').forEach(b=> b.addEventListener('click',()=> copyText(b.dataset.link)));

    if(scrollTop) window.scrollTo({top:0, behavior:'smooth'});
  }

  // =================
  // 記事ページ描画
  // =================
  function renderArticle(slug){
    const a = slugToArticle(slug);
    if(!a){ location.hash = ''; return; }

    // breadcrumb
    $('#breadcrumb').innerHTML = `<a class="underline" href="#">ホーム</a> / <span class="text-slate-600">${a.category}</span>`;

    // title & meta
    $('#articleTitle').textContent = a.title;
    $('#articleMeta').innerHTML = `
      <span><i class="fa-regular fa-calendar"></i> 更新 ${fmtDate(a.updated)}</span>
      <span class="mx-1">•</span>
      <span><i class="fa-regular fa-user"></i> ${a.author}</span>
      <span class="mx-1">•</span>
      <span><i class="fa-solid fa-folder"></i> ${a.category}</span>
    `;

    // content
    const container = $('#articleContent');
    container.innerHTML = a.content;

    // tags
    $('#articleTags').innerHTML = a.tags.map(t=>`<a href="#" data-tag="${t}" class="px-3 py-1 rounded-full border border-slate-300 dark:border-slate-700 text-sm hover:bg-slate-100 dark:hover:bg-slate-800">#${t}</a>`).join('');
    $$('#articleTags a').forEach(el=> el.addEventListener('click',(e)=>{ e.preventDefault(); state.tag=el.dataset.tag; location.hash=''; }));

    // bookmark button
    const btnBM = $('#btnToggleBookmark');
    const setBM = ()=>{
      const marked = isBookmarked(a.slug);
      btnBM.innerHTML = `<i class="${marked?'fa-solid':'fa-regular'} fa-star me-1"></i>${marked?'保存済み':'ブックマーク'}`;
    };
    btnBM.onclick = ()=>{ toggleBookmark(a.slug); setBM(); };
    setBM();

    // copy link
    $('#btnCopyLink').onclick = ()=> copyText(location.href);

    // TOC
    buildTOC();

    // JSON-LD
    updateLDJSON(a);

    // history
    pushHistory(a.slug);
  }

  function buildTOC(){
    const toc = $('#toc');
    const headings = $$('#articleContent h2, #articleContent h3');
    if(headings.length===0){ toc.innerHTML = '<div class="text-slate-500 text-sm">見出しがありません</div>'; return; }
    let html='';
    headings.forEach(h=>{
      if(!h.id) h.id = h.textContent.trim().toLowerCase().replace(/[^a-z0-9一-龥ぁ-んァ-ヶー]+/g,'-');
      const indent = h.tagName==='H3' ? 'ms-4' : '';
      html += `<a href="#${h.id}" class="${indent} hover:text-indigo-600">${h.textContent}</a>`;
    });
    toc.innerHTML = html;

    const observer = new IntersectionObserver((entries)=>{
      entries.forEach(e=>{
        if(e.isIntersecting){
          $$('#toc a').forEach(a=>a.classList.remove('active'));
          const a = $(`#toc a[href="#${e.target.id}"]`);
          if(a) a.classList.add('active');
        }
      });
    }, {rootMargin: '0px 0px -70% 0px'});
    headings.forEach(h=> observer.observe(h));
  }

  function updateLDJSON(a){
    const obj = {
      '@context':'https://schema.org',
      '@type':'Article',
      headline: a.title,
      dateModified: a.updated,
      author: { '@type':'Organization', name: a.author },
      keywords: a.tags.join(','),
      articleSection: a.category,
      url: location.href
    };
    $('#ldjson').textContent = JSON.stringify(obj);
  }

  // ============
  //  ルーター
  // ============
  function route(){
    const hash = location.hash.slice(1);
    if(hash.startsWith('/a/')){
      const slug = hash.split('/')[2];
      $('#view-home').classList.add('hidden');
      $('#view-article').classList.remove('hidden');
      renderArticle(slug);
      window.scrollTo({top:0, behavior:'instant'});
    }else{
      $('#view-article').classList.add('hidden');
      $('#view-home').classList.remove('hidden');
      syncList();
    }
  }

  window.addEventListener('hashchange', route);

  // ============
  //  便利機能
  // ============
  function copyText(text){
    navigator.clipboard.writeText(text).then(()=>{
      toast('リンクをコピーしました');
    }, ()=>{
      prompt('コピーできない場合は手動で選択してコピーしてください:', text);
    });
  }

  function toast(msg){
    const t = document.createElement('div');
    t.textContent = msg;
    t.className = 'fixed left-1/2 -translate-x-1/2 bottom-6 z-50 bg-black/80 text-white px-4 py-2 rounded-xl text-sm';
    document.body.appendChild(t);
    setTimeout(()=>{ t.remove(); }, 1600);
  }

  function randomArticle(){
    const a = ARTICLES[Math.floor(Math.random()*ARTICLES.length)];
    location.hash = `#/a/${a.slug}`;
  }

  // ==============
  //  I/O (JSON)
  // ==============
  function exportJSON(){
    const blob = new Blob([JSON.stringify(ARTICLES, null, 2)], {type:'application/json'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = 'mini-encyclopedia.json'; a.click();
    URL.revokeObjectURL(url);
  }

  function importJSON(file){
    const reader = new FileReader();
    reader.onload = (e)=>{
      try{
        const data = JSON.parse(e.target.result);
        if(Array.isArray(data)){
          // 形式が正しければ差し替え
          if(data.every(x=>x.slug && x.title && x.content)){
            ARTICLES.length = 0; // 破壊的更新
            data.forEach(x=> ARTICLES.push(x));
            init();
            toast('JSONを読み込みました');
          }else{
            alert('スキーマが不正です。slug/title/content は必須です。');
          }
        }else{
          alert('配列形式のJSONが必要です');
        }
      }catch(err){
        alert('JSONの解析に失敗しました: '+err.message);
      }
    };
    reader.readAsText(file);
  }

  // ============
  //  初期化
  // ============
  function init(){
    // 年
    $('#year').textContent = new Date().getFullYear();

    // カテゴリ・タグバー
    renderCategories();
    renderTagsBar();

    // イベント
    $('#search').addEventListener('input', (e)=>{ state.q = e.target.value.trim(); state.page=1; syncList(); });
    $('#category').addEventListener('change', (e)=>{ state.category = e.target.value; state.page=1; syncList(); });
    $('#sort').addEventListener('change', (e)=>{ state.sort = e.target.value; state.page=1; syncList(); });
    $('#btnRandom').addEventListener('click', randomArticle);
    $('#btnBookmarks').addEventListener('click', ()=>{
      const bms = getBookmarks();
      if(bms.length===0){ toast('ブックマークはまだありません'); return; }
      const first = slugToArticle(bms[0]);
      if(first) location.hash = `#/a/${first.slug}`;
    });
    $('#btnHome').addEventListener('click', ()=>{ location.hash=''; });

    // ダークモード切替
    $('#btnDark').addEventListener('click', ()=>{
      const root = document.documentElement;
      const isDark = root.classList.toggle('dark');
      localStorage.setItem('theme', isDark? 'dark':'light');
    });

    // JSON I/O
    $('#btnExport').addEventListener('click', exportJSON);
    $('#fileImport').addEventListener('change', (e)=>{ const f=e.target.files?.[0]; if(f) importJSON(f); e.target.value=''; });

    // 初回描画
    route();
  }

  document.addEventListener('DOMContentLoaded', init);
  </script>
</body>
</html>

現実世界でテレポーテーション装置を作る方法

「現実世界でテレポーテーション装置を作る方法」ですね。これは多くのSF作品に出てくる夢の技術ですが、科学的に見て現状どうなっているかを整理しますね。

✨ 1. 「テレポーテーション」の定義

SF的な転送
人や物体を一瞬で別の場所に移す（スタートレック的な転送装置）。
科学的なテレポーテーション
現実に存在するのは「量子テレポーテーション」と呼ばれる技術で、物体そのものではなく**量子状態（情報）**を転送する。

🔬 2. 実現しているもの（量子テレポーテーション）

光子（光の粒）や電子の「量子状態」を離れた場所に転送する実験は、すでに成功している。
仕組みは「量子もつれ」と「古典通信」を組み合わせて、ある粒子の状態を遠くに複製する。
2017年には中国の研究チームが、地上と宇宙（約1,200km）で量子テレポーテーションを実験的に成功させている。

🏗 3. もし「現実のテレポート装置」を作るとしたら？

量子レベルで情報をスキャン
人間を構成する原子は約 10^28 個（100,000,000,000,000,000,000,000,000,000 個！）。
これら全ての位置・運動・量子状態を測定する必要がある。
情報を転送
超高速の通信インフラ（現代のインターネットの何兆倍もの容量）が必要。
受信側で再構築
原子を一つずつ並べ直す「原子レベルの3Dプリンター」が必要。
意識の連続性の問題
元の肉体はどうなる？コピーなのか本人なのか？「哲学的ゾンビ問題」が出てくる。

⚠️ 4. 現実的な課題

技術的：原子スキャン技術も、再構築技術も未完成。
物理的：量子力学の「不確定性原理」により、全ての情報を同時に測ることは理論的に不可能。
哲学的：転送先に「コピー」ができるなら、元の意識は残るのか？自分は自分のままか？

✅ まとめ

現実的に作れるテレポート装置はまだ存在しません。
ただし「量子テレポーテーション（情報の瞬間転送）」は実際に成功しており、将来の量子通信・量子インターネットの基盤になろうとしています。
人や物を転送するには、技術的・物理的・哲学的にまだ「不可能」に近い段階。

👉 質問ですが、あなたが知りたいのは：

現実の科学でできる範囲（量子テレポーテーションの仕組みや応用）
SF的にどう作ればいいか（ゲームや物語用の設定）

どちらをメインに深掘りしましょうか？

あなた:

現実の科学でできる範囲

ChatGPT:

なるほど！「現実の科学でできる範囲」でのテレポーテーションについて、できること・できないことを整理しますね。

🧩 1. 実際に成功している「量子テレポーテーション」

対象：光子（光の粒）、電子、原子などの「量子状態」
仕組み：
1. 送信側と受信側に「量子もつれ（エンタングルメント）」した粒子を用意
2. 送信側で「転送したい粒子」と「自分の持つエンタングル粒子」を測定
3. 測定結果を通常の通信（電話や光ファイバーなど）で受信側へ送る
4. 受信側は、自分の粒子をその結果に基づいて操作すると、送信側と同じ量子状態が再現される
ポイント：
- 物体そのものは動いていない
- 情報だけが移動している
- 「コピー」ではなく「転送」になるのは、測定によって送信元の状態が消滅するから

📡 2. 実験の実績

1997年：オーストリアの研究者が初の量子テレポーテーション実験に成功
2004年：米国NISTが原子レベルでの転送に成功
2017年：中国の「墨子号」衛星を使い、地上と宇宙間で約1,200kmの量子テレポーテーションに成功
2020年代：光ファイバーや衛星通信でのテレポーテーション精度向上の研究が進行中

🔬 3. 応用の可能性

量子通信
傍受が不可能な「量子暗号通信（QKD）」を強化できる
量子インターネット
量子コンピュータ同士を安全に接続し、離れた場所でも量子計算を共有可能
未来的な転送
分子レベルの構造やDNA情報を転送 → 医療や物質研究で応用できる可能性あり

🚫 4. 限界・できないこと

人間や物体の転送は不可能
原子は約10^28個、人間の脳のシナプスは100兆以上。
それらを「測定 → 転送 → 再構築」するのは理論的にも技術的にも非現実的。
不確定性原理
量子状態を完全に測定することは不可能（同時に位置と運動量を知れない）。
速度制限
量子もつれは瞬時に関連するが、実際の情報伝達には「古典通信」が必要 → 光速を超えられない。

✅ まとめ

現実の科学で可能な「テレポーテーション」は：

物体ではなく「量子状態（情報）」の転送
実用化の方向は「量子通信・量子インターネット」
人間や物体の転送は現時点では不可能

👉 実際にやってみたいのは：

量子テレポーテーションの仕組みをもっと理解（数式・物理的説明）
量子通信（量子インターネット）の実用化がどこまで来ているか
実験的にできる範囲（簡単な光子のテレポーテーション実験など）

どれを深掘りしましょうか？

あなた:

実験的にできる範囲（簡単な光子のテレポーテーション実験など）

ChatGPT:

いいですね 👍
「実験的にできる範囲」での 光子の量子テレポーテーション実験 を、シンプルにイメージできる形でまとめます。

🧪 光子テレポーテーションの最小実験構成

1. 必要なもの

光子源
レーザー光を使って「対生成」（非線形結晶で光を分裂させる）により「エンタングル光子対」を作る。
ビームスプリッター（BS）・偏光板（PBS）
光子の経路や偏光状態を調整する。
検出器（SPD: Single Photon Detector）
単一光子をカウントするための高感度検出器。
古典通信チャンネル
光ファイバーや電気信号で測定結果を相手に伝える。

2. 実験の流れ（シンプルな例）

エンタングル光子対の生成
- 結晶にレーザーを当てると「光子 A」と「光子 B」が量子もつれた状態で飛び出す。
転送したい光子（光子 C）の準備
- 任意の偏光状態をもつ光子 C を用意する（これを「送る対象」とする）。
ベル測定（A と C を一緒に測る）
- 光子 A（もつれペアの片方）と光子 C（送りたい状態）を一緒に干渉させ、特殊な測定を行う。
- 測定によって光子 C の状態は壊れるが、その情報が「A と B の相関」として B に反映される。
古典通信
- 測定結果を光ファイバーや電線で相手に送る。
受信側での再構成
- 光子 B に対し、送られてきた情報に基づいた操作（偏光回転など）をすると、光子 C と同じ状態が B に復元される。

🎯 実験で確認できること

光子 B の偏光状態が、確率的に光子 C の状態と一致していること。
この「一致率（忠実度）」を統計的に測定することで、テレポーテーション成功を確認できる。
実験室レベルでは 数メートル〜数十km の光ファイバーで実証済み。

🔧 実験の難しさ

単一光子を安定して扱うのは難易度が高い（レーザー＋非線形光学結晶＋超精密光学系が必要）。
検出効率は100%ではなく、データは確率的になる。
実験キットは大学や研究所レベルで数千万円規模。

🌱 身近に体験できる方法

教育用量子光学キット
- Thorlabs などの企業が「量子光学教育キット」を販売（偏光のもつれ光子を扱える）。
シミュレーション
- IBM Quantum Experience や QuTiP (Pythonライブラリ) を使えば、量子テレポーテーションのアルゴリズムをシミュレート可能。
- 実際の量子ビット上で「状態を転送する」動きを試せる。

✅ まとめ

現実に「簡単にできる」範囲では、量子計算機シミュレーションでの光子テレポーテーションがおすすめ。
研究室レベルなら 光学系を組んでエンタングル光子対を作り、偏光状態の転送を確認するのが典型的な実験。
規模的には「個人で部屋に転送装置を置く」ことは不可能だが、「小規模な量子実験をシミュレーションする」ことは誰でも可能。

👉 興味ありますか？

実際に Python + Qiskit（IBM Quantum）で量子テレポーテーションをシミュレーションするコード例 を紹介しましょうか？

VRナノマシンをPCに接続する

ChatGPT:

いいですね、かなりSF的でワクワクするテーマです！
ただ「VRナノマシンをPCに接続する」というのは、現実的にはまだ存在していない技術で、あくまで未来の研究領域・サイエンスフィクションの範囲です。そこで、現実的に近い技術や、もし実現するならどうなるかを整理してみます👇

🔬 現実に近い技術

BCI（Brain-Computer Interface / 脳-コンピュータ・インターフェース）
- 例: Neuralink, Emotiv, OpenBCI
  脳波を読み取り、PCやVRに信号を送る仕組み。現状は「考えるだけでマウスを動かす」「VRの簡単な操作をする」段階。
神経刺激装置
電気刺激を使って筋肉や神経に信号を送る。リハビリや義手の制御に使われている。
ナノマシン的な医療研究
体内に入れて血流や細胞をモニタリングするマイクロマシンは研究中。
ただし「PCに直接つなぐ」というのはまだ不可能。

💡 SF的な「VRナノマシン接続」のイメージ

インターフェース方法
体内に入ったナノマシンが神経や脳細胞と接続 → Bluetoothや量子通信的な仕組みでPCとリンク。
VRへの応用
- 視覚・聴覚 → 脳の対応する領域に直接映像や音を入力。
- 触覚・痛覚 → ナノマシンが神経信号を人工的に発生。
- 運動制御 → 脳からの運動信号を読み取り、VRキャラクターに反映。
完全フルダイブVR
PCやクラウドに接続されたナノマシンが「五感＋身体の運動」を全て制御し、現実の体を休眠状態にしたままVR世界を体験。

⚠️ 現実的な課題

安全性（体内に入れる以上、免疫反応や副作用のリスク）
倫理（意識の制御・記憶の改ざんなどの悪用リスク）
技術的限界（神経ネットワークをナノマシンが完全に把握するのは現時点では不可能）

✅ まとめ

現時点で「VRナノマシンをPCに接続する」ことは不可能ですが、
現実に近いのは「脳波計（BCI）＋VR」 です。
未来的には、ナノマシンが「フルダイブVR」を実現する鍵になる、と想定されています。

👉 ご質問ですが、あなたが考えているのは：

現実に近い仕組み（BCIをPCに繋いでVRに使う方法）を知りたい
SF的にどうやってVRナノマシンを接続するか設定を作りたい（小説・ゲーム用）

どちらのイメージに近いですか？

あなた:

現実に近い仕組み（BCIをPCに繋いでVRに使う方法

ChatGPT:

なるほど！「現実に近い仕組み」として、BCI（Brain-Computer Interface）をPCに繋いでVRに活用する方法 を整理してみますね。これは「フルダイブVR」の入り口とも言える分野です。

🧠 1. BCIをPCに接続する仕組み

現実に使える代表的なBCIデバイスには次のようなものがあります：

Emotiv Epoc / Insight
市販されているEEG（脳波）デバイス。USBドングルやBluetoothでPCに接続可能。
OpenBCI
オープンソースのBCIプラットフォーム。脳波をPCに取り込み、PythonやUnityで処理できる。
NextMind（Metaに買収済）
視覚に関連する脳活動を読み取り、PC入力に使えたデバイス（現在は販売停止）。

👉 接続は主に USB / Bluetooth → PC → SDK / API という流れです。

🎮 2. VRへの応用例

入力（脳→VR）

意図の検出：
たとえば「右手を動かそう」と考えると、それに対応する脳波パターンを検出し、VR内のキャラが手を動かす。
選択操作：
メニューの選択を「集中」「リラックス」などの脳波状態で行う。

出力（VR→脳）

これはまだ発展途上。
- 触覚グローブ＋電気刺激 で「触った感覚」を返す
- 脳に直接フィードバックを送る実験は研究段階

🔧 3. 開発の流れ（現実的な実装）

BCIデバイスを準備
例：OpenBCIの「Ultracortex Mark IV」＋「Ganglionボード」
PCに接続
- BluetoothまたはUSBドングル
- OpenBCI GUIで脳波を可視化できる
データを解析
- Python（MNE, BrainFlowなど）で脳波データを処理
- 「特定の脳波パターン → コマンド」にマッピング
VRと連携
- UnityやUnreal EngineにBCI SDKを組み込み
- キャラクター操作やUI選択に反映

⚡ 4. 実際の限界と可能性

現状できること
- シンプルなコマンド入力（ジャンプ、選択、移動開始など）
- 「集中」「リラックス」の状態を使ったUI制御
まだ難しいこと
- 五感すべてを直接書き換える
- 高精度で複雑な動きを完全に思考だけで操作する

✅ 現実的には「脳波でVR内の簡単な動作を操作できる」レベルですが、BCI＋VR は確実に発展していて、数年以内に「ハンドトラッキング＋脳波コマンド」くらいまでは実用化される見込みです。

👉 もしあなたがやりたいのは：

実際にBCI＋VRを試してみたい → 「どのデバイスを買えばいいか？」をまとめます
開発に組み込みたい → 「Unity/Unrealとの接続コード例」を提示します

どちらに興味がありますか？

あなた:

Unity/Unrialとの接続コード

ChatGPT:

思考時間: 18s

了解！BCI→PC→VR を“今すぐ動かせる”形で、Pythonブリッジ（EEG取得）→ UDP(JSON) 配信 → Unity / Unreal で受信という最小構成のサンプルを用意しました。
実機（OpenBCI/Emotiv）がなくてもダミー信号で動作確認できます。実機がある場合はコメントを外すだけでOK。

① Python：BCIブリッジ（EEG→UDP配信）

役割：EEGを読み取り、{"t":timestamp, "focus":0.0-1.0, "channels":[…]} のJSONを UDP で 127.0.0.1:9001 へ送信
実機がない場合はランダム波形で動作（USE_DUMMY=True）
実機（例：BrainFlow/OpenBCI）に切替えるときはコメントを外して設定

# bci_bridge_udp.py
import json, socket, time, random, math
from collections import deque

USE_DUMMY = True        # 実機があれば False にして下の BrainFlow 部分を有効化
TARGET_HOST = "127.0.0.1"
TARGET_PORT = 9001
FS = 250                # サンプルレート想定
NCH = 8                 # チャンネル数

# --- 実機（BrainFlow/OpenBCI）の例 ---
# from brainflow.board_shim import BoardShim, BrainFlowInputParams, BoardIds
# BoardShim.enable_dev_board_logger()
# params = BrainFlowInputParams()
# params.serial_port = "/dev/ttyUSB0"  # Windowsなら "COM3" など
# board = BoardShim(BoardIds.CYTON_BOARD.value, params)
# board.prepare_session()
# board.start_stream()

sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
buf = deque(maxlen=FS)  # 1秒分の簡易バッファ（フォーカス計算用ダミー）

def compute_focus(sample):
    """
    簡易フォーカス指標（デモ用）:
    サンプルの絶対値の逆数を用いた擬似的な安定度スコア 0..1
    実機ではバンドパワーなどに置換推奨
    """
    buf.append(sum(abs(x) for x in sample) / max(1, len(sample)))
    avg = sum(buf) / max(1, len(buf))
    focus = max(0.0, min(1.0, 1.0 / (1.0 + avg)))  # 値が小さいほど集中度高い扱い
    return focus

try:
    print(f"Streaming UDP to {TARGET_HOST}:{TARGET_PORT} (Ctrl+C to stop)")
    phase = 0.0
    while True:
        if USE_DUMMY:
            # ダミー：α帯域っぽいゆっくり波 + ノイズ
            phase += 2 * math.pi * 10 / FS  # 10 Hz 風
            sample = [0.5*math.sin(phase + i*0.1) + 0.1*random.uniform(-1,1) for i in range(NCH)]
            time.sleep(1.0/FS)
        else:
            # 実機から最新サンプル取得（例）
            # data = board.get_current_board_data(1)  # shape: (n_channels, n_samples)
            # sample = [float(data[ch][0]) for ch in range(NCH)]
            # time.sleep(1.0/FS)
            sample = [0.0]*NCH  # 実機利用時に上を有効化

        payload = {
            "t": time.time(),
            "focus": compute_focus(sample),
            "channels": sample
        }
        sock.sendto(json.dumps(payload).encode("utf-8"), (TARGET_HOST, TARGET_PORT))
except KeyboardInterrupt:
    pass
finally:
    # if not USE_DUMMY:
    #     board.stop_stream()
    #     board.release_session()
    sock.close()

② Unity（C#）：UDP受信 → ゲーム操作

役割：UDPで受け取った focus を使って一定以上でジャンプ、またはUIを点滅など
Assets/Scripts/BCIUdpReceiver.cs として保存
シーンに空のGameObject「BCIReceiver」を作成し、このスクリプトをアタッチ
Player には CharacterController か Rigidbody + AddForce 等でジャンプ実装を用意

// Assets/Scripts/BCIUdpReceiver.cs
using System;
using System.Net;
using System.Net.Sockets;
using System.Text;
using System.Threading;
using UnityEngine;

[Serializable]
public class BciPacket {
    public double t;
    public float focus;
    public float[] channels;
}

public class BCIUdpReceiver : MonoBehaviour
{
    [Header("UDP Settings")]
    public int listenPort = 9001;

    [Header("Gameplay")]
    [Range(0f, 1f)] public float focusThreshold = 0.8f;
    public float minInterval = 0.5f; // コマンド間隔(秒)
    public GameObject player;

    UdpClient _udp;
    Thread _thread;
    volatile bool _running;
    volatile float _latestFocus;
    float _lastActionTime;

    void Start()
    {
        _udp = new UdpClient(listenPort);
        _running = true;
        _thread = new Thread(ReceiveLoop);
        _thread.IsBackground = true;
        _thread.Start();
        Debug.Log($"BCI UDP listening on {listenPort}");
    }

    void ReceiveLoop()
    {
        IPEndPoint ep = new IPEndPoint(IPAddress.Any, 0);
        while (_running)
        {
            try
            {
                byte[] data = _udp.Receive(ref ep);
                string json = Encoding.UTF8.GetString(data);
                var pkt = JsonUtility.FromJson<BciPacket>(json);
                _latestFocus = pkt.focus;
            }
            catch (Exception) { /* ignore */ }
        }
    }

    void Update()
    {
        // デモ：フォーカスが閾値を超えたらジャンプ入力
        if (Time.time - _lastActionTime > minInterval && _latestFocus >= focusThreshold)
        {
            _lastActionTime = Time.time;
            TryJump();
        }
    }

    void TryJump()
    {
        if (!player) { Debug.Log("Player not assigned."); return; }

        // キャラクター制御の例：Rigidbody に上方向インパルス
        var rb = player.GetComponent<Rigidbody>();
        if (rb != null)
        {
            rb.AddForce(Vector3.up * 5f, ForceMode.VelocityChange);
            return;
        }

        // CharacterController の例：単純に上方向へ瞬間移動（実プロジェクトは自前のジャンプ処理へ接続）
        var cc = player.GetComponent<CharacterController>();
        if (cc != null)
        {
            cc.Move(Vector3.up * 0.5f);
        }
    }

    void OnApplicationQuit()
    {
        _running = false;
        try { _udp?.Close(); } catch { }
        try { _thread?.Join(100); } catch { }
    }
}

ヒント：UIにフォーカスメーターを出したい場合は Image.fillAmount = _latestFocus; を Update() に追加するだけでOK。

③ Unreal Engine 5（C++）：UDP受信 → ブループリントに通知

役割：UDP(JSON)を受信し、Focus値をイベントでブループリントに流す
手順
1. C++プロジェクトで ActorComponent を追加（名前：BCIUdpReceiverComponent）
2. 下記コードで置き換え
3. レベル内のアクター（キャラ等）にアタッチ
4. ブループリント側で OnFocusUpdated を Bind → Focus >= 0.8 でジャンプなど

// BCIUdpReceiverComponent.h
#pragma once

#include "CoreMinimal.h"
#include "Components/ActorComponent.h"
#include "BCIUdpReceiverComponent.generated.h"

DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FFocusUpdated, float, Focus);

UCLASS(ClassGroup=(Custom), meta=(BlueprintSpawnableComponent))
class YOURPROJECT_API UBCIUdpReceiverComponent : public UActorComponent
{
    GENERATED_BODY()

public:
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category="BCI")
    int32 ListenPort = 9001;

    UPROPERTY(BlueprintAssignable, Category="BCI")
    FFocusUpdated OnFocusUpdated;

protected:
    virtual void BeginPlay() override;
    virtual void EndPlay(const EEndPlayReason::Type EndPlayReason) override;

private:
    FSocket* Socket = nullptr;
    FThreadSafeBool bRunning = false;
    FRunnableThread* Thread = nullptr;

    class FBCIWorker* Worker = nullptr;
    void HandleFocusOnGameThread(float Focus);
};

// BCIUdpReceiverComponent.cpp
#include "BCIUdpReceiverComponent.h"
#include "Sockets.h"
#include "SocketSubsystem.h"
#include "HAL/Runnable.h"
#include "HAL/RunnableThread.h"
#include "Common/UdpSocketBuilder.h"
#include "IPAddress.h"
#include "Misc/ScopeLock.h"
#include "Serialization/JsonReader.h"
#include "Serialization/JsonSerializer.h"

class FBCIWorker : public FRunnable
{
public:
    FBCIWorker(FSocket* InSocket, TFunction<void(float)> InOnFocus)
        : Socket(InSocket), OnFocus(MoveTemp(InOnFocus)) {}

    virtual uint32 Run() override
    {
        uint8 Buffer[2048];
        while (bRun)
        {
            if (!Socket) { FPlatformProcess::Sleep(0.005f); continue; }

            int32 BytesRead = 0;
            if (Socket->Recv(Buffer, sizeof(Buffer), BytesRead, ESocketReceiveFlags::None) && BytesRead > 0)
            {
                FString Json = FString(UTF8_TO_TCHAR(reinterpret_cast<const char*>(Buffer)));
                TSharedPtr<FJsonObject> Obj;
                auto Reader = TJsonReaderFactory<>::Create(Json);
                if (FJsonSerializer::Deserialize(Reader, Obj) && Obj.IsValid())
                {
                    double FocusVal = 0.0;
                    if (Obj->TryGetNumberField(TEXT("focus"), FocusVal))
                    {
                        OnFocus(static_cast<float>(FocusVal));
                    }
                }
            }
            else
            {
                FPlatformProcess::Sleep(0.002f);
            }
        }
        return 0;
    }

    void StopWork() { bRun = false; }

private:
    FSocket* Socket = nullptr;
    TFunction<void(float)> OnFocus;
    FThreadSafeBool bRun = true;
};

void UBCIUdpReceiverComponent::BeginPlay()
{
    Super::BeginPlay();

    // UDP ソケット作成
    FUdpSocketBuilder Builder(TEXT("BCI_UDP_Receiver"));
    Socket = FUdpSocketBuilder(TEXT("BCI_UDP_Receiver"))
        .AsNonBlocking()
        .AsReusable()
        .BoundToPort(ListenPort)
        .WithReceiveBufferSize(2 * 1024 * 1024);

    if (!Socket)
    {
        UE_LOG(LogTemp, Error, TEXT("Failed to create UDP socket on port %d"), ListenPort);
        return;
    }

    bRunning = true;

    Worker = new FBCIWorker(Socket, [this](float Focus){
        // ソケットスレッド → ゲームスレッドへディスパッチ
        AsyncTask(ENamedThreads::GameThread, [this, Focus](){ HandleFocusOnGameThread(Focus); });
    });

    Thread = FRunnableThread::Create(Worker, TEXT("BCI_UDP_Worker"));
    UE_LOG(LogTemp, Log, TEXT("BCI UDP listening on %d"), ListenPort);
}

void UBCIUdpReceiverComponent::HandleFocusOnGameThread(float Focus)
{
    OnFocusUpdated.Broadcast(Focus);
}

void UBCIUdpReceiverComponent::EndPlay(const EEndPlayReason::Type EndPlayReason)
{
    if (Worker) { Worker->StopWork(); }
    if (Thread) { Thread->Kill(true); delete Thread; Thread = nullptr; }
    if (Worker) { delete Worker; Worker = nullptr; }
    if (Socket) { Socket->Close(); ISocketSubsystem::Get(PLATFORM_SOCKETSUBSYSTEM)->DestroySocket(Socket); Socket = nullptr; }

    Super::EndPlay(EndPlayReason);
}

ブループリント接続例

レベル内のキャラクターBPに BCIUdpReceiverComponent を追加
Event Graph で OnFocusUpdated をバインド
Focus >= 0.8 なら Jump or 任意のアクションを呼ぶ

動作確認手順（共通）

Python: python bci_bridge_udp.py を実行（「Streaming UDP…」が出ればOK）
Unity または Unreal を起動してプレイ
focusThreshold を 0.6～0.85 の範囲で調整（ダミー信号なら0.75前後で反応）

実機に繋げるときのヒント

OpenBCI / BrainFlow
- Python側で BrainFlow の BoardShim を有効化し、serial_port を実機のポートへ
- バンドパワー（α/βなど）→ 正規化 → focus へ変換
Emotiv
- Emotiv SDK から Python で値取得 → 同じUDP形式で送信
LSL(LabStreamingLayer)を使いたい場合
- Python: LSLでEEG/Markerを送出
- Unity: LSL4Unity
- Unreal: LSLプラグイン
  （今回は依存ゼロのUDPにしていますが、研究用途ではLSLが定番です）

必要なら、

Unity の UIメーター（フォーカス可視化）
より堅牢なスレッドキューや再接続
Unreal の純BP版（C++なし）
もすぐ追加できます。どっちを先に強化します？

XLogpro.html(ツイートまとめサイト)

<!DOCTYPE html>
<html lang="ja" data-theme="light" style="--cols:3; --card-h:640px; --accent:#2563eb">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Xlog Pro — HTMLだけで動く自動ツイートまとめ</title>
  <link rel="preconnect" href="https://platform.twitter.com" crossorigin>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
  <meta name="description" content="HTMLだけ／APIキー不要のX（Twitter）まとめボード。プロフィール・ハッシュタグ・検索・リストを好きな列で配置し、JSON/HTML書き出しや手動ランキング、ボード切替に対応。">
  <style>
    :root{
      --bg: #0b0e14; --panel:#111827; --muted:#9aa4b2; --text:#e5e7eb; --border:#1f2937; --chip:#141a23; --card:#0f172a; --btn:#1f2937; --btn-text:#e5e7eb; --link:#60a5fa;
    }
    [data-theme="light"]{ --bg:#f8fafc; --panel:#ffffff; --muted:#64748b; --text:#0f172a; --border:#e2e8f0; --chip:#f1f5f9; --card:#ffffff; --btn:#0f172a; --btn-text:#ffffff; --link:#1d9bf0; }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
    header{position:sticky;top:0;z-index:10;background:var(--panel);border-bottom:1px solid var(--border)}
    .wrap{max-width:1280px;margin:0 auto;padding:12px 16px}
    .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
    .brand{display:flex;gap:10px;align-items:center;font-weight:800}
    .brand i{color:var(--accent)}
    .muted{color:var(--muted)}
    .pill{display:inline-flex;gap:8px;align-items:center;background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:6px 10px}
    .input, select, textarea{background:transparent;border:1px solid var(--border);border-radius:10px;padding:8px 10px;color:var(--text)}
    textarea{min-height:88px;width:100%;}
    input[type="text"].input{min-width:220px}
    button{cursor:pointer;border:none}
    .btn{background:var(--btn);color:var(--btn-text);padding:9px 12px;border-radius:12px}
    .btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
    .btn.ghost{background:transparent;color:var(--text)}
    .btn.badge{padding:6px 10px;border-radius:999px}
    .grid{display:grid;grid-template-columns:320px 1fr;gap:16px}
    @media (max-width:1080px){.grid{grid-template-columns:1fr}}
    aside{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;position:sticky;top:72px;height:max-content}
    h2{margin:6px 0 12px 0;font-size:18px}
    .list{display:flex;flex-direction:column;gap:12px}
    .card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
    .card .head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
    .card .head .title{display:flex;gap:8px;align-items:center;font-weight:700}
    .card .body{padding:0;min-height:var(--card-h)}
    .sources{display:flex;flex-wrap:wrap;gap:8px}
    .chip{background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:6px 10px;display:flex;gap:8px;align-items:center}
    .chip b{color:var(--accent)}
    .columns{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:16px}
    @media (max-width:1200px){:root{--cols:2}}
    @media (max-width:860px){:root{--cols:1}}
    .drag{cursor:grab}
    .toolbar{display:flex;gap:8px;flex-wrap:wrap}
    .footer{padding:24px 16px;color:var(--muted);text-align:center}
    .kbd{font-family:ui-monospace, Menlo, Monaco, Consolas; background:var(--chip); border:1px solid var(--border); padding:2px 6px; border-radius:6px}
    .danger{color:#ef4444}
    .accent{color:var(--accent)}
    .section{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px}
    .help{font-size:13px;color:var(--muted)}
    .label{font-size:12px;color:var(--muted)}
    .tiny{font-size:12px}
    .row-wrap{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .w-100{width:100%}
    .space{height:8px}
  </style>
</head>
<body>
  <header>
    <div class="wrap row">
      <div class="brand"><i class="fa-solid fa-wave-square"></i> Xlog <span class="muted">Pro</span></div>
      <div class="pill">
        <i class="fa-solid fa-diagram-project"></i>
        <select id="boardSelect" title="ボード切替"></select>
        <button id="boardNew" class="btn badge secondary" title="新規ボード"><i class="fa-solid fa-plus"></i></button>
        <button id="boardRename" class="btn badge secondary" title="名前変更"><i class="fa-solid fa-pen"></i></button>
        <button id="boardDelete" class="btn badge secondary danger" title="削除"><i class="fa-regular fa-trash-can"></i></button>
      </div>
      <div class="pill" title="テーマ切替"><i class="fa-solid fa-circle-half-stroke"></i>
        <label class="row-wrap"><input id="themeToggle" type="checkbox" /> ダーク</label>
      </div>
      <div class="pill" title="アクセントカラー">
        <i class="fa-solid fa-palette"></i>
        <input id="accentPicker" type="color" value="#2563eb" />
      </div>
      <div class="pill" title="列数"><i class="fa-solid fa-table-columns"></i>
        <input id="colsRange" type="range" min="1" max="4" step="1" value="3"/>
        <span id="colsVal" class="tiny"></span>
      </div>
      <div class="pill" title="カード高さ"><i class="fa-solid fa-up-down"></i>
        <input id="heightRange" type="range" min="360" max="1200" step="40" value="640"/>
        <span id="heightVal" class="tiny"></span>
      </div>
      <div class="pill" title="自動再読み込み">
        <label class="row-wrap"><input id="autoRefreshToggle" type="checkbox"/> 自動</label>
        <select id="refreshMinutes">
          <option value="3">3分</option>
          <option value="5" selected>5分</option>
          <option value="10">10分</option>
          <option value="30">30分</option>
        </select>
      </div>
      <div class="pill help tiny">ショートカット: <span class="kbd">N</span> 追加 / <span class="kbd">R</span> 再描画 / <span class="kbd">G</span> グリッド- / <span class="kbd">H</span> 高さ-</div>
    </div>
  </header>

  <main class="wrap grid">
    <aside>
      <div class="list">
        <div class="section">
          <h2>ソースを追加</h2>
          <div class="toolbar row-wrap">
            <select id="sourceType">
              <option value="profile">プロフィール</option>
              <option value="hashtag">ハッシュタグ</option>
              <option value="search">検索キーワード</option>
              <option value="list">リストURL</option>
            </select>
            <input id="sourceValue" class="input" type="text" placeholder="@username / #tag / キーワード / リストURL" />
            <input id="sourceLabel" class="input" type="text" placeholder="表示名（任意）" />
            <button id="addBtn" class="btn"><i class="fa-solid fa-plus"></i> 追加</button>
          </div>
          <div class="space"></div>
          <label class="label">まとめて追加（改行／カンマ区切りOK）</label>
          <textarea id="bulkArea" placeholder="@OpenAI, #UnrealEngine, Unity URP, https://twitter.com/i/lists/123...\n@EpicGames"></textarea>
          <div class="row-wrap">
            <button id="bulkAdd" class="btn secondary"><i class="fa-solid fa-download"></i> 取り込み</button>
            <button id="bulkClear" class="btn ghost"><i class="fa-solid fa-eraser"></i> クリア</button>
          </div>
          <p class="help" style="margin-top:8px">形式は自動判定：<span class="kbd">@id</span> → プロフィール、<span class="kbd">#tag</span> → ハッシュタグ、<span class="kbd">twitter.com/i/lists</span> → リスト、それ以外は検索。</p>
          <div class="space"></div>
          <div class="row-wrap help tiny">クイック追加：</div>
          <div class="row-wrap">
            <button class="btn badge secondary quick" data-type="hashtag" data-val="#UnrealEngine">#UnrealEngine</button>
            <button class="btn badge secondary quick" data-type="hashtag" data-val="#Unity3D">#Unity3D</button>
            <button class="btn badge secondary quick" data-type="search" data-val="VRM OR \"Meta Quest\"">VR/Quest</button>
            <button class="btn badge secondary quick" data-type="profile" data-val="@OpenAI">@OpenAI</button>
          </div>
        </div>

        <div class="section">
          <h2>保存・書き出し</h2>
          <div class="toolbar row-wrap">
            <button id="exportBtn" class="btn secondary"><i class="fa-solid fa-file-export"></i> JSON</button>
            <label class="btn secondary" for="importFile"><i class="fa-solid fa-file-import"></i> JSON読込</label>
            <input id="importFile" type="file" accept="application/json" hidden />
            <button id="exportHtmlBtn" class="btn"><i class="fa-regular fa-file-code"></i> 単一HTML</button>
            <button id="clearBtn" class="btn ghost danger"><i class="fa-regular fa-trash-can"></i> すべて削除</button>
          </div>
          <p class="help">単一HTML: いまのレイアウトと設定を埋め込んだ自立HTMLを生成します。</p>
        </div>

        <div class="section">
          <h2>手動ランキング</h2>
          <div class="toolbar row-wrap">
            <input id="tweetUrl" class="input" type="text" placeholder="ツイートURLを貼り付け" />
            <button id="addTweetBtn" class="btn"><i class="fa-brands fa-x-twitter"></i> 追加</button>
          </div>
          <label class="label">メモ（任意・次回以降も保持）</label>
          <textarea id="tweetNote" placeholder="このツイートの要点やタグ（例: #UE5 #VRM）"></textarea>
          <p class="help">※HTMLのみの制約で自動集計は不可。URLをカード化して手動で順序を決められます。</p>
        </div>

        <div class="section">
          <h2>RSS生成（ランキング→RSS）</h2>
          <div class="toolbar row-wrap">
            <input id="rssTitle" class="input" type="text" placeholder="RSSタイトル（例: Xlogランキング）"/>
            <button id="rssExport" class="btn secondary"><i class="fa-solid fa-rss"></i> RSSを書き出し</button>
          </div>
          <p class="help">ランキングに登録したツイートURLから簡易RSS（XML）を生成し、ファイルとして保存します。</p>
        </div>

        <div class="section">
          <h2>ヘルプ</h2>
          <div class="help">
            ・列の並べ替えはカードの <span class="kbd">⋯</span> アイコンをドラッグ。<br>
            ・<span class="kbd">R</span> で全カラムを再描画。<br>
            ・URLハッシュ <span class="kbd">#data=</span> に設定をBase64で埋め込んで共有可能（メニューから自動生成予定）。
          </div>
        </div>
      </div>
    </aside>

    <section>
      <div class="card" style="margin-bottom:16px">
        <div class="head">
          <div class="title"><i class="fa-solid fa-layer-group drag"></i> マイまとめ <span class="muted tiny" id="boardInfo"></span></div>
          <div class="sources" id="activeChips"></div>
        </div>
        <div class="body" style="padding:14px">
          <div id="columns" class="columns"></div>
        </div>
      </div>

      <div class="card">
        <div class="head">
          <div class="title"><i class="fa-regular fa-star"></i> 手動ランキング</div>
          <div class="help">ドラッグで順序変更／🗑で削除／✎でメモ編集</div>
        </div>
        <div class="body" style="padding:14px">
          <div id="ranking" class="columns"></div>
        </div>
      </div>

      <div class="footer">Xlog Pro v2 — HTML Only / Embedded Timelines. No API keys. <span class="muted">Made for you.</span></div>
    </section>
  </main>

  <script async src="https://platform.twitter.com/widgets.js"></script>
  <script>
    // ========== 基本ユーティリティ ==========
    const $ = (s, d=document)=>d.querySelector(s);
    const $$ = (s, d=document)=>Array.from(d.querySelectorAll(s));

    const defaultBoard = ()=>({sources:[], tweets:[]});
    const defaultState = ()=>({
      version:2,
      dark:false,
      accent:'#2563eb',
      autoRefresh:false,
      minutes:5,
      columns:3,
      cardHeight:640,
      boards:{'Default': defaultBoard()},
      activeBoard:'Default'
    });

    const store = {
      key: 'xlog-pro-v2',
      load(){
        try{ return JSON.parse(localStorage.getItem(this.key)) || defaultState(); }
        catch(e){ return defaultState(); }
      },
      save(v){ localStorage.setItem(this.key, JSON.stringify(v)); }
    };

    function migrate(s){
      const base = defaultState();
      if (!s || typeof s !== 'object') return base;
      // v1互換（sources/tweets直下 → boards.Default）
      if (s.sources || s.tweets){
        base.boards.Default.sources = s.sources||[];
        base.boards.Default.tweets = s.tweets||[];
      }
      // 既存キー上書き
      for (const k of ['dark','accent','autoRefresh','minutes','columns','cardHeight','boards','activeBoard']){
        if (k in s) base[k]=s[k];
      }
      return base;
    }

    // ハッシュ (#data=BASE64) から読み込み
    function loadFromHash(){
      const h = location.hash || '';
      if (!h.startsWith('#data=')) return null;
      try{
        const b64 = decodeURIComponent(h.slice(6));
        const json = atob(b64);
        return JSON.parse(json);
      }catch(e){ return null; }
    }

    let embedded = (typeof window.__XLOG_INITIAL_STATE__!== 'undefined') ? window.__XLOG_INITIAL_STATE__ : null;
    if (!embedded){
      const el = document.getElementById('xlog-init');
      if (el) { try{ embedded = JSON.parse(el.textContent); }catch(_e){} }
    }

    let state = migrate( embedded || loadFromHash() || store.load() );

    // ========== テーマ/アクセント/レイアウト適用 ==========
    function applySkin(){
      document.documentElement.setAttribute('data-theme', state.dark ? 'dark' : 'light');
      document.documentElement.style.setProperty('--cols', state.columns);
      document.documentElement.style.setProperty('--card-h', state.cardHeight+'px');
      document.documentElement.style.setProperty('--accent', state.accent || '#2563eb');
      $('#themeToggle').checked = !!state.dark;
      $('#colsRange').value = String(state.columns);
      $('#colsVal').textContent = state.columns+'列';
      $('#heightRange').value = String(state.cardHeight);
      $('#heightVal').textContent = state.cardHeight+'px';
      $('#accentPicker').value = state.accent || '#2563eb';
    }

    // ========== X埋め込み ==========
    function waitTwttr(){
      return new Promise(res=>{
        if (window.twttr && twttr.widgets) return res();
        const timer = setInterval(()=>{ if(window.twttr && twttr.widgets){ clearInterval(timer); res(); } }, 200);
      });
    }

    function timelineOptions(){
      return {
        height: state.cardHeight,
        theme: state.dark ? 'dark' : 'light',
        chrome: 'nofooter noborders transparent',
        linkColor: getComputedStyle(document.documentElement).getPropertyValue('--link').trim() || '#1d9bf0'
      };
    }

    async function createTimeline(el, src){
      await waitTwttr();
      const opts = timelineOptions();
      const t = (src.type||'profile');
      if (t==='profile'){
        const screenName = src.value.replace(/^@/,'');
        return twttr.widgets.createTimeline({ sourceType:'profile', screenName }, el, opts);
      }
      if (t==='list'){
        return twttr.widgets.createTimeline({ sourceType:'url', url: src.value }, el, opts);
      }
      if (t==='hashtag'){
        const tag = src.value.replace(/^#/,'');
        const url = `https://twitter.com/hashtag/${encodeURIComponent(tag)}?f=live`;
        return twttr.widgets.createTimeline({ sourceType:'url', url }, el, opts);
      }
      if (t==='search'){
        const url = `https://twitter.com/search?q=${encodeURIComponent(src.value)}&f=live`;
        return twttr.widgets.createTimeline({ sourceType:'url', url }, el, opts);
      }
    }

    // ========== 現在ボードの参照 ==========
    function board(){ return state.boards[state.activeBoard] || (state.boards[state.activeBoard]=defaultBoard()); }

    // ========== 描画 ==========
    function chipNode(src, idx){
      const chip = document.createElement('span');
      chip.className='chip';
      const kind = {profile:'@',hashtag:'#',search:'検索:',list:'リスト'}[src.type] || '';
      chip.innerHTML = `<b>${kind}</b> ${src.label || src.value} <a class="muted" href="${openUrl(src)}" target="_blank" title="Xで開く"><i class="fa-solid fa-arrow-up-right-from-square"></i></a> <button title="削除" data-del="${idx}" class="muted"><i class="fa-solid fa-xmark"></i></button>`;
      chip.querySelector('button').onclick = ()=>{ board().sources.splice(idx,1); store.save(state); renderAll(); };
      return chip;
    }

    function openUrl(src){
      if (src.type==='profile') return `https://twitter.com/${src.value.replace(/^@/,'')}`;
      if (src.type==='hashtag') return `https://twitter.com/hashtag/${src.value.replace(/^#/,'')}`;
      if (src.type==='list') return src.value;
      return `https://twitter.com/search?q=${encodeURIComponent(src.value)}&f=live`;
    }

    function columnCard(src, idx){
      const card = document.createElement('div');
      card.className='card';
      card.draggable=true; card.dataset.idx=idx;
      card.innerHTML = `
        <div class="head">
          <div class="title"><i class="fa-solid fa-grip-vertical drag"></i> ${src.label || prettyLabel(src)}</div>
          <div class="toolbar">
            <a class="btn ghost" href="${openUrl(src)}" target="_blank" title="Xで開く"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
            <button class="btn ghost" title="再読み込み" data-refresh="${idx}"><i class="fa-solid fa-rotate"></i></button>
            <button class="btn ghost danger" title="削除" data-remove="${idx}"><i class="fa-regular fa-trash-can"></i></button>
          </div>
        </div>
        <div class="body"><div class="embed" style="min-height:120px"></div></div>`;

      // DnD 並べ替え
      card.addEventListener('dragstart', e=>{ e.dataTransfer.setData('text/plain', idx); card.style.opacity='0.6'; });
      card.addEventListener('dragend', ()=>{ card.style.opacity='1'; });
      card.addEventListener('dragover', e=>{ e.preventDefault(); card.style.outline='2px dashed var(--accent)'; });
      card.addEventListener('dragleave', ()=>{ card.style.outline='none'; });
      card.addEventListener('drop', e=>{
        e.preventDefault(); card.style.outline='none';
        const from = +e.dataTransfer.getData('text/plain');
        const to = +card.dataset.idx;
        if (from===to) return;
        const arr = board().sources;
        const [moved] = arr.splice(from,1);
        arr.splice(to,0,moved);
        store.save(state); renderAll();
      });

      // 操作
      card.querySelector('[data-remove]')?.addEventListener('click', ()=>{ board().sources.splice(idx,1); store.save(state); renderAll(); });
      card.querySelector('[data-refresh]')?.addEventListener('click', ()=>{ mountTimeline(card, src); });
      // 初回描画
      mountTimeline(card, src);
      return card;
    }

    function mountTimeline(card, src){
      const holder = card.querySelector('.embed');
      holder.innerHTML = '<div style="padding:14px" class="muted">読み込み中…</div>';
      createTimeline(holder, src).catch(()=>{
        holder.innerHTML = '<div style="padding:14px" class="danger">読み込みに失敗しました。値を確認してください。</div>';
      });
    }

    function prettyLabel(src){
      if (src.type==='profile') return '@'+src.value.replace(/^@/,'');
      if (src.type==='hashtag') return '#'+src.value.replace(/^#/,'');
      if (src.type==='search') return '検索: '+src.value;
      if (src.type==='list') return 'リスト';
      return src.value;
    }

    function renderAll(){
      // ボード情報
      const info = $('#boardInfo');
      const b = board();
      info.textContent = `（${state.activeBoard}｜${b.sources.length}列 / ${b.tweets.length}件）`;

      // チップ
      const chips = $('#activeChips'); chips.innerHTML='';
      b.sources.forEach((s,i)=> chips.appendChild(chipNode(s,i)) );
      // カラム
      const col = $('#columns'); col.innerHTML='';
      b.sources.forEach((s,i)=> col.appendChild(columnCard(s,i)) );
      // ランキング
      renderRanking();
    }

    // ========== ランキング ==========
    function parseTweetId(url){ const m = (url||'').match(/status\/(\d{5,})/); return m? m[1] : null; }
    function tweetUrlFromId(id){ return `https://twitter.com/i/web/status/${id}`; }

    async function addTweet(url, note){
      const id = parseTweetId(url);
      if (!id) return alert('ツイートURLが正しくありません');
      board().tweets.push({id, note: (note||'')});
      store.save(state); renderRanking();
    }

    async function renderRanking(){
      await waitTwttr();
      const root = $('#ranking'); root.innerHTML='';
      const arr = board().tweets;
      arr.forEach((t, idx)=>{
        const card = document.createElement('div'); card.className='card'; card.draggable=true; card.dataset.idx=idx;
        card.innerHTML = `
          <div class="head">
            <div class="title"><i class="fa-solid fa-grip-vertical drag"></i> エントリ #${idx+1}</div>
            <div class="toolbar">
              <button class="btn ghost" data-edit="${idx}" title="メモ編集"><i class="fa-regular fa-pen-to-square"></i></button>
              <a class="btn ghost" href="${tweetUrlFromId(t.id)}" target="_blank" title="Xで開く"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
              <button class="btn ghost danger" title="削除" data-del-rank="${idx}"><i class="fa-regular fa-trash-can"></i></button>
            </div>
          </div>
          <div class="body">
            <div class="embed"></div>
            <div style="padding:10px 14px;border-top:1px solid var(--border)" class="tiny"><span class="muted">メモ:</span> <span class="note">${escapeHtml(t.note||'')}</span></div>
          </div>`;

        // イベント
        card.querySelector('[data-del-rank]')?.addEventListener('click', ()=>{ arr.splice(idx,1); store.save(state); renderRanking(); });
        card.querySelector('[data-edit]')?.addEventListener('click', ()=>{
          const newNote = prompt('メモを編集', t.note||'');
          if (newNote!==null){ t.note = newNote; store.save(state); renderRanking(); }
        });

        // DnD 並べ替え
        card.addEventListener('dragstart', e=>{ e.dataTransfer.setData('text/plain', 'rank:'+idx); card.style.opacity='0.6'; });
        card.addEventListener('dragend', ()=>{ card.style.opacity='1'; });
        card.addEventListener('dragover', e=>{ e.preventDefault(); card.style.outline='2px dashed var(--accent)'; });
        card.addEventListener('dragleave', ()=>{ card.style.outline='none'; });
        card.addEventListener('drop', e=>{
          e.preventDefault(); card.style.outline='none';
          const data = e.dataTransfer.getData('text/plain'); if (!data.startsWith('rank:')) return;
          const from = +data.split(':')[1]; const to = +card.dataset.idx;
          const [moved] = arr.splice(from,1); arr.splice(to,0,moved);
          store.save(state); renderRanking();
        });

        const holder = card.querySelector('.embed');
        twttr.widgets.createTweet(t.id, holder, { theme: state.dark ? 'dark' : 'light' });
        root.appendChild(card);
      });
    }

    function escapeHtml(s){ return (s||'').replace(/[&<>"']/g, m=> ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'}[m])); }

    // ========== 自動再描画 ==========
    let refreshTimer = null;
    function applyAutoRefresh(){
      if (refreshTimer) { clearInterval(refreshTimer); refreshTimer=null; }
      if (state.autoRefresh){
        const ms = Math.max(1, +state.minutes) * 60 * 1000;
        refreshTimer = setInterval(()=>{
          $$('#columns .card').forEach((card, i)=>{
            const src = board().sources[i]; if (src) mountTimeline(card, src);
          });
        }, ms);
      }
    }

    // ========== ボード管理 ==========
    function refreshBoardSelect(){
      const sel = $('#boardSelect'); sel.innerHTML='';
      Object.keys(state.boards).forEach(name=>{
        const opt = document.createElement('option'); opt.value=name; opt.textContent=name; sel.appendChild(opt);
      });
      sel.value = state.activeBoard;
    }

    function addBoard(name){
      if (!name) return;
      if (state.boards[name]) return alert('同名のボードが存在します');
      state.boards[name] = defaultBoard(); state.activeBoard = name; store.save(state);
      refreshBoardSelect(); renderAll();
    }

    function renameBoard(newName){
      if (!newName) return;
      if (state.boards[newName]) return alert('同名のボードが存在します');
      const old = state.activeBoard;
      state.boards[newName] = state.boards[old];
      delete state.boards[old];
      state.activeBoard = newName; store.save(state);
      refreshBoardSelect(); renderAll();
    }

    function deleteBoard(){
      const names = Object.keys(state.boards);
      if (names.length<=1) return alert('最後のボードは削除できません');
      if (!confirm(`ボード「${state.activeBoard}」を削除しますか？`)) return;
      delete state.boards[state.activeBoard];
      state.activeBoard = Object.keys(state.boards)[0];
      store.save(state); refreshBoardSelect(); renderAll();
    }

    // ========== 共有（URLハッシュ生成） ==========
    function exportHashUrl(){
      const cloned = JSON.parse(JSON.stringify(state));
      const json = JSON.stringify(cloned);
      const b64 = btoa(json);
      const url = location.origin + location.pathname + '#data=' + encodeURIComponent(b64);
      return url;
    }

    // ========== 単一HTML出力 ==========
    function download(filename, text){
      const blob = new Blob([text], {type:'text/html'});
      const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download=filename; a.click(); URL.revokeObjectURL(a.href);
    }

    function exportSingleHtml(){
      // 現在のHTMLに初期状態スクリプトを差し込む
      let html = document.documentElement.outerHTML;
      const idx = html.indexOf('<head>');
      const inject = `<head>\n  <script>window.__XLOG_INITIAL_STATE__=${JSON.stringify(state)}<\/script>`;
      if (idx>=0){ html = html.replace('<head>', inject); }
      download('xlog-pro.html', '<!DOCTYPE html>\n' + html);
    }

    // ========== RSS生成 ==========
    function exportRss(){
      const title = $('#rssTitle').value.trim() || 'Xlog Ranking';
      const items = board().tweets.map(t=>({
        title: (t.note||'Tweet '+t.id).replace(/[\r\n]+/g,' ').slice(0,120),
        link: tweetUrlFromId(t.id),
        guid: t.id,
        description: escapeHtml(t.note||''),
        pubDate: new Date().toUTCString()
      }));
      const xml = `<?xml version="1.0" encoding="UTF-8"?>\n<rss version="2.0"><channel>\n<title>${escapeXml(title)}</title>\n<link>${escapeXml(location.href)}</link>\n<description>Generated by Xlog Pro</description>\n${items.map(i=>`<item><title>${escapeXml(i.title)}</title><link>${escapeXml(i.link)}</link><guid isPermaLink=\"false\">${escapeXml(i.guid)}</guid><description>${escapeXml(i.description)}</description><pubDate>${i.pubDate}</pubDate></item>`).join('')}\n</channel></rss>`;
      const blob = new Blob([xml], {type:'application/rss+xml'});
      const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='xlog-ranking.xml'; a.click(); URL.revokeObjectURL(a.href);
    }

    function escapeXml(s){ return (s||'').replace(/[<>&\"']/g, m=> ({'<':'&lt;','>':'&gt;','&':'&amp;','\"':'&quot;','\'':'&apos;'}[m])); }

    // ========== 入力ヘルパ ==========
    function detectType(v){
      if (/^@/.test(v)) return 'profile';
      if (/^#/.test(v)) return 'hashtag';
      if (/twitter\.com\/i\/lists\//.test(v)) return 'list';
      return 'search';
    }

    function addSource(type, value, label){
      const src = {type, value:value.trim(), label:(label||'').trim()};
      board().sources.push(src); store.save(state); renderAll();
    }

    function bulkAddFromText(txt){
      const parts = txt.split(/[\n,]+/).map(s=>s.trim()).filter(Boolean);
      let count = 0;
      for (const p of parts){ addSource(detectType(p), p, ''); count++; }
      return count;
    }

    // ========== キーイベント ==========
    function setupShortcuts(){
      window.addEventListener('keydown', (e)=>{
        if (['INPUT','TEXTAREA','SELECT'].includes(document.activeElement.tagName)) return;
        if (e.key==='n' || e.key==='N'){ $('#sourceValue').focus(); }
        if (e.key==='r' || e.key==='R'){ renderAll(); }
        if (e.key==='g' || e.key==='G'){ state.columns=Math.max(1,state.columns-1); applySkin(); store.save(state); }
        if (e.key==='h' || e.key==='H'){ state.cardHeight=Math.max(360,state.cardHeight-40); applySkin(); store.save(state); renderAll(); }
      });
    }

    // ========== 設定と起動 ==========
    window.addEventListener('DOMContentLoaded', ()=>{
      // スキン
      applySkin();

      // ボード選択
      refreshBoardSelect();
      $('#boardSelect').addEventListener('change', (e)=>{ state.activeBoard = e.target.value; store.save(state); renderAll(); });
      $('#boardNew').addEventListener('click', ()=>{ const name = prompt('新しいボード名','Board '+(Object.keys(state.boards).length+1)); addBoard(name); });
      $('#boardRename').addEventListener('click', ()=>{ const name = prompt('新しい名前', state.activeBoard); if (name) renameBoard(name); });
      $('#boardDelete').addEventListener('click', deleteBoard);

      // テーマ/アクセント/レイアウト
      $('#themeToggle').addEventListener('change', e=>{ state.dark = e.target.checked; store.save(state); applySkin(); renderAll(); });
      $('#accentPicker').addEventListener('input', e=>{ state.accent = e.target.value; store.save(state); applySkin(); });
      $('#colsRange').addEventListener('input', e=>{ state.columns = +e.target.value; store.save(state); applySkin(); });
      $('#heightRange').addEventListener('input', e=>{ state.cardHeight = +e.target.value; store.save(state); applySkin(); renderAll(); });

      // ソース追加
      $('#addBtn').addEventListener('click', ()=>{
        const type = $('#sourceType').value;
        const val = $('#sourceValue').value.trim();
        const label = $('#sourceLabel').value.trim();
        if (!val) return alert('値を入力してください');
        addSource(type, val, label);
        $('#sourceValue').value=''; $('#sourceLabel').value='';
      });
      $$('.quick').forEach(btn=> btn.addEventListener('click', ()=> addSource(btn.dataset.type, btn.dataset.val, '')) );

      // まとめて追加
      $('#bulkAdd').addEventListener('click', ()=>{ const n = bulkAddFromText($('#bulkArea').value); alert(n+'件追加しました'); $('#bulkArea').value=''; });
      $('#bulkClear').addEventListener('click', ()=> $('#bulkArea').value='' );

      // ランキング
      $('#addTweetBtn').addEventListener('click', ()=>{
        const url = $('#tweetUrl').value.trim();
        const note = $('#tweetNote').value.trim();
        if (!url) return;
        addTweet(url, note); $('#tweetUrl').value=''; $('#tweetNote').value='';
      });

      // 設定
      $('#autoRefreshToggle').checked = !!state.autoRefresh;
      $('#refreshMinutes').value = String(state.minutes||5);
      $('#autoRefreshToggle').addEventListener('change', e=>{ state.autoRefresh = e.target.checked; store.save(state); applyAutoRefresh(); });
      $('#refreshMinutes').addEventListener('change', e=>{ state.minutes = +e.target.value; store.save(state); applyAutoRefresh(); });

      // 書き出し/読み込み
      $('#exportBtn').addEventListener('click', ()=>{
        const blob = new Blob([JSON.stringify(state,null,2)], {type:'application/json'});
        const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='xlog-pro-config.json'; a.click(); URL.revokeObjectURL(a.href);
      });
      $('#importFile').addEventListener('change', e=>{
        const file = e.target.files?.[0]; if (!file) return;
        const fr = new FileReader();
        fr.onload = () => {
          try{ const obj = JSON.parse(fr.result); state = migrate(obj); store.save(state); applySkin(); refreshBoardSelect(); renderAll(); applyAutoRefresh(); }
          catch(err){ alert('JSONの読み込みに失敗しました'); }
        };
        fr.readAsText(file);
      });
      $('#exportHtmlBtn').addEventListener('click', exportSingleHtml);
      $('#clearBtn').addEventListener('click', ()=>{
        if (!confirm('現在のボードのソースとランキングを削除しますか？')) return;
        const b = board(); b.sources = []; b.tweets=[]; store.save(state); renderAll();
      });

      // RSS
      $('#rssExport').addEventListener('click', exportRss);

      // 初期描画
      renderAll();
      applyAutoRefresh();
      setupShortcuts();
    });
  </script>
</body>
</html>

1. 現在の科学でできること

2. 理論上考えられている方法（SF的な構想）

3. 哲学的・倫理的な限界

『杏アフター / Kyou After』企画書 v1.0

0. 企画概要（Executive Summary）

1. 権利・ガイドライン

2. 企画目的

3. ストーリーライン

3.1 ログライン

3.2 あらすじ（約300字）

3.3 章立て（想定：全8章 + 分岐ED）

3.4 分岐・エンディング設計

4. キャラクター

4.1 藤林 杏（ふじばやし きょう）

4.2 あなた（主人公）

4.3 藤林 椋（りょう）

4.4 澪（みお・新規）

4.5 友人たち（春原、智代 ほか）

5. 世界観・舞台

6. 演出・美術・音響

7. ゲーム設計

8. シナリオ詳細（ダイジェスト）

9. アセット計画

10. 技術

11. スケジュール（目安：24週）

12. 体制・役割

13. 予算（概算・同人規模）

14. リスク & 回避

15. プロモーション

16. 成功指標（KPI）

17. 次アクション（To‑Do）

付録A：吉里吉里Z / Ren’Py 想定仕様メモ

付録B：CGリスト（案）

タイトル（仮）

1. 企画意図

2. あらすじ（概要）

3. キャラクター

4. ロボット設定

5. 想定フォーマット

6. セールスポイント

7. ビジュアルイメージ（案）

✨ 1. 「テレポーテーション」の定義

🔬 2. 実現しているもの（量子テレポーテーション）

🏗 3. もし「現実のテレポート装置」を作るとしたら？

⚠️ 4. 現実的な課題

✅ まとめ

あなた:

ChatGPT:

🧩 1. 実際に成功している「量子テレポーテーション」

📡 2. 実験の実績

🔬 3. 応用の可能性

🚫 4. 限界・できないこと

✅ まとめ

あなた:

ChatGPT:

🧪 光子テレポーテーションの最小実験構成

1. 必要なもの

2. 実験の流れ（シンプルな例）

🎯 実験で確認できること

🔧 実験の難しさ

🌱 身近に体験できる方法

✅ まとめ

ChatGPT:

🔬 現実に近い技術

💡 SF的な「VRナノマシン接続」のイメージ

⚠️ 現実的な課題

✅ まとめ

あなた:

ChatGPT:

🧠 1. BCIをPCに接続する仕組み

🎮 2. VRへの応用例

入力（脳→VR）

出力（VR→脳）

🔧 3. 開発の流れ（現実的な実装）

⚡ 4. 実際の限界と可能性

あなた:

ChatGPT:

① Python：BCIブリッジ（EEG→UDP配信）

② Unity（C#）：UDP受信 → ゲーム操作

③ Unreal Engine 5（C++）：UDP受信 → ブループリントに通知

4.1 藤林杏（ふじばやしきょう）

4.3 藤林椋（りょう）

4.5 友人たち（春原、智代ほか）