<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Tsumugi</title>
<!-- ✅ Favicon(初期): ブラウザ互換のため複数relで用意(確実版) -->
<!-- ★ここに貼る★ -->
<link rel="icon" type="image/svg+xml"
href="data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>
<defs>
<linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>
<stop offset='0' stop-color='%2300eaff'/>
<stop offset='1' stop-color='%238a5cff'/>
</linearGradient>
</defs>
<polygon points='32,4 56,18 56,46 32,60 8,46 8,18' fill='url(%23g)'/>
<circle cx='32' cy='32' r='10' fill='%230b0f2a'/>
<circle cx='32' cy='32' r='16' fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.7'/>
<line x1='32' y1='12' x2='32' y2='20' stroke='%23ffffff' stroke-width='2'/>
<line x1='32' y1='44' x2='32' y2='52' stroke='%23ffffff' stroke-width='2'/>
<line x1='12' y1='32' x2='20' y2='32' stroke='%23ffffff' stroke-width='2'/>
<line x1='44' y1='32' x2='52' y2='32' stroke='%23ffffff' stroke-width='2'/>
</svg>">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<!-- Tailwind CSS v2 -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css"/>
<!-- A-Frame (VR 試験) -->
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<!-- ✅ Favicon -->
<link id="dynamic-favicon" rel="shortcut icon"
href="data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='g' cx='30%25' cy='20%25' r='90%25'%3E%3Cstop offset='0%25' stop-color='%237c3aed'/%3E%3Cstop offset='55%25' stop-color='%235b5fe6'/%3E%3Cstop offset='100%25' stop-color='%230b1020'/%3E%3C/radialGradient%3E%3ClinearGradient id='glow' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23a78bfa'/%3E%3Cstop offset='100%25' stop-color='%2360a5fa'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='2' width='60' height='60' rx='16' fill='url(%23g)'/%3E%3Cpath d='M20 18h24a2 2 0 0 1 0 4H36v26a2 2 0 0 1-4 0V22h-8a2 2 0 0 1 0-4z' fill='white'/%3E%3Cpath d='M18 20h28' stroke='url(%23glow)' stroke-width='3' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M32 22v26' stroke='url(%23glow)' stroke-width='3' stroke-linecap='round' opacity='.65'/%3E%3Crect x='2' y='2' width='60' height='60' rx='16' fill='none' stroke='rgba(255,255,255,.22)'/%3E%3C/svg%3E"/>
<link id="favicon-shortcut" rel="shortcut icon" href="">
<link id="favicon-any" rel="icon" sizes="any" href="">
<link id="apple-touch" rel="apple-touch-icon" href="">
<meta name="theme-color" content="#5b5fe6">
<!-- Tailwind CSS v2 -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css"/>
<!-- A-Frame (VR 試験) -->
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<style>
:root{
--grad-a:#5b5fe6; --grad-b:#7c3aed;
--bg-a:#f4f7ff; --bg-b:#eef2ff;
--ink:#0f172a; --muted:#64748b;
}
body{
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
background: radial-gradient(circle at top left,var(--bg-a) 0%,var(--bg-b) 45%,#ffffff 100%);
color: var(--ink);
min-height:100vh;
}
.glass{ background: rgba(255,255,255,.78); backdrop-filter: blur(18px); border: 1px solid rgba(15,23,42,.10); border-radius: 18px; }
.card-hover{ transition:.18s ease; }
.card-hover:hover{ transform: translateY(-2px); box-shadow: 0 18px 35px -18px rgba(2,6,23,.25); }
.gradient-text{ background: linear-gradient(90deg,var(--grad-a),var(--grad-b)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.btn-primary{ background: linear-gradient(135deg,var(--grad-a),var(--grad-b)); color:#fff; border:none; transition:.18s ease; }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px -18px rgba(2,6,23,.35); }
.pill{ border:1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.9); border-radius: 999px; }
.mini-avatar{ width:44px;height:44px;border-radius:999px;object-fit:cover; border:2px solid rgba(255,255,255,.95); box-shadow: 0 10px 22px rgba(2,6,23,.14); }
.avatar{ width:96px;height:96px;border-radius:999px;object-fit:cover; border:3px solid rgba(255,255,255,.95); box-shadow: 0 14px 30px rgba(2,6,23,.18); }
.timeline-post{ background: rgba(255,255,255,.96); border-radius: 18px; border:1px solid rgba(15,23,42,.08); box-shadow: 0 16px 30px -20px rgba(2,6,23,.25); border-left: 4px solid var(--grad-a); transition:.18s ease; }
.timeline-post:hover{ transform: translateX(3px); }
.badge{ font-size: 11px; padding: 2px 10px; border-radius: 999px; background: rgba(91,95,230,.10); border:1px solid rgba(91,95,230,.25); color: #3730a3; display:inline-flex;align-items:center;gap:6px; white-space:nowrap; }
.status-dot{ width:8px;height:8px;border-radius:999px; display:inline-block; }
.on{ background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.15); }
.off{ background:#94a3b8; }
.log{ max-height: 190px; overflow:auto; background: rgba(241,245,249,.85); border: 1px solid rgba(15,23,42,.12); border-radius: 12px; padding: 10px; font-size: 12px; color:#0f172a; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.log .err{ background: rgba(254,202,202,.8); color:#7f1d1d; padding:6px 8px; border-radius:10px; margin:6px 0; }
.log .ok{ background: rgba(187,247,208,.8); color:#065f46; padding:6px 8px; border-radius:10px; margin:6px 0; }
.log .info{ color:#334155; padding:2px 0; }
.header-bg{ background-size: cover; background-position: center; background-repeat: no-repeat; }
.soft-input{ background:#fff; border:1px solid rgba(15,23,42,.14); border-radius: 12px; padding: 10px 12px; outline:none; width:100%; color:#0f172a; }
.soft-input:focus{ box-shadow: 0 0 0 3px rgba(91,95,230,.18); border-color: rgba(91,95,230,.35); }
.muted{ color: var(--muted); }
/* Toggle (ON/OFF) */
.toggle{
width: 54px; height: 30px; border-radius: 999px;
border: 1px solid rgba(15,23,42,.16);
background: rgba(148,163,184,.35);
position: relative; cursor: pointer; transition:.16s ease;
display:inline-flex; align-items:center;
}
.toggle.on{ background: rgba(16,185,129,.22); border-color: rgba(16,185,129,.35); }
.toggle > span{
width: 24px; height: 24px; border-radius: 999px;
background: #fff; position:absolute; left: 3px; transition:.16s ease;
box-shadow: 0 12px 20px -14px rgba(2,6,23,.55);
border: 1px solid rgba(15,23,42,.12);
}
.toggle.on > span{ left: 27px; }
/* VR overlay */
#vr-overlay{ position:fixed; inset:0; background:#000; z-index:9999; display:none; }
#vr-topbar{ position:absolute; top:10px; left:10px; right:10px; display:flex; align-items:center; justify-content:space-between; z-index:10000; pointer-events:auto; }
#vr-topbar .btn{ background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:#fff; padding:8px 12px; border-radius:999px; font-size:12px; backdrop-filter: blur(10px); }
#vr-topbar .btn:hover{ background: rgba(255,255,255,.16); }
#vr-hint{ color:#fff; font-size:12px; opacity:.85; background: rgba(255,255,255,.08); padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); }
/* ✅ Auth overlay (Login/Register/Logout) */
#auth-overlay{
position:fixed; inset:0;
background: rgba(2,6,23,.62);
backdrop-filter: blur(10px);
z-index: 100000;
display:none;
}
#auth-card{
max-width: 520px;
margin: 6vh auto;
padding: 22px;
border-radius: 22px;
background: rgba(255,255,255,.92);
border: 1px solid rgba(148,163,184,.35);
box-shadow: 0 30px 70px rgba(2,6,23,.35);
}
.tab-btn{
border:1px solid rgba(15,23,42,.10);
background: rgba(255,255,255,.9);
border-radius: 999px;
padding: 8px 12px;
font-size: 12px;
transition:.12s ease;
}
.tab-btn.active{
background: linear-gradient(135deg,var(--grad-a),var(--grad-b));
color:#fff; border-color: transparent;
}
/* ✅ WEBアイコン */
.icon-tile{
border-radius: 16px;
border: 1px solid rgba(15,23,42,.10);
background: rgba(255,255,255,.92);
padding: 10px;
transition: .14s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.icon-tile:hover{
transform: translateY(-2px);
box-shadow: 0 18px 32px -22px rgba(2,6,23,.35);
}
.icon-tile.active{
outline: 3px solid rgba(91,95,230,.28);
box-shadow: 0 0 0 6px rgba(91,95,230,.10);
}
.icon-preview{
width: 44px; height: 44px;
border-radius: 14px;
border: 1px solid rgba(15,23,42,.10);
background: rgba(241,245,249,.8);
display:flex; align-items:center; justify-content:center;
}
.icon-preview img{ width: 36px; height: 36px; }
.icon-tag{
font-size: 11px;
color: #0f172a;
font-weight: 700;
letter-spacing: .02em;
}
.icon-sub{
font-size: 11px;
color: var(--muted);
}
.icon-apply{
display:flex;
gap:8px;
margin-top:8px;
flex-wrap: wrap;
}
.mini-btn{
border-radius: 999px;
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,.9);
padding: 6px 10px;
font-size: 11px;
transition: .12s ease;
display:inline-flex; align-items:center; gap:6px;
}
.mini-btn:hover{ background: rgba(248,250,252,1); }
.mini-btn.primary{
border-color: transparent;
color:#fff;
background: linear-gradient(135deg,var(--grad-a),var(--grad-b));
}
@media (max-width: 768px){
.mini-avatar{ width:40px;height:40px; }
.avatar{ width:88px;height:88px; }
#auth-card{ margin: 4vh 14px; }
}
</style>
</head>
<body class="text-gray-900">
<!-- Hidden file inputs -->
<input id="file-profile" type="file" accept="image/*" class="hidden">
<input id="file-headerbg" type="file" accept="image/*" class="hidden">
<input id="file-appicon" type="file" accept="image/*" class="hidden">
<input id="file-feedicon" type="file" accept="image/*" class="hidden">
<input id="file-media" type="file" accept="image/*,video/*" multiple class="hidden">
<!-- ✅ Auth Overlay -->
<div id="auth-overlay">
<div id="auth-card">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-2xl flex items-center justify-center"
style="background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); color:#fff;">
<i class="fas fa-comments"></i>
</div>
<div>
<div class="text-xl font-extrabold tracking-tight"><span class="gradient-text">Tsumugi</span></div>
<div class="text-xs muted">ログイン / 会員登録 / ログアウト(localStorage保持)</div>
</div>
</div>
<button id="btn-auth-close" class="pill px-4 py-2 text-xs hover:bg-slate-50">
<i class="fas fa-times mr-2"></i>閉じる
</button>
</div>
<div class="mt-4 flex items-center gap-2">
<button id="tab-login" class="tab-btn active"><i class="fas fa-right-to-bracket mr-2"></i>ログイン</button>
<button id="tab-register" class="tab-btn"><i class="fas fa-user-plus mr-2"></i>会員登録</button>
<div class="ml-auto flex items-center gap-2">
<button id="btn-guest" class="pill px-4 py-2 text-xs hover:bg-slate-50" title="ゲストで入る(登録不要)">
<i class="fas fa-user-ninja mr-2"></i>ゲスト
</button>
</div>
</div>
<div class="mt-4 glass p-4 border border-slate-200">
<!-- Login -->
<div id="panel-login">
<div class="text-sm font-bold mb-2"><i class="fas fa-right-to-bracket mr-2 text-indigo-600"></i>ログイン</div>
<div class="space-y-3">
<div>
<label class="block text-xs font-semibold text-slate-700 mb-1">メールアドレス</label>
<input id="login-email" type="email" class="soft-input" placeholder="you@example.com" autocomplete="email">
</div>
<div>
<label class="block text-xs font-semibold text-slate-700 mb-1">パスワード</label>
<input id="login-pass" type="password" class="soft-input" placeholder="password" autocomplete="current-password">
</div>
<div class="flex items-center justify-between gap-3">
<label class="flex items-center gap-2 text-xs">
<input id="login-remember" type="checkbox" class="mr-1">
ログイン状態を保持
</label>
<button id="btn-login" class="btn-primary px-5 py-2 rounded-lg text-xs font-semibold">
<i class="fas fa-unlock mr-2"></i>ログイン
</button>
</div>
</div>
</div>
<!-- Register -->
<div id="panel-register" style="display:none;">
<div class="text-sm font-bold mb-2"><i class="fas fa-user-plus mr-2 text-indigo-600"></i>会員登録</div>
<div class="space-y-3">
<div>
<label class="block text-xs font-semibold text-slate-700 mb-1">メールアドレス</label>
<input id="reg-email" type="email" class="soft-input" placeholder="you@example.com" autocomplete="email">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
<div>
<label class="block text-xs font-semibold text-slate-700 mb-1">パスワード</label>
<input id="reg-pass" type="password" class="soft-input" placeholder="password" autocomplete="new-password">
</div>
<div>
<label class="block text-xs font-semibold text-slate-700 mb-1">確認</label>
<input id="reg-pass2" type="password" class="soft-input" placeholder="confirm" autocomplete="new-password">
</div>
</div>
<div>
<label class="block text-xs font-semibold text-slate-700 mb-1">ユーザー名(20文字まで)</label>
<input id="reg-username" type="text" maxlength="20" class="soft-input" placeholder="表示名">
</div>
<div class="flex items-center justify-between gap-3">
<div class="text-xs muted">※パスワードは端末(localStorage)に保存されます(簡易SNS)</div>
<button id="btn-register" class="btn-primary px-5 py-2 rounded-lg text-xs font-semibold">
<i class="fas fa-check mr-2"></i>登録
</button>
</div>
</div>
</div>
</div>
<div class="mt-3">
<div id="auth-msg" class="text-xs muted"></div>
</div>
</div>
</div>
<!-- VR Overlay (試験) -->
<div id="vr-overlay">
<div id="vr-topbar">
<div class="flex items-center gap-2">
<span id="vr-hint"><i class="fas fa-vr-cardboard mr-2"></i>VR試験モード(投稿カードを3D表示)</span>
</div>
<div class="flex items-center gap-2">
<button id="btn-vr-enter" class="btn"><i class="fas fa-play mr-2"></i>VR開始</button>
<button id="btn-vr-exit" class="btn"><i class="fas fa-times mr-2"></i>終了</button>
</div>
</div>
<a-scene id="vr-scene" embedded background="color: #0b1020">
<a-entity position="0 1.6 3">
<a-camera wasd-controls-enabled="true" look-controls="pointerLockEnabled: true"></a-camera>
</a-entity>
<a-entity light="type: ambient; intensity: 0.7"></a-entity>
<a-entity light="type: directional; intensity: 0.8" position="-1 2 1"></a-entity>
<a-entity id="vr-wall"></a-entity>
<a-plane position="0 0 -3" rotation="-90 0 0" width="30" height="30" color="#111827" opacity="0.9"></a-plane>
<a-sky color="#0b1020"></a-sky>
</a-scene>
</div>
<!-- HEADER -->
<header id="app-header" class="glass mx-4 mt-4 p-6 border border-indigo-500/20 header-bg">
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
<div>
<div class="flex items-center gap-3">
<i class="fas fa-comments text-indigo-500 text-2xl"></i>
<h1 class="text-3xl md:text-4xl font-extrabold tracking-tight">
<span class="gradient-text">Tsumugi</span>
<span class="badge ml-2"><i class="fas fa-bolt"></i> LocalSNS</span>
</h1>
</div>
<p class="text-sm md:text-base muted mt-1">
フォローTL / データDL / 投稿URL / RSS投稿ON/OFF / VR試験 / ログイン
</p>
</div>
<div class="flex flex-wrap items-center justify-end gap-2">
<div class="pill px-3 py-2 flex items-center gap-3">
<img id="header-avatar" class="mini-avatar" src="https://via.placeholder.com/80" alt="avatar">
<div class="text-left leading-tight">
<div class="font-semibold text-sm" id="header-username">未設定</div>
<div class="text-xs muted" id="header-email"></div>
</div>
</div>
<button id="btn-auth-open" class="pill px-4 py-2 text-xs flex items-center gap-2 hover:bg-slate-50" title="ログイン/登録">
<i class="fas fa-user-shield text-slate-700"></i> アカウント
</button>
<button id="btn-logout" class="pill px-4 py-2 text-xs flex items-center gap-2 hover:bg-slate-50" title="ログアウト">
<i class="fas fa-right-from-bracket text-slate-700"></i> ログアウト
</button>
<button id="btn-vr" class="pill px-4 py-2 text-xs flex items-center gap-2 hover:bg-slate-50">
<i class="fas fa-vr-cardboard text-slate-700"></i> VR試験
</button>
<button id="btn-clear-all" class="bg-yellow-300 hover:bg-yellow-400 px-4 py-2 rounded-full text-black text-xs flex items-center gap-2">
<i class="fas fa-broom"></i> 全消去
</button>
</div>
</div>
</header>
<!-- MAIN -->
<main class="max-w-6xl mx-auto px-4 py-6" id="main-content">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- LEFT -->
<section class="lg:col-span-1 space-y-6">
<!-- Account / Profile -->
<div class="glass p-6 card-hover border border-slate-200">
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold flex items-center gap-2">
<i class="fas fa-user-circle text-indigo-500"></i>
アカウント
</h3>
<span class="badge"><i class="fas fa-home"></i> Home=Follow</span>
</div>
<div class="text-center mb-5">
<img id="profile-avatar" class="avatar mx-auto mb-3" src="https://via.placeholder.com/100" alt="avatar">
<button id="btn-change-profile" class="btn-primary px-4 py-2 rounded-full text-white text-sm">
<i class="fas fa-camera mr-2"></i>プロフィール画像
</button>
</div>
<div class="grid grid-cols-3 gap-2 mb-4">
<div class="glass p-3 text-center border border-slate-200">
<div class="text-xs muted">フォロー</div>
<div id="stat-following" class="text-lg font-extrabold">0</div>
</div>
<div class="glass p-3 text-center border border-slate-200">
<div class="text-xs muted">フォロワー</div>
<div id="stat-followers" class="text-lg font-extrabold">0</div>
</div>
<div class="glass p-3 text-center border border-slate-200">
<div class="text-xs muted">投稿</div>
<div id="stat-posts" class="text-lg font-extrabold">0</div>
</div>
</div>
<div class="space-y-3">
<div>
<label class="block text-xs font-semibold text-slate-700 mb-1">ユーザー名(20文字まで)</label>
<input id="inp-username" type="text" maxlength="20" class="soft-input" placeholder="ユーザー名">
</div>
<div>
<label class="block text-xs font-semibold text-slate-700 mb-1">自己紹介</label>
<textarea id="inp-bio" rows="4" class="soft-input" placeholder="自己紹介"></textarea>
</div>
<button id="btn-save-profile" class="btn-primary w-full py-2 rounded-lg text-white text-sm font-semibold">
<i class="fas fa-save mr-2"></i>保存
</button>
<div class="glass p-3 border border-slate-200">
<div class="text-xs font-semibold text-slate-800 mb-1">プレビュー</div>
<div id="preview-username" class="font-semibold">未設定</div>
<div id="preview-bio" class="text-xs muted whitespace-pre-line mt-1">まだ自己紹介がありません</div>
</div>
</div>
</div>
<!-- Header / Icons -->
<div class="glass p-6 card-hover border border-slate-200">
<div class="flex items-center justify-between mb-3">
<h3 class="text-lg font-bold flex items-center gap-2">
<i class="fas fa-palette text-indigo-500"></i> 見た目(ファイル)
</h3>
<span class="text-xs muted">localStorage保存</span>
</div>
<div class="space-y-2 text-sm">
<button id="btn-change-headerbg" class="pill w-full px-4 py-2 text-left hover:bg-slate-50">
<i class="fas fa-image mr-2 text-slate-700"></i> ヘッダー背景を変更
</button>
<button id="btn-change-appicon" class="pill w-full px-4 py-2 text-left hover:bg-slate-50">
<i class="fas fa-icons mr-2 text-slate-700"></i> Faviconを変更
</button>
<button id="btn-change-feedicon" class="pill w-full px-4 py-2 text-left hover:bg-slate-50">
<i class="fas fa-rss mr-2 text-slate-700"></i> Feedアイコン変更
</button>
<div class="grid grid-cols-2 gap-2 mt-2">
<button id="btn-reset-headerbg" class="pill px-4 py-2 hover:bg-slate-50">
<i class="fas fa-undo mr-2"></i>ヘッダー戻す
</button>
<button id="btn-reset-appicon" class="pill px-4 py-2 hover:bg-slate-50">
<i class="fas fa-undo mr-2"></i>Favicon戻す
</button>
</div>
</div>
<!-- ✅ WEBアイコン -->
<div class="mt-5">
<div class="flex items-center justify-between">
<div class="text-sm font-extrabold flex items-center gap-2">
<i class="fas fa-sparkles text-indigo-600"></i> WEBアイコン
</div>
<span class="text-xs muted">クリックで選択 → 適用</span>
</div>
<div class="mt-3 grid grid-cols-2 gap-2" id="icon-grid"></div>
<div class="mt-3 glass p-4 border border-slate-200">
<div class="flex items-center justify-between gap-2">
<div class="text-xs font-semibold flex items-center gap-2">
<i class="fas fa-wand-magic-sparkles text-indigo-600"></i>
選択中アイコン
</div>
<button id="btn-icon-random" class="pill px-3 py-2 text-xs hover:bg-slate-50" title="ランダムに選ぶ">
<i class="fas fa-dice mr-2"></i>ランダム
</button>
</div>
<div class="mt-3 flex items-center gap-3">
<div class="icon-preview">
<img id="icon-selected-preview" src="" alt="selected">
</div>
<div class="flex-1">
<div id="icon-selected-name" class="icon-tag">未選択</div>
<div id="icon-selected-desc" class="icon-sub">アイコンをクリックしてください</div>
</div>
</div>
<div class="icon-apply mt-3">
<button id="btn-apply-favicon" class="mini-btn primary">
<i class="fas fa-icons"></i>Faviconに適用
</button>
<button id="btn-apply-feed" class="mini-btn">
<i class="fas fa-rss"></i>Feedに適用
</button>
<button id="btn-apply-profile" class="mini-btn">
<i class="fas fa-user-circle"></i>プロフィールに適用
</button>
</div>
<div class="mt-3 text-[11px] muted">
※SVG(dataURL)なので、端末内(localStorage)だけで完結します(外部画像不要)
</div>
</div>
</div>
</div>
<!-- ✅ RSS(投稿機能 ON/OFF 完全) -->
<div class="glass p-6 card-hover border border-amber-500/20">
<div class="flex items-center justify-between mb-2">
<h3 class="text-lg font-bold flex items-center gap-2">
<i class="fas fa-rss text-amber-500"></i> RSS投稿
</h3>
<span class="badge">
<span class="status-dot" id="rss-dot"></span>
<span id="rss-status-text">停止中</span>
</span>
</div>
<div class="flex items-center justify-between gap-3 mb-3">
<div class="text-xs muted">
<b>ON</b>:一定間隔でRSSを取得し、<b>Feed投稿</b>としてタイムラインへ自動投稿します
</div>
<div class="flex items-center gap-2">
<div class="text-xs font-bold text-slate-700">自動</div>
<div id="rss-toggle" class="toggle" role="switch" aria-checked="false" tabindex="0" title="RSS自動投稿 ON/OFF">
<span></span>
</div>
</div>
</div>
<div class="space-y-2">
<input id="rss-url" class="soft-input text-xs" placeholder="RSS URL(https://...)">
<div class="grid grid-cols-2 gap-2">
<button id="btn-add-rss" class="btn-primary py-2 rounded-lg text-xs">
<i class="fas fa-plus mr-2"></i>追加
</button>
<button id="btn-fetch-rss" class="pill py-2 text-xs hover:bg-slate-50">
<i class="fas fa-sync mr-2"></i>今すぐ取得
</button>
</div>
<div class="grid grid-cols-2 gap-2">
<input id="rss-interval" type="number" min="10" max="3600" value="120" class="soft-input text-xs" placeholder="間隔(秒)">
<button id="btn-set-rss-interval" class="pill py-2 text-xs hover:bg-slate-50">
<i class="fas fa-clock mr-2"></i>間隔設定
</button>
</div>
<div class="grid grid-cols-2 gap-2">
<button id="btn-rss-clear-seen" class="pill py-2 text-xs hover:bg-slate-50">
<i class="fas fa-eraser mr-2"></i>既読リセット
</button>
<button id="btn-rss-test-one" class="pill py-2 text-xs hover:bg-slate-50">
<i class="fas fa-flask mr-2"></i>URL検査
</button>
</div>
<div class="mt-2">
<div class="text-xs font-semibold mb-1">RSS一覧</div>
<div id="rss-list" class="space-y-2 text-xs"></div>
</div>
<div class="mt-3">
<div class="text-xs font-semibold mb-1">RSSログ</div>
<div id="rss-log" class="log"></div>
</div>
</div>
</div>
</section>
<!-- RIGHT -->
<section class="lg:col-span-2 space-y-6">
<!-- New Post -->
<div class="glass p-6 card-hover border border-slate-200">
<div class="flex items-center justify-between mb-3">
<h3 class="text-xl font-bold flex items-center gap-2">
<i class="fas fa-edit text-indigo-500"></i> 新規投稿
</h3>
<div class="flex gap-2">
<button id="btn-home" class="btn-primary px-3 py-2 rounded-full text-xs">
<i class="fas fa-house mr-2"></i>Home
</button>
<button id="btn-explore" class="pill px-3 py-2 rounded-full text-xs hover:bg-slate-50">
<i class="fas fa-compass mr-2"></i>探索
</button>
</div>
</div>
<textarea id="post-text" class="soft-input text-sm" rows="4"
placeholder="いまどうしてる?(Ctrl+Enterで投稿)" maxlength="600"></textarea>
<div class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
<div class="text-xs muted flex items-center gap-2 flex-wrap">
<i class="fas fa-circle-info"></i>
<span id="char-count">(0/600)</span>
<label class="pill px-3 py-2 text-xs cursor-pointer hover:bg-slate-50" id="btn-add-media">
<i class="fas fa-paperclip mr-2"></i>画像/動画
</label>
<button id="btn-clear-media" class="pill px-3 py-2 text-xs hover:bg-slate-50">
<i class="fas fa-trash mr-2"></i>クリア
</button>
<span class="badge"><i class="fas fa-link"></i>投稿URL</span>
<span class="badge"><i class="fas fa-rss"></i>RSS投稿</span>
</div>
<div class="flex gap-2">
<button id="btn-post" class="btn-primary px-5 py-2 rounded-lg text-xs font-semibold">
<i class="fas fa-paper-plane mr-2"></i>投稿
</button>
<button id="btn-delete-all-posts" class="bg-red-600 hover:bg-red-700 px-5 py-2 rounded-lg text-white text-xs font-semibold">
<i class="fas fa-trash mr-2"></i>全投稿削除
</button>
</div>
</div>
<div class="mt-4 glass p-4 border border-slate-200">
<div class="flex items-center justify-between">
<div class="text-xs font-semibold flex items-center gap-2">
<i class="fas fa-link text-indigo-600"></i> 直近の投稿URL
</div>
<button id="btn-copy-post-url" class="pill px-3 py-2 text-xs hover:bg-slate-50">
<i class="fas fa-copy mr-2"></i>コピー
</button>
</div>
<div class="mt-2 text-sm">
<div id="latest-post-url" class="muted break-all">(まだ投稿していません)</div>
</div>
<div class="mt-3 flex flex-wrap gap-2">
<button id="btn-open-post-url" class="pill px-4 py-2 rounded-lg text-xs hover:bg-slate-50">
<i class="fas fa-arrow-up-right-from-square mr-2"></i>開く
</button>
</div>
</div>
<div class="mt-4">
<div class="text-xs font-semibold mb-1">添付</div>
<div id="media-preview" class="grid grid-cols-2 md:grid-cols-3 gap-3"></div>
</div>
</div>
<!-- Timeline -->
<div class="glass p-6 border border-slate-200">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-3">
<h3 class="text-xl font-bold flex items-center gap-2">
<i class="fas fa-stream text-indigo-500"></i> タイムライン
<span id="post-count" class="text-sm font-normal muted">(0件)</span>
</h3>
<div class="flex items-center gap-2">
<input id="search" class="soft-input text-xs w-full md:w-72" placeholder="検索(本文/ユーザー)">
<button id="btn-refresh" class="pill px-4 py-2 text-xs hover:bg-slate-50">
<i class="fas fa-rotate mr-2"></i>更新
</button>
<button id="btn-export" class="bg-emerald-600 hover:bg-emerald-700 px-4 py-2 rounded-lg text-white text-xs">
<i class="fas fa-download mr-2"></i>データDL
</button>
<button id="btn-import" class="pill px-4 py-2 text-xs hover:bg-slate-50">
<i class="fas fa-upload mr-2"></i>読み込み
</button>
</div>
</div>
<div class="flex flex-wrap gap-2 text-xs mb-3">
<button class="btn-primary px-3 py-2 rounded-full" data-filter="all"><i class="fas fa-globe mr-2"></i>すべて</button>
<button class="pill px-3 py-2 rounded-full hover:bg-slate-50" data-filter="user"><i class="fas fa-user mr-2"></i>ユーザー</button>
<button class="pill px-3 py-2 rounded-full hover:bg-slate-50" data-filter="feed"><i class="fas fa-rss mr-2"></i>Feed</button>
</div>
<div id="timeline" class="space-y-4"></div>
<div id="empty" class="text-center py-14 muted">
<i class="fas fa-comments text-4xl mb-4 text-indigo-500"></i>
<div class="text-lg font-semibold">まだ投稿がありません</div>
<div class="text-xs mt-1">投稿かRSS取得をすると、ここに表示されます</div>
</div>
</div>
</section>
</div>
</main>
<footer class="glass mx-4 mb-4 p-4 text-center border border-slate-200">
<div class="text-xs muted">
<i class="fas fa-copyright mr-1"></i> 2026 Tsumugi – Local SNS(ログイン/登録/ログアウト + RSS投稿ON/OFF)
</div>
</footer>
<script>
/* =========================================================
✅ 会員登録が機能しない問題を修正(欠落なし全体コード)
主因になりやすいポイントを潰しています:
1) crypto.subtle が http / file:// で使えず例外 → 登録が止まる
→ ✅ sha256 失敗時はフォールバック(簡易ハッシュ)で必ず進む
2) users 読み込み前に findUser が走る / 破損データで落ちる
→ ✅ loadUsers を最初に実行&sanitize
3) 登録後にアプリがロック解除されない/ UI未更新
→ ✅ afterAuthBootstrap を確実に呼ぶ
========================================================= */
/* ---------- Storage helpers ---------- */
const LS = {
get(k, fb=null){ try{ const v=localStorage.getItem(k); return (v===null||v===undefined)?fb:v; }catch(e){ return fb; } },
set(k, v){ try{ localStorage.setItem(k, v); }catch(e){} },
del(k){ try{ localStorage.removeItem(k); }catch(e){} }
};
const KEY = {
users:"ts_users",
current:"ts_current_user", // {email}
session:"ts_session", // {email, remember, ts}
posts:"ts_posts",
icons:"ts_icons",
headerBg:"ts_header_bg",
favicon:"ts_favicon",
rss:"ts_rss",
rssSeen:"ts_rss_seen",
latest:"ts_latest_post_url",
webIconSelected:"ts_webicon_selected" // {id}
};
const PRESET_RSS = [
"https://uploadvr.com/feed/",
"https://www.theverge.com/rss/index.xml",
"https://www3.nhk.or.jp/rss/news/cat0.xml"
];
/* ---------- State ---------- */
let users = [];
let currentUser = null; // {email}
let posts = [];
let icons = {};
let homeMode = "home";
let currentFilter = "all";
let searchQuery = "";
let pendingMedia = [];
let rssTimer = null;
/* ✅ WEBアイコン state */
let WEB_ICONS = [];
let selectedWebIconId = null;
/* ---------- Utilities ---------- */
function uid(){ return Date.now().toString(36)+"-"+Math.random().toString(36).slice(2,8); }
function escapeHtml(s){ return (s||"").replace(/[&<>"']/g, m => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m])); }
function nowJp(){ return new Date().toLocaleString("ja-JP"); }
function safeUrl(u){
const s = String(u||"").trim();
if(!s) return "";
if(/^https?:\/\//i.test(s)) return s;
return "";
}
async function copyText(t){
try{
if(navigator.clipboard){ await navigator.clipboard.writeText(t); return true; }
}catch(e){}
const ta=document.createElement("textarea"); ta.value=t; document.body.appendChild(ta);
ta.select(); try{ document.execCommand("copy"); }catch(e){}
document.body.removeChild(ta);
return true;
}
function openPopup(url){ window.open(url, "_blank", "noopener,noreferrer,width=980,height=740"); }
function bytesToMB(b){ return Math.round((b/1024/1024)*10)/10; }
function addLog(msg, type="info"){
const el = document.getElementById("rss-log");
if(!el) return;
const div = document.createElement("div");
div.className = type==="err" ? "err" : type==="ok" ? "ok" : "info";
div.textContent = `[${new Date().toLocaleTimeString("ja-JP")}] ${msg}`;
el.appendChild(div);
el.scrollTop = el.scrollHeight;
while(el.children.length > 160) el.removeChild(el.firstChild);
}
/* =========================================================
✅ WEBアイコン(SVG生成)
========================================================= */
function toDataUrlSvg(svg){
const enc = encodeURIComponent(svg)
.replace(/%0A/g,"")
.replace(/%20/g," ")
.replace(/%3D/g,"=")
.replace(/%3A/g,":")
.replace(/%2F/g,"/")
.replace(/%2C/g,",");
return "data:image/svg+xml;charset=utf-8," + enc;
}
function makeIconSvg({bg1,bg2,shape,mark,accent1,accent2}){
const bg = `
<defs>
<radialGradient id="rg" cx="30%" cy="20%" r="90%">
<stop offset="0%" stop-color="${bg2}"/>
<stop offset="55%" stop-color="${bg1}"/>
<stop offset="100%" stop-color="#0b1020"/>
</radialGradient>
<linearGradient id="lg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="${accent1}"/>
<stop offset="100%" stop-color="${accent2}"/>
</linearGradient>
<filter id="shadow" x="-30%" y="-30%" width="160%" height="160%">
<feDropShadow dx="0" dy="10" stdDeviation="8" flood-color="rgba(2,6,23,.45)"/>
</filter>
</defs>
`;
let base;
if(shape==="hex"){
base = `<path d="M32 4 54 16v32L32 60 10 48V16Z" fill="url(#rg)" />`;
}else if(shape==="round"){
base = `<circle cx="32" cy="32" r="28" fill="url(#rg)" />`;
}else{
base = `<rect x="4" y="4" width="56" height="56" rx="16" fill="url(#rg)" />`;
}
let glyph="";
if(mark==="T"){
glyph = `<path d="M20 18h24a2 2 0 0 1 0 4H36v26a2 2 0 0 1-4 0V22h-8a2 2 0 0 1 0-4z" fill="white"/>`;
}else if(mark==="V"){
glyph = `<path d="M18 18h8l6 22 6-22h8L36 50h-8L18 18z" fill="white"/>`;
}else if(mark==="C"){
glyph = `<path d="M44.5 22.5c-2.3-2.3-5.5-3.7-9-3.7-6.9 0-12.5 5.6-12.5 12.5S28.6 43.8 35.5 43.8c3.5 0 6.7-1.4 9-3.7l-3.2-3.2c-1.5 1.5-3.6 2.4-5.8 2.4-4.4 0-8-3.6-8-8s3.6-8 8-8c2.3 0 4.3.9 5.8 2.4l3.2-3.2z" fill="white"/>`;
}else if(mark==="star"){
glyph = `<path d="M32 18l3.9 8.2 9.1 1.3-6.6 6.4 1.6 9.1L32 39.7 23.9 43l1.6-9.1-6.6-6.4 9.1-1.3L32 18z" fill="white"/>`;
}else if(mark==="bolt"){
glyph = `<path d="M36 14 20 36h10l-2 14 16-22H34l2-14z" fill="white"/>`;
}else if(mark==="eye"){
glyph = `<path d="M32 22c-10 0-18 10-18 10s8 10 18 10 18-10 18-10-8-10-18-10zm0 16a6 6 0 1 1 0-12 6 6 0 0 1 0 12z" fill="white"/><circle cx="32" cy="32" r="2.6" fill="white"/>`;
}else if(mark==="crown"){
glyph = `<path d="M20 40l-2-16 8 8 6-10 6 10 8-8-2 16H20z" fill="white"/><path d="M22 42h20" stroke="url(#lg)" stroke-width="3" stroke-linecap="round" opacity=".8"/>`;
}
const accents = `
<path d="M18 20h28" stroke="url(#lg)" stroke-width="3" stroke-linecap="round" opacity=".85"/>
<path d="M32 22v26" stroke="url(#lg)" stroke-width="3" stroke-linecap="round" opacity=".65"/>
`;
const border = shape==="round"
? `<circle cx="32" cy="32" r="28" fill="none" stroke="rgba(255,255,255,.24)"/>`
: shape==="hex"
? `<path d="M32 4 54 16v32L32 60 10 48V16Z" fill="none" stroke="rgba(255,255,255,.24)"/>`
: `<rect x="4" y="4" width="56" height="56" rx="16" fill="none" stroke="rgba(255,255,255,.22)"/>`;
return `
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 64 64">
${bg}
<g filter="url(#shadow)">
${base}
${accents}
${glyph}
${border}
</g>
</svg>
`.trim();
}
function buildWebIconPack(){
const presets = [
{ id:"tsumugi_T", name:"Tsumugi T", desc:"シグネチャー / Squircle", shape:"squircle", mark:"T", bg1:"#5b5fe6", bg2:"#7c3aed", accent1:"#a78bfa", accent2:"#60a5fa" },
{ id:"verse_V", name:"Verse V", desc:"SNS感 / Round", shape:"round", mark:"V", bg1:"#06b6d4", bg2:"#3b82f6", accent1:"#67e8f9", accent2:"#a78bfa" },
{ id:"chron_C", name:"Chronicle C", desc:"アーカイブ / Squircle", shape:"squircle", mark:"C", bg1:"#22c55e", bg2:"#10b981", accent1:"#bbf7d0", accent2:"#60a5fa" },
{ id:"spark_star", name:"Spark Star", desc:"キラッ / Round", shape:"round", mark:"star", bg1:"#f59e0b", bg2:"#ef4444", accent1:"#fde68a", accent2:"#fca5a5" },
{ id:"bolt_hex", name:"Neon Bolt", desc:"稲妻 / Hex", shape:"hex", mark:"bolt", bg1:"#a855f7", bg2:"#ec4899", accent1:"#c4b5fd", accent2:"#93c5fd" },
{ id:"eye_squ", name:"Observer", desc:"収集 / Squircle", shape:"squircle", mark:"eye", bg1:"#0ea5e9", bg2:"#22c55e", accent1:"#7dd3fc", accent2:"#86efac" },
{ id:"crown_squ", name:"Crown", desc:"上品 / Squircle", shape:"squircle", mark:"crown", bg1:"#f97316", bg2:"#a855f7", accent1:"#fdba74", accent2:"#c4b5fd" }
];
WEB_ICONS = presets.map(p=>{
const svg = makeIconSvg(p);
return { id:p.id, name:p.name, desc:p.desc, dataUrl: toDataUrlSvg(svg) };
});
}
function saveSelectedWebIcon(id){
selectedWebIconId = id;
LS.set(KEY.webIconSelected, JSON.stringify({id}));
}
function loadSelectedWebIcon(){
const obj = JSON.parse(LS.get(KEY.webIconSelected, "null") || "null");
selectedWebIconId = (obj && obj.id) ? obj.id : (WEB_ICONS[0]?.id || null);
}
function getSelectedWebIcon(){
if(!selectedWebIconId) return WEB_ICONS[0] || null;
return WEB_ICONS.find(x=>x.id===selectedWebIconId) || WEB_ICONS[0] || null;
}
function renderWebIconGrid(){
const grid = document.getElementById("icon-grid");
if(!grid) return;
grid.innerHTML = "";
WEB_ICONS.forEach(icon=>{
const tile = document.createElement("div");
tile.className = "icon-tile";
tile.setAttribute("data-iconid", icon.id);
tile.innerHTML = `
<div class="flex items-center gap-3">
<div class="icon-preview"><img src="${icon.dataUrl}" alt="${escapeHtml(icon.name)}"></div>
<div class="min-w-0">
<div class="icon-tag truncate">${escapeHtml(icon.name)}</div>
<div class="icon-sub truncate">${escapeHtml(icon.desc)}</div>
</div>
</div>
`;
tile.onclick = ()=>{ selectWebIcon(icon.id); };
grid.appendChild(tile);
});
selectWebIcon(selectedWebIconId, false);
}
function selectWebIcon(id, persist=true){
const icon = WEB_ICONS.find(x=>x.id===id) || WEB_ICONS[0];
if(!icon) return;
if(persist) saveSelectedWebIcon(icon.id);
document.querySelectorAll(".icon-tile").forEach(el=>{
el.classList.toggle("active", el.getAttribute("data-iconid")===icon.id);
});
document.getElementById("icon-selected-preview").src = icon.dataUrl;
document.getElementById("icon-selected-name").textContent = icon.name;
document.getElementById("icon-selected-desc").textContent = icon.desc;
}
/* =========================================================
✅ Favicon(確実版):複数relを全部更新する
========================================================= */
function applyFavicon(dataUrl){
const url = String(dataUrl || "").trim();
if(!url) return;
const setHref = (id, rel, type=null, sizes=null)=>{
let link = document.getElementById(id);
if(!link){
link = document.createElement("link");
link.id = id;
link.rel = rel;
if(type) link.type = type;
if(sizes) link.sizes = sizes;
document.head.appendChild(link);
}
link.href = url;
};
setHref("favicon-svg", "icon", "image/svg+xml", null);
setHref("favicon-shortcut", "shortcut icon", null, null);
setHref("favicon-any", "icon", null, "any");
setHref("apple-touch", "apple-touch-icon", null, null);
LS.set(KEY.favicon, url);
}
function resetFavicon(){
LS.del(KEY.favicon);
const base = document.getElementById("favicon-svg")?.href;
if(base) applyFavicon(base);
alert("Faviconを初期に戻しました(反映されない場合は Ctrl+F5)");
}
function applySelectedToFavicon(){
const icon = getSelectedWebIcon(); if(!icon) return;
applyFavicon(icon.dataUrl);
alert("Faviconに適用しました");
}
function applySelectedToFeed(){
const icon = getSelectedWebIcon(); if(!icon) return;
icons.feed = icon.dataUrl;
LS.set(KEY.icons, JSON.stringify(icons));
renderTimeline();
rebuildVRWall();
alert("Feedアイコンに適用しました");
}
function applySelectedToProfile(){
const icon = getSelectedWebIcon(); if(!icon) return;
const me = getMe();
if(!me) return alert("ログインしてください");
me.profile.avatar = icon.dataUrl;
saveUsers();
syncProfileUI();
renderTimeline();
rebuildVRWall();
alert("プロフィール画像に適用しました");
}
function randomPickIcon(){
if(!WEB_ICONS.length) return;
const i = Math.floor(Math.random()*WEB_ICONS.length);
selectWebIcon(WEB_ICONS[i].id);
}
/* =========================================================
✅ Auth(会員登録/ログイン)— 修正点あり
========================================================= */
function normalizeEmail(s){ return String(s||"").trim().toLowerCase(); }
/* ✅ 修正:sha256 が使えない環境でも必ず動くようにする */
async function sha256(text){
const str = String(text);
try{
if(!(window.crypto && crypto.subtle && window.isSecureContext)){
// http / file:// だと subtle が動かない → fallback
return simpleHash(str);
}
const enc = new TextEncoder().encode(str);
const buf = await crypto.subtle.digest("SHA-256", enc);
const arr = Array.from(new Uint8Array(buf));
return arr.map(b=>b.toString(16).padStart(2,"0")).join("");
}catch(e){
// 例外が出ても登録を止めない
return simpleHash(str);
}
}
/* ✅ 追加:簡易ハッシュ(強度は低いが “動かない” を防ぐ) */
function simpleHash(str){
let h1 = 0xdeadbeef ^ str.length, h2 = 0x41c6ce57 ^ str.length;
for(let i=0;i<str.length;i++){
const ch = str.charCodeAt(i);
h1 = Math.imul(h1 ^ ch, 2654435761);
h2 = Math.imul(h2 ^ ch, 1597334677);
}
h1 = (h1 ^ (h1>>>16)) >>> 0;
h2 = (h2 ^ (h2>>>16)) >>> 0;
return "fh_" + h1.toString(16).padStart(8,"0") + h2.toString(16).padStart(8,"0");
}
/* ユーザー配列の読み書き */
function loadUsers(){
users = JSON.parse(LS.get(KEY.users, "[]") || "[]");
if(!Array.isArray(users)) users = [];
users = users.map(u=>{
if(!u || !u.email) return null;
if(!u.profile) u.profile = { username:"", bio:"", avatar:"https://via.placeholder.com/100" };
if(!u.following) u.following = [];
if(!u.blocked) u.blocked = [];
if(!u.muted) u.muted = [];
if(!u.createdAt) u.createdAt = Date.now();
if(typeof u.passHash !== "string") u.passHash = u.passHash ? String(u.passHash) : "";
u.email = normalizeEmail(u.email);
return u;
}).filter(Boolean);
LS.set(KEY.users, JSON.stringify(users));
}
function saveUsers(){ LS.set(KEY.users, JSON.stringify(users)); }
function loadSession(){
const s = JSON.parse(LS.get(KEY.session, "null") || "null");
if(!s || !s.email) return null;
if(!s.remember){
LS.del(KEY.session);
return null;
}
return s;
}
function saveSession(email, remember){
const s = { email: normalizeEmail(email), remember: !!remember, ts: Date.now() };
LS.set(KEY.session, JSON.stringify(s));
}
function clearSession(){ LS.del(KEY.session); }
function setCurrentUser(email){
currentUser = { email: normalizeEmail(email) };
LS.set(KEY.current, JSON.stringify(currentUser));
}
function clearCurrentUser(){
currentUser = null;
LS.del(KEY.current);
}
function ensureGuest(){
const guestEmail="guest@local";
if(!users.find(u=>u.email===guestEmail)){
users.push({
email:guestEmail,
passHash:"",
profile:{ username:"ゲスト", bio:"", avatar:"https://via.placeholder.com/100" },
following:[], blocked:[], muted:[],
createdAt: Date.now()
});
saveUsers();
}
setCurrentUser(guestEmail);
}
function findUser(email){
const e = normalizeEmail(email);
return users.find(u=>normalizeEmail(u.email)===e) || null;
}
function getMe(){
if(!currentUser || !currentUser.email) return null;
return findUser(currentUser.email);
}
function authMsg(text, kind="info"){
const el = document.getElementById("auth-msg");
if(!el) return;
if(!text){ el.textContent=""; el.className="text-xs muted"; return; }
el.textContent = text;
el.className = "text-xs " + (kind==="err" ? "text-red-700" : kind==="ok" ? "text-emerald-700" : "muted");
}
function openAuth(){
document.getElementById("auth-overlay").style.display="block";
authMsg("");
}
function closeAuth(){
document.getElementById("auth-overlay").style.display="none";
authMsg("");
}
function setAuthTab(tab){
const tLogin = document.getElementById("tab-login");
const tReg = document.getElementById("tab-register");
const pLogin = document.getElementById("panel-login");
const pReg = document.getElementById("panel-register");
const onLogin = tab==="login";
tLogin.classList.toggle("active", onLogin);
tReg.classList.toggle("active", !onLogin);
pLogin.style.display = onLogin ? "" : "none";
pReg.style.display = onLogin ? "none" : "";
authMsg("");
}
async function doRegister(){
loadUsers();
const email = normalizeEmail(document.getElementById("reg-email").value);
const pass = String(document.getElementById("reg-pass").value || "");
const pass2 = String(document.getElementById("reg-pass2").value || "");
const username = String(document.getElementById("reg-username").value || "").trim();
if(!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){
authMsg("メールアドレスが不正です", "err"); return;
}
if(pass.length < 4){
authMsg("パスワードは4文字以上にしてください", "err"); return;
}
if(pass !== pass2){
authMsg("パスワード確認が一致しません", "err"); return;
}
if(username.length > 20){
authMsg("ユーザー名は20文字以内です", "err"); return;
}
if(findUser(email)){
authMsg("このメールアドレスは既に登録済みです", "err"); return;
}
let passHash;
try{
passHash = await sha256(pass);
}catch(e){
passHash = simpleHash(pass);
}
users.push({
email,
passHash,
profile:{
username: username || email.split("@")[0] || "User",
bio:"",
avatar: (getSelectedWebIcon() && getSelectedWebIcon().dataUrl) ? getSelectedWebIcon().dataUrl : "https://via.placeholder.com/100"
},
following:[],
blocked:[],
muted:[],
createdAt: Date.now()
});
saveUsers();
setCurrentUser(email);
saveSession(email, true);
authMsg("登録しました。ログイン完了!", "ok");
document.getElementById("reg-email").value="";
document.getElementById("reg-pass").value="";
document.getElementById("reg-pass2").value="";
document.getElementById("reg-username").value="";
closeAuth();
afterAuthBootstrap();
}
async function doLogin(){
loadUsers();
const email = normalizeEmail(document.getElementById("login-email").value);
const pass = String(document.getElementById("login-pass").value || "");
const remember = !!document.getElementById("login-remember").checked;
if(!email){
authMsg("メールアドレスを入力してください", "err"); return;
}
const u = findUser(email);
if(!u || !u.passHash){
authMsg("ユーザーが見つかりません(会員登録してください)", "err"); return;
}
const passHash = await sha256(pass);
if(passHash !== u.passHash){
authMsg("パスワードが違います", "err"); return;
}
setCurrentUser(email);
if(remember) saveSession(email, true);
else clearSession();
authMsg("ログインしました", "ok");
closeAuth();
afterAuthBootstrap();
}
function doLogout(){
if(!confirm("ログアウトしますか?")) return;
stopRss(true);
clearCurrentUser();
clearSession();
openAuth();
setAuthTab("login");
lockAppForAuth(true);
syncProfileUI();
renderTimeline();
rebuildVRWall();
}
function lockAppForAuth(locked){
const main = document.getElementById("main-content");
const header = document.getElementById("app-header");
const footer = document.querySelector("footer");
const disable = (el)=>{
if(!el) return;
el.style.filter = locked ? "blur(2px)" : "";
el.style.opacity = locked ? "0.65" : "";
el.style.pointerEvents = locked ? "none" : "";
el.style.userSelect = locked ? "none" : "";
};
disable(main); disable(header); disable(footer);
}
function restoreAuthState(){
const s = loadSession();
if(s && s.email && findUser(s.email)){
setCurrentUser(s.email);
return true;
}
const cur = JSON.parse(LS.get(KEY.current, "null") || "null");
if(cur && cur.email && findUser(cur.email)){
setCurrentUser(cur.email);
return true;
}
clearCurrentUser();
return false;
}
/* ---------- Posts ---------- */
function loadPosts(){ posts = JSON.parse(LS.get(KEY.posts, "[]") || "[]"); if(!Array.isArray(posts)) posts=[]; }
function savePosts(){ LS.set(KEY.posts, JSON.stringify(posts)); }
function countMyPosts(){
const me=getMe(); if(!me) return 0;
return posts.filter(p=>p.authorEmail===me.email && p.type==="user").length;
}
/* ---------- Appearance ---------- */
function applyHeaderBg(dataUrl){ const h=document.getElementById("app-header"); if(h) h.style.backgroundImage=`url('${dataUrl}')`; LS.set(KEY.headerBg, dataUrl); }
function resetHeaderBg(){ const h=document.getElementById("app-header"); if(h) h.style.backgroundImage=""; LS.del(KEY.headerBg); }
function loadAppearance(){
const defaultFeed = (WEB_ICONS.find(x=>x.id==="eye_squ") || WEB_ICONS[0] || null);
const DEFAULT_ICONS = { feed: defaultFeed ? defaultFeed.dataUrl : "https://via.placeholder.com/40" };
const ico = JSON.parse(LS.get(KEY.icons, "null") || "null");
if(ico && typeof ico==="object") icons = { ...DEFAULT_ICONS, ...ico };
else icons = { ...DEFAULT_ICONS };
const hb = LS.get(KEY.headerBg, null); if(hb) applyHeaderBg(hb);
const fav = LS.get(KEY.favicon, null); if(fav) applyFavicon(fav); else applyFavicon(document.getElementById("favicon-svg")?.href);
const me = getMe();
document.getElementById("header-avatar").src = (me && me.profile && me.profile.avatar) ? me.profile.avatar : (getSelectedWebIcon()?.dataUrl || "https://via.placeholder.com/80");
}
/* ---------- Profile UI ---------- */
function syncProfileUI(){
const me = getMe();
const isLoggedIn = !!me;
document.getElementById("header-email").textContent = me ? me.email : "";
document.getElementById("header-username").textContent = me ? (me.profile.username||"未設定") : "未ログイン";
document.getElementById("header-avatar").src = me ? (me.profile.avatar||"https://via.placeholder.com/80") : (getSelectedWebIcon()?.dataUrl || "https://via.placeholder.com/80");
document.getElementById("profile-avatar").src = me ? (me.profile.avatar||"https://via.placeholder.com/100") : (getSelectedWebIcon()?.dataUrl || "https://via.placeholder.com/100");
document.getElementById("inp-username").value = me ? (me.profile.username||"") : "";
document.getElementById("inp-bio").value = me ? (me.profile.bio||"") : "";
document.getElementById("preview-username").textContent = me ? (me.profile.username||"未設定") : "未ログイン";
document.getElementById("preview-bio").textContent = me ? (me.profile.bio||"まだ自己紹介がありません") : "ログインしてください";
document.getElementById("btn-logout").style.display = isLoggedIn ? "" : "none";
}
function saveProfile(){
const me=getMe();
if(!me) return alert("ログインしてください");
const name=(document.getElementById("inp-username").value||"").trim();
const bio=(document.getElementById("inp-bio").value||"").trim();
if(name.length>20) return alert("ユーザー名は20文字以内です");
me.profile.username=name||me.profile.username||"User";
me.profile.bio=bio;
saveUsers();
syncProfileUI();
syncStats();
renderTimeline();
rebuildVRWall();
alert("保存しました");
}
function syncStats(){
const me=getMe();
if(!me){
document.getElementById("stat-followers").textContent="0";
document.getElementById("stat-following").textContent="0";
document.getElementById("stat-posts").textContent="0";
return;
}
const followers=users.filter(u=>(u.following||[]).includes(me.email)).length;
document.getElementById("stat-followers").textContent=String(followers);
document.getElementById("stat-following").textContent=String((me.following||[]).length);
document.getElementById("stat-posts").textContent=String(countMyPosts());
}
/* ---------- Post URL ---------- */
function postUrl(postId){
const base = location.href.split("#")[0];
return `${base}#post=${encodeURIComponent(postId)}`;
}
function setLatestPostUrl(postId){
const u = postUrl(postId);
LS.set(KEY.latest, u);
document.getElementById("latest-post-url").textContent = u;
}
function loadLatestPostUrl(){
const u = LS.get(KEY.latest, "");
document.getElementById("latest-post-url").textContent = u || "(まだ投稿していません)";
}
function highlightFromHash(scroll=true){
const h = location.hash || "";
const m = h.match(/post=([^&]+)/);
if(!m) return;
const pid = decodeURIComponent(m[1]);
const el = document.getElementById("post-"+pid);
if(!el) return;
el.style.outline="3px solid rgba(91,95,230,.35)";
el.style.boxShadow="0 0 0 6px rgba(91,95,230,.10)";
if(scroll) el.scrollIntoView({behavior:"smooth", block:"center"});
setTimeout(()=>{ el.style.outline=""; el.style.boxShadow=""; }, 2200);
}
/* ---------- Media attach ---------- */
function refreshMediaPreview(){
const wrap=document.getElementById("media-preview");
wrap.innerHTML="";
if(pendingMedia.length===0) return;
pendingMedia.forEach((m,idx)=>{
const card=document.createElement("div");
card.className="glass p-3 border border-slate-200";
const top=document.createElement("div");
top.className="flex items-center justify-between mb-2";
top.innerHTML=`<div class="text-xs font-semibold">${escapeHtml(m.name)} <span class="muted">(${bytesToMB(m.size)}MB)</span></div>
<button class="pill px-3 py-1 text-xs hover:bg-slate-50">削除</button>`;
top.querySelector("button").onclick=()=>{ pendingMedia.splice(idx,1); refreshMediaPreview(); };
const body=document.createElement("div");
if((m.type||"").startsWith("image/")) body.innerHTML=`<img src="${m.dataUrl}" class="w-full rounded-xl border border-slate-200 object-cover" style="max-height:180px">`;
else body.innerHTML=`<video src="${m.dataUrl}" controls class="w-full rounded-xl border border-slate-200" style="max-height:180px"></video>`;
card.appendChild(top); card.appendChild(body); wrap.appendChild(card);
});
}
function clearMedia(){ pendingMedia=[]; refreshMediaPreview(); }
/* =========================================================
RSS(ON/OFF)
========================================================= */
function loadRss(){
let rss = JSON.parse(LS.get(KEY.rss, "null") || "null");
if(!rss){
rss = { feeds: PRESET_RSS.slice(), intervalSec: 120, enabled: false, lastRun: null };
LS.set(KEY.rss, JSON.stringify(rss));
}
if(!Array.isArray(rss.feeds)) rss.feeds = PRESET_RSS.slice();
rss.intervalSec = Math.max(10, Number(rss.intervalSec)||120);
rss.enabled = !!rss.enabled;
return rss;
}
function saveRss(rss){ LS.set(KEY.rss, JSON.stringify(rss)); }
function loadSeen(){ let seen=JSON.parse(LS.get(KEY.rssSeen,"{}")||"{}"); if(!seen||typeof seen!=="object") seen={}; return seen; }
function saveSeen(seen){ LS.set(KEY.rssSeen, JSON.stringify(seen)); }
function setRssIndicator(running){
document.getElementById("rss-dot").className = "status-dot " + (running ? "on":"off");
document.getElementById("rss-status-text").textContent = running ? "動作中":"停止中";
}
function setToggleUI(enabled){
const t = document.getElementById("rss-toggle");
t.classList.toggle("on", !!enabled);
t.setAttribute("aria-checked", enabled ? "true":"false");
}
function rssUI(){
const rss=loadRss();
document.getElementById("rss-interval").value=rss.intervalSec||120;
const wrap=document.getElementById("rss-list");
wrap.innerHTML="";
(rss.feeds||[]).forEach((u,i)=>{
const row=document.createElement("div");
row.className="glass p-3 border border-slate-200 flex items-center gap-2";
row.innerHTML=`<div class="text-[11px] flex-1 truncate" title="${escapeHtml(u)}">${escapeHtml(u)}</div>
<button class="pill px-3 py-2 text-xs hover:bg-slate-50" title="削除"><i class="fas fa-trash"></i></button>`;
row.querySelector("button").onclick=()=>{
if(!confirm("このRSSを削除しますか?")) return;
const r=loadRss(); r.feeds.splice(i,1); saveRss(r); rssUI();
addLog("削除: "+u,"info");
};
wrap.appendChild(row);
});
setToggleUI(rss.enabled);
setRssIndicator(!!rssTimer);
}
function setRssEnabled(enabled){
const rss = loadRss();
rss.enabled = !!enabled;
saveRss(rss);
setToggleUI(rss.enabled);
if(rss.enabled) startRss();
else stopRss(true);
}
function addRssFeed(){
const inp=document.getElementById("rss-url");
const url=(inp.value||"").trim();
if(!/^https?:\/\/.+/i.test(url)) return addLog("正しいRSS URLを入れてください","err");
const rss=loadRss();
if(rss.feeds.includes(url)) return addLog("すでに登録済みです","err");
rss.feeds.push(url); saveRss(rss); inp.value="";
rssUI();
addLog("追加: "+url,"ok");
}
function setRssInterval(){
const v=Number(document.getElementById("rss-interval").value)||120;
if(v<10) return alert("10秒以上にしてください");
const rss=loadRss(); rss.intervalSec=v; saveRss(rss);
addLog("間隔設定: "+v+"秒","ok");
if(rssTimer){ startRss(); }
}
function clearSeen(){
LS.del(KEY.rssSeen);
addLog("既読リセット: ts_rss_seen を削除","ok");
}
/* RSS fetch */
async function fetchTextDirect(url){
const res = await fetch(url, { cache:"no-store" });
if(!res.ok) throw new Error("Direct HTTP "+res.status);
return await res.text();
}
async function fetchTextViaAllOriginsRaw(url){
const endpoint = "https://api.allorigins.win/raw?url="+encodeURIComponent(url);
const res=await fetch(endpoint,{cache:"no-store"});
if(!res.ok) throw new Error("AllOrigins HTTP "+res.status);
return await res.text();
}
async function fetchTextViaThingProxy(url){
const endpoint = "https://thingproxy.freeboard.io/fetch/"+url;
const res=await fetch(endpoint,{cache:"no-store"});
if(!res.ok) throw new Error("ThingProxy HTTP "+res.status);
return await res.text();
}
async function fetchJsonViaRss2Json(url){
const endpoint="https://api.rss2json.com/v1/api.json?rss_url="+encodeURIComponent(url);
const res=await fetch(endpoint,{cache:"no-store"});
if(!res.ok) throw new Error("rss2json HTTP "+res.status);
const j=await res.json();
if(j && j.status && j.status!=="ok") throw new Error("rss2json status="+j.status+" msg="+(j.message||""));
return j;
}
function parseXmlToItems(xmlText){
const dp=new DOMParser();
const doc=dp.parseFromString(xmlText,"text/xml");
if(doc.querySelector("parsererror")) throw new Error("XML parse error");
const nodes = Array.from(doc.querySelectorAll("item, entry")).slice(0, 20);
const pickText = (n, sels) => {
for(const s of sels){
const el = n.querySelector(s);
if(el && el.textContent) return el.textContent.trim();
}
return "";
};
return nodes.map(n=>{
const title = pickText(n, ["title"]);
let link = "";
const linkEl = n.querySelector("link");
if(linkEl){
link = (linkEl.getAttribute("href")||"").trim() || (linkEl.textContent||"").trim();
}
if(!link){ link = pickText(n, ["id"]); }
const pub = pickText(n, ["pubDate","published","updated","dc\\:date","date"]);
return { title: title || "(no title)", link, pubDate: pub };
}).filter(x=>x.title || x.link);
}
function normalizeItems(items){
return (items||[]).map(it=>{
const title=(it.title||"").trim();
const link=(it.link||"").trim();
const pubDate=(it.pubDate||it.pub||"").trim();
return { title:title||"(no title)", link, pubDate };
}).filter(it=>it.title || it.link);
}
async function fetchFeedItems(feedUrl, debug=false){
const url = feedUrl.trim();
let lastErr = null;
try{
const xml = await fetchTextDirect(url);
const items = normalizeItems(parseXmlToItems(xml));
if(items.length){ if(debug) addLog(`取得成功(Direct): ${items.length}件`,"ok"); return items; }
}catch(e){ lastErr=e; if(debug) addLog("Direct失敗: "+(e.message||e),"err"); }
try{
const xml = await fetchTextViaAllOriginsRaw(url);
const items = normalizeItems(parseXmlToItems(xml));
if(debug) addLog(`取得成功(AllOrigins): ${items.length}件`,"ok");
return items;
}catch(e){ lastErr=e; if(debug) addLog("AllOrigins失敗: "+(e.message||e),"err"); }
try{
const xml = await fetchTextViaThingProxy(url);
const items = normalizeItems(parseXmlToItems(xml));
if(debug) addLog(`取得成功(ThingProxy): ${items.length}件`,"ok");
return items;
}catch(e){ lastErr=e; if(debug) addLog("ThingProxy失敗: "+(e.message||e),"err"); }
try{
const j = await fetchJsonViaRss2Json(url);
const items = normalizeItems((j.items||[]).map(x=>({ title:x.title, link:x.link, pubDate:x.pubDate })));
if(debug) addLog(`取得成功(rss2json): ${items.length}件`,"ok");
return items;
}catch(e){ lastErr=e; if(debug) addLog("rss2json失敗: "+(e.message||e),"err"); }
throw lastErr || new Error("RSS fetch failed");
}
function startRss(){
stopRss(false);
const rss = loadRss();
if(!rss.enabled){
rss.enabled = true; saveRss(rss); setToggleUI(true);
}
setRssIndicator(true);
addLog("RSS自動投稿: ON(定期取得開始)","ok");
fetchAllFeedsOnce(true);
rssTimer = setInterval(()=>{ fetchAllFeedsOnce(false); }, (rss.intervalSec||120)*1000);
}
function stopRss(writeState=true){
if(rssTimer){ clearInterval(rssTimer); rssTimer=null; }
setRssIndicator(false);
if(writeState){
const rss = loadRss();
rss.enabled = false;
saveRss(rss);
setToggleUI(false);
addLog("RSS自動投稿: OFF(停止)","info");
}
}
function createPost({text, type="user", link="", media=[], authorEmail=null}){
const me=getMe();
if(type==="user" && !me){
alert("ログインしてください");
openAuth();
return null;
}
const post={
id: uid(),
text:(text||"").trim(),
type,
link,
media,
time: nowJp(),
authorEmail: authorEmail || (me ? me.email : "anonymous@local")
};
posts.unshift(post);
savePosts();
setLatestPostUrl(post.id);
syncStats();
renderTimeline();
return post;
}
async function fetchAllFeedsOnce(verbose=false){
const rss = loadRss();
if(!rss.feeds || rss.feeds.length===0){
addLog("RSSが未登録です","err");
return;
}
if(verbose) addLog(`取得開始: feeds=${rss.feeds.length}`,"info");
const seen = loadSeen();
let newCount = 0;
for(const feedUrl of rss.feeds){
try{
const items = await fetchFeedItems(feedUrl, verbose);
for(const it of items.slice(0, 10)){
const link = safeUrl(it.link) || "";
const key = link || (feedUrl + "::" + (it.title||""));
if(!key) continue;
if(seen[key]) continue;
seen[key]=true;
createPost({
text: it.title || "(no title)",
type: "feed",
link: link || "",
media: [],
authorEmail: "feed@local"
});
newCount++;
if(newCount >= 20) break;
}
}catch(e){
addLog(`失敗: ${feedUrl} / ${(e.message||e)}`,"err");
}
if(newCount >= 20) break;
}
saveSeen(seen);
if(verbose || newCount>0){
addLog(`取得完了: 新規 ${newCount}件` , newCount ? "ok" : "info");
}
const rr = loadRss();
rr.lastRun = Date.now();
saveRss(rr);
}
async function rssTestOne(){
const url=(document.getElementById("rss-url").value||"").trim();
const target=url || (loadRss().feeds[0]||"");
if(!target) return alert("テストするURLがありません");
addLog("URL検査: "+target,"info");
try{
const items = await fetchFeedItems(target, true);
addLog(`検査OK: items=${items.length}(先頭: ${items[0]?items[0].title:"なし"})`, items.length? "ok":"info");
}catch(e){
addLog("検査失敗: "+(e.message||e),"err");
alert("RSS検査で失敗しました。ログを見てください。");
}
}
/* =========================================================
Timeline rendering
========================================================= */
function badgeForType(p){
if(p.type==="feed") return `<span class="badge"><i class="fas fa-rss"></i>FEED</span>`;
return `<span class="badge"><i class="fas fa-user"></i>ユーザー</span>`;
}
function iconForPost(p){
if(p.type==="feed") return icons.feed;
const u=users.find(x=>x.email===p.authorEmail);
return (u && u.profile && u.profile.avatar) ? u.profile.avatar : (getSelectedWebIcon()?.dataUrl || "https://via.placeholder.com/40");
}
function usernameForPost(p){
if(p.type==="feed") return "Feed";
const u=users.find(x=>x.email===p.authorEmail);
return (u && u.profile && u.profile.username) ? u.profile.username : "Unknown";
}
function visibleInHome(p){
if(homeMode!=="home") return true;
const me=getMe();
if(!me){ return true; }
if((me.blocked||[]).includes(p.authorEmail)) return false;
if((me.muted||[]).includes(p.authorEmail)) return false;
if(p.type==="feed") return true;
if(p.authorEmail===me.email) return true;
return (me.following||[]).includes(p.authorEmail);
}
function filterPosts(){
let arr=posts.slice();
arr=arr.filter(p=>visibleInHome(p));
arr=arr.filter(p=>{
if(currentFilter==="all") return true;
if(currentFilter==="user") return p.type==="user";
if(currentFilter==="feed") return p.type==="feed";
return true;
});
if(searchQuery.trim()){
const q=searchQuery.trim().toLowerCase();
arr=arr.filter(p=>((p.text||"")+" "+usernameForPost(p)).toLowerCase().includes(q));
}
return arr;
}
async function copyArticleUrl(pid){
const p=posts.find(x=>String(x.id)===String(pid));
const u=p?safeUrl(p.link):"";
if(!u) return alert("記事URLがありません");
await copyText(u);
alert("記事URLをコピーしました");
}
function openArticleUrl(pid){
const p=posts.find(x=>String(x.id)===String(pid));
const u=p?safeUrl(p.link):"";
if(!u) return alert("記事URLがありません");
openPopup(u);
}
function renderTimeline(){
const tl=document.getElementById("timeline");
const emp=document.getElementById("empty");
const cnt=document.getElementById("post-count");
const arr=filterPosts();
cnt.textContent=`(${arr.length}件)`;
if(arr.length===0){ tl.innerHTML=""; emp.style.display=""; return; }
emp.style.display="none";
tl.innerHTML = arr.map(p=>{
const pid=String(p.id);
const myPostUrl=postUrl(pid);
const articleUrl=safeUrl(p.link);
const mainText = articleUrl
? `<a href="${escapeHtml(articleUrl)}" target="_blank" rel="noopener" class="text-sky-600 underline">${escapeHtml(p.text)}</a>`
: escapeHtml(p.text);
const articleRow = articleUrl ? `
<div class="mt-3 glass p-3 border border-slate-200">
<div class="flex items-center justify-between gap-2">
<div class="text-xs font-semibold flex items-center gap-2">
<i class="fas fa-link text-amber-600"></i> 記事URL
</div>
<div class="flex items-center gap-2">
<button class="pill px-3 py-2 text-xs hover:bg-slate-50" onclick="copyArticleUrl('${escapeHtml(pid)}')">
<i class="fas fa-copy mr-2"></i>コピー
</button>
<button class="pill px-3 py-2 text-xs hover:bg-slate-50" onclick="openArticleUrl('${escapeHtml(pid)}')">
<i class="fas fa-arrow-up-right-from-square mr-2"></i>開く
</button>
</div>
</div>
<div class="mt-2 text-xs muted break-all">${escapeHtml(articleUrl)}</div>
</div>
` : "";
const mediaHtml=(p.media && p.media.length) ? `
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 mt-3">
${p.media.map(m=>{
if((m.type||"").startsWith("image/")) return `<img src="${m.dataUrl}" class="w-full rounded-xl border border-slate-200 object-cover" style="max-height:220px">`;
return `<video src="${m.dataUrl}" controls class="w-full rounded-xl border border-slate-200" style="max-height:220px"></video>`;
}).join("")}
</div>` : "";
return `
<article class="timeline-post p-6" id="post-${escapeHtml(pid)}" data-postid="${escapeHtml(pid)}">
<div class="flex items-start justify-between gap-3">
<div class="flex items-center gap-3">
<img src="${escapeHtml(iconForPost(p))}" class="mini-avatar" onerror="this.src='https://via.placeholder.com/40'">
<div>
<div class="flex items-center gap-2">
<div class="font-semibold">${escapeHtml(usernameForPost(p))}</div>
${badgeForType(p)}
</div>
<div class="text-xs muted">${escapeHtml(p.time)}</div>
</div>
</div>
</div>
<div class="mt-3 text-sm leading-relaxed">${mainText}</div>
${articleRow}
${mediaHtml}
<div class="mt-3 text-xs muted break-all">
<i class="fas fa-link mr-2 text-indigo-600"></i>投稿URL: ${escapeHtml(myPostUrl)}
</div>
</article>
`;
}).join("");
highlightFromHash(false);
}
/* ---------- Export/Import/Clear ---------- */
function deleteAllPosts(){
if(!confirm("全投稿を削除しますか?")) return;
posts=[]; savePosts(); syncStats(); renderTimeline(); rebuildVRWall();
}
function exportData(){
const payload = {
users, posts, icons,
headerBg: LS.get(KEY.headerBg, null),
favicon: LS.get(KEY.favicon, null),
rss: JSON.parse(LS.get(KEY.rss, "null") || "null"),
session: JSON.parse(LS.get(KEY.session, "null") || "null"),
current: JSON.parse(LS.get(KEY.current, "null") || "null"),
webIconSelected: JSON.parse(LS.get(KEY.webIconSelected, "null") || "null")
};
const blob=new Blob([JSON.stringify(payload,null,2)],{type:"application/json"});
const url=URL.createObjectURL(blob);
const a=document.createElement("a");
a.href=url; a.download="tsumugi_backup.json"; a.click();
URL.revokeObjectURL(url);
}
function importData(){
const input=document.createElement("input");
input.type="file"; input.accept="application/json";
input.onchange=()=>{
const f=input.files && input.files[0]; if(!f) return;
const r=new FileReader();
r.onload=()=>{
try{
const obj=JSON.parse(String(r.result||"{}"));
if(obj.users){ users=obj.users; saveUsers(); }
if(obj.posts){ posts=obj.posts; savePosts(); }
if(obj.icons){ icons=obj.icons; LS.set(KEY.icons, JSON.stringify(icons)); }
if(obj.headerBg){ applyHeaderBg(obj.headerBg); }
if(obj.favicon){ applyFavicon(obj.favicon); }
if(obj.rss){ LS.set(KEY.rss, JSON.stringify(obj.rss)); }
if(obj.session){ LS.set(KEY.session, JSON.stringify(obj.session)); }
if(obj.current){ LS.set(KEY.current, JSON.stringify(obj.current)); }
if(obj.webIconSelected){ LS.set(KEY.webIconSelected, JSON.stringify(obj.webIconSelected)); }
alert("読み込み完了");
init();
}catch(e){
alert("読み込み失敗: "+(e.message||e));
}
};
r.readAsText(f);
};
input.click();
}
function clearAllCache(){
if(!confirm("Tsumugiのローカルデータを全消去します。よろしいですか?")) return;
Object.keys(localStorage).forEach(k=>{ if(k.startsWith("ts_")) localStorage.removeItem(k); });
alert("全消去しました。再読み込みします。");
location.reload();
}
/* =========================================================
VR試験
========================================================= */
function openVR(){
document.getElementById("vr-overlay").style.display="block";
rebuildVRWall();
}
function closeVR(){
document.getElementById("vr-overlay").style.display="none";
}
function rebuildVRWall(){
const wall = document.getElementById("vr-wall");
if(!wall) return;
wall.innerHTML="";
const arr = filterPosts().slice(0, 10);
const startX = -3.6, startY = 2.2, gapX = 2.5, gapY = 1.35, cols = 3;
arr.forEach((p, idx)=>{
const c = idx % cols;
const r = Math.floor(idx / cols);
const x = startX + c*gapX;
const y = startY - r*gapY;
const z = -4.0;
const title = (p.text||"").slice(0, 46);
const link = safeUrl(p.link);
const line2 = link ? "URL: "+link.slice(0, 40) : "";
const text = `${usernameForPost(p)}\n${title}${line2?("\n"+line2):""}`;
const card = document.createElement("a-entity");
card.setAttribute("position", `${x} ${y} ${z}`);
const plane = document.createElement("a-plane");
plane.setAttribute("width","2.3");
plane.setAttribute("height","1.2");
plane.setAttribute("color","#111827");
plane.setAttribute("opacity","0.88");
plane.setAttribute("material","side:double");
card.appendChild(plane);
const txt = document.createElement("a-text");
txt.setAttribute("value", text);
txt.setAttribute("color","#e5e7eb");
txt.setAttribute("width","2.2");
txt.setAttribute("position","-1.05 0.42 0.01");
txt.setAttribute("baseline","top");
txt.setAttribute("wrap-count","28");
card.appendChild(txt);
if(link){
card.addEventListener("click", ()=>{
closeVR();
openPopup(link);
});
}
wall.appendChild(card);
});
}
/* =========================================================
Events / Init
========================================================= */
function wireEvents(){
document.getElementById("btn-vr").onclick = ()=>openVR();
document.getElementById("btn-clear-all").onclick = ()=>clearAllCache();
document.getElementById("btn-auth-open").onclick = ()=>openAuth();
document.getElementById("btn-logout").onclick = ()=>doLogout();
// Auth overlay
document.getElementById("btn-auth-close").onclick = ()=>closeAuth();
document.getElementById("tab-login").onclick = ()=>setAuthTab("login");
document.getElementById("tab-register").onclick = ()=>setAuthTab("register");
document.getElementById("btn-register").onclick = ()=>doRegister();
document.getElementById("btn-login").onclick = ()=>doLogin();
document.getElementById("btn-guest").onclick = ()=>{
loadUsers();
ensureGuest();
saveSession("guest@local", true);
closeAuth();
afterAuthBootstrap();
};
// VR
document.getElementById("btn-vr-exit").onclick = ()=>closeVR();
document.getElementById("btn-vr-enter").onclick = ()=>{
rebuildVRWall();
alert("VR試験: マウスで視点、WASD移動(記事カードはクリックで記事を開きます)");
};
// profile
document.getElementById("btn-save-profile").onclick = ()=>saveProfile();
document.getElementById("btn-change-profile").onclick = ()=>document.getElementById("file-profile").click();
document.getElementById("file-profile").onchange = (e)=>{
const me=getMe();
if(!me) return alert("ログインしてください");
const f=e.target.files && e.target.files[0]; if(!f) return;
const r=new FileReader();
r.onload=()=>{
me.profile.avatar=String(r.result||"");
saveUsers();
syncProfileUI();
renderTimeline();
rebuildVRWall();
};
r.readAsDataURL(f);
};
// headerbg / favicon / feed icon(ファイル)
document.getElementById("btn-change-headerbg").onclick = ()=>document.getElementById("file-headerbg").click();
document.getElementById("file-headerbg").onchange = (e)=>{
const f=e.target.files && e.target.files[0]; if(!f) return;
const r=new FileReader();
r.onload=()=>applyHeaderBg(String(r.result||""));
r.readAsDataURL(f);
};
document.getElementById("btn-reset-headerbg").onclick = ()=>resetHeaderBg();
document.getElementById("btn-change-appicon").onclick = ()=>document.getElementById("file-appicon").click();
document.getElementById("file-appicon").onchange = (e)=>{
const f=e.target.files && e.target.files[0]; if(!f) return;
const r=new FileReader();
r.onload=()=>applyFavicon(String(r.result||""));
r.readAsDataURL(f);
};
document.getElementById("btn-reset-appicon").onclick = ()=>resetFavicon();
document.getElementById("btn-change-feedicon").onclick = ()=>document.getElementById("file-feedicon").click();
document.getElementById("file-feedicon").onchange = (e)=>{
const f=e.target.files && e.target.files[0]; if(!f) return;
const r=new FileReader();
r.onload=()=>{
icons.feed=String(r.result||icons.feed);
LS.set(KEY.icons, JSON.stringify(icons));
renderTimeline();
rebuildVRWall();
};
r.readAsDataURL(f);
};
// WEBアイコン適用
document.getElementById("btn-apply-favicon").onclick = ()=>applySelectedToFavicon();
document.getElementById("btn-apply-feed").onclick = ()=>applySelectedToFeed();
document.getElementById("btn-apply-profile").onclick = ()=>applySelectedToProfile();
document.getElementById("btn-icon-random").onclick = ()=>randomPickIcon();
// RSS toggle
const toggle = document.getElementById("rss-toggle");
const toggleFlip = ()=>{
const rss = loadRss();
setRssEnabled(!rss.enabled);
rssUI();
};
toggle.onclick = toggleFlip;
toggle.onkeydown = (e)=>{ if(e.key==="Enter" || e.key===" "){ e.preventDefault(); toggleFlip(); } };
// RSS buttons
document.getElementById("btn-add-rss").onclick = ()=>addRssFeed();
document.getElementById("btn-fetch-rss").onclick = ()=>fetchAllFeedsOnce(true);
document.getElementById("btn-set-rss-interval").onclick = ()=>setRssInterval();
document.getElementById("btn-rss-clear-seen").onclick = ()=>clearSeen();
document.getElementById("btn-rss-test-one").onclick = ()=>rssTestOne();
// posting
const postText=document.getElementById("post-text");
postText.addEventListener("input", ()=>{ document.getElementById("char-count").textContent=`(${postText.value.length}/600)`; });
postText.addEventListener("keydown", (e)=>{ if(e.ctrlKey && e.key==="Enter"){ document.getElementById("btn-post").click(); } });
document.getElementById("btn-post").onclick = ()=>{
const t=(postText.value||"").trim();
if(!t && pendingMedia.length===0) return alert("本文か添付が必要です");
const p = createPost({ text:t||"(添付)", type:"user", media: pendingMedia.slice() });
if(!p) return;
postText.value=""; document.getElementById("char-count").textContent="(0/600)";
clearMedia();
};
document.getElementById("btn-delete-all-posts").onclick = ()=>deleteAllPosts();
// media
document.getElementById("btn-add-media").onclick = ()=>document.getElementById("file-media").click();
document.getElementById("file-media").onchange = async (e)=>{
const me=getMe();
if(!me){ alert("ログインしてください"); openAuth(); e.target.value=""; return; }
const files = Array.from(e.target.files||[]);
if(!files.length) return;
for(const f of files){
const dataUrl = await new Promise((res,rej)=>{
const r=new FileReader();
r.onload=()=>res(String(r.result||""));
r.onerror=()=>rej(new Error("file read error"));
r.readAsDataURL(f);
});
pendingMedia.push({ name:f.name, type:f.type||"application/octet-stream", size:f.size||0, dataUrl });
if(pendingMedia.length>9){ pendingMedia=pendingMedia.slice(0,9); break; }
}
refreshMediaPreview();
e.target.value="";
};
document.getElementById("btn-clear-media").onclick = ()=>clearMedia();
// latest post url
document.getElementById("btn-copy-post-url").onclick = async ()=>{
const u=document.getElementById("latest-post-url").textContent.trim();
if(!u || u.startsWith("(")) return alert("まだ投稿URLがありません");
await copyText(u); alert("投稿URLをコピーしました");
};
document.getElementById("btn-open-post-url").onclick = ()=>{
const u=document.getElementById("latest-post-url").textContent.trim();
if(!u || u.startsWith("(")) return alert("まだ投稿URLがありません");
location.href = u;
};
// timeline filter/search
document.querySelectorAll("[data-filter]").forEach(btn=>{
btn.onclick = ()=>{
currentFilter = btn.getAttribute("data-filter") || "all";
document.querySelectorAll("[data-filter]").forEach(b=>{
b.classList.remove("btn-primary"); b.classList.add("pill","hover:bg-slate-50");
});
btn.classList.remove("pill","hover:bg-slate-50");
btn.classList.add("btn-primary");
renderTimeline();
rebuildVRWall();
};
});
document.getElementById("search").addEventListener("input",(e)=>{
searchQuery = e.target.value || "";
renderTimeline();
rebuildVRWall();
});
document.getElementById("btn-refresh").onclick = ()=>{ renderTimeline(); rebuildVRWall(); };
document.getElementById("btn-export").onclick = ()=>exportData();
document.getElementById("btn-import").onclick = ()=>importData();
// home/explore
document.getElementById("btn-home").onclick = ()=>{ homeMode="home"; renderTimeline(); rebuildVRWall(); };
document.getElementById("btn-explore").onclick = ()=>{ homeMode="explore"; renderTimeline(); rebuildVRWall(); };
}
/* ログイン後にUIを再同期する */
function afterAuthBootstrap(){
lockAppForAuth(false);
loadAppearance();
syncProfileUI();
syncStats();
renderTimeline();
loadLatestPostUrl();
rssUI();
rebuildVRWall();
renderWebIconGrid();
const rss = loadRss();
if(rss.enabled){
startRss();
}else{
stopRss(false);
setToggleUI(false);
setRssIndicator(false);
}
}
/* 起動 */
function init(){
buildWebIconPack();
loadSelectedWebIcon();
loadUsers();
loadPosts();
const loggedIn = restoreAuthState();
loadAppearance();
renderWebIconGrid();
syncProfileUI();
syncStats();
renderTimeline();
loadLatestPostUrl();
rssUI();
highlightFromHash(false);
rebuildVRWall();
if(!loggedIn){
lockAppForAuth(true);
openAuth();
setAuthTab("login");
}else{
lockAppForAuth(false);
const rss = loadRss();
if(rss.enabled) startRss();
else{
stopRss(false);
setToggleUI(false);
setRssIndicator(false);
}
}
}
/* boot */
wireEvents();
init();
window.addEventListener("hashchange", ()=>highlightFromHash(true));
</script>
</body>
</html>
Meta Quest 4 Concept
フルダイブVR論文
弾幕シューティングゲーム「月花葬」
光の言葉.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="theme-color" content="#183a4c">
<title>ひかりのことば PLUS | 聖書・祈り・学習BOT</title>
<style>
:root{--bg:#f4f4ee;--surface:#fff;--ink:#233546;--muted:#647586;--line:#e0e6e8;--deep:#183a4c;--deep2:#315a6d;--accent:#ae8950;--soft:#edf4f5;--shadow:0 12px 35px #1b364014;--bubble:#edf4f4}
body.dark{--bg:#101d28;--surface:#192c3a;--ink:#f2f3f0;--muted:#acbcc7;--line:#385061;--deep:#243f52;--deep2:#376177;--soft:#243c4b;--shadow:0 15px 40px #030b1080;--bubble:#253e4b;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #d0a86b;outline-offset:2px}a{color:inherit}.wrap{max-width:1250px;margin:auto;padding:20px 18px 50px}.hero{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(125deg,#112c40,#2f5868 75%,#56727a);color:white;padding:28px 32px;box-shadow:var(--shadow)}.hero:after{content:'✦';position:absolute;right:50px;top:-80px;font-size:260px;color:#fff1;pointer-events:none}.hero .kicker{letter-spacing:.23em;text-transform:uppercase;font-size:11px;color:#dfc99f}.hero h1{font-size:clamp(27px,4vw,42px);line-height:1.25;margin:8px 0}.hero p{margin:0;max-width:680px;color:#e4edef}.top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;z-index:2}.ghost{border:1px solid #ffffff77;background:#ffffff16;color:white;border-radius:11px;padding:8px 12px}.ghost:hover{background:#ffffff30}.shell{display:grid;grid-template-columns:255px minmax(0,1fr) 276px;gap:17px;margin-top:18px;align-items:start}.panel{background:var(--surface);border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow)}.left,.right{padding:20px}.panel h2{font-size:16px;margin:0 0 11px}.group-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:18px 0 9px}.nav{display:flex;flex-direction:column;gap:5px}.nav button{width:100%;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--ink);padding:11px 12px;text-align:left}.nav button:hover{background:var(--soft)}.nav button.active{background:var(--soft);border-color:var(--line);font-weight:800}.small{font-size:12px;color:var(--muted)}.notice{font-size:12px;color:var(--muted);line-height:1.85;padding:12px;background:var(--soft);border-radius:12px;margin-top:18px}.main{min-width:0}.view{display:none}.view.active{display:block}.view-header{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}.view-header h2{margin:0}.primary,.secondary,.chip{border-radius:11px;padding:10px 13px}.primary{background:var(--deep2);color:white;border:1px solid transparent;font-weight:700}.primary:hover{filter:brightness(1.12)}.secondary{background:var(--surface);border:1px solid var(--line);color:var(--ink)}.secondary:hover,.chip:hover{background:var(--soft)}.subtle{border:0;background:transparent;color:var(--muted);padding:6px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.column{display:flex;flex-direction:column;gap:13px}.chat-window{height:490px;overflow-y:auto;padding:19px;display:flex;flex-direction:column;gap:15px;background:linear-gradient(180deg,transparent,var(--soft))}.chat-row{max-width:91%;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.chat-row.user{align-self:flex-end;align-items:flex-end}.bubble{padding:13px 16px;border-radius:16px;border:1px solid var(--line);background:var(--bubble);white-space:pre-wrap;overflow-wrap:anywhere}.chat-row.user .bubble{background:var(--deep2);border-color:transparent;color:#fff}.bubble small{display:block;margin-top:9px;border-top:1px solid var(--line);padding-top:7px;color:var(--muted)}.chat-row.user .bubble small{color:#fff}.stamp{color:var(--muted);font-size:10px;padding:0 5px}.composer{padding:15px;border-top:1px solid var(--line)}textarea,input,select{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;width:100%;min-width:0}textarea{resize:vertical;min-height:90px}.composer textarea{min-height:75px}.toolbar{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:8px}.padded{padding:20px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:12px;padding:8px 11px;border-radius:99px}.quote{background:var(--soft);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:12px 14px;margin:11px 0}.quote p{margin:0}.quote small{display:block;color:var(--muted);margin-top:7px}.stat{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.stat .tile{background:var(--soft);padding:12px;border-radius:11px}.stat b{display:block;font-size:21px}.tile small{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.card{padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.card h3{font-size:15px;margin:0 0 7px}.card p{font-size:13px;color:var(--muted);margin:0 0 8px}.card .row{justify-content:space-between}.reading{padding:12px;border:1px solid var(--line);border-radius:12px;margin:8px 0;background:var(--surface)}.reading h3{font-size:14px;margin:0 0 7px}.reading p{font-size:13px;margin:0 0 10px}.tag{display:inline-block;font-size:11px;color:var(--muted);background:var(--soft);padding:3px 8px;border-radius:30px}.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px;max-height:380px;overflow:auto;padding:6px 0}.book{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:9px;text-align:left;border-radius:9px}.book:hover{background:var(--soft)}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}.tabs button{border:1px solid var(--line);background:var(--surface);padding:8px 12px;border-radius:9px;color:var(--ink)}.tabs button.active{background:var(--deep2);color:white}.muted{color:var(--muted)}.hide{display:none!important}.quiz-option{display:block;width:100%;text-align:left;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);margin-top:8px}.quiz-option:hover{background:var(--soft)}.quiz-option.correct{border-color:#3da57a;background:#dcf8e8;color:#174c37}.quiz-option.wrong{border-color:#c96b65;background:#ffe9e7;color:#833028}.progress{height:9px;border-radius:30px;background:var(--line);overflow:hidden;margin:12px 0}.progress i{display:block;background:var(--accent);height:100%;transition:width .2s}.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:24px}.right .reading{border:0;background:var(--soft)}.danger{color:#b74b52}.divider{border:0;border-top:1px solid var(--line);margin:18px 0}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#16374b;color:#fff;padding:10px 16px;border-radius:12px;box-shadow:0 10px 40px #0004;z-index:10;display:none;max-width:95vw;text-align:center}@media(max-width:1080px){.shell{grid-template-columns:220px minmax(0,1fr)}.right{grid-column:1/-1}.right .stat{grid-template-columns:repeat(4,1fr)}}@media(max-width:700px){.shell{display:flex;flex-direction:column}.shell>*,.main{width:100%}.left{padding:13px}.nav{flex-direction:row;overflow-x:auto;white-space:nowrap}.nav button{width:auto;flex:0 0 auto}.group-label{display:none}.hero{padding:24px 20px}.top{flex-direction:column}.top-actions{justify-content:flex-start}.chat-window{height:440px}.right .stat{grid-template-columns:repeat(2,1fr)}.wrap{padding:12px}.view-header{padding:15px}.padded{padding:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
</style>
</head>
<body>
<div class="wrap">
<header class="hero"><div class="top"><div><div class="kicker">WORDS OF LIGHT · PERSONAL STUDY</div><h1>✝ ひかりのことば <span style="font-size:.35em;vertical-align:middle;letter-spacing:.14em">PLUS</span></h1><p>聖書の学び、日々の祈り、疑問や悩みを静かに整理する、オフラインのキリスト教学習BOT。</p></div><div class="top-actions"><button class="ghost" id="themeButton">☾ 表示切替</button><button class="ghost" id="exportButton">⇩ データ保存</button></div></div></header>
<div class="shell">
<aside class="panel left"><h2>メニュー</h2><nav class="nav" aria-label="メインメニュー"><button data-view="chat" class="active">💬 聖書BOT</button><button data-view="study">📖 聖書を学ぶ</button><button data-view="prayer">🕊 祈りのノート</button><button data-view="quiz">✏️ 聖書クイズ</button><button data-view="saved">☆ 保存したことば</button><button data-view="settings">⚙ 設定・管理</button></nav><div class="group-label">おすすめの話題</div><div class="chips" id="quickTopics"><button class="chip" data-ask="神とは何ですか">神について</button><button class="chip" data-ask="イエスの教え">イエス</button><button class="chip" data-ask="赦しについて">赦し</button><button class="chip" data-ask="仕事で疲れました">疲れ</button><button class="chip" data-ask="不安で眠れません">不安</button><button class="chip" data-ask="今日のことば">今日のことば</button><button class="chip" data-ask="なぜ苦しみがあるの">苦しみ</button><button class="chip" data-ask="祈りを作って">祈り</button></div><div class="notice">このBOTはローカルの応答ルールを使っています。実在の牧師・神・イエスとして発言するものではなく、回答は信仰上の解釈の一例です。</div></aside>
<main class="main">
<section class="panel view active" id="view-chat"><div class="view-header"><div><h2>聖書のことば案内BOT</h2><div class="small">テーマに応じた説明と聖書箇所の案内</div></div><button id="clearChat" class="secondary">履歴消去</button></div><div id="chatLog" class="chat-window" role="log" aria-live="polite" aria-label="会話履歴"></div><form id="chatForm" class="composer"><label class="small" for="chatInput">メッセージを入力</label><textarea id="chatInput" maxlength="800" placeholder="例:希望について教えてください(Ctrl + Enterで送信)"></textarea><div class="toolbar"><span class="small" id="charCount">0 / 800</span><button class="primary" type="submit">送信 ↗</button></div></form></section>
<section class="panel view" id="view-study"><div class="view-header"><div><h2>聖書を学ぶ</h2><div class="small">入門テーマ・書巻一覧・聖句の要約検索</div></div></div><div class="padded"><h2>テーマ別ガイド</h2><div class="cards" id="guideCards"></div><hr class="divider"><h2>聖句のテーマを探す</h2><input id="studySearch" placeholder="例:愛、平和、希望、マタイ、ローマ" aria-label="聖句検索"><div id="studyResults" aria-live="polite"></div><hr class="divider"><h2>聖書66書巻</h2><p class="small">プロテスタントの一般的な書巻区分です。カトリック・正教会では収録書巻が異なります。書巻を選ぶと概要を表示します。</p><div class="tabs"><button id="oldButton" class="active" data-testament="old">旧約聖書(39)</button><button id="newButton" data-testament="new">新約聖書(27)</button></div><div id="bookGrid" class="books"></div><div id="bookDetail" class="reading" aria-live="polite">書巻を選択してください。</div></div></section>
<section class="panel view" id="view-prayer"><div class="view-header"><div><h2>祈りのノート</h2><div class="small">テーマ別の祈り例と、自分の記録</div></div></div><div class="padded column"><label>祈りのテーマ<select id="prayerTopic"><option value="gratitude">感謝</option><option value="peace">心の平安</option><option value="strength">疲れと回復</option><option value="wisdom">知恵・仕事・学び</option><option value="others">家族や大切な人</option><option value="forgiveness">赦し</option></select></label><button id="prayerGenerate" class="primary">祈りの例文を作る</button><label>祈りの文(編集できます)<textarea id="prayerText" rows="7" maxlength="3000" placeholder="自分のことばで書いてください"></textarea></label><div class="row"><button id="prayerSave" class="primary">ノートに保存</button><button id="prayerCopy" class="secondary">コピー</button></div><h2>祈りの記録</h2><div id="prayerHistory"></div><p class="small">自分の言葉で書いた祈りはこの端末のブラウザにのみ保存します。共有端末では注意してください。</p></div></section>
<section class="panel view" id="view-quiz"><div class="view-header"><div><h2>聖書クイズ</h2><div class="small">10問の入門クイズ・復習つき</div></div><button id="quizRestart" class="secondary">はじめから</button></div><div class="padded"><div class="row" style="justify-content:space-between"><b id="quizCount">第1問 / 10問</b><span id="quizScore" class="small">正解 0問</span></div><div class="progress"><i id="quizProgress" style="width:0"></i></div><h2 id="quizQuestion"></h2><div id="quizOptions"></div><div id="quizFeedback" class="reading hide" role="status"></div><button id="quizNext" class="primary hide">次の問題 →</button></div></section>
<section class="panel view" id="view-saved"><div class="view-header"><div><h2>保存したことば</h2><div class="small">気になった聖書のテーマを保存</div></div></div><div class="padded"><div id="savedItems"></div></div></section>
<section class="panel view" id="view-settings"><div class="view-header"><div><h2>設定・データ管理</h2><div class="small">端末内だけで完結します</div></div></div><div class="padded column"><div class="card"><h3>データのバックアップ</h3><p>会話履歴・祈りのノート・保存項目・設定をJSONファイルに保存できます。</p><div class="row"><button id="exportButton2" class="primary">JSONを書き出す</button><button id="importButton" class="secondary">JSONを読み込む</button><input type="file" id="importFile" accept=".json,application/json" class="hide"></div></div><div class="card"><h3>データの削除</h3><p>このアプリの保存内容をすべて削除します。元に戻せません。</p><button id="resetAll" class="secondary danger">すべて消去</button></div><div class="card"><h3>このアプリについて</h3><p>HTML・CSS・JavaScriptだけで動作する、学習・対話向けのキーワードBOTです。生成AIとの接続、ネット通信、会員登録機能はありません。返答内容は事前に設定した説明文です。保存データはブラウザ内にあり、ブラウザのデータ削除によって失われます。</p><p>聖書本文の逐語引用ではなく、趣旨を簡潔にまとめています。原文の確認や教派別の教義については、実際の聖書や信頼できる教会・専門資料を参照してください。</p></div></div></section>
</main>
<aside class="panel right"><h2>今日の聖書テーマ</h2><div class="reading"><b id="dailyName"></b><p id="dailyText" style="margin-top:8px"></p><span id="dailyRef" class="tag"></span><div class="row" style="margin-top:10px"><button id="saveDaily" class="secondary">☆ 保存する</button><button id="askDaily" class="secondary">話してみる</button></div></div><h2 style="margin-top:23px">学習の記録</h2><div class="stat"><div class="tile"><b id="statMessages">0</b><small>質問数</small></div><div class="tile"><b id="statSaved">0</b><small>保存項目</small></div><div class="tile"><b id="statPrayer">0</b><small>祈りの記録</small></div><div class="tile"><b id="statQuiz">0</b><small>クイズ最高点</small></div></div><p class="notice">つらい気持ちへの宗教的な励ましは、医療や緊急支援の代わりにはなりません。差し迫った危険がある場合は119などに連絡してください。</p></aside>
</div><footer class="footer">ひかりのことば PLUS · Offline Bible Study Companion · 聖句は要約で紹介しています</footer></div><div id="toast" role="status" aria-live="polite"></div>
<script>
(()=>{'use strict';
const KEY='hikari_plus_v2';const LEGACY='hikari_christian_bot_chat_v1';const $=id=>document.getElementById(id);const clamp=(n,a,b)=>Math.max(a,Math.min(b,n));
const library=[
{id:'love',title:'愛',ref:'コリントの信徒への手紙一 13章4〜7節',text:'愛は忍耐や親切さとして表れ、相手を大切にする態度につながると教えられます。',tags:'愛 思いやり 親切 優しさ',related:'ヨハネによる福音書 13章34節'},
{id:'rest',title:'休息',ref:'マタイによる福音書 11章28〜30節',text:'イエスは重荷を負う人々に向けて休息へ招く言葉を語りました。',tags:'疲れ 眠気 仕事 休息',related:'詩編 23編'},
{id:'hope',title:'希望',ref:'ローマの信徒への手紙 5章3〜5節',text:'苦難の中でも忍耐や経験を通して希望を見いだす、という考えが示されています。',tags:'希望 絶望 未来 勇気',related:'ローマの信徒への手紙 15章13節'},
{id:'anxiety',title:'不安と祈り',ref:'フィリピの信徒への手紙 4章6〜7節',text:'思い煩いを神に伝え、感謝をもって祈ることが勧められています。',tags:'不安 心配 怖い 祈り',related:'マタイによる福音書 6章25〜34節'},
{id:'peace',title:'平和',ref:'マタイによる福音書 5章9節',text:'平和をつくる人々への祝福が語られます。',tags:'平和 戦争 平安',related:'ローマの信徒への手紙 12章18節'},
{id:'neighbor',title:'隣人',ref:'マルコによる福音書 12章29〜31節',text:'神を愛することと、隣人を自分のように愛することが大切な教えとして示されています。',tags:'隣人 愛 関係 家族',related:'ルカによる福音書 10章25〜37節'},
{id:'forgive',title:'赦し',ref:'マタイによる福音書 18章21〜22節',text:'赦しの大切さを繰り返し教える場面があります。ただし不当な扱いを放置することとは異なります。',tags:'許し 赦し 罪 謝罪',related:'エフェソの信徒への手紙 4章32節'},
{id:'gratitude',title:'感謝',ref:'テサロニケの信徒への手紙一 5章16〜18節',text:'喜びと祈り、感謝を大切にする姿勢が勧められています。',tags:'感謝 ありがとう 喜び',related:'詩編 100編'},
{id:'wisdom',title:'知恵',ref:'ヤコブの手紙 1章5節',text:'知恵を必要とする人が神に願い求めることについて語られています。',tags:'知恵 学び 勉強 仕事',related:'箴言 3章5〜6節'},
{id:'mercy',title:'あわれみ',ref:'ルカによる福音書 10章25〜37節',text:'善いサマリア人のたとえでは、境界を越えて困っている人を助ける姿が描かれます。',tags:'慈悲 助ける 困っている人',related:'マタイによる福音書 25章35〜40節'},
{id:'creation',title:'創造',ref:'創世記 1章',text:'聖書の冒頭は神による世界の創造を語ります。受け止め方は教派や信者によって異なります。',tags:'創世記 世界 創造 宇宙',related:'詩編 8編'},
{id:'faith',title:'信仰',ref:'ヘブライ人への手紙 11章1節',text:'信仰について、希望するものや目に見えないものとの関わりを説明しています。',tags:'信仰 神 信じる',related:'マルコによる福音書 9章24節'},
{id:'compassion',title:'悲しみの中で',ref:'マタイによる福音書 5章4節',text:'悲しむ人々への慰めが、山上の説教の一部として語られます。',tags:'悲しい 孤独 喪失 涙',related:'詩編 34編18節'},
{id:'truth',title:'真理',ref:'ヨハネによる福音書 8章31〜32節',text:'真理を知ることと自由についての教えが語られます。',tags:'真理 自由 生き方',related:'ヨハネによる福音書 14章6節'},
{id:'justice',title:'正義',ref:'ミカ書 6章8節',text:'正義を行い、あわれみを愛し、へりくだって歩むことが勧められます。',tags:'正義 公平 悪 善悪',related:'イザヤ書 1章17節'},
{id:'time',title:'時',ref:'コヘレトの言葉 3章1〜8節',text:'人生のさまざまな出来事には、それぞれ時があるという詩的な表現があります。',tags:'時間 人生 焦り',related:'詩編 90編12節'}
];
const guides=[{name:'キリスト教の中心',desc:'イエス・キリスト、福音書、隣人愛を知る',refs:['マルコによる福音書 1章','ヨハネによる福音書 3章16節']},{name:'祈りの基本',desc:'感謝や願いを言葉にし、主の祈りに触れる',refs:['マタイによる福音書 6章5〜13節']},{name:'旧約から新約へ',desc:'創造、預言者、福音書、初代教会の流れ',refs:['創世記 1章','ルカによる福音書 1章','使徒言行録 2章']},{name:'愛と行動',desc:'愛・親切・隣人への配慮を学ぶ',refs:['コリントの信徒への手紙一 13章','ルカによる福音書 10章25〜37節']},{name:'苦難と希望',desc:'苦しみを単純化せず、希望の言葉を探す',refs:['ヨブ記 1章','ローマの信徒への手紙 5章3〜5節']},{name:'平和と正義',desc:'平和づくり、公平さ、弱い立場の人への配慮',refs:['マタイによる福音書 5章9節','ミカ書 6章8節']}];
const oldBooks='創世記,出エジプト記,レビ記,民数記,申命記,ヨシュア記,士師記,ルツ記,サムエル記上,サムエル記下,列王記上,列王記下,歴代誌上,歴代誌下,エズラ記,ネヘミヤ記,エステル記,ヨブ記,詩編,箴言,コヘレトの言葉,雅歌,イザヤ書,エレミヤ書,哀歌,エゼキエル書,ダニエル書,ホセア書,ヨエル書,アモス書,オバデヤ書,ヨナ書,ミカ書,ナホム書,ハバクク書,ゼファニヤ書,ハガイ書,ゼカリヤ書,マラキ書'.split(',');
const newBooks='マタイによる福音書,マルコによる福音書,ルカによる福音書,ヨハネによる福音書,使徒言行録,ローマの信徒への手紙,コリントの信徒への手紙一,コリントの信徒への手紙二,ガラテヤの信徒への手紙,エフェソの信徒への手紙,フィリピの信徒への手紙,コロサイの信徒への手紙,テサロニケの信徒への手紙一,テサロニケの信徒への手紙二,テモテへの手紙一,テモテへの手紙二,テトスへの手紙,フィレモンへの手紙,ヘブライ人への手紙,ヤコブの手紙,ペトロの手紙一,ペトロの手紙二,ヨハネの手紙一,ヨハネの手紙二,ヨハネの手紙三,ユダの手紙,ヨハネの黙示録'.split(',');
const bookNotes={'創世記':'天地創造、族長たちの物語から始まる書巻。','出エジプト記':'モーセと出エジプト、契約の物語。','詩編':'賛美、祈り、嘆き、感謝などの詩歌。','箴言':'日常の判断と知恵を扱う格言集。','ヨブ記':'正しい人の苦しみと神への問いを扱う文学作品。','イザヤ書':'預言、裁き、慰めと希望を語る書巻。','マタイによる福音書':'イエスの生涯と教えを伝える四福音書の一つ。','マルコによる福音書':'イエスの活動を簡潔に描く福音書。','ルカによる福音書':'イエスの生涯を伝え、弱い立場への配慮も描く福音書。','ヨハネによる福音書':'独特の語り口でイエスの存在と教えを伝える福音書。','使徒言行録':'初代教会と宣教の広がりを伝える書巻。','ローマの信徒への手紙':'信仰、恵み、共同体の生き方を論じる書簡。','ヨハネの黙示録':'象徴表現で苦難と終末の希望を描く黙示文学。'};
const prayers={gratitude:'神さま、今日という日を与えてくださりありがとうございます。小さな恵みに目を向け、周りの人への感謝を忘れずに過ごせますように。アーメン。',peace:'神さま、心が落ち着かないとき、深呼吸して目の前の一歩を見つめられるよう助けてください。安心して休める時間と、必要な支えを与えてください。アーメン。',strength:'神さま、疲れている私に休息と回復の時を与えてください。無理を重ねず、身体と心を大切にする知恵をください。アーメン。',wisdom:'神さま、今日の学びや仕事に必要な知恵を与えてください。焦らず、一つずつ丁寧に進められますように。アーメン。',others:'神さま、家族や大切な人たちを覚えます。互いを思いやり、必要な助けを分かち合えますように。アーメン。',forgiveness:'神さま、自分の過ちを見つめ直す勇気と、正しい行いへ進む知恵をください。傷ついた人の尊厳と安全も守られますように。アーメン。'};
const quiz=[
{q:'キリスト教の中心となる人物は?',a:['モーセ','イエス・キリスト','ダビデ','パウロ'],right:1,ex:'キリスト教ではイエスを救い主として信じます。'},
{q:'聖書の冒頭にある書巻は?',a:['創世記','詩編','マタイによる福音書','出エジプト記'],right:0,ex:'創世記は天地創造などから始まります。'},
{q:'イエスの生涯を伝える「福音書」は何書ありますか?',a:['2','3','4','5'],right:2,ex:'マタイ、マルコ、ルカ、ヨハネの4つです。'},
{q:'「善いサマリア人」のたとえが登場するのは?',a:['ルカによる福音書','創世記','黙示録','詩編'],right:0,ex:'ルカ10章に登場し、隣人愛を考える話です。'},
{q:'モーセがエジプトから民を導く物語は主にどの書巻?',a:['箴言','出エジプト記','ヨブ記','使徒言行録'],right:1,ex:'出エジプト記に書かれています。'},
{q:'詩編に多い表現はどれ?',a:['賛美と祈り','法律条文だけ','旅行案内','建築手順だけ'],right:0,ex:'詩編には賛美、嘆き、感謝などが含まれます。'},
{q:'「愛は忍耐強い」などの教えがある書簡は?',a:['ヤコブの手紙','コリントの信徒への手紙一','ローマの信徒への手紙','ユダの手紙'],right:1,ex:'コリント一13章は愛についてよく読まれます。'},
{q:'初代教会の歩みを描く書巻は?',a:['使徒言行録','レビ記','雅歌','コヘレトの言葉'],right:0,ex:'使徒言行録は初代教会の活動を伝えます。'},
{q:'旧約聖書に含まれるのは?',a:['マルコによる福音書','ヨブ記','ヨハネの手紙一','ローマの信徒への手紙'],right:1,ex:'ヨブ記は旧約聖書の知恵文学です。'},
{q:'山上の説教を収めている福音書は?',a:['マタイによる福音書','使徒言行録','ダニエル書','ガラテヤの信徒への手紙'],right:0,ex:'マタイ5〜7章で知られます。'}
];
const defaults=()=>({chat:[],saved:[],prayers:[],best:0,dark:false});let state=defaults();
function safeLoad(){try{const x=JSON.parse(localStorage.getItem(KEY)||'null');if(x&&typeof x==='object'){state.chat=Array.isArray(x.chat)?x.chat.filter(m=>m&&['user','bot'].includes(m.role)&&typeof m.text==='string').slice(-120):[];state.saved=Array.isArray(x.saved)?x.saved.filter(v=>typeof v==='string').slice(0,100):[];state.prayers=Array.isArray(x.prayers)?x.prayers.filter(p=>p&&typeof p.text==='string').slice(-100):[];state.best=clamp(Number(x.best)||0,0,10);state.dark=x.dark===true;return;}}catch(e){}try{const prev=JSON.parse(localStorage.getItem(LEGACY)||'[]');if(Array.isArray(prev))state.chat=prev.filter(m=>m&&['user','bot'].includes(m.role)&&typeof m.text==='string').slice(-120).map(m=>({role:m.role,text:m.text,ref:m.ref||'',at:Date.now()}));}catch(e){}}
let warned=false;function persist(){try{localStorage.setItem(KEY,JSON.stringify(state));}catch(e){if(!warned){toast('保存容量が不足しています。バックアップを取ってください。');warned=true;}}}
let toastTimer;function toast(s){$('toast').textContent=s;$('toast').style.display='block';clearTimeout(toastTimer);toastTimer=setTimeout(()=>$('toast').style.display='none',3500)}
function el(tag,cls,text){const n=document.createElement(tag);if(cls)n.className=cls;if(text!==undefined)n.textContent=text;return n;}
function jump(view){document.querySelectorAll('.view').forEach(n=>n.classList.toggle('active',n.id==='view-'+view));document.querySelectorAll('[data-view]').forEach(n=>n.classList.toggle('active',n.dataset.view===view));if(view==='saved')renderSaved();if(view==='prayer')renderPrayers();if(view==='study')renderSearch();window.scrollTo({top:0,behavior:'smooth'});}
function stat(){ $('statMessages').textContent=state.chat.filter(x=>x.role==='user').length;$('statSaved').textContent=state.saved.length;$('statPrayer').textContent=state.prayers.length;$('statQuiz').textContent=state.best;}
function addChat(role,text,ref=''){state.chat.push({role,text,ref,at:Date.now()});state.chat=state.chat.slice(-120);persist();renderChat();stat();}
function renderChat(){const root=$('chatLog');root.replaceChildren();for(const m of state.chat){const row=el('div','chat-row '+m.role);const bubble=el('div','bubble',m.text);if(m.ref){bubble.appendChild(el('small','',`参考:${m.ref}`));}row.appendChild(bubble);row.appendChild(el('span','stamp',m.role==='bot'?'ひかりのことば':'あなた'));root.appendChild(row);}root.scrollTop=root.scrollHeight;}
const risky=/(死にたい|自殺|自傷|命を絶|消えてしまいたい|殺したい|人を傷つけたい)/;
const patterns=[
{p:/祈り|祈る|祈祷|お祈り/,id:'anxiety',answer:'祈りは神に心を向け、感謝や願い、悩みを言葉にする営みです。立派な言葉でなくても構いません。祈りの例文を作るには「祈りのノート」を開いてください。',ref:'マタイによる福音書 6章5〜13節'},
{p:/イエス|キリスト|救世主|復活/,id:'neighbor',answer:'イエス・キリストはキリスト教の中心となる人物です。四福音書はその生涯、教え、十字架と復活について伝えています。歴史上の人物としての研究と、信仰上の受け止め方は区別して考えられます。',ref:'マルコによる福音書 1章/ヨハネによる福音書 20章'},
{p:/三位一体|聖霊|父なる神/,id:'faith',answer:'多くのキリスト教教派では、父・子・聖霊の三位一体を重要な教理として理解します。詳しい説明や表現には教派間の違いがあります。',ref:'マタイによる福音書 28章19節'},
{p:/神とは|神様|神さま|信仰|教会|宗教/,id:'faith',answer:'キリスト教は神の愛や恵み、イエス・キリストへの信仰を中心としています。疑問を持ちながら学ぶこともできます。教派によって解釈や礼拝の形は異なります。',ref:'マルコによる福音書 12章29〜31節'},
{p:/苦しみ|苦難|なぜ悪|理不尽|不幸/,id:'compassion',answer:'「なぜ苦しみがあるのか」は聖書でも簡単な答えが出ない大きな問いです。ヨブ記は正しい人の苦しみを扱い、福音書には悲しむ人への慰めの言葉があります。苦しみを本人の信仰不足のせいにする必要はありません。',ref:'ヨブ記/マタイによる福音書 5章4節'},
{p:/不安|怖い|恐怖|心配|緊張|眠れ/,id:'anxiety',answer:'不安なとき、気持ちを無理に押さえ込む必要はありません。フィリピ書には心配を祈りのうちに伝える教えがあります。睡眠や体調の問題が続く場合は、休息や医療的な支援も大切です。',ref:'フィリピの信徒への手紙 4章6〜7節'},
{p:/疲れ|仕事|しんどい|きつい|休み|休息/,id:'rest',answer:'イエスは重荷を負う人に休息を招く言葉を語りました。休むことは怠けることと同じではありません。今日は食事、水分、睡眠など身体の必要も大切にしてください。',ref:'マタイによる福音書 11章28〜30節'},
{p:/赦|許し|罪|後悔|謝罪/,id:'forgive',answer:'赦しと悔い改めはキリスト教の大きなテーマです。過ちに向き合うことは大切ですが、赦しは被害の否定でも、危険な状況に戻る義務でもありません。',ref:'マタイによる福音書 18章21〜22節'},
{p:/愛|恋|思いやり|やさしさ|優しさ/,id:'love',answer:'新約聖書では、愛は相手に対する忍耐、親切、尊重など、日々の行いに表れるものとして語られます。自分を大切にする視点も忘れないでください。',ref:'コリントの信徒への手紙一 13章4〜7節'},
{p:/希望|明日|絶望|未来|勇気/,id:'hope',answer:'ローマ書は苦難の中で育まれる希望を語ります。希望とは常に明るくいることではなく、助けを求めたり小さな一歩を選んだりすることも含むと思います。',ref:'ローマの信徒への手紙 5章3〜5節'},
{p:/平和|戦争|争い|喧嘩/,id:'peace',answer:'山上の説教には平和をつくる人への祝福があります。平和は争いを見ないふりすることではなく、尊厳や公平を守る行いとも関わります。',ref:'マタイによる福音書 5章9節'},
{p:/家族|友達|隣人|人間関係|孤独/,id:'neighbor',answer:'イエスは隣人を大切にすることを強調しました。善いサマリア人の話は、相手の立場にかかわらず手を差し伸べることを考えさせます。',ref:'ルカによる福音書 10章25〜37節'},
{p:/感謝|ありがとう|喜び/,id:'gratitude',answer:'聖書は祈りや感謝を大切にするよう勧めます。つらい日まで楽しいふりをする必要はありません。今日ありがたかったことを一つ思い出すところからでもよいでしょう。',ref:'テサロニケの信徒への手紙一 5章16〜18節'},
{p:/創造|宇宙|世界|地球|創世記/,id:'creation',answer:'創世記の冒頭は世界の創造を語ります。現代の科学が扱う「どのように」と信仰が問う「なぜ」をどう関係づけるかは、キリスト教徒の中でも複数の立場があります。',ref:'創世記 1〜2章'},
{p:/勉強|学び|知恵|判断|選択/,id:'wisdom',answer:'知恵を求めることは、聖書の重要なテーマの一つです。考えたり学んだり、必要なときに周囲に相談したりする姿勢も大切でしょう。',ref:'ヤコブの手紙 1章5節'},
{p:/今日|聖書のことば|一節|聖句/,id:'daily',answer:'今日のテーマを案内します。',ref:''}
];
function respond(text){if(risky.test(text))return {text:'とても切迫した内容ですね。もし今、自分や誰かを傷つけそうなら、危険な物から離れ、近くにいる人や医療者へ今すぐ伝えてください。日本で緊急の危険がある場合は119(救急)や110(警察)を利用できます。宗教的な話だけで抱える必要はありません。',ref:''};
if(/^(こんにちは|こんばんは|おはよう|やあ)[!!。\s]*$/.test(text))return{text:'こんにちは。今日は何について考えてみましょうか。祈り、イエス、希望、疲れ、聖書の疑問など、気になるテーマをどうぞ。',ref:''};
const p=patterns.find(x=>x.p.test(text));if(p){if(p.id==='daily'){const item=dailyItem();return{text:`今日のテーマは「${item.title}」です。\n${item.text}`,ref:item.ref};}return{text:p.answer,ref:p.ref};}
const keys=library.filter(item=>text.includes(item.title)||item.tags.split(' ').some(t=>t.length>=2&&text.includes(t))).slice(0,2);if(keys.length){return {text:keys.map(x=>`${x.title}:${x.text}`).join('\n\n'),ref:keys.map(x=>x.ref).join('/')};}
return{text:'お話ししてくださってありがとうございます。私は事前に用意された聖書のテーマから案内するBOTです。質問の意味を十分には理解できないことがあります。「愛」「祈り」「不安」「イエス」「赦し」「希望」など、話題を短い言葉で尋ねてみてください。',ref:''};}
function send(raw){const text=String(raw||'').trim().slice(0,800);if(!text)return;addChat('user',text);const r=respond(text);addChat('bot',r.text,r.ref);$('chatInput').value='';updateCount();}
function updateCount(){$('charCount').textContent=$('chatInput').value.length+' / 800';}
function dailyItem(){const d=new Date();const stamp=Date.UTC(d.getFullYear(),d.getMonth(),d.getDate());return library[Math.floor(stamp/86400000)%library.length];}
function renderDaily(){const d=dailyItem();$('dailyName').textContent=d.title;$('dailyText').textContent=d.text;$('dailyRef').textContent=d.ref;$('saveDaily').textContent=state.saved.includes(d.id)?'★ 保存済み':'☆ 保存する';}
function toggleSaved(id){const exists=state.saved.indexOf(id);if(exists>=0)state.saved.splice(exists,1);else state.saved.push(id);persist();stat();renderDaily();renderSaved();renderSearch();toast(exists>=0?'保存を解除しました':'ことばを保存しました');}
function renderSaved(){const root=$('savedItems');root.replaceChildren();const found=state.saved.map(id=>library.find(x=>x.id===id)).filter(Boolean);if(!found.length){root.appendChild(el('p','muted','保存したことばはまだありません。「今日の聖書テーマ」や検索結果から追加できます。'));return;}for(const x of found)root.appendChild(libraryCard(x));}
function libraryCard(x){const box=el('div','reading');box.append(el('h3','',x.title),el('p','',x.text),el('span','tag',x.ref));const row=el('div','row');row.style.marginTop='10px';const button=el('button','secondary',state.saved.includes(x.id)?'★ 保存解除':'☆ 保存');button.onclick=()=>toggleSaved(x.id);const ask=el('button','secondary','BOTに質問');ask.onclick=()=>{jump('chat');send(x.title+'について教えて');};row.append(button,ask);box.appendChild(row);return box;}
function renderSearch(){const root=$('studyResults');root.replaceChildren();const q=$('studySearch').value.trim().toLowerCase();const result=library.filter(x=>!q||(x.title+' '+x.ref+' '+x.tags+' '+x.text).toLowerCase().includes(q));root.appendChild(el('p','small',`${result.length}件のテーマ`));if(!result.length)root.appendChild(el('p','muted','一致する項目がありません。別の言葉で検索してください。'));result.forEach(x=>root.appendChild(libraryCard(x)));}
function renderGuides(){const root=$('guideCards');for(const x of guides){const div=el('div','card');div.append(el('h3','',x.name),el('p','',x.desc),el('span','tag',x.refs.join('・')));root.appendChild(div);}}
let testament='old';function renderBooks(){const books=testament==='old'?oldBooks:newBooks;const root=$('bookGrid');root.replaceChildren();books.forEach((name,i)=>{const b=el('button','book',`${i+1}. ${name}`);b.onclick=()=>{$('bookDetail').replaceChildren(el('h3','',name),el('p','',bookNotes[name]||'聖書を構成する書巻の一つです。本文はお手元の聖書でご確認ください。'),el('span','tag',testament==='old'?'旧約聖書':'新約聖書'));};root.appendChild(b);});$('oldButton').classList.toggle('active',testament==='old');$('newButton').classList.toggle('active',testament==='new');}
function renderPrayers(){const root=$('prayerHistory');root.replaceChildren();if(!state.prayers.length){root.appendChild(el('p','muted','まだ記録がありません。祈りの文を書いて保存できます。'));return;}[...state.prayers].reverse().forEach(x=>{const box=el('div','reading');box.append(el('div','small',new Date(x.at||Date.now()).toLocaleString('ja-JP')),el('p','',x.text));const b=el('button','secondary','削除');b.onclick=()=>{if(confirm('この祈りの記録を削除しますか?')){state.prayers=state.prayers.filter(p=>p.id!==x.id);persist();renderPrayers();stat();}};box.appendChild(b);root.appendChild(box);});}
function generatePrayer(){$('prayerText').value=prayers[$('prayerTopic').value]||'';}
let qi=0,score=0,answered=false;function renderQuiz(){const root=$('quizOptions');root.replaceChildren();$('quizFeedback').classList.add('hide');$('quizNext').classList.add('hide');answered=false;if(qi>=quiz.length){$('quizCount').textContent='終了';$('quizQuestion').textContent=`10問中 ${score}問 正解しました`;if(score>state.best){state.best=score;persist();stat();}$('quizScore').textContent='正解 '+score+'問';$('quizProgress').style.width='100%';root.appendChild(el('p','muted','もう一度挑戦するときは「はじめから」を押してください。'));return;}const q=quiz[qi];$('quizCount').textContent=`第${qi+1}問 / ${quiz.length}問`;$('quizScore').textContent='正解 '+score+'問';$('quizProgress').style.width=`${qi/quiz.length*100}%`;$('quizQuestion').textContent=q.q;q.a.forEach((option,index)=>{const b=el('button','quiz-option',`${index+1}. ${option}`);b.onclick=()=>{if(answered)return;answered=true;const ok=index===q.right;if(ok)score++;[...root.children].forEach((node,i)=>{node.disabled=true;if(i===q.right)node.classList.add('correct');else if(i===index)node.classList.add('wrong');});$('quizScore').textContent='正解 '+score+'問';$('quizFeedback').textContent=(ok?'正解です。':'今回は違いました。')+' '+q.ex;$('quizFeedback').classList.remove('hide');$('quizNext').classList.remove('hide');$('quizNext').textContent=qi===quiz.length-1?'結果を見る →':'次の問題 →';};root.appendChild(b);});}
function download(){const blob=new Blob([JSON.stringify({format:'hikari-plus-v2',exportedAt:new Date().toISOString(),data:state},null,2)],{type:'application/json'});const url=URL.createObjectURL(blob);const a=el('a');a.href=url;a.download='hikari_backup_'+new Date().toISOString().slice(0,10)+'.json';document.body.appendChild(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(url),1000);toast('バックアップをダウンロードしました');}
function importJson(file){if(!file)return;if(file.size>2*1024*1024){toast('2MB以下のバックアップを選択してください');return;}file.text().then(str=>{const parsed=JSON.parse(str);if(parsed.format!=='hikari-plus-v2'||!parsed.data||typeof parsed.data!=='object')throw Error('形式が違います');const data=parsed.data;if(!Array.isArray(data.chat)||!Array.isArray(data.saved)||!Array.isArray(data.prayers))throw Error('データ形式が不正です');if(!confirm('現在のデータを読み込んだバックアップで置き換えますか?'))return;state=defaults();state.chat=data.chat.filter(x=>x&&['user','bot'].includes(x.role)&&typeof x.text==='string').slice(-120).map(x=>({role:x.role,text:x.text.slice(0,3000),ref:String(x.ref||'').slice(0,200),at:Number(x.at)||Date.now()}));state.saved=data.saved.filter(x=>typeof x==='string'&&library.some(y=>y.id===x)).slice(0,100);state.prayers=data.prayers.filter(x=>x&&typeof x.text==='string').slice(-100).map(x=>({id:String(x.id||''),text:x.text.slice(0,3000),at:Number(x.at)||Date.now()}));state.best=clamp(Number(data.best)||0,0,10);state.dark=data.dark===true;persist();refresh();toast('読み込みました');}).catch(e=>toast('読み込み失敗:'+e.message));}
function applyTheme(){document.body.classList.toggle('dark',state.dark);$('themeButton').textContent=state.dark?'☀ 明るくする':'☾ 暗くする';}
function refresh(){applyTheme();renderChat();renderDaily();renderPrayers();renderSaved();renderSearch();stat();}
function init(){safeLoad();renderGuides();renderBooks();if(!state.chat.length)addChat('bot','こんにちは。「ひかりのことば PLUS」です。聖書や祈りについて、一緒に考えていきましょう。右側の「今日の聖書テーマ」やメニューも使えます。');
refresh();renderQuiz();document.querySelectorAll('[data-view]').forEach(b=>b.onclick=()=>jump(b.dataset.view));document.querySelectorAll('[data-ask]').forEach(b=>b.onclick=()=>{jump('chat');send(b.dataset.ask)});
$('chatForm').onsubmit=e=>{e.preventDefault();send($('chatInput').value);};$('chatInput').oninput=updateCount;$('chatInput').onkeydown=e=>{if(e.key==='Enter'&&e.ctrlKey){e.preventDefault();send(e.target.value);}};
$('clearChat').onclick=()=>{if(!confirm('会話履歴を消去しますか?'))return;state.chat=[];addChat('bot','履歴を消去しました。新しくお話ししましょう。');};
$('saveDaily').onclick=()=>toggleSaved(dailyItem().id);$('askDaily').onclick=()=>{jump('chat');send('今日のことば');};$('studySearch').oninput=renderSearch;
$('oldButton').onclick=()=>{testament='old';renderBooks();};$('newButton').onclick=()=>{testament='new';renderBooks();};
$('prayerGenerate').onclick=generatePrayer;$('prayerSave').onclick=()=>{const text=$('prayerText').value.trim();if(!text)return toast('祈りの文を入力してください');state.prayers.push({id:String(Date.now())+'_'+Math.random().toString(36).slice(2,7),text:text.slice(0,3000),at:Date.now()});state.prayers=state.prayers.slice(-100);persist();renderPrayers();stat();toast('祈りの文を保存しました');};$('prayerCopy').onclick=async()=>{try{await navigator.clipboard.writeText($('prayerText').value);toast('コピーしました');}catch(e){$('prayerText').select();toast('文章を選択しました。手動でコピーしてください');}};
$('quizRestart').onclick=()=>{qi=0;score=0;renderQuiz();};$('quizNext').onclick=()=>{qi++;renderQuiz();};
$('themeButton').onclick=()=>{state.dark=!state.dark;persist();applyTheme();};$('exportButton').onclick=download;$('exportButton2').onclick=download;$('importButton').onclick=()=>$('importFile').click();$('importFile').onchange=e=>{importJson(e.target.files[0]);e.target.value='';};
$('resetAll').onclick=()=>{if(!confirm('会話、祈り、保存項目を含むすべてのアプリデータを削除しますか?'))return;localStorage.removeItem(KEY);state=defaults();state.chat=[{role:'bot',text:'初期化しました。聖書について、気軽に話しかけてください。',ref:'',at:Date.now()}];qi=0;score=0;renderQuiz();refresh();toast('初期化しました');};}
init();
})();
</script>
</body></html>
Gジェネレーション 1.5th Anniversary
整理すると、今回の「ハフバ」は正式には**1.5周年(1.5th Anniversary)**です。昨夜9月23日の公式ロードマップ生配信で、かなり大きい情報が一気に出ました。公式サイトにも1.5周年生配信が掲載されています。
- 今日 9月24日 12:00から先行スタート
- 1.5周年ログインボーナス
- 1.5周年パネルミッション
- 47連無料ガシャ用チケット集め
- ログボだけでダイヤ合計3000個
- キャンペーン全体はおおむね10月31日まで。
- 本番は9月30日
- 『機動戦士Vガンダム』メインステージ追加
- 限定UR V2アサルトバスターガンダム
- 限定UR ザンスパイン
- ゴトラタンも実装予定
- 限定サポーターとしてロベルト・ゴメス&リーンホースJr.
- 新タグ「重撃」も追加。
- 復刻ガシャも9月30日
- ゴッドガンダム
- ガンダム・バルバトスルプスレクス
- Hi-νガンダム
- オットー&ネェル・アーガマ
が復刻予定です。
- 無料47連
- 9月30日開始
- URユニット2機確定
- 限定URは対象外
- さらにサービス開始時の初期UR14種も対象外
- 主にジャスティス以降~F90(A.D.S.混合装着時)までの恒常URが対象になります。
- チケットは今日からのパネル、ログボ、特設サイトのミニゲームなどで集めます。
- 無料ダイヤ関係がかなり大きい
- 生放送記念:1500ダイヤ
- 1.5周年ログボ:3000ダイヤ
- 1.5周年特別ステージ:1000ダイヤ
- 9月30日12:00からWEBストア:3000ダイヤ
そしてロードマップでは、**Vガンダム以降も「コロニーの落ちた地で…」「G-UNIT」「ミッシングリンク」**の実装が発表されています。特にG-UNITは前に話していた「まだ来てないマイナー作品」のひとつが、ついに確定しました。
長留さん向けに一番重要なところ
9/24 12:00 → チケット回収開始
9/30 → V2AB・ザンスパイン本番+復刻+無料47連+WEB3000石
という流れです。
しかも長留さんはゴッドなど復刻側をかなり揃えているので、今回いちばん確認したいのはやっぱりV2アサルトバスターとザンスパインの実性能ですね。9月30日に性能を見てからダイヤを投入する形がかなり綺麗です。
Epic launcherのインストール プログラムのインストールまたは削除をブロックする問題を修正する 0x8A150049 errorの修復方法
ドラゴンクエストの元ネタ
大きいのはこの2本です。
- 『Ultima(ウルティマ)』
→ 見下ろし型のフィールドを歩いて、町・城・ダンジョンを探索する部分。堀井氏自身、Ultimaに強く刺激を受けたと語っています。 - 『Wizardry(ウィザードリィ)』
→ モンスターと戦う、経験値を稼ぐ、レベルアップして強くなる、HP・MP・能力値などのRPG部分。堀井氏は特に「戦って成長するレベルアップシステム」が大きな影響だったと話しています。
つまり、かなり乱暴に式にすると、
ドラクエ ≒ Ultimaの冒険世界 + Wizardryの戦闘・成長 + 堀井雄二のADV的ストーリー + 鳥山明のデザイン
です。
さらにルーツを遡ると、
Dungeons & Dragons(1974)
↓
Wizardry / Ultima(1981)
↓
ドラゴンクエスト(1986)
↓
大量のJRPG
という系譜になります。Wizardry自体がD&Dから強く影響を受けていたことも、Wizardry開発者Robert Woodheadが語っています。
面白いのは、ドラクエは単に洋RPGをそのまま持ってきたわけではなく、**「難しいPC RPGをファミコンで誰でも遊べる形に作り直した」**ところです。コマンド選択式UIなどには、堀井氏がそれ以前に作っていたアドベンチャーゲームのノウハウも入っています。
なので元ネタ度で並べるなら、1位 Wizardry、2位 Ultima、さらに祖先がD&Dという感じですね。
ちなみにここから掘るともっと面白くて、**スライム、勇者、竜王、ロト、ぱふぱふ、メタルスライムなど「ドラクエ固有に見える要素の元ネタ」**も個別にかなり辿れます。
ゼルダの伝説の元ネタ
| 元ネタ・影響 | ゼルダに入ったと考えられる要素 |
|---|---|
| Ultima | 広いフィールドを自由に探索するRPG的な感覚 |
| The Black Onyx | 剣と魔法、成長・装備を強化して冒険するRPG要素 |
| インディ・ジョーンズ | 宝探し・遺跡・冒険映画的なワクワク感 |
| ピーター・パン | リンクの緑色の服、長い帽子、妖精・エルフっぽい外見 |
| 宮本茂の少年時代の探検 | 森・洞窟を自分で歩いて秘密を見つけるゲーム構造 |
| 西洋ファンタジー | ハイラル、剣、盾、魔法、姫、怪物などの世界観 |
宮本茂本人は任天堂のインタビューで、当時『インディ・ジョーンズ』などの冒険映画が人気だったことに触れ、**「剣と魔法の世界で、宝探しをするアドベンチャーゲーム」**を作ろうとしたのがゼルダの始まりだったと話しています。
さらに宮本は、当時のPC RPGでプレイヤー同士が「自分の剣士がどれだけ強くなったか」「どこで何を見つけたか」を電話で情報交換しているのを面白いと思ったとも説明しています。つまり、RPGの成長要素+情報を自分で探す冒険を家庭用ゲーム向けに再構築したわけです。
ゲームとして一番「元ネタ臭」が強いのは
個人的には、
Ultima + The Black Onyx → 初代ゼルダ
の流れが一番分かりやすいです。宮本がこの2作品から影響を受けたという証言も残っています。
ただしゼルダ最大の特徴である、
「いきなりフィールドに放り出される → 好きな方向へ行く → 洞窟を発見する → アイテムで行動範囲が広がる」
という部分は、宮本自身の子供時代の探検体験がかなり大きいです。京都近郊の森や洞窟を探索した経験をゲームにした、と繰り返し語っています。
そして面白いのがリンクのデザイン。宮本はリンクの大きな耳と長い帽子について、ピーター・パンを連想し、ディズニーが好きだったのでそこから影響を受けたと語っています。
なのでかなり雑に系譜を書くと、
Ultima / Black Onyx
+ インディ・ジョーンズ
+ ピーター・パン/西洋ファンタジー
+ 宮本茂の洞窟探検
↓
1986年 初代『ゼルダの伝説』
という感じですね。
ちなみにもっと突っ込むと、『ハイドライド』『ドルアーガの塔』『ドラゴンスレイヤー』と初代ゼルダの類似点もかなり面白いです。こっちは「ゼルダ以前に日本で存在したアクションRPG」を並べると、ゼルダが完全な無から生まれたゲームではないことがかなり分かりやすくなります。
ToHeart3 – 未来の約束
『ToHeart3 – 未来の約束』完成しました。
『ToHeart』『ToHeart2』の世界とキャラクターたちを受け継ぎながら、新たな主人公、新たなヒロイン、そして新しい物語を描く長編ノベルゲームです。
テーマは、「思い出と未来、そしてもう一度交わす約束」。
懐かしい日常の中で再会する人たち。
新しく出会う仲間たち。
変わってしまったものと、それでも変わらなかった想い。
物語には『ToHeart』『ToHeart2』の歴代キャラクターが登場し、神岸あかり、柚原このみをはじめとしたキャラクターたちと、新たに生まれたオリジナルキャラクターが同じ世界で物語を紡いでいきます。
プレイヤーの選択によってキャラクターとの関係や物語が変化し、それぞれに長編の個別ルートを用意。
楽しい学園生活だけではなく、恋愛、友情、家族、別れ、再会、そして未来へ進んでいくことを描いた作品になっています。
主な特徴
- 『ToHeart』『ToHeart2』歴代キャラクターが登場
- 本作オリジナルキャラクターを追加
- キャラクターごとの立ち絵を実装
- 長編個別ルートを収録
- 選択肢によって変化するストーリー
- 複数のエンディング
- 日常・恋愛・青春・感動を中心とした物語
- 過去作品を知っている人が楽しめる再会やクロスオーバー要素
- 初めてこの世界に触れる人でも楽しめる新規ストーリー
昔、大切だった人。
いつの間にか離れてしまった人。
まだ出会っていない人。
そして、忘れたくない約束。
時間が流れても、人の想いは完全には消えない。
これは、過去を懐かしむだけの物語ではありません。
あの日の思い出を抱えたまま、それでも未来へ進んでいく人たちの物語です。
――いつか交わした約束の、その先へ。
『ToHeart3 – 未来の約束』
ここから、新しい物語が始まります。
