<!DOCTYPE html>
<html lang="ja" data-theme="light" style="--cols:3; --card-h:640px; --accent:#2563eb">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Xlog Pro — HTMLだけで動く自動ツイートまとめ</title>
<link rel="preconnect" href="https://platform.twitter.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<meta name="description" content="HTMLだけ／APIキー不要のX（Twitter）まとめボード。プロフィール・ハッシュタグ・検索・リストを好きな列で配置し、JSON/HTML書き出しや手動ランキング、ボード切替に対応。">
<style>
:root{
--bg: #0b0e14; --panel:#111827; --muted:#9aa4b2; --text:#e5e7eb; --border:#1f2937; --chip:#141a23; --card:#0f172a; --btn:#1f2937; --btn-text:#e5e7eb; --link:#60a5fa;
}
[data-theme="light"]{ --bg:#f8fafc; --panel:#ffffff; --muted:#64748b; --text:#0f172a; --border:#e2e8f0; --chip:#f1f5f9; --card:#ffffff; --btn:#0f172a; --btn-text:#ffffff; --link:#1d9bf0; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
header{position:sticky;top:0;z-index:10;background:var(--panel);border-bottom:1px solid var(--border)}
.wrap{max-width:1280px;margin:0 auto;padding:12px 16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.brand{display:flex;gap:10px;align-items:center;font-weight:800}
.brand i{color:var(--accent)}
.muted{color:var(--muted)}
.pill{display:inline-flex;gap:8px;align-items:center;background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:6px 10px}
.input, select, textarea{background:transparent;border:1px solid var(--border);border-radius:10px;padding:8px 10px;color:var(--text)}
textarea{min-height:88px;width:100%;}
input[type="text"].input{min-width:220px}
button{cursor:pointer;border:none}
.btn{background:var(--btn);color:var(--btn-text);padding:9px 12px;border-radius:12px}
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.ghost{background:transparent;color:var(--text)}
.btn.badge{padding:6px 10px;border-radius:999px}
.grid{display:grid;grid-template-columns:320px 1fr;gap:16px}
@media (max-width:1080px){.grid{grid-template-columns:1fr}}
aside{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;position:sticky;top:72px;height:max-content}
h2{margin:6px 0 12px 0;font-size:18px}
.list{display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.card .head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.card .head .title{display:flex;gap:8px;align-items:center;font-weight:700}
.card .body{padding:0;min-height:var(--card-h)}
.sources{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--chip);border:1px solid var(--border);border-radius:999px;padding:6px 10px;display:flex;gap:8px;align-items:center}
.chip b{color:var(--accent)}
.columns{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:16px}
@media (max-width:1200px){:root{--cols:2}}
@media (max-width:860px){:root{--cols:1}}
.drag{cursor:grab}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.footer{padding:24px 16px;color:var(--muted);text-align:center}
.kbd{font-family:ui-monospace, Menlo, Monaco, Consolas; background:var(--chip); border:1px solid var(--border); padding:2px 6px; border-radius:6px}
.danger{color:#ef4444}
.accent{color:var(--accent)}
.section{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px}
.help{font-size:13px;color:var(--muted)}
.label{font-size:12px;color:var(--muted)}
.tiny{font-size:12px}
.row-wrap{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.w-100{width:100%}
.space{height:8px}
</style>
</head>
<body>
<header>
<div class="wrap row">
<div class="brand"><i class="fa-solid fa-wave-square"></i> Xlog <span class="muted">Pro</span></div>
<div class="pill">
<i class="fa-solid fa-diagram-project"></i>
<select id="boardSelect" title="ボード切替"></select>
<button id="boardNew" class="btn badge secondary" title="新規ボード"><i class="fa-solid fa-plus"></i></button>
<button id="boardRename" class="btn badge secondary" title="名前変更"><i class="fa-solid fa-pen"></i></button>
<button id="boardDelete" class="btn badge secondary danger" title="削除"><i class="fa-regular fa-trash-can"></i></button>
</div>
<div class="pill" title="テーマ切替"><i class="fa-solid fa-circle-half-stroke"></i>
<label class="row-wrap"><input id="themeToggle" type="checkbox" /> ダーク</label>
</div>
<div class="pill" title="アクセントカラー">
<i class="fa-solid fa-palette"></i>
<input id="accentPicker" type="color" value="#2563eb" />
</div>
<div class="pill" title="列数"><i class="fa-solid fa-table-columns"></i>
<input id="colsRange" type="range" min="1" max="4" step="1" value="3"/>
<span id="colsVal" class="tiny"></span>
</div>
<div class="pill" title="カード高さ"><i class="fa-solid fa-up-down"></i>
<input id="heightRange" type="range" min="360" max="1200" step="40" value="640"/>
<span id="heightVal" class="tiny"></span>
</div>
<div class="pill" title="自動再読み込み">
<label class="row-wrap"><input id="autoRefreshToggle" type="checkbox"/> 自動</label>
<select id="refreshMinutes">
<option value="3">3分</option>
<option value="5" selected>5分</option>
<option value="10">10分</option>
<option value="30">30分</option>
</select>
</div>
<div class="pill help tiny">ショートカット: <span class="kbd">N</span> 追加 / <span class="kbd">R</span> 再描画 / <span class="kbd">G</span> グリッド- / <span class="kbd">H</span> 高さ-</div>
</div>
</header>
<main class="wrap grid">
<aside>
<div class="list">
<div class="section">
<h2>ソースを追加</h2>
<div class="toolbar row-wrap">
<select id="sourceType">
<option value="profile">プロフィール</option>
<option value="hashtag">ハッシュタグ</option>
<option value="search">検索キーワード</option>
<option value="list">リストURL</option>
</select>
<input id="sourceValue" class="input" type="text" placeholder="@username / #tag / キーワード / リストURL" />
<input id="sourceLabel" class="input" type="text" placeholder="表示名（任意）" />
<button id="addBtn" class="btn"><i class="fa-solid fa-plus"></i> 追加</button>
</div>
<div class="space"></div>
<label class="label">まとめて追加（改行／カンマ区切りOK）</label>
<textarea id="bulkArea" placeholder="@OpenAI, #UnrealEngine, Unity URP, https://twitter.com/i/lists/123...\n@EpicGames"></textarea>
<div class="row-wrap">
<button id="bulkAdd" class="btn secondary"><i class="fa-solid fa-download"></i> 取り込み</button>
<button id="bulkClear" class="btn ghost"><i class="fa-solid fa-eraser"></i> クリア</button>
</div>
<p class="help" style="margin-top:8px">形式は自動判定：<span class="kbd">@id</span> → プロフィール、<span class="kbd">#tag</span> → ハッシュタグ、<span class="kbd">twitter.com/i/lists</span> → リスト、それ以外は検索。</p>
<div class="space"></div>
<div class="row-wrap help tiny">クイック追加：</div>
<div class="row-wrap">
<button class="btn badge secondary quick" data-type="hashtag" data-val="#UnrealEngine">#UnrealEngine</button>
<button class="btn badge secondary quick" data-type="hashtag" data-val="#Unity3D">#Unity3D</button>
<button class="btn badge secondary quick" data-type="search" data-val="VRM OR \"Meta Quest\"">VR/Quest</button>
<button class="btn badge secondary quick" data-type="profile" data-val="@OpenAI">@OpenAI</button>
</div>
</div>
<div class="section">
<h2>保存・書き出し</h2>
<div class="toolbar row-wrap">
<button id="exportBtn" class="btn secondary"><i class="fa-solid fa-file-export"></i> JSON</button>
<label class="btn secondary" for="importFile"><i class="fa-solid fa-file-import"></i> JSON読込</label>
<input id="importFile" type="file" accept="application/json" hidden />
<button id="exportHtmlBtn" class="btn"><i class="fa-regular fa-file-code"></i> 単一HTML</button>
<button id="clearBtn" class="btn ghost danger"><i class="fa-regular fa-trash-can"></i> すべて削除</button>
</div>
<p class="help">単一HTML: いまのレイアウトと設定を埋め込んだ自立HTMLを生成します。</p>
</div>
<div class="section">
<h2>手動ランキング</h2>
<div class="toolbar row-wrap">
<input id="tweetUrl" class="input" type="text" placeholder="ツイートURLを貼り付け" />
<button id="addTweetBtn" class="btn"><i class="fa-brands fa-x-twitter"></i> 追加</button>
</div>
<label class="label">メモ（任意・次回以降も保持）</label>
<textarea id="tweetNote" placeholder="このツイートの要点やタグ（例: #UE5 #VRM）"></textarea>
<p class="help">※HTMLのみの制約で自動集計は不可。URLをカード化して手動で順序を決められます。</p>
</div>
<div class="section">
<h2>RSS生成（ランキング→RSS）</h2>
<div class="toolbar row-wrap">
<input id="rssTitle" class="input" type="text" placeholder="RSSタイトル（例: Xlogランキング）"/>
<button id="rssExport" class="btn secondary"><i class="fa-solid fa-rss"></i> RSSを書き出し</button>
</div>
<p class="help">ランキングに登録したツイートURLから簡易RSS（XML）を生成し、ファイルとして保存します。</p>
</div>
<div class="section">
<h2>ヘルプ</h2>
<div class="help">
・列の並べ替えはカードの <span class="kbd">⋯</span> アイコンをドラッグ。<br>
・<span class="kbd">R</span> で全カラムを再描画。<br>
・URLハッシュ <span class="kbd">#data=</span> に設定をBase64で埋め込んで共有可能（メニューから自動生成予定）。
</div>
</div>
</div>
</aside>
<section>
<div class="card" style="margin-bottom:16px">
<div class="head">
<div class="title"><i class="fa-solid fa-layer-group drag"></i> マイまとめ <span class="muted tiny" id="boardInfo"></span></div>
<div class="sources" id="activeChips"></div>
</div>
<div class="body" style="padding:14px">
<div id="columns" class="columns"></div>
</div>
</div>
<div class="card">
<div class="head">
<div class="title"><i class="fa-regular fa-star"></i> 手動ランキング</div>
<div class="help">ドラッグで順序変更／🗑で削除／✎でメモ編集</div>
</div>
<div class="body" style="padding:14px">
<div id="ranking" class="columns"></div>
</div>
</div>
<div class="footer">Xlog Pro v2 — HTML Only / Embedded Timelines. No API keys. <span class="muted">Made for you.</span></div>
</section>
</main>
<script async src="https://platform.twitter.com/widgets.js"></script>
<script>
// ========== 基本ユーティリティ ==========
const $ = (s, d=document)=>d.querySelector(s);
const $$ = (s, d=document)=>Array.from(d.querySelectorAll(s));
const defaultBoard = ()=>({sources:[], tweets:[]});
const defaultState = ()=>({
version:2,
dark:false,
accent:'#2563eb',
autoRefresh:false,
minutes:5,
columns:3,
cardHeight:640,
boards:{'Default': defaultBoard()},
activeBoard:'Default'
});
const store = {
key: 'xlog-pro-v2',
load(){
try{ return JSON.parse(localStorage.getItem(this.key)) || defaultState(); }
catch(e){ return defaultState(); }
},
save(v){ localStorage.setItem(this.key, JSON.stringify(v)); }
};
function migrate(s){
const base = defaultState();
if (!s || typeof s !== 'object') return base;
// v1互換（sources/tweets直下 → boards.Default）
if (s.sources || s.tweets){
base.boards.Default.sources = s.sources||[];
base.boards.Default.tweets = s.tweets||[];
}
// 既存キー上書き
for (const k of ['dark','accent','autoRefresh','minutes','columns','cardHeight','boards','activeBoard']){
if (k in s) base[k]=s[k];
}
return base;
}
// ハッシュ (#data=BASE64) から読み込み
function loadFromHash(){
const h = location.hash || '';
if (!h.startsWith('#data=')) return null;
try{
const b64 = decodeURIComponent(h.slice(6));
const json = atob(b64);
return JSON.parse(json);
}catch(e){ return null; }
}
let embedded = (typeof window.__XLOG_INITIAL_STATE__!== 'undefined') ? window.__XLOG_INITIAL_STATE__ : null;
if (!embedded){
const el = document.getElementById('xlog-init');
if (el) { try{ embedded = JSON.parse(el.textContent); }catch(_e){} }
}
let state = migrate( embedded || loadFromHash() || store.load() );
// ========== テーマ/アクセント/レイアウト適用 ==========
function applySkin(){
document.documentElement.setAttribute('data-theme', state.dark ? 'dark' : 'light');
document.documentElement.style.setProperty('--cols', state.columns);
document.documentElement.style.setProperty('--card-h', state.cardHeight+'px');
document.documentElement.style.setProperty('--accent', state.accent || '#2563eb');
$('#themeToggle').checked = !!state.dark;
$('#colsRange').value = String(state.columns);
$('#colsVal').textContent = state.columns+'列';
$('#heightRange').value = String(state.cardHeight);
$('#heightVal').textContent = state.cardHeight+'px';
$('#accentPicker').value = state.accent || '#2563eb';
}
// ========== X埋め込み ==========
function waitTwttr(){
return new Promise(res=>{
if (window.twttr && twttr.widgets) return res();
const timer = setInterval(()=>{ if(window.twttr && twttr.widgets){ clearInterval(timer); res(); } }, 200);
});
}
function timelineOptions(){
return {
height: state.cardHeight,
theme: state.dark ? 'dark' : 'light',
chrome: 'nofooter noborders transparent',
linkColor: getComputedStyle(document.documentElement).getPropertyValue('--link').trim() || '#1d9bf0'
};
}
async function createTimeline(el, src){
await waitTwttr();
const opts = timelineOptions();
const t = (src.type||'profile');
if (t==='profile'){
const screenName = src.value.replace(/^@/,'');
return twttr.widgets.createTimeline({ sourceType:'profile', screenName }, el, opts);
}
if (t==='list'){
return twttr.widgets.createTimeline({ sourceType:'url', url: src.value }, el, opts);
}
if (t==='hashtag'){
const tag = src.value.replace(/^#/,'');
const url = `https://twitter.com/hashtag/${encodeURIComponent(tag)}?f=live`;
return twttr.widgets.createTimeline({ sourceType:'url', url }, el, opts);
}
if (t==='search'){
const url = `https://twitter.com/search?q=${encodeURIComponent(src.value)}&f=live`;
return twttr.widgets.createTimeline({ sourceType:'url', url }, el, opts);
}
}
// ========== 現在ボードの参照 ==========
function board(){ return state.boards[state.activeBoard] || (state.boards[state.activeBoard]=defaultBoard()); }
// ========== 描画 ==========
function chipNode(src, idx){
const chip = document.createElement('span');
chip.className='chip';
const kind = {profile:'@',hashtag:'#',search:'検索:',list:'リスト'}[src.type] || '';
chip.innerHTML = `<b>${kind}</b> ${src.label || src.value} <a class="muted" href="${openUrl(src)}" target="_blank" title="Xで開く"><i class="fa-solid fa-arrow-up-right-from-square"></i></a> <button title="削除" data-del="${idx}" class="muted"><i class="fa-solid fa-xmark"></i></button>`;
chip.querySelector('button').onclick = ()=>{ board().sources.splice(idx,1); store.save(state); renderAll(); };
return chip;
}
function openUrl(src){
if (src.type==='profile') return `https://twitter.com/${src.value.replace(/^@/,'')}`;
if (src.type==='hashtag') return `https://twitter.com/hashtag/${src.value.replace(/^#/,'')}`;
if (src.type==='list') return src.value;
return `https://twitter.com/search?q=${encodeURIComponent(src.value)}&f=live`;
}
function columnCard(src, idx){
const card = document.createElement('div');
card.className='card';
card.draggable=true; card.dataset.idx=idx;
card.innerHTML = `
<div class="head">
<div class="title"><i class="fa-solid fa-grip-vertical drag"></i> ${src.label || prettyLabel(src)}</div>
<div class="toolbar">
<a class="btn ghost" href="${openUrl(src)}" target="_blank" title="Xで開く"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
<button class="btn ghost" title="再読み込み" data-refresh="${idx}"><i class="fa-solid fa-rotate"></i></button>
<button class="btn ghost danger" title="削除" data-remove="${idx}"><i class="fa-regular fa-trash-can"></i></button>
</div>
</div>
<div class="body"><div class="embed" style="min-height:120px"></div></div>`;
// DnD 並べ替え
card.addEventListener('dragstart', e=>{ e.dataTransfer.setData('text/plain', idx); card.style.opacity='0.6'; });
card.addEventListener('dragend', ()=>{ card.style.opacity='1'; });
card.addEventListener('dragover', e=>{ e.preventDefault(); card.style.outline='2px dashed var(--accent)'; });
card.addEventListener('dragleave', ()=>{ card.style.outline='none'; });
card.addEventListener('drop', e=>{
e.preventDefault(); card.style.outline='none';
const from = +e.dataTransfer.getData('text/plain');
const to = +card.dataset.idx;
if (from===to) return;
const arr = board().sources;
const [moved] = arr.splice(from,1);
arr.splice(to,0,moved);
store.save(state); renderAll();
});
// 操作
card.querySelector('[data-remove]')?.addEventListener('click', ()=>{ board().sources.splice(idx,1); store.save(state); renderAll(); });
card.querySelector('[data-refresh]')?.addEventListener('click', ()=>{ mountTimeline(card, src); });
// 初回描画
mountTimeline(card, src);
return card;
}
function mountTimeline(card, src){
const holder = card.querySelector('.embed');
holder.innerHTML = '<div style="padding:14px" class="muted">読み込み中…</div>';
createTimeline(holder, src).catch(()=>{
holder.innerHTML = '<div style="padding:14px" class="danger">読み込みに失敗しました。値を確認してください。</div>';
});
}
function prettyLabel(src){
if (src.type==='profile') return '@'+src.value.replace(/^@/,'');
if (src.type==='hashtag') return '#'+src.value.replace(/^#/,'');
if (src.type==='search') return '検索: '+src.value;
if (src.type==='list') return 'リスト';
return src.value;
}
function renderAll(){
// ボード情報
const info = $('#boardInfo');
const b = board();
info.textContent = `（${state.activeBoard}｜${b.sources.length}列 / ${b.tweets.length}件）`;
// チップ
const chips = $('#activeChips'); chips.innerHTML='';
b.sources.forEach((s,i)=> chips.appendChild(chipNode(s,i)) );
// カラム
const col = $('#columns'); col.innerHTML='';
b.sources.forEach((s,i)=> col.appendChild(columnCard(s,i)) );
// ランキング
renderRanking();
}
// ========== ランキング ==========
function parseTweetId(url){ const m = (url||'').match(/status\/(\d{5,})/); return m? m[1] : null; }
function tweetUrlFromId(id){ return `https://twitter.com/i/web/status/${id}`; }
async function addTweet(url, note){
const id = parseTweetId(url);
if (!id) return alert('ツイートURLが正しくありません');
board().tweets.push({id, note: (note||'')});
store.save(state); renderRanking();
}
async function renderRanking(){
await waitTwttr();
const root = $('#ranking'); root.innerHTML='';
const arr = board().tweets;
arr.forEach((t, idx)=>{
const card = document.createElement('div'); card.className='card'; card.draggable=true; card.dataset.idx=idx;
card.innerHTML = `
<div class="head">
<div class="title"><i class="fa-solid fa-grip-vertical drag"></i> エントリ #${idx+1}</div>
<div class="toolbar">
<button class="btn ghost" data-edit="${idx}" title="メモ編集"><i class="fa-regular fa-pen-to-square"></i></button>
<a class="btn ghost" href="${tweetUrlFromId(t.id)}" target="_blank" title="Xで開く"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
<button class="btn ghost danger" title="削除" data-del-rank="${idx}"><i class="fa-regular fa-trash-can"></i></button>
</div>
</div>
<div class="body">
<div class="embed"></div>
<div style="padding:10px 14px;border-top:1px solid var(--border)" class="tiny"><span class="muted">メモ:</span> <span class="note">${escapeHtml(t.note||'')}</span></div>
</div>`;
// イベント
card.querySelector('[data-del-rank]')?.addEventListener('click', ()=>{ arr.splice(idx,1); store.save(state); renderRanking(); });
card.querySelector('[data-edit]')?.addEventListener('click', ()=>{
const newNote = prompt('メモを編集', t.note||'');
if (newNote!==null){ t.note = newNote; store.save(state); renderRanking(); }
});
// DnD 並べ替え
card.addEventListener('dragstart', e=>{ e.dataTransfer.setData('text/plain', 'rank:'+idx); card.style.opacity='0.6'; });
card.addEventListener('dragend', ()=>{ card.style.opacity='1'; });
card.addEventListener('dragover', e=>{ e.preventDefault(); card.style.outline='2px dashed var(--accent)'; });
card.addEventListener('dragleave', ()=>{ card.style.outline='none'; });
card.addEventListener('drop', e=>{
e.preventDefault(); card.style.outline='none';
const data = e.dataTransfer.getData('text/plain'); if (!data.startsWith('rank:')) return;
const from = +data.split(':')[1]; const to = +card.dataset.idx;
const [moved] = arr.splice(from,1); arr.splice(to,0,moved);
store.save(state); renderRanking();
});
const holder = card.querySelector('.embed');
twttr.widgets.createTweet(t.id, holder, { theme: state.dark ? 'dark' : 'light' });
root.appendChild(card);
});
}
function escapeHtml(s){ return (s||'').replace(/[&<>"']/g, m=> ({'&':'&','<':'<','>':'>','"':'"','\'':'''}[m])); }
// ========== 自動再描画 ==========
let refreshTimer = null;
function applyAutoRefresh(){
if (refreshTimer) { clearInterval(refreshTimer); refreshTimer=null; }
if (state.autoRefresh){
const ms = Math.max(1, +state.minutes) * 60 * 1000;
refreshTimer = setInterval(()=>{
$$('#columns .card').forEach((card, i)=>{
const src = board().sources[i]; if (src) mountTimeline(card, src);
});
}, ms);
}
}
// ========== ボード管理 ==========
function refreshBoardSelect(){
const sel = $('#boardSelect'); sel.innerHTML='';
Object.keys(state.boards).forEach(name=>{
const opt = document.createElement('option'); opt.value=name; opt.textContent=name; sel.appendChild(opt);
});
sel.value = state.activeBoard;
}
function addBoard(name){
if (!name) return;
if (state.boards[name]) return alert('同名のボードが存在します');
state.boards[name] = defaultBoard(); state.activeBoard = name; store.save(state);
refreshBoardSelect(); renderAll();
}
function renameBoard(newName){
if (!newName) return;
if (state.boards[newName]) return alert('同名のボードが存在します');
const old = state.activeBoard;
state.boards[newName] = state.boards[old];
delete state.boards[old];
state.activeBoard = newName; store.save(state);
refreshBoardSelect(); renderAll();
}
function deleteBoard(){
const names = Object.keys(state.boards);
if (names.length<=1) return alert('最後のボードは削除できません');
if (!confirm(`ボード「${state.activeBoard}」を削除しますか？`)) return;
delete state.boards[state.activeBoard];
state.activeBoard = Object.keys(state.boards)[0];
store.save(state); refreshBoardSelect(); renderAll();
}
// ========== 共有（URLハッシュ生成） ==========
function exportHashUrl(){
const cloned = JSON.parse(JSON.stringify(state));
const json = JSON.stringify(cloned);
const b64 = btoa(json);
const url = location.origin + location.pathname + '#data=' + encodeURIComponent(b64);
return url;
}
// ========== 単一HTML出力 ==========
function download(filename, text){
const blob = new Blob([text], {type:'text/html'});
const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download=filename; a.click(); URL.revokeObjectURL(a.href);
}
function exportSingleHtml(){
// 現在のHTMLに初期状態スクリプトを差し込む
let html = document.documentElement.outerHTML;
const idx = html.indexOf('<head>');
const inject = `<head>\n <script>window.__XLOG_INITIAL_STATE__=${JSON.stringify(state)}<\/script>`;
if (idx>=0){ html = html.replace('<head>', inject); }
download('xlog-pro.html', '<!DOCTYPE html>\n' + html);
}
// ========== RSS生成 ==========
function exportRss(){
const title = $('#rssTitle').value.trim() || 'Xlog Ranking';
const items = board().tweets.map(t=>({
title: (t.note||'Tweet '+t.id).replace(/[\r\n]+/g,' ').slice(0,120),
link: tweetUrlFromId(t.id),
guid: t.id,
description: escapeHtml(t.note||''),
pubDate: new Date().toUTCString()
}));
const xml = `<?xml version="1.0" encoding="UTF-8"?>\n<rss version="2.0"><channel>\n<title>${escapeXml(title)}</title>\n<link>${escapeXml(location.href)}</link>\n<description>Generated by Xlog Pro</description>\n${items.map(i=>`<item><title>${escapeXml(i.title)}</title><link>${escapeXml(i.link)}</link><guid isPermaLink=\"false\">${escapeXml(i.guid)}</guid><description>${escapeXml(i.description)}</description><pubDate>${i.pubDate}</pubDate></item>`).join('')}\n</channel></rss>`;
const blob = new Blob([xml], {type:'application/rss+xml'});
const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='xlog-ranking.xml'; a.click(); URL.revokeObjectURL(a.href);
}
function escapeXml(s){ return (s||'').replace(/[<>&\"']/g, m=> ({'<':'<','>':'>','&':'&','\"':'"','\'':'''}[m])); }
// ========== 入力ヘルパ ==========
function detectType(v){
if (/^@/.test(v)) return 'profile';
if (/^#/.test(v)) return 'hashtag';
if (/twitter\.com\/i\/lists\//.test(v)) return 'list';
return 'search';
}
function addSource(type, value, label){
const src = {type, value:value.trim(), label:(label||'').trim()};
board().sources.push(src); store.save(state); renderAll();
}
function bulkAddFromText(txt){
const parts = txt.split(/[\n,]+/).map(s=>s.trim()).filter(Boolean);
let count = 0;
for (const p of parts){ addSource(detectType(p), p, ''); count++; }
return count;
}
// ========== キーイベント ==========
function setupShortcuts(){
window.addEventListener('keydown', (e)=>{
if (['INPUT','TEXTAREA','SELECT'].includes(document.activeElement.tagName)) return;
if (e.key==='n' || e.key==='N'){ $('#sourceValue').focus(); }
if (e.key==='r' || e.key==='R'){ renderAll(); }
if (e.key==='g' || e.key==='G'){ state.columns=Math.max(1,state.columns-1); applySkin(); store.save(state); }
if (e.key==='h' || e.key==='H'){ state.cardHeight=Math.max(360,state.cardHeight-40); applySkin(); store.save(state); renderAll(); }
});
}
// ========== 設定と起動 ==========
window.addEventListener('DOMContentLoaded', ()=>{
// スキン
applySkin();
// ボード選択
refreshBoardSelect();
$('#boardSelect').addEventListener('change', (e)=>{ state.activeBoard = e.target.value; store.save(state); renderAll(); });
$('#boardNew').addEventListener('click', ()=>{ const name = prompt('新しいボード名','Board '+(Object.keys(state.boards).length+1)); addBoard(name); });
$('#boardRename').addEventListener('click', ()=>{ const name = prompt('新しい名前', state.activeBoard); if (name) renameBoard(name); });
$('#boardDelete').addEventListener('click', deleteBoard);
// テーマ/アクセント/レイアウト
$('#themeToggle').addEventListener('change', e=>{ state.dark = e.target.checked; store.save(state); applySkin(); renderAll(); });
$('#accentPicker').addEventListener('input', e=>{ state.accent = e.target.value; store.save(state); applySkin(); });
$('#colsRange').addEventListener('input', e=>{ state.columns = +e.target.value; store.save(state); applySkin(); });
$('#heightRange').addEventListener('input', e=>{ state.cardHeight = +e.target.value; store.save(state); applySkin(); renderAll(); });
// ソース追加
$('#addBtn').addEventListener('click', ()=>{
const type = $('#sourceType').value;
const val = $('#sourceValue').value.trim();
const label = $('#sourceLabel').value.trim();
if (!val) return alert('値を入力してください');
addSource(type, val, label);
$('#sourceValue').value=''; $('#sourceLabel').value='';
});
$$('.quick').forEach(btn=> btn.addEventListener('click', ()=> addSource(btn.dataset.type, btn.dataset.val, '')) );
// まとめて追加
$('#bulkAdd').addEventListener('click', ()=>{ const n = bulkAddFromText($('#bulkArea').value); alert(n+'件追加しました'); $('#bulkArea').value=''; });
$('#bulkClear').addEventListener('click', ()=> $('#bulkArea').value='' );
// ランキング
$('#addTweetBtn').addEventListener('click', ()=>{
const url = $('#tweetUrl').value.trim();
const note = $('#tweetNote').value.trim();
if (!url) return;
addTweet(url, note); $('#tweetUrl').value=''; $('#tweetNote').value='';
});
// 設定
$('#autoRefreshToggle').checked = !!state.autoRefresh;
$('#refreshMinutes').value = String(state.minutes||5);
$('#autoRefreshToggle').addEventListener('change', e=>{ state.autoRefresh = e.target.checked; store.save(state); applyAutoRefresh(); });
$('#refreshMinutes').addEventListener('change', e=>{ state.minutes = +e.target.value; store.save(state); applyAutoRefresh(); });
// 書き出し/読み込み
$('#exportBtn').addEventListener('click', ()=>{
const blob = new Blob([JSON.stringify(state,null,2)], {type:'application/json'});
const a = document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='xlog-pro-config.json'; a.click(); URL.revokeObjectURL(a.href);
});
$('#importFile').addEventListener('change', e=>{
const file = e.target.files?.[0]; if (!file) return;
const fr = new FileReader();
fr.onload = () => {
try{ const obj = JSON.parse(fr.result); state = migrate(obj); store.save(state); applySkin(); refreshBoardSelect(); renderAll(); applyAutoRefresh(); }
catch(err){ alert('JSONの読み込みに失敗しました'); }
};
fr.readAsText(file);
});
$('#exportHtmlBtn').addEventListener('click', exportSingleHtml);
$('#clearBtn').addEventListener('click', ()=>{
if (!confirm('現在のボードのソースとランキングを削除しますか？')) return;
const b = board(); b.sources = []; b.tweets=[]; store.save(state); renderAll();
});
// RSS
$('#rssExport').addEventListener('click', exportRss);
// 初期描画
renderAll();
applyAutoRefresh();
setupShortcuts();
});
</script>
</body>
</html>
カテゴリー: programming
BranchBoard.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>GBranchBoard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap & FontAwesome -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<style>
body {
background: #f6f8fa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.repo-header { background: #fff; padding: 20px; border: 1px solid #ddd; margin-bottom: 10px; }
.nav-tabs .nav-link.active { border-color: #ddd #ddd #fff; background: #fff; }
.file-list li { border-bottom: 1px solid #eee; padding: 8px 0; display: flex; align-items: center; }
.file-list i { margin-right: 10px; }
.readme-box, .issues-box, .commits-box { background: #fff; padding: 20px; border: 1px solid #ddd; margin-top: 10px; }
#editor { height: 400px; width: 100%; border: 1px solid #ccc; }
</style>
</head>
<body>
<!-- ヘッダー -->
<nav class="navbar navbar-dark bg-dark px-3">
<span class="text-white"><i class="fas fa-user-circle"></i> owner</span>
</nav>
<div class="container mt-3">
<!-- リポジトリヘッダー -->
<div class="repo-header">
<h3><i class="fas fa-book"></i> owner / <strong>SampleRepo</strong></h3>
<p class="text-muted">最終更新: 2025年5月26日</p>
<button class="btn btn-sm btn-outline-secondary"><i class="fas fa-star"></i> Star</button>
<button class="btn btn-sm btn-outline-secondary"><i class="fas fa-code-branch"></i> Fork</button>
</div>
<!-- タブ -->
<ul class="nav nav-tabs" id="repoTabs">
<li class="nav-item"><a class="nav-link active" href="#" onclick="switchTab('code')"><i class="fas fa-code"></i> Code</a></li>
<li class="nav-item"><a class="nav-link" href="#" onclick="switchTab('issues')"><i class="fas fa-exclamation-circle"></i> Issues</a></li>
<li class="nav-item"><a class="nav-link" href="#" onclick="switchTab('commits')"><i class="fas fa-history"></i> Commits</a></li>
</ul>
<!-- Codeタブ -->
<div id="tab-code" class="tab-content">
<ul class="file-list list-unstyled bg-white p-3 border">
<li><i class="fas fa-folder"></i> src/</li>
<li><i class="fas fa-file-code"></i> index.js</li>
<li><i class="fas fa-file-alt"></i> README.md</li>
<li><i class="fas fa-file-alt"></i> LICENSE</li>
</ul>
<div class="readme-box">
<h4><i class="fas fa-book-open"></i> README.md</h4>
<hr>
<div id="readme-content"></div>
</div>
<div class="mt-4">
<h5><i class="fas fa-code"></i> コード編集 (Monaco Editor)</h5>
<div id="editor"></div>
<button id="saveCode" class="btn btn-success mt-2"><i class="fas fa-save"></i> 保存</button>
<button id="themeToggle" class="btn btn-secondary mt-2"><i class="fas fa-adjust"></i> テーマ切替</button>
</div>
</div>
<!-- Issuesタブ -->
<div id="tab-issues" class="tab-content" style="display:none;">
<div class="issues-box">
<h4><i class="fas fa-exclamation-circle"></i> Open Issues</h4>
<ul class="list-group">
<li class="list-group-item">
<strong>#1</strong> READMEの翻訳が必要です<br>
<small class="text-muted">posted by owner - 1日前</small>
</li>
<li class="list-group-item">
<strong>#2</strong> index.jsにテストコードを追加してください<br>
<small class="text-muted">posted by owner - 2日前</small>
</li>
</ul>
</div>
</div>
<!-- Commitsタブ -->
<div id="tab-commits" class="tab-content" style="display:none;">
<div class="commits-box">
<h4><i class="fas fa-history"></i> Commits</h4>
<ul class="list-group">
<li class="list-group-item">
<strong>Initial commit</strong> - 2025-05-25<br>
<small class="text-muted">by owner</small>
</li>
<li class="list-group-item">
<strong>README updated</strong> - 2025-05-26<br>
<small class="text-muted">by owner</small>
</li>
</ul>
</div>
</div>
</div>
<!-- ライブラリ -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script>
<!-- タブ切替・Markdown表示・Monaco起動 -->
<script>
const markdown = `
# SampleRepo
## 特徴
- Monaco Editorでコード編集
- Markdown表示（README）
- ダークモード対応
- Issue・コミットのUI
## 技術
- HTML/CSS/JS
- Bootstrap5
- Monaco Editor
- Marked.js
`;
document.getElementById('readme-content').innerHTML = marked.parse(markdown);
function switchTab(tab) {
['code', 'issues', 'commits'].forEach(id => {
document.getElementById('tab-' + id).style.display = (id === tab) ? 'block' : 'none';
});
document.querySelectorAll('#repoTabs .nav-link').forEach(link => link.classList.remove('active'));
document.querySelector(`#repoTabs .nav-link[onclick*="${tab}"]`).classList.add('active');
}
// Monaco起動
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' }});
require(['vs/editor/editor.main'], function () {
window.editor = monaco.editor.create(document.getElementById('editor'), {
value: localStorage.getItem('savedCode') || `function hello() {\n console.log("Hello from Monaco Editor!");\n}`,
language: 'javascript',
theme: 'vs-light',
automaticLayout: true
});
document.getElementById('saveCode').onclick = function () {
const code = editor.getValue();
localStorage.setItem('savedCode', code);
alert('保存しました！');
};
document.getElementById('themeToggle').onclick = function () {
const theme = monaco.editor.getTheme() === 'vs-dark' ? 'vs-light' : 'vs-dark';
monaco.editor.setTheme(theme);
};
});
</script>
</body>
</html>Tsumugi.html(SNS)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Tsumugi</title>
<!-- Favicon -->
<link rel="shortcut icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23667eea' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/></svg>"/>
<!-- 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"/>
<style>
:root {
--grad-a: #667eea;
--grad-b: #764ba2;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%);
min-height: 100vh;
}
.glass-effect {
background: rgba(255,255,255,0.25);
backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.18);
}
.card-hover { transition: all 0.25s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 20px 30px -12px rgba(0,0,0,0.25); }
.gradient-text {
background: linear-gradient(45deg, var(--grad-a), var(--grad-b));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.timeline-post {
background: white;
border-radius: 16px;
box-shadow: 0 10px 20px -12px rgba(0,0,0,0.2);
transition: all 0.25s ease;
border-left: 4px solid var(--grad-a);
}
.timeline-post:hover { transform: translateX(4px); }
.profile-avatar {
width: 100px; height: 100px; border-radius: 50%;
object-fit: cover; border: 4px solid white;
box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}
.btn-primary {
background: linear-gradient(45deg, var(--grad-a), var(--grad-b));
border: none; transition: all 0.2s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,0.18); }
.section-divider {
height: 3px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
border-radius: 2px; margin: 2rem 0;
}
.username-badge {
background: linear-gradient(45deg, var(--grad-a), var(--grad-b));
color: white; padding: 0.2rem 0.5rem; border-radius: 1rem;
font-size: 0.75rem; font-weight: 600; display: inline-block; margin-left: 0.5rem;
}
.share-menu { position: absolute; z-index: 50; min-width: 180px; right: 0; top: 110%; background: white; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.13); }
.share-menu button { width: 100%; text-align: left; padding: 10px 20px; border: none; background: none; cursor: pointer; font-size: 0.95rem; }
.share-menu button:hover { background: #f0f4ff; }
.status-indicator { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-active { background-color: #10b981; animation: pulse 2s infinite; }
.status-inactive { background-color: #6b7280; }
.log-container {
max-height: 180px; overflow-y: auto; background: rgba(255,255,255,0.12);
border-radius: 10px; padding: 10px; margin-top: 10px; font-size: 0.8rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.error-message { color: #ef4444; background: rgba(239, 68, 68, 0.08); padding: 8px; border-radius: 8px; margin: 5px 0; }
.success-message { color: #10b981; background: rgba(16, 185, 129, 0.08); padding: 8px; border-radius: 8px; margin: 5px 0; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.dark .glass-effect { background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.12); }
.dark .timeline-post { background: #1f2937; color: #f9fafb; border-left-color: #4f46e5; }
.dark .share-menu { background: #111827; color: #e5e7eb; }
.dark .success-message { background: rgba(16,185,129,0.12); }
.dark .error-message { background: rgba(239,68,68,0.12); }
@media print {
body { background: white !important; -webkit-print-color-adjust: exact; }
.glass-effect { background: white !important; backdrop-filter: none !important; border: 1px solid #e5e7eb !important; }
}
</style>
</head>
<body>
<!-- ログイン/登録モーダル -->
<div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" style="display:none">
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
<h2 class="text-2xl font-bold mb-4 text-center" id="auth-title">ログイン</h2>
<div id="auth-error" class="error-message mb-2" style="display:none"></div>
<form id="auth-form" autocomplete="off">
<div class="mb-3">
<label class="block mb-1 text-sm font-semibold">メールアドレス</label>
<input type="email" id="auth-email" class="w-full border rounded px-3 py-2" required>
</div>
<div class="mb-3">
<label class="block mb-1 text-sm font-semibold">パスワード</label>
<input type="password" id="auth-password" class="w-full border rounded px-3 py-2" required>
</div>
<button type="submit" class="btn-primary w-full py-2 rounded-lg text-white font-semibold">ログイン</button>
</form>
<div class="mt-4 text-center">
<button id="toggle-auth-mode" class="text-blue-600 underline text-sm">新規登録はこちら</button>
</div>
</div>
</div>
<!-- ヘッダー -->
<header class="glass-effect mx-4 mt-4 p-6">
<div class="text-center">
<h1 class="text-4xl font-bold text-white mb-2">
<i class="fas fa-comments mr-3"></i>Tsumugi
<span class="text-sm opacity-80 ml-2"></span>
</h1>
<p class="text-white text-lg opacity-90">次世代ソーシャルネットワーク</p>
<div class="mt-4 flex justify-center items-center space-x-4">
<div class="flex items-center">
<img id="header-profile-icon" class="profile-avatar" src="https://via.placeholder.com/100" alt="プロフィール">
<div class="ml-3 text-white text-left">
<div class="font-semibold text-lg" id="header-username">未設定</div>
<div class="text-sm opacity-75" id="header-user-email"></div>
</div>
</div>
<button onclick="toggleDarkMode()" class="btn-primary px-4 py-2 rounded-full text-white">
<i class="fas fa-moon mr-2"></i>ダークモード
</button>
<button onclick="showSystemStatus()" class="btn-primary px-4 py-2 rounded-full text-white">
<i class="fas fa-info-circle mr-2"></i>ステータス
</button>
<button id="logout-btn" onclick="logout()" class="btn-primary px-4 py-2 rounded-full text-white" style="display:none">
<i class="fas fa-sign-out-alt mr-2"></i>ログアウト
</button>
</div>
</div>
</header>
<!-- メイン -->
<div class="max-w-6xl mx-auto px-4 py-6" id="main-content" style="display:none">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 左カラム：プロフィール／BOT/RSS -->
<div class="lg:col-span-1 space-y-6">
<!-- プロフィール -->
<div class="glass-effect p-6 card-hover">
<h3 class="text-2xl font-bold gradient-text mb-4"><i class="fas fa-user-circle mr-2"></i>プロフィール</h3>
<div class="text-center mb-6">
<img id="profile-icon" class="profile-avatar mx-auto mb-4" src="https://via.placeholder.com/100" alt="プロフィール">
<input type="file" id="profile-upload" accept="image/*" onchange="uploadProfileIcon(event)" class="hidden">
<button onclick="document.getElementById('profile-upload').click()" class="btn-primary px-4 py-2 rounded-full text-white">
<i class="fas fa-camera mr-2"></i>画像変更
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-white font-semibold mb-2">ユーザー名</label>
<input type="text" id="username" class="w-full p-3 border rounded-lg bg-white bg-opacity-90" placeholder="ユーザー名を入力してください" maxlength="20">
</div>
<div>
<label class="block text-white font-semibold mb-2">自己紹介</label>
<textarea id="self-intro" class="w-full p-3 border rounded-lg bg-white bg-opacity-90" rows="4" placeholder="自己紹介を入力してください"></textarea>
</div>
<button onclick="saveProfile()" class="btn-primary w-full py-2 rounded-lg text-white">
<i class="fas fa-save mr-2"></i>プロフィール保存
</button>
<div class="p-3 bg-white bg-opacity-80 rounded-lg">
<h5 class="font-semibold text-gray-800 mb-2">プレビュー:</h5>
<div class="text-gray-700">
<div class="font-semibold mb-1" id="username-preview">未設定</div>
<div id="self-intro-preview" class="text-sm whitespace-pre-line min-h-8">まだ自己紹介がありません</div>
</div>
</div>
</div>
</div>
<!-- RSS自動投稿機能（全体共有 + 個別ON/OFF） -->
<div class="glass-effect p-6 card-hover">
<h3 class="text-xl font-bold text-white mb-4">
<i class="fas fa-rss mr-2"></i>RSS自動投稿（全体共有）
<span class="status-indicator" id="rss-status"></span>
<span id="rss-status-text" class="text-xs opacity-75">停止中</span>
</h3>
<div>
<input id="rss-url" type="text" class="w-full p-2 border rounded-lg bg-white bg-opacity-90 mb-2" placeholder="RSSフィードURLを入力">
<button onclick="addRssFeed()" class="btn-primary w-full py-2 rounded-lg text-white mb-2">
<i class="fas fa-plus mr-2"></i>追加
</button>
<div id="rss-list" class="mb-3"></div>
<div class="flex items-center space-x-2 mb-2">
<input type="number" id="rss-interval" class="w-1/2 p-2 border rounded-lg bg-white bg-opacity-90" min="10" max="3600" value="300" placeholder="間隔(秒)">
<button onclick="setRssInterval()" class="btn-primary flex-1 py-2 rounded-lg text-white">
<i class="fas fa-clock mr-2"></i>間隔設定
</button>
</div>
<div class="flex items-center space-x-2 mb-2">
<button onclick="fetchRssNow()" class="btn-primary flex-1 py-2 rounded-lg text-white">
<i class="fas fa-sync mr-2"></i>今すぐ取得
</button>
<button onclick="stopRssAuto()" class="bg-red-500 hover:bg-red-600 flex-1 py-2 rounded-lg text-white">
<i class="fas fa-stop mr-2"></i>自動停止
</button>
</div>
<div class="flex items-center space-x-2">
<button onclick="setAllRssEnabled(true)" class="btn-primary flex-1 py-2 rounded-lg text-white text-sm">
<i class="fas fa-toggle-on mr-1"></i>すべてON
</button>
<button onclick="setAllRssEnabled(false)" class="bg-gray-500 hover:bg-gray-600 flex-1 py-2 rounded-lg text-white text-sm">
<i class="fas fa-toggle-off mr-1"></i>すべてOFF
</button>
</div>
<div id="rss-log" class="log-container text-white text-xs mt-3"></div>
</div>
</div>
<!-- BOT機能 -->
<div class="glass-effect p-6 card-hover">
<h3 class="text-xl font-bold text-white mb-4">
<i class="fas fa-robot mr-2"></i>BOT機能
<span class="status-indicator" id="bot-status"></span>
<span id="bot-status-text" class="text-xs opacity-75">停止中</span>
</h3>
<div class="space-y-4">
<div>
<textarea id="botContent" class="w-full p-3 border rounded-lg bg-white bg-opacity-90" rows="3" placeholder="BOT投稿内容"></textarea>
<button onclick="postBotMessage()" class="btn-primary w-full mt-2 py-2 rounded-lg text-white">
<i class="fas fa-robot mr-2"></i>BOT投稿
</button>
</div>
<div>
<input type="number" id="botIntervalSec" class="w-full p-2 border rounded-lg bg-white bg-opacity-90" placeholder="マルコフ自動投稿間隔(秒)" min="10" max="3600" value="60">
<div class="flex space-x-2 mt-2">
<button onclick="postMarkovBot()" class="btn-primary flex-1 py-2 rounded-lg text-white">
<i class="fas fa-dice mr-2"></i>マルコフ生成
</button>
<button onclick="startBotAutoPost()" class="btn-primary flex-1 py-2 rounded-lg text-white">
<i class="fas fa-play mr-2"></i>自動開始
</button>
<button onclick="stopBotAutoPost()" class="bg-red-500 hover:bg-red-600 flex-1 py-2 rounded-lg text-white">
<i class="fas fa-stop mr-2"></i>停止
</button>
</div>
</div>
<div class="text-white text-xs opacity-75">
<i class="fas fa-info-circle mr-1"></i>
マルコフ連鎖では過去の投稿からランダムな文章を生成します（FEED本文は省略し、タイトルのみを学習対象にしません）。
</div>
<div id="bot-log" class="log-container text-white text-xs"></div>
</div>
</div>
</div>
<!-- 右カラム：投稿＆タイムライン -->
<div class="lg:col-span-2 space-y-6">
<!-- 新規投稿 -->
<div class="glass-effect p-6 card-hover">
<h3 class="text-2xl font-bold gradient-text mb-4"><i class="fas fa-edit mr-2"></i>新規投稿</h3>
<div>
<textarea id="postContent" class="w-full p-4 border rounded-lg bg-white bg-opacity-90" rows="4" placeholder="今何を考えていますか？" maxlength="500"></textarea>
<div class="mt-4 flex justify-between items-center">
<div class="text-white text-sm opacity-90">
<i class="fas fa-info-circle mr-1"></i>
あなたの思いを共有しましょう
<span id="char-count" class="ml-2">(0/500)</span>
</div>
<button onclick="createUserPost()" class="btn-primary px-6 py-3 rounded-lg text-white font-semibold">
<i class="fas fa-paper-plane mr-2"></i>投稿する
</button>
</div>
</div>
</div>
<div class="section-divider"></div>
<!-- タイムライン -->
<div class="glass-effect p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold text-white">
<i class="fas fa-stream mr-2"></i>タイムライン
<span id="post-count" class="text-sm font-normal opacity-75 ml-2">(0件の投稿)</span>
</h3>
<div class="flex space-x-2">
<button onclick="clearAllPosts()" class="bg-red-500 hover:bg-red-600 px-3 py-1 rounded text-white text-sm">
<i class="fas fa-trash mr-1"></i>全削除
</button>
<button onclick="exportData()" class="bg-green-500 hover:bg-green-600 px-3 py-1 rounded text-white text-sm">
<i class="fas fa-download mr-1"></i>エクスポート
</button>
</div>
</div>
<div id="timeline" class="space-y-4"></div>
<div id="empty-timeline" class="text-center py-12 text-white opacity-80">
<i class="fas fa-comments text-4xl mb-4"></i>
<p class="text-lg">まだ投稿がありません</p>
<p class="text-sm">最初の投稿をして、タイムラインを始めましょう！</p>
</div>
</div>
</div>
</div>
</div>
<footer class="glass-effect mx-4 mb-4 p-4 text-center">
<p class="text-white opacity-80">
<i class="fas fa-copyright mr-2"></i>2025 Verse – 次世代ソーシャルネットワーク v2.3
<span class="ml-4"><i class="fas fa-rss mr-1"></i>共有RSS / 個別ON/OFF対応（安全なフィード例）</span>
</p>
</footer>
<script>
// ==== 初期RSS（安全な例のみ。成人向け/不適切なサイトは除外） ====
const PRESET_RSS = [
"http://2ch-2.net/rss/all.xml",
"http://2ch-ranking.net/rss/livemarket1.rdf",
"http://2ch-ranking.net/rss/livemarket2.rdf",
"http://kabumatome.doorblog.jp/index.rdf",
"http://momoniji.com/feed",
"http://oekakigakusyuu.blog97.fc2.com/?xml",
"http://otanews.livedoor.biz/atom.xml",
"http://otanews.livedoor.biz/index.rdf",
"http://news4vip.livedoor.biz/index.rdf",
"http://news.kakaku.com/prdnews/rss.asp",
"http://www.jma-net.go.jp/rss/jma.rss",
"http://rss.asahi.com/rss/asahi/newsheadlines.rdf",
"https://uploadvr.com/feed/",
"http://www.atmarkit.co.jp/rss/rss2dc.xml",
"http://liginc.co.jp/feed",
"http://liginc.co.jp/feed/",
"http://blog.livedoor.jp/shachiani/index.rdf",
"http://manga.lemon-s.com/atom.xml",
"http://b.hatena.ne.jp/search/text?safe=on&q=%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3&users=500&mode=rss",
"http://creator-life.net/feed/",
"http://feedblog.ameba.jp/rss/ameblo/ca-1pixel/rss20.xml",
"http://rssblog.ameba.jp/ca-1pixel/rss20.xml",
"http://weekly.ascii.jp/cate/1/rss.xml",
"http://blog.livedoor.jp/coleblog/atom.xml",
"http://2chantena.antenam.biz/rss1s.rss",
"http://www.4gamer.net/rss/index.xml",
"http://www.4gamer.net/rss/news_topics.xml",
"http://nyan.eggtree.net/feed.xml",
"http://nunnnunn.hatenablog.com/rss",
"http://www.nikkansports.com/general/atom.xml",
"http://feeds.afpbb.com/rss/afpbb/access_ranking",
"http://akiba-pc.watch.impress.co.jp/cda/rss/akiba-pc.rdf",
"https://area.autodesk.jp/rss.xml",
"http://av.watch.impress.co.jp/sublink/av.rdf",
"http://rss.allabout.co.jp/aa/latest/ch/netpc/",
"http://www.ar-ch.org/atom.xml",
"http://feeds.arstechnica.com/arstechnica/BAaf",
"https://feeds.feedburner.com/awwwards-sites-of-the-day",
"http://news.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss091.xml",
"http://www.criteo.com/blog/rss/",
"https://blueskyweb.xyz/rss.xml",
"http://boingboing.net/rss.xml",
"http://www.cc2.co.jp/blog/?feed=rss2",
"http://cgarena.com/cgarena.xml",
"http://cgtracking.net/feed",
"http://japan.cnet.com/rss/index.rdf",
"http://newclassic.jp/feed",
"https://www.cssmania.com/feed/",
"http://ceron.jp/top/?type=rss",
"http://blog.btrax.com/jp/comments/feed/",
"http://2ch-ranking.net/rss/wildplus.rdf",
"http://design-spice.com/feed/",
"http://dev.classmethod.jp/feed/",
"http://ishida-a-coicoi.blog.so-net.ne.jp/atom.xml",
"http://feeds.feedburner.com/ura-akiba?format=xml",
"http://game.watch.impress.co.jp/sublink/game.rdf",
"http://gigazine.co.jp/feed/",
"http://labs.gree.jp/blog/comments/feed/",
"http://www.gamespark.jp/rss/index.rdf",
"http://www.gamebusiness.jp/rss/index.rdf",
"http://www.gamebusiness.jp/rss/rss.php",
"http://hackread.com/feed/",
"https://io3000.com/feed/",
"http://www.inside-games.jp/rss/index.rdf",
"http://blog.livedoor.jp/itsoku/index.rdf",
"http://rss.itmedia.co.jp/rss/1.0/news_bursts.xml",
"http://octoba.net/feed",
"http://www.ota-suke.jp/index.xml",
"http://blog.livedoor.jp/kaigai_no/index.rdf",
"https://land-book.com/feed/",
"http://2ch.logpo.jp/1hour.xml",
"http://menthas.com/javascript/rss",
"http://www.nhk.or.jp/rss/news/cat0.xml",
"http://ozpa-h4.com/feed/",
"https://www.youtube.com/feeds/videos.xml?channel_id=UC1DCedRgGHBdm81E1llLhOQ",
"http://rass.blog43.fc2.com/?xml",
"http://stackoverflow.com/feeds",
"http://www.slideshare.net/rss/latest",
"http://www.jp.square-enix.com/whatsnew2/whatsnew.rdf",
"http://www.ituore.com/feed",
"http://synodos.jp/comments/feed",
"http://www.shinkigensha.co.jp/feed/",
"http://e-shuushuu.net/index.rss",
"http://slashdot.org/index.rss",
"http://feeds.feedburner.com/TheHackersNews?format=xml",
"http://googleblog.blogspot.com/atom.xml",
"http://www.theregister.co.uk/tonys/slashdot.rdf",
"http://thinkit.co.jp/rss.xml",
"http://blog.livedoor.jp/news23vip/atom.xml",
"http://blog.livedoor.jp/news23vip/index.rdf",
"http://www.webcreatorbox.com/feed/",
"http://web-d.navigater.info/atom.xml",
"http://2ch-c.net/?xml_all",
"http://smhn.info/feed",
"http://feeds.japan.zdnet.com/rss/zdnet/all.rdf",
"http://20kaido.com/index.rdf",
"http://2chnode.com/rss/feed/all",
"http://akiba-souken.com/feed/all/",
"http://amaebi.net/index.rdf",
"http://amakakeru.blog59.fc2.com/?xml",
"http://artskype.com/rss/feed.xml",
"http://asitagamienai.blog118.fc2.com/?xml",
"http://beta.egmnow.com/feed/",
"http://blog.livedoor.jp/ogenre/index.rdf",
"http://blog.nicovideo.jp/atom.xml",
"http://blog.tsubuani.com/feed",
"http://blogs.adobe.com/flex/atom.xml",
"http://blogs.adobe.com/index.xml",
"http://bm.s5-style.com/feed",
"http://business.nikkeibp.co.jp/rss/all_nbo.rdf",
"http://createlier.sitemix.jp/feed/",
"http://crocro.com/news/nc.cgi?action=search&skin=rdf_srch_xml",
"http://d.hatena.ne.jp/thk/rss",
"http://damage0.blomaga.jp/index.rdf",
"http://danbooru.donmai.us/posts.atom",
"http://danbooru.donmai.us/posts.atom?tags=rss",
"http://dengekionline.com/cate/11/rss.xml",
"http://dictionary.reference.com/wordoftheday/wotd.rss",
"http://doujin-games88.net/feed",
"http://doujin.sekurosu.com/rss",
"http://dousyoko.blog.fc2.com/?xml",
"http://eroaniblog.blog.fc2.com/?xml",
"http://eroanimedougakan.blog.fc2.com/?xml",
"http://erogetrailers.com/api?md=latest",
"http://eronizimage.blog.fc2.com/?xml",
"http://erosanime.blog121.fc2.com/?xml",
"http://erotaganime.blog.fc2.com/?xml",
"http://feed.nikkeibp.co.jp/rss/nikkeibp/index.rdf",
"http://feed.rssad.jp/rss/gigazine/rss_2.0",
"http://feed.rssad.jp/rss/jcast/index.xml",
"http://feed.rssad.jp/rss/klug/fxnews/rss5.xml",
"http://feedblog.ameba.jp/rss/ameblo/yusayusa0211/rss20.xml",
"http://feeds.adobe.com/xml/rss.cfm?query=byMostRecent&languages=1",
"http://feeds.builder.japan.zdnet.com/rss/builder/all.rdf",
"http://feeds.fc2.com/fc2/xml?host=anrism.blog&format=xml",
"http://feeds.fc2.com/fc2/xml?host=kahouha2jigen.blog&format=xml",
"http://feeds.feedburner.com/gekiura",
"http://feeds.journal.mycom.co.jp/rss/mycom/index",
"http://feeds.reuters.com/reuters/JPTopNews?format=xml",
"http://galten705.blog.fc2.com/?xml",
"http://gamanjiru.net/feed",
"http://gamanjiru.net/feed/atom",
"http://gamebiz.jp/?feed=rss",
"http://gamenode.jp/rss/feed/all",
"http://ggsoku.com/feed/atom/",
"http://girlcelly.blog.fc2.com/?xml&trackback",
"http://hairana.blog.fc2.com/?xml",
"http://haruka-yumenoato.net/static/rss/index.rss",
"http://headline.harikonotora.net/rss2.xml",
"http://hentaidoujinanime.com/?xml",
"http://homepage1.nifty.com/maname/index.rdf",
"http://horiemon.com/feed/",
"http://ideahacker.net/feed/",
"http://itpro.nikkeibp.co.jp/rss/develop.rdf",
"http://itpro.nikkeibp.co.jp/rss/news.rss",
"http://itpro.nikkeibp.co.jp/rss/oss.rdf",
"http://itpro.nikkeibp.co.jp/rss/win.rdf",
"http://japan.internet.com/rss/rdf/index.rdf",
"http://jp.leopard-raws.org/rss.php",
"http://jp.techcrunch.com/feed/",
"http://kakaku.com/trendnews/rss.xml",
"http://kamisoku.blog47.fc2.com/?xml",
"http://kanesoku.com/index.rdf",
"http://kibougamotenai.blog.fc2.com/?xml",
"http://kiisu.jpn.org/rss/now.xml",
"http://konachan.com/post/piclens?page=1&tags=loli",
"http://labo.tv/2chnews/index.xml",
"http://lineblog.me/yamamotoichiro/atom.xml",
"http://majimougen.blog.fc2.com/?xml",
"http://mantan-web.jp/rss/mantan.xml",
"http://matome.naver.jp/feed/hot",
"http://matome.naver.jp/feed/tech",
"http://matome.sekurosu.com/rss",
"http://mizuhonokuni2ch.com/?xml",
"http://momoiroanime.blog.fc2.com/?xml",
"http://moroahedoujin.com/?xml",
"http://nesingazou.blog.fc2.com/?xml",
"http://newnews-moe.com/index.rdf",
"http://news.ameba.jp/index.xml",
"http://news.com.com/2547-1_3-0-5.xml",
"http://news.nicovideo.jp/?rss=2.0",
"http://news.nicovideo.jp/ranking/hot?rss=2.0",
"http://newsbiz.yahoo.co.jp/topnews.rss",
"http://nijitora.blog.fc2.com/?xml",
"http://nodvd21ver2.blog.fc2.com/?xml",
"http://orebibou.com/feed/",
"http://osu.ppy.sh/feed/ranked/",
"http://otakomu.jp/feed",
"http://pcgameconquest.blog.fc2.com/?xml",
"http://picks.dir.yahoo.co.jp/dailypicks/rss/",
"http://piknik2ch.blog76.fc2.com/?xml",
"http://plus.appgiga.jp/feed/user",
"http://purisoku.com/index.rdf",
"http://rdsig.yahoo.co.jp/RV=1/RU=aHR0cDovL3NlYXJjaHJhbmtpbmcueWFob28uY28uanAvcnNzL2J1cnN0X3JhbmtpbmctcnNzLnhtbA--;_ylt=A2RhjFhfAi9XEi0A6Glhdu57",
"http://read2ch.net/rss/",
"http://rss.dailynews.yahoo.co.jp/fc/computer/rss.xml",
"http://rss.rssad.jp/rss/akibapc/akiba-pc.rdf",
"http://rss.rssad.jp/rss/ascii/biz/rss.xml",
"http://rss.rssad.jp/rss/ascii/hobby/rss.xml",
"http://rss.rssad.jp/rss/ascii/it/rss.xml",
"http://rss.rssad.jp/rss/ascii/mac/rss.xml",
"http://rss.rssad.jp/rss/ascii/pc/rss.xml",
"http://rss.rssad.jp/rss/ascii/rss.xml",
"http://rss.rssad.jp/rss/codezine/new/20/index.xml",
"http://rss.rssad.jp/rss/forest/rss.xml",
"http://rss.rssad.jp/rss/gihyo/feed/atom",
"http://rss.rssad.jp/rss/headline/headline.rdf",
"http://rss.rssad.jp/rss/impresswatch/pcwatch.rdf",
"http://rss.rssad.jp/rss/itm/1.0/makoto.xml",
"http://rss.rssad.jp/rss/itm/1.0/netlab.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_akiba.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_android_appli.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_apple.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_facebook.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_google.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_ipad.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_iphone.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_iphone_appli.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_mixi.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_smartphone.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_twitter.xml",
"http://rss.rssad.jp/rss/itm/2.0/kw_ustream.xml",
"http://rss.rssad.jp/rss/itmbizid/1.0/bizid.xml",
"http://rss.rssad.jp/rss/itmnews/2.0/news_bursts.xml",
"http://rss.rssad.jp/rss/japaninternetcom/index.rdf",
"http://rss.rssad.jp/rss/oshietekun/atom.xml",
"http://rss.rssad.jp/rss/slashdot/slashdot.rss",
"http://rss.rssad.jp/rss/zaikeishimbun/main.xml",
"http://rssc.dokoda.jp/r/8a1dd8f128047929ba4390dab3c8065e/http/searchranking.yahoo.co.jp/realtime_buzz/",
"http://sakurabaryo.com/feed/",
"http://sankei.jp.msn.com/rss/news/points.xml",
"http://sankei.jp.msn.com/rss/news/west_points.xml",
"http://search.goo.ne.jp/rss/newkw.rdf",
"http://sekurosu.com/rss",
"http://streaming.yahoo.co.jp/rss/newly/anime/",
"http://sub0000528116.hmk-temp.com/wordpress/?feed=rss2",
"http://sukebei.nyaa.se/?page=rss&sort=2",
"http://tenshoku.mynavi.jp/knowhow/rss.xml",
"http://tensinyakimeshi.blog98.fc2.com/?xml",
"http://thefreedom12.blog41.fc2.com/?xml",
"http://togetter.com/rss/hot/culture/62",
"http://togetter.com/rss/hot/culture/63",
"http://torimatome.main.jp/blogs/comments/feed",
"http://torimatome.main.jp/blogs/feed",
"http://toshinokyouko.com/rss.php",
"http://tvanimedouga.blog93.fc2.com/?xml",
"http://uranourainformation.blog21.fc2.com/?xml",
"http://video.fc2.com/a/feed_popular.php?m=week",
"http://weather.livedoor.com/forecast/rss/area/400010.xml",
"http://wotopi.jp/feed",
"http://www.100shiki.com/feed",
"http://www.alistapart.com/rss.xml",
"http://www.anime-sharing.com/forum/external.php?type=RSS2&forumids=36",
"http://www.anime-sharing.com/forum/external.php?type=RSS2&forumids=38",
"http://www.anime-sharing.com/forum/external.php?type=RSS2&forumids=47",
"http://www.blosxom.com/?feed=rss2",
"http://www.britannica.com/eb/dailycontent/rss",
"http://www.csmonitor.com/rss/top.rss",
"http://www.ehackingnews.com/feeds/posts/default",
"http://www.falcom.co.jp/new.xml",
"http://www.famitsu.com/rss/category/fcom_game.rdf",
"http://www.famitsu.com/rss/fcom_all.rdf",
"http://www.ganganonline.com/rss/index.xml",
"http://www.ideaxidea.com/feed",
"http://www.itnews711.com/index.rdf",
"http://www.jp.playstation.com/whatsnew/whatsnew.rdf",
"http://www.keyman.or.jp/rss/v1/?rss_type=all",
"http://www.koubo.co.jp/rss.xml",
"http://www.nyaa.se/?page=rss&sort=2",
"http://www.nyaa.se/?page=rss&user=118009",
"http://www.nytimes.com/services/xml/rss/userland/HomePage.xml",
"http://www.phianime.tv/feed/",
"http://www.rebootdevelop.hr/feed/",
"http://www.rictus.com/muchado/feed/",
"http://www.sbcr.jp/atom.xml",
"http://www.slashgear.com/comments/feed/",
"http://www.torrent-anime.com/feed",
"http://www.torrent-anime.com/feed/",
"http://www.webimemo.com/feed/",
"http://www.wired.com/news_drop/netcenter/netcenter.rdf",
"http://www.xvideos.com/rss/rss.xml",
"http://www.youtube.com/rss/user/KADOKAWAanime/videos.rss",
"http://www.youtube.com/rss/user/demosouko/videos.rss",
"http://www.yukawanet.com/index.rdf",
"http://www.zou3.net/php/rss/nikkei2rss.php?head=main",
"http://xml.ehgt.org/ehtracker.xml",
"http://xml.metafilter.com/rss.xml",
"http://xvideos.2jiero.info/feed",
"http://yaraon.blog109.fc2.com/?xml",
"http://yusaani.com/home/feed/",
"http://zipdeyaruo.blog42.fc2.com/?xml",
"http://www.portalgraphics.net/rss/latest_image_list.xml",
"http://api.syosetu.com/writernovel/430380.Atom",
"http://creive.me/feed/",
"http://gihyo.jp/dev/feed/atom",
"http://gihyo.jp/feed/rss1",
"http://hakase255.blog135.fc2.com/?xml",
"http://2ch-ranking.net/rss/zenban.rdf",
"http://www.isus.jp/feed/",
"http://www.jiji.com/rss/ranking.rdf",
"http://jp.gamesindustry.biz/rss/index.xml",
"https://www.youtube.com/feeds/videos.xml?channel_id=UCx1nAvtVDIsaGmCMSe8ofsQ",
"http://zakuzaku911.com/index.rdf",
"http://ke-tai.org/blog/feed/",
"http://data.newantenna.net/ero/rss/all.xml",
"http://developer.mixi.co.jp/feed/atom",
"http://neoneetch.blog.fc2.com/?xml",
"http://rss.itmedia.co.jp/rss/1.0/netlab.xml",
"http://netgeek.biz/feed",
"http://blog.esuteru.com/index.rdf",
"http://b.hatena.ne.jp/hotentry/game.rss",
"http://b.hatena.ne.jp/hotentry.rss",
"http://mobile.seisyun.net/rss/hot.rdf",
"http://yomi.mobi/rss/hot.rdf",
"http://saymygame.com/feed/",
"http://blog.webcreativepark.net/atom.xml",
"http://buhidoh.net/?xml",
"http://www.webcyou.com/?feed=rss2",
"http://withnews.jp/rss/consumer/new.rdf",
"https://yande.re/post/atom?tags=loli",
"http://blog.livedoor.jp/nizigami/atom.xml",
"http://nvmzaq.blog.fc2.com/?xml",
"http://keieimanga.net/index.rdf",
"http://megumi.ldblog.jp/atom.xml",
"http://kirik.tea-nifty.com/diary/index.rdf",
"http://sinri.net/comments/feed",
"http://himasoku.com/atom.xml",
"http://himasoku.com/index.rdf",
"http://20kaido.com/index.rdf",
"http://h723.blog.fc2.com/?xml",
"http://onecall2ch.com/index.rdf",
"http://www.forest.impress.co.jp/rss.xml",
"http://www.zaikei.co.jp/rss/sections/it.xml",
"http://akiba.keizai.biz/rss.xml",
"http://agag.tw/feed/2d-popular.rss",
"http://adult-vr.jp/feed/",
"http://www.anige-sokuhouvip.com/?xml",
"http://animeanime.jp/rss/index.rdf",
"http://alfalfalfa.com/index.rdf",
"http://feeds.feedburner.com/fc2/GhfA",
"http://erogetaiken072.blog.fc2.com/?xml",
"http://otanew.jp/atom.xml",
"http://jin115.com/index.rdf",
"http://www.onlinegamer.jp/rss/news.rdf",
"http://karapaia.livedoor.biz/index.rdf",
"http://getnews.jp/feed/ext/orig",
"http://www.gungho.co.jp/news/xml/rss.xml",
"http://blog.livedoor.jp/kinisoku/index.rdf",
"http://feeds.gizmodo.jp/rss/gizmodo/index.xml",
"http://himado.in/?sort=movie_id&rss=1",
"http://k-tai.impress.co.jp/cda/rss/ktai.rdf",
"http://gehasoku.com/atom.xml",
"http://feedblog.ameba.jp/rss/ameblo/principia-ca/rss20.xml",
"http://zai.diamond.jp/list/feed/rssfxnews",
"http://capacitor.blog.fc2.com/?xml",
"http://blog.livedoor.jp/vipsister23/index.rdf",
"http://vipsister23.com/atom.xml",
"http://b.hatena.ne.jp/search/tag?safe=on&q=2ch&users=500&mode=rss",
"http://b.hatena.ne.jp/search/tag?safe=on&q=%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF&users=500&mode=rss",
"http://b.hatena.ne.jp/search/tag?safe=off&q=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0&users=500&mode=rss",
"http://shikaku2ch.doorblog.jp/atom.xml",
"http://dotinstall.com/lessons.rss",
"http://2ch-ranking.net/rss/news4vip.rdf",
"http://blog.livedoor.jp/insidears/index.rdf",
"http://2ch-ranking.net/rss/newsplus.rdf",
"http://2ch-ranking.net/rss/news.rdf",
"http://nullpoantenna.com/game.rdf",
"http://workingnews.blog117.fc2.com/?xml",
"http://bm.s5-style.com/feed",
"http://2ch-ranking.net/rss/ghard.rdf",
"http://www.724685.com/blog/rss.xml",
"http://www.yukawanet.com/index.rdf",
"http://2ch-ranking.net/rss/bizplus.rdf",
"http://www.nicovideo.jp/ranking/fav/daily/all?rss=2.0&lang=ja-jp",
"http://www.tarikin.net/rss0.rdf",
"http://blog.livedoor.jp/dqnplus/index.rdf",
"http://www.seojapan.com/blog/feed",
"http://2ch-ranking.net/rss/morningcoffee.rdf",
"http://2ch-ranking.net/mt50k.rdf",
"http://rssblog.ameba.jp/yandereotto/rss20.xml",
"https://business.nikkei.com/rss/sns/nb.rdf",
"http://daredemopc.blog51.fc2.com/?xml",
"http://erogetaikenban.blog65.fc2.com/?xml",
"http://news.goo.ne.jp/rss/topstories/gootop/index.rdf",
"http://lanovelien.blog121.fc2.com/?xml",
"http://news.livedoor.com/topics/rss/eco.xml",
"http://ragnarokonline.gungho.jp/index.rdf",
"http://rocketnews24.com/feed/",
"https://news.denfaminicogamer.jp/feed",
"http://www.igda.jp/?feed=rss2",
"http://feeds.cnn.co.jp/cnn/rss"
];
// ==== 既存データのロード ====
if (!localStorage.getItem('verse_shared_rssFeeds')) {
localStorage.setItem('verse_shared_rssFeeds', JSON.stringify(PRESET_RSS));
}
// アプリ状態
let users = JSON.parse(localStorage.getItem('verse_users') || '[]');
let currentUser = JSON.parse(localStorage.getItem('verse_currentUser') || 'null');
let posts = JSON.parse(localStorage.getItem('verse_posts') || '[]');
let isDarkMode = localStorage.getItem('verse_darkMode') === 'true';
let isInitialized = false;
// RSS/BOT状態
let botInterval = null;
let rssInterval = null;
// 共有RSS設定
let sharedRssFeeds = JSON.parse(localStorage.getItem('verse_shared_rssFeeds') || '[]');
let sharedRssInterval = Number(localStorage.getItem('verse_shared_rssInterval')) || 300;
let sharedRssLastIds = JSON.parse(localStorage.getItem('verse_shared_rssLastIds') || '{}');
// 各フィードのON/OFF（true=ON）。未設定はデフォルトON。
let sharedRssEnabled = JSON.parse(localStorage.getItem('verse_shared_rssEnabled') || '{}');
// ===== 認証UI =====
function showAuthModal(mode = 'login', errorMsg = '') {
document.getElementById('auth-title').textContent = (mode === 'register') ? '新規登録' : 'ログイン';
document.getElementById('auth-form').authMode = mode;
document.getElementById('auth-email').value = '';
document.getElementById('auth-password').value = '';
document.getElementById('auth-modal').style.display = '';
document.getElementById('main-content').style.display = 'none';
document.getElementById('auth-error').textContent = errorMsg || '';
document.getElementById('auth-error').style.display = errorMsg ? '' : 'none';
document.getElementById('toggle-auth-mode').textContent = (mode === 'register') ? 'ログインはこちら' : '新規登録はこちら';
}
function hideAuthModal() {
document.getElementById('auth-modal').style.display = 'none';
document.getElementById('main-content').style.display = '';
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('auth-form').onsubmit = function(e) {
e.preventDefault();
const email = document.getElementById('auth-email').value.trim().toLowerCase();
const password = document.getElementById('auth-password').value;
if (!email || !password) {
showAuthModal(this.authMode, 'メールアドレスとパスワードを入力してください');
return;
}
if (this.authMode === 'register') {
if (users.find(u => u.email === email)) {
showAuthModal('register', 'このメールアドレスは既に登録されています');
return;
}
const newUser = {
email,
password,
profile: { icon: 'https://via.placeholder.com/100', username: email.split('@')[0], selfIntro: '' }
};
users.push(newUser);
localStorage.setItem('verse_users', JSON.stringify(users));
currentUser = { email };
localStorage.setItem('verse_currentUser', JSON.stringify(currentUser));
showAuthModal('login', '登録完了！ログインしてください');
} else {
const user = users.find(u => u.email === email && u.password === password);
if (!user) { showAuthModal('login', 'メールアドレスまたはパスワードが違います'); return; }
currentUser = { email };
localStorage.setItem('verse_currentUser', JSON.stringify(currentUser));
hideAuthModal();
initializeApp();
}
};
document.getElementById('toggle-auth-mode').onclick = function() {
const mode = (document.getElementById('auth-title').textContent === '新規登録') ? 'login' : 'register';
showAuthModal(mode);
};
if (!currentUser) showAuthModal('login'); else { hideAuthModal(); initializeApp(); }
});
function logout() {
localStorage.removeItem('verse_currentUser');
currentUser = null;
stopRssAuto();
showAuthModal('login');
}
// ===== 初期化 =====
function initializeApp() {
if (isInitialized) return;
if (!currentUser) { showAuthModal('login'); return; }
users = JSON.parse(localStorage.getItem('verse_users') || '[]');
posts = JSON.parse(localStorage.getItem('verse_posts') || '[]');
isDarkMode = localStorage.getItem('verse_darkMode') === 'true';
const user = users.find(u => u.email === currentUser.email);
window.profile = user ? user.profile : { icon: 'https://via.placeholder.com/100', username: 'ゲストユーザー', selfIntro: '' };
updateAllUI();
updateStatusIndicators();
updateRssUI();
if (isDarkMode) {
document.body.classList.add('dark');
document.body.style.background = 'linear-gradient(135deg, #1a202c 0%, #2d3748 100%)';
} else {
document.body.classList.remove('dark');
document.body.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
}
document.getElementById('main-content').style.display = '';
document.getElementById('logout-btn').style.display = '';
isInitialized = true;
startRssAuto();
addLog('bot-log', 'BOT機能初期化完了', 'success');
addLog('rss-log', 'RSS自動投稿（全体共有）初期化完了', 'success');
}
// ===== 投稿（ユーザー/BOT） =====
function createUserPost() {
const ta = document.getElementById('postContent');
const txt = ta.value.trim();
if (!txt) return alert('投稿内容を入力してください。');
if (!currentUser) return alert('ログインが必要です。');
createPost(txt, 'user', profile.username, profile.icon);
ta.value = '';
updateCharCount();
}
function createPost(content, type = 'user', username = null, icon = null, extra = {}) {
if (!content || !content.trim()) return false;
const post = {
id: Date.now() + Math.random(),
content: content.trim(),
likes: 0,
timestamp: new Date().toLocaleString('ja-JP'),
type,
username: username || profile.username,
icon: icon || profile.icon,
userEmail: currentUser ? currentUser.email : '',
...extra
};
posts.unshift(post);
saveData();
renderTimeline();
return true;
}
function likePost(id) {
const idx = posts.findIndex(p => p.id === id);
if (idx >= 0) {
posts[idx].likes++;
saveData();
renderTimeline();
}
}
function deletePost(id) {
if (!confirm('この投稿を削除しますか？')) return;
posts = posts.filter(p => p.id !== id);
saveData();
renderTimeline();
}
function clearAllPosts() {
if (!confirm('全ての投稿を削除しますか？')) return;
posts = [];
saveData();
renderTimeline();
}
function exportData() {
const blob = new Blob([JSON.stringify(posts, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'verse_posts.json';
a.click();
URL.revokeObjectURL(url);
}
// ===== タイムライン描画（JSX混入の修正・無害化） =====
function escapeHtml(s) {
return (s || '').replace(/[&<>"']/g, m => ({'&':'&','<':'<','>':'>','"':'"','\'':'''}[m]));
}
function renderTimeline() {
const tl = document.getElementById('timeline');
const emp = document.getElementById('empty-timeline');
const cnt = document.getElementById('post-count');
if (!tl || !emp || !cnt) return;
const allPosts = posts;
if (allPosts.length === 0) {
tl.innerHTML = '';
emp.style.display = 'block';
cnt.textContent = '(0件の投稿)';
return;
}
emp.style.display = 'none';
cnt.textContent = `(${allPosts.length}件の投稿)`;
tl.innerHTML = allPosts.map(p => {
const info = { bot: '🤖 BOT', markov: '🎲 MarkovBOT', user: '👤 ユーザー', feed: '📰 FEEDBOT' }[p.type] || '👤';
const main = p.link
? `<a href="${p.link}" target="_blank" class="text-blue-600 underline">${escapeHtml(p.content)}</a>`
: `${escapeHtml(p.content)}`;
return `
<div class="timeline-post p-6">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center space-x-3">
<img src="${p.icon}" class="w-10 h-10 rounded-full object-cover" onerror="this.src='https://via.placeholder.com/40'">
<div>
<div class="flex items-center">
<span class="font-semibold text-gray-800 dark:text-white">${escapeHtml(p.username)}</span>
<span class="username-badge">${info}</span>
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">${p.timestamp}</div>
</div>
</div>
</div>
<div class="text-gray-800 dark:text-gray-200 mb-4 leading-relaxed">${main}</div>
<div class="flex items-center space-x-4 pt-4 border-t border-gray-100 dark:border-gray-600">
<button onclick="likePost(${p.id})" class="flex items-center space-x-2 text-gray-600 dark:text-gray-400 hover:text-red-500">
<i class="fas fa-heart"></i><span>${p.likes}</span>
</button>
<div class="relative">
<button onclick="toggleShareMenu(${p.id})" class="flex items-center space-x-2 text-gray-600 dark:text-gray-400 hover:text-blue-500">
<i class="fas fa-share"></i><span>シェア</span>
</button>
<div id="share-menu-${p.id}" class="share-menu hidden">
<button onclick="shareToX(${p.id})"><i class="fab fa-x-twitter text-blue-400 mr-2"></i>Xでシェア</button>
<button onclick="shareToLine(${p.id})"><i class="fab fa-line text-green-400 mr-2"></i>LINEでシェア</button>
<button onclick="copyPost(${p.id})"><i class="fas fa-copy mr-2"></i>コピー</button>
</div>
</div>
<button onclick="deletePost(${p.id})" class="flex items-center space-x-2 text-gray-600 dark:text-gray-400 hover:text-red-500 ml-auto">
<i class="fas fa-trash"></i><span>削除</span>
</button>
</div>
</div>
`;
}).join('');
}
function getPostContentText(id) {
const p = posts.find(x => x.id === id);
if (!p) return '';
const tmp = document.createElement('div');
tmp.innerHTML = p.content;
return tmp.textContent || tmp.innerText || '';
}
function toggleShareMenu(id) {
document.querySelectorAll('[id^="share-menu-"]')
.forEach(el => el.classList.add('hidden'));
const m = document.getElementById('share-menu-' + id);
if (m) m.classList.toggle('hidden');
}
function shareToX(id) {
const t = encodeURIComponent(getPostContentText(id));
const u = encodeURIComponent(location.href);
window.open(`https://twitter.com/intent/tweet?text=${t}&url=${u}`, '_blank');
}
function shareToLine(id) {
const u = encodeURIComponent(location.href);
window.open(`https://social-plugins.line.me/lineit/share?url=${u}`, '_blank');
}
function copyPost(id) {
const t = getPostContentText(id);
if (navigator.clipboard) {
navigator.clipboard.writeText(t).then(() => alert('コピーしました')).catch(() => fallbackCopy(t));
} else fallbackCopy(t);
}
function fallbackCopy(t) {
const ta = document.createElement('textarea');
ta.value = t; document.body.appendChild(ta);
ta.select(); document.execCommand('copy');
document.body.removeChild(ta);
alert('コピーしました');
}
// ===== RSS UI（個別ON/OFF + 一括ON/OFF） =====
function updateRssUI() {
const listDiv = document.getElementById('rss-list');
if (!listDiv) return;
if (!sharedRssFeeds || sharedRssFeeds.length === 0) {
listDiv.innerHTML = '<div class="text-white text-xs opacity-80">RSSフィード未登録</div>';
} else {
listDiv.innerHTML = sharedRssFeeds.map((url, i) => {
const enabled = sharedRssEnabled[url] !== false; // 既定ON
const enc = encodeURIComponent(url);
return `
<div class="flex items-center space-x-2 bg-white bg-opacity-90 rounded px-2 py-2 mb-1">
<input type="checkbox" ${enabled ? 'checked' : ''} onchange="toggleRssEnabled('${enc}', this.checked)" title="ON/OFF">
<div class="truncate flex-1 text-xs" title="${escapeHtml(url)}">${escapeHtml(url)}</div>
<button onclick="delRssFeed(${i})" class="text-red-500 hover:text-red-700" title="削除"><i class="fas fa-trash"></i></button>
</div>
`;
}).join('');
}
const iv = document.getElementById('rss-interval');
if (iv) iv.value = sharedRssInterval || 300;
}
function toggleRssEnabled(encUrl, on) {
const url = decodeURIComponent(encUrl);
sharedRssEnabled[url] = !!on;
saveSharedRss();
addLog('rss-log', `FEED ${on ? 'ON' : 'OFF'}: ${url}`, 'info');
}
function setAllRssEnabled(on) {
(sharedRssFeeds || []).forEach(u => sharedRssEnabled[u] = !!on);
saveSharedRss();
updateRssUI();
addLog('rss-log', `全フィードを${on ? 'ON' : 'OFF'}にしました`, 'success');
}
function saveSharedRss() {
localStorage.setItem('verse_shared_rssFeeds', JSON.stringify(sharedRssFeeds));
localStorage.setItem('verse_shared_rssInterval', String(sharedRssInterval));
localStorage.setItem('verse_shared_rssLastIds', JSON.stringify(sharedRssLastIds));
localStorage.setItem('verse_shared_rssEnabled', JSON.stringify(sharedRssEnabled));
}
function addRssFeed() {
const url = document.getElementById('rss-url').value.trim();
if (!/^https?:\/\/.+/.test(url)) { addLog('rss-log', '正しいRSSフィードURLを入力してください', 'error'); return; }
if (!sharedRssFeeds) sharedRssFeeds = [];
if (sharedRssFeeds.includes(url)) { addLog('rss-log', 'すでに登録済みです', 'error'); return; }
sharedRssFeeds.push(url);
sharedRssEnabled[url] = true; // 既定ON
saveSharedRss();
updateRssUI();
addLog('rss-log', `RSS追加: ${url}`, 'success');
document.getElementById('rss-url').value = '';
}
function delRssFeed(i) {
if (!sharedRssFeeds[i]) return;
if (!confirm('このフィードを削除しますか？')) return;
const url = sharedRssFeeds[i];
sharedRssFeeds.splice(i, 1);
delete sharedRssEnabled[url];
delete sharedRssLastIds[url];
saveSharedRss();
updateRssUI();
addLog('rss-log', 'RSS削除', 'info');
}
function setRssInterval() {
const iv = document.getElementById('rss-interval').valueAsNumber || 300;
if (iv < 10) return alert('間隔は10秒以上で設定してください。');
sharedRssInterval = iv;
saveSharedRss();
updateRssUI();
startRssAuto();
addLog('rss-log', `自動投稿間隔を${iv}秒に設定`, 'success');
}
function fetchRssNow() { fetchRssFeeds(); }
// ===== RSS取得（OFFのフィードはスキップ） =====
function fetchRssFeeds() {
if (!sharedRssFeeds || sharedRssFeeds.length === 0) return;
sharedRssFeeds.forEach(feedUrl => {
if (sharedRssEnabled[feedUrl] === false) {
addLog('rss-log', `OFFのため取得スキップ: ${feedUrl}`, 'info');
return;
}
fetch('https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent(feedUrl))
.then(resp => resp.json())
.then(data => {
if (!data.items || !data.items.length) return;
let lastId = sharedRssLastIds[feedUrl] || '';
let newItems = [];
for (const item of data.items) {
const guid = item.guid || item.link || item.pubDate || item.title;
if (!lastId || String(guid) > String(lastId)) newItems.push(item);
}
if (newItems.length === 0) return;
newItems.reverse().forEach(item => {
const guid = item.guid || item.link || item.pubDate || item.title;
// FEED本文は省略（タイトル+リンクのみポスト）
if (!posts.some(p => p.type === 'feed' && p.link === item.link)) {
createPost(item.title, 'feed', 'FEEDBOT', 'https://cdn-icons-png.flaticon.com/512/3416/3416046.png', { link: item.link });
addLog('rss-log', `新しい記事: ${item.title}`, 'success');
}
sharedRssLastIds[feedUrl] = guid;
});
saveSharedRss();
})
.catch(() => addLog('rss-log', 'RSS取得エラー: ' + feedUrl, 'error'));
});
}
function startRssAuto() {
stopRssAuto();
fetchRssFeeds();
rssInterval = setInterval(fetchRssFeeds, (sharedRssInterval || 300) * 1000);
updateStatusIndicators();
addLog('rss-log', `RSS自動投稿を開始 (${sharedRssInterval}秒間隔)`, 'success');
}
function stopRssAuto() {
if (rssInterval) clearInterval(rssInterval);
rssInterval = null;
updateStatusIndicators();
addLog('rss-log', 'RSS自動投稿を停止しました', 'info');
}
// ===== BOT =====
function postBotMessage() {
const ta = document.getElementById('botContent');
const txt = ta.value.trim();
if (!txt) return alert('BOT投稿内容を入力してください。');
if (!currentUser) return alert('ログインが必要です。');
if (createPost(txt, 'bot', 'BOT', profile.icon)) {
ta.value = '';
addLog('bot-log', `BOT投稿: "${txt.substring(0, 30)}..."`, 'success');
}
}
function generateMarkovText() {
// FEED（外部記事）は学習対象から除外し、ユーザーとBOT投稿のみ学習
let text = posts
.filter(p => ['user','bot'].includes(p.type))
.map(p => {
const d = document.createElement('div');
d.innerHTML = p.content;
return (d.textContent || d.innerText || '')
.replace(/\s+/g, ' ').replace(/https?:\/\/\S+/g, '').trim();
}).join(' ');
if (text.length < 20) {
const fallbacks = ["今日はいい天気ですね！","最近面白いニュースありましたか？","新しいアイデアが浮かんできました。","皆さんはどう思いますか？"];
return fallbacks[Math.floor(Math.random() * fallbacks.length)];
}
const tokens = text.match(/[\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff\w]+|[。、！？\r\n]/g) || [];
if (tokens.length < 2) return tokens.join('');
const markov = {};
for (let i = 0; i < tokens.length - 2; i++) {
const key = tokens[i] + '|' + tokens[i+1];
if (!markov[key]) markov[key] = [];
markov[key].push(tokens[i+2]);
}
let idx = Math.floor(Math.random() * (tokens.length - 2));
let key = tokens[idx] + '|' + tokens[idx+1];
let result = [tokens[idx], tokens[idx+1]];
let maxLen = 60 + Math.floor(Math.random() * 40);
for (let i = 0; i < maxLen; i++) {
const nexts = markov[key];
if (!nexts || nexts.length === 0) break;
const next = nexts[Math.floor(Math.random() * nexts.length)];
result.push(next);
if (/[。！？\n]/.test(next)) break;
key = result[result.length - 2] + '|' + result[result.length - 1];
}
return result.join('').replace(/\n/g, '');
}
function postMarkovBot() {
const txt = generateMarkovText();
if (createPost(txt, 'markov', 'MarkovBOT', profile.icon)) {
addLog('bot-log', `マルコフ投稿: "${txt.substring(0, 40)}..."`, 'success');
}
}
function startBotAutoPost() {
const iv = document.getElementById('botIntervalSec').valueAsNumber || 60;
if (iv < 10) { alert('間隔は10秒以上で設定してください。'); return; }
stopBotAutoPost();
setTimeout(postMarkovBot, 3000);
botInterval = setInterval(postMarkovBot, iv * 1000);
updateStatusIndicators();
addLog('bot-log', `マルコフBOT自動投稿開始 (${iv}秒間隔)`, 'success');
}
function stopBotAutoPost() {
if (botInterval) {
clearInterval(botInterval);
botInterval = null;
updateStatusIndicators();
addLog('bot-log', 'マルコフBOT自動投稿を停止しました', 'info');
}
}
// ===== 共通UI/保存 =====
function addLog(id, msg, type = 'info') {
const el = document.getElementById(id);
const ts = new Date().toLocaleTimeString('ja-JP');
const div = document.createElement('div');
const cls = { error: 'error-message', success: 'success-message', info: 'text-white opacity-90' }[type] || 'text-white opacity-90';
div.className = cls;
div.innerHTML = `<span class="opacity-75">[${ts}]</span> ${escapeHtml(msg)}`;
if (el) {
el.appendChild(div);
el.scrollTop = el.scrollHeight;
while (el.children.length > 100) el.removeChild(el.firstChild);
}
try { console.log(`[${ts}] ${msg}`); } catch(_) {}
}
function updateStatusIndicators() {
const botI = document.getElementById('bot-status');
const botT = document.getElementById('bot-status-text');
if (botI && botT) {
const active = botInterval !== null;
botI.className = `status-indicator ${active ? 'status-active' : 'status-inactive'}`;
botT.textContent = active ? '動作中' : '停止中';
}
const rssI = document.getElementById('rss-status');
const rssT = document.getElementById('rss-status-text');
if (rssI && rssT) {
const active = rssInterval !== null;
rssI.className = `status-indicator ${active ? 'status-active' : 'status-inactive'}`;
rssT.textContent = active ? '動作中' : '停止中';
}
}
function showSystemStatus() {
alert(
`=== Verse システムステータス ===\n全体投稿数: ${posts.length}\nRSS登録数: ${sharedRssFeeds.length}\nBOT投稿数: ${posts.filter(p => ['bot', 'markov'].includes(p.type)).length}\n\nBOT自動投稿: ${botInterval ? '動作中' : '停止中'}\nRSS自動投稿: ${rssInterval ? '動作中' : '停止中'}`
);
}
function uploadProfileIcon(e) {
const f = e.target.files[0];
if (!f) return;
if (f.size > 5 * 1024 * 1024) { alert('5MB以下にしてください。'); return; }
const r = new FileReader();
r.onload = () => {
profile.icon = r.result;
saveProfileNoAlert();
updateAllUI();
alert('プロフィール画像更新！');
};
r.readAsDataURL(f);
}
function saveProfile() {
const un = document.getElementById('username').value.trim();
const si = document.getElementById('self-intro').value.trim();
if (un.length > 20) { alert('ユーザー名は20文字以内で。'); return; }
profile.username = un || 'ゲストユーザー';
profile.selfIntro = si;
saveProfileNoAlert();
updateAllUI();
alert('プロフィール保存！');
}
function saveProfileNoAlert() {
users = JSON.parse(localStorage.getItem('verse_users') || '[]');
const idx = users.findIndex(u => u.email === (currentUser && currentUser.email));
if (idx >= 0) {
users[idx].profile = profile;
localStorage.setItem('verse_users', JSON.stringify(users));
}
}
function updateAllUI() {
const pi = document.getElementById('profile-icon');
const hi = document.getElementById('header-profile-icon');
if (pi) pi.src = profile.icon;
if (hi) hi.src = profile.icon;
['username-preview','header-username'].forEach(id => {
const el = document.getElementById(id);
if (el) el.textContent = profile.username;
});
const sip = document.getElementById('self-intro-preview');
if (sip) sip.textContent = profile.selfIntro || 'まだ自己紹介がありません';
const emailEl = document.getElementById('header-user-email');
if (emailEl && currentUser) emailEl.textContent = currentUser.email;
renderTimeline();
}
function updateCharCount() {
const pc = document.getElementById('postContent');
const cc = document.getElementById('char-count');
if (pc && cc) {
const l = pc.value.length;
cc.textContent = `(${l}/500)`;
cc.style.color = l > 450 ? '#ef4444' : '';
}
}
function toggleDarkMode() {
isDarkMode = !isDarkMode;
if (isDarkMode) {
document.body.classList.add('dark');
document.body.style.background = 'linear-gradient(135deg, #1a202c 0%, #2d3748 100%)';
} else {
document.body.classList.remove('dark');
document.body.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
}
localStorage.setItem('verse_darkMode', isDarkMode.toString());
}
function saveData() { localStorage.setItem('verse_posts', JSON.stringify(posts)); }
// 入力UIフック
document.addEventListener('DOMContentLoaded', () => {
const pc = document.getElementById('postContent');
if (pc) {
pc.addEventListener('input', updateCharCount);
pc.addEventListener('keydown', e => { if (e.key === 'Enter' && e.ctrlKey) { e.preventDefault(); createUserPost(); } });
}
const ui = document.getElementById('username');
if (ui) ui.addEventListener('input', () => {
const v = ui.value.trim() || 'ゲストユーザー';
['username-preview','header-username'].forEach(id => {
const el = document.getElementById(id);
if (el) el.textContent = v;
});
});
const si = document.getElementById('self-intro');
if (si) si.addEventListener('input', () => {
const v = si.value.trim() || 'まだ自己紹介がありません';
const el = document.getElementById('self-intro-preview');
if (el) el.textContent = v;
});
});
// 終了処理・エラー
window.addEventListener('beforeunload', () => { stopBotAutoPost(); stopRssAuto(); saveData(); });
window.addEventListener('error', e => { addLog('bot-log', `システムエラー: ${e.message}`, 'error'); });
</script>
</body>
</html>
GPT-5
GPT‑5（正式には次世代ChatGPTとしてリリース予定）は、無料プランでも利用可能になる予定で、ユーザーはいわゆる標準的なインテリジェンス設定で無制限にチャット利用できるとOpenAI CEOのサム・アルトマン氏が公式に発表しています。 Plus や Pro の有料プランでは、さらに高度な知能レベルや追加機能にアクセスできるようになります note（ノート）+7note（ノート）+7MiraLab.inc+7。
🎯 どこで無料で使えるか？
- ChatGPT（OpenAI公式ウェブ版／アプリ）
無料アカウントでも GPT‑5（標準モード）を利用可能。乱用防止のための使用制限（例：１日の回数上限など）は設けられる可能性があるが、無制限チャットが基本です Reddit。 - Microsoft Copilot
Windows PCに統合された Copilot は GPT‑5 に対応する「Smart モード」を導入予定で、プラットフォームそのもので GPT‑5 を無料で利用できるようになると見られます（ただし、精度やレスポンスの仕様は流動的）note（ノート）+4note（ノート）+4accelc.co.jp+4。
📋 まとめ
| サービス | GPT‑5 利用状況（無料プラン） |
|---|---|
| ChatGPT（OpenAI公式） | ✅ 無料で標準インテリジェンス設定において無制限利用可能（ただし乱用対策あり） |
| Microsoft Copilot（Windows統合） | ✅ Smart モードで GPT‑5 を採用、無料での使用が期待される |
| その他のAIサービス | 現時点では GPT‑5 の対応情報は限定的 |
ℹ️ 注意点と補足
- GPT‑5 は現在、2025年8月ごろの正式リリースが予定されていますThe Verge。したがって、ChatGPT の無料版でも GPT‑5 を使い始めるのはリリース後になります。
- アルトマン氏は「地球上のすべての人へのGPT‑5の無料提供」を理想として語っていますが、これはまだ公式に実現しているわけではなく、長期的な構想です chatgpt5free.com+15note（ノート）+15shift-ai.co.jp+15。
- 無料プランでは乱用防止や公平性維持のために、トークン制限・アクセス制限などの利用制約が設けられる可能性があります。また、Plus／Pro プランでは優先アクセスや高度な機能が得られます MiraLab.inc+1note（ノート）+1。
✅ ご参考まで
- 使い始めるには？
OpenAI公式サイトまたはモバイルアプリから ChatGPT にサインアップ・ログインすれば、無料プランで GPT‑5（標準モード）が利用可能になります（リリース後）。 - Microsoft Copilot を使うなら？
Windows PC に標準搭載されている Copilot を通じて、GPT‑5 Smart モードで利用できるようになる予定です。
まとめると、GPT‑5 はリリース後に ChatGPT の無料プランで使えます（標準モードで無制限利用、ただし制限あり）。さらに、Microsoft Copilot ユーザーも同時に利用できる可能性があるとの見通しです。
推しログ – 推し活情報共有サービス
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>推しログ - 推し活情報共有サービス</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gradient-to-r from-purple-200 to-indigo-200">
<!-- ヘッダー -->
<header class="bg-purple-600 text-white p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-3xl font-bold"><i class="fa-solid fa-heart mr-2"></i>推しログ</h1>
<nav class="space-x-4">
<a href="#" class="hover:text-gray-200">ホーム</a>
<a href="#" class="hover:text-gray-200">スケジュール</a>
<a href="#" class="hover:text-gray-200">ニュース</a>
<a href="#" class="hover:text-gray-200">ログイン</a>
</nav>
</div>
</header>
<!-- メインコンテンツ -->
<main class="container mx-auto my-8 px-4">
<!-- 推しスケジュール -->
<section class="bg-white p-8 rounded-xl shadow-xl mb-8">
<h2 class="text-2xl font-bold border-b pb-2 mb-4"><i class="fa-regular fa-calendar mr-2"></i>今月の推しスケジュール</h2>
<ul class="space-y-3">
<li class="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow">
<span class="font-semibold">ライブ配信「推しの部屋」</span>
<span class="text-gray-500">8/10(木) 20:00〜</span>
</li>
<li class="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow">
<span class="font-semibold">ニューシングル発売日！</span>
<span class="text-gray-500">8/15(火)</span>
</li>
<li class="flex justify-between items-center p-4 bg-gray-50 rounded-lg shadow">
<span class="font-semibold">ファンクラブ限定イベント</span>
<span class="text-gray-500">8/25(金) 18:30〜</span>
</li>
</ul>
<button class="mt-4 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded">もっと見る</button>
</section>
<!-- 最新推しニュース -->
<section class="bg-white p-8 rounded-xl shadow-xl mb-8">
<h2 class="text-2xl font-bold border-b pb-2 mb-4"><i class="fa-solid fa-newspaper mr-2"></i>最新推しニュース</h2>
<article class="mb-6 border-b pb-4">
<h3 class="font-semibold text-purple-700 mb-1">推しの新曲MVが公開！</h3>
<p class="text-gray-600">待望の新曲MVが公式YouTubeチャンネルにて公開されました！視聴数も急上昇中！</p>
<a href="#" class="text-blue-500 hover:underline">詳しく見る <i class="fa-solid fa-arrow-right ml-1"></i></a>
</article>
<article>
<h3 class="font-semibold text-purple-700 mb-1">推し、テレビ番組に出演決定！</h3>
<p class="text-gray-600">8/12(土)の「音楽バズ」にゲスト出演予定です。特別トークもお楽しみに！</p>
<a href="#" class="text-blue-500 hover:underline">詳しく見る <i class="fa-solid fa-arrow-right ml-1"></i></a>
</article>
<button class="mt-4 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded">もっと見る</button>
</section>
<!-- 推しメンバー紹介 -->
<section class="bg-white p-8 rounded-xl shadow-xl">
<h2 class="text-2xl font-bold border-b pb-2 mb-4"><i class="fa-solid fa-user-group mr-2"></i>推しメンバー紹介</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="text-center">
<img src="https://via.placeholder.com/150" class="rounded-full mx-auto mb-2" alt="推し1">
<h3 class="font-semibold">推しメン1</h3>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/150" class="rounded-full mx-auto mb-2" alt="推し2">
<h3 class="font-semibold">推しメン2</h3>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/150" class="rounded-full mx-auto mb-2" alt="推し3">
<h3 class="font-semibold">推しメン3</h3>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/150" class="rounded-full mx-auto mb-2" alt="推し4">
<h3 class="font-semibold">推しメン4</h3>
</div>
</div>
</section>
</main>
<!-- フッター -->
<footer class="bg-gray-900 text-white text-center py-4 mt-8">
<p class="text-sm">© 2024 推しログ. All rights reserved.</p>
</footer>
</body>
</html>
Verse – 次世代ソーシャルネットワーク
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verse - 次世代ソーシャルネットワーク</title>
<!-- SVG ファビコンを指定 -->
<link rel="shortcut icon" href="favicon.ico">
<!-- PNG版 -->
<link rel="icon" type="image/png" href="favicon.png">
<!-- SVG版 -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/rita@3.0.0/dist/rita.min.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.glass-effect {
background: rgba(255,255,255,0.25);
backdrop-filter: blur(10px);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.18);
}
.card-hover { transition: all 0.3s ease; }
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
.gradient-text {
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-post {
background: white;
border-radius: 15px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
transition: all 0.3s ease;
border-left: 4px solid #667eea;
}
.timeline-post:hover {
transform: translateX(5px);
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 4px solid white;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-primary {
background: linear-gradient(45deg, #667eea, #764ba2);
border: none;
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 7px 14px rgba(0,0,0,0.18);
}
.section-divider {
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 2px;
margin: 2rem 0;
}
.username-badge {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
padding: 0.2rem 0.5rem;
border-radius: 1rem;
font-size: 0.75rem;
font-weight: 600;
display: inline-block;
margin-left: 0.5rem;
}
.share-menu {
position: absolute;
z-index: 50;
min-width: 180px;
right: 0;
top: 110%;
background: white;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}
.share-menu button {
width: 100%;
text-align: left;
padding: 10px 20px;
border: none;
background: none;
cursor: pointer;
font-size: 0.95rem;
}
.share-menu button:hover { background: #f0f4ff; }
.status-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
}
.status-active {
background-color: #10b981;
animation: pulse 2s infinite;
}
.status-inactive { background-color: #6b7280; }
.log-container {
max-height: 150px;
overflow-y: auto;
background: rgba(255,255,255,0.1);
border-radius: 5px;
padding: 10px;
margin-top: 10px;
font-size: 0.8rem;
font-family: monospace;
}
.rss-item {
background: rgba(255,255,255,0.1);
border-radius: 5px;
padding: 8px;
margin: 5px 0;
font-size: 0.8rem;
}
.error-message {
color: #ef4444;
background: rgba(239, 68, 68, 0.1);
padding: 8px;
border-radius: 5px;
margin: 5px 0;
}
.success-message {
color: #10b981;
background: rgba(16, 185, 129, 0.1);
padding: 8px;
border-radius: 5px;
margin: 5px 0;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.dark .glass-effect {
background: rgba(0,0,0,0.3);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
}
.dark .timeline-post {
background: #374151;
color: #f9fafb;
}
@media print {
body { background: white !important; -webkit-print-color-adjust: exact; }
.glass-effect { background: white !important; backdrop-filter: none !important; border: 1px solid #e5e7eb !important; }
}
</style>
</head>
<body>
<header class="glass-effect mx-4 mt-4 p-6">
<div class="text-center">
<h1 class="text-4xl font-bold text-white mb-2">
<i class="fas fa-comments mr-3"></i>Verse
<span class="text-sm opacity-75 ml-2">v2.0 完全修正版</span>
</h1>
<p class="text-white text-lg opacity-90">次世代ソーシャルネットワーク</p>
<div class="mt-4 flex justify-center items-center space-x-4">
<div class="flex items-center">
<img id="header-profile-icon" class="profile-avatar" src="https://via.placeholder.com/100" alt="プロフィール">
<div class="ml-3 text-white">
<div class="font-semibold text-lg" id="header-username">未設定</div>
<div class="text-sm opacity-75">ユーザー</div>
</div>
</div>
<button onclick="toggleDarkMode()" class="btn-primary px-4 py-2 rounded-full text-white">
<i class="fas fa-moon mr-2"></i>ダークモード
</button>
<button onclick="showSystemStatus()" class="btn-primary px-4 py-2 rounded-full text-white">
<i class="fas fa-info-circle mr-2"></i>ステータス
</button>
</div>
</div>
</header>
<div class="max-w-6xl mx-auto px-4 py-6">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 左側カラム -->
<div class="lg:col-span-1 space-y-6">
<!-- プロフィール -->
<div class="glass-effect p-6 card-hover">
<h3 class="text-2xl font-bold gradient-text mb-4">
<i class="fas fa-user-circle mr-2"></i>プロフィール
</h3>
<div class="text-center mb-6">
<img id="profile-icon" class="profile-avatar mx-auto mb-4" src="https://via.placeholder.com/100" alt="プロフィール">
<input type="file" id="profile-upload" accept="image/*" onchange="uploadProfileIcon(event)" class="hidden">
<button onclick="document.getElementById('profile-upload').click()" class="btn-primary px-4 py-2 rounded-full text-white">
<i class="fas fa-camera mr-2"></i>画像変更
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-white font-semibold mb-2">ユーザー名</label>
<input type="text" id="username" class="w-full p-3 border rounded-lg bg-white bg-opacity-90" placeholder="ユーザー名を入力してください" maxlength="20">
</div>
<div>
<label class="block text-white font-semibold mb-2">自己紹介</label>
<textarea id="self-intro" class="w-full p-3 border rounded-lg bg-white bg-opacity-90" rows="4" placeholder="自己紹介を入力してください"></textarea>
</div>
<button onclick="saveProfile()" class="btn-primary w-full py-2 rounded-lg text-white">
<i class="fas fa-save mr-2"></i>プロフィール保存
</button>
<div class="p-3 bg-white bg-opacity-80 rounded-lg">
<h5 class="font-semibold text-gray-800 mb-2">プレビュー:</h5>
<div class="text-gray-700">
<div class="font-semibold mb-1" id="username-preview">未設定</div>
<div id="self-intro-preview" class="text-sm whitespace-pre-line min-h-8">まだ自己紹介がありません</div>
</div>
</div>
</div>
</div>
<!-- BOT機能 -->
<div class="glass-effect p-6 card-hover">
<h3 class="text-xl font-bold text-white mb-4">
<i class="fas fa-robot mr-2"></i>BOT機能
<span class="status-indicator" id="bot-status"></span>
<span id="bot-status-text" class="text-xs opacity-75">停止中</span>
</h3>
<div class="space-y-4">
<div>
<textarea id="botContent" class="w-full p-3 border rounded-lg bg-white bg-opacity-90" rows="3" placeholder="BOT投稿内容"></textarea>
<button onclick="postBotMessage()" class="btn-primary w-full mt-2 py-2 rounded-lg text-white">
<i class="fas fa-robot mr-2"></i>BOT投稿
</button>
</div>
<div>
<input type="number" id="botIntervalSec" class="w-full p-2 border rounded-lg bg-white bg-opacity-90" placeholder="マルコフ自動投稿間隔(秒)" min="10" max="3600" value="60">
<div class="flex space-x-2 mt-2">
<button onclick="postMarkovBot()" class="btn-primary flex-1 py-2 rounded-lg text-white">
<i class="fas fa-dice mr-2"></i>マルコフ生成
</button>
<button onclick="startBotAutoPost()" class="btn-primary flex-1 py-2 rounded-lg text-white">
<i class="fas fa-play mr-2"></i>自動開始
</button>
<button onclick="stopBotAutoPost()" class="bg-red-500 hover:bg-red-600 flex-1 py-2 rounded-lg text-white">
<i class="fas fa-stop mr-2"></i>停止
</button>
</div>
</div>
<div class="text-white text-xs opacity-75">
<i class="fas fa-info-circle mr-1"></i>マルコフ連鎖では過去の投稿からランダムな文章を生成します
</div>
<div id="bot-log" class="log-container text-white text-xs"></div>
</div>
</div>
<!-- RSS機能 -->
<div class="glass-effect p-6 card-hover">
<h3 class="text-xl font-bold text-white mb-4">
<i class="fas fa-rss mr-2"></i>RSS機能
<span class="status-indicator" id="rss-status"></span>
<span id="rss-status-text" class="text-xs opacity-75">停止中</span>
</h3>
<div class="space-y-4">
<div>
<input type="text" id="feedUrl" class="w-full p-3 border rounded-lg bg-white bg-opacity-90" placeholder="RSS URL">
<button onclick="registerFeedUrl()" class="btn-primary w-full mt-2 py-2 rounded-lg text-white">
<i class="fas fa-plus mr-2"></i>フィード登録
</button>
</div>
<div>
<input type="number" id="feedIntervalSec" class="w-full p-2 border rounded-lg bg-white bg-opacity-90" placeholder="RSS自動取得間隔(秒)" min="60" max="3600" value="180">
<div class="flex space-x-2 mt-2">
<button onclick="fetchAllFeeds()" class="btn-primary flex-1 py-2 rounded-lg text-white">
<i class="fas fa-download mr-2"></i>手動取得
</button>
<button onclick="startRSSAutoPost()" class="btn-primary flex-1 py-2 rounded-lg text-white">
<i class="fas fa-play mr-2"></i>自動開始
</button>
<button onclick="stopRSSAutoPost()" class="bg-red-500 hover:bg-red-600 flex-1 py-2 rounded-lg text-white">
<i class="fas fa-stop mr-2"></i>停止
</button>
</div>
</div>
<div class="bg-white bg-opacity-80 rounded-lg p-3">
<div class="flex justify-between items-center mb-2">
<h5 class="font-semibold text-gray-800">登録済みフィード:</h5>
<button onclick="addDefaultFeeds()" class="text-xs bg-blue-500 text-white px-2 py-1 rounded">
デフォルト追加
</button>
</div>
<div id="feed-list" class="text-sm text-gray-700"></div>
</div>
<div id="rss-log" class="log-container text-white text-xs"></div>
</div>
</div>
</div>
<!-- 右側カラム -->
<div class="lg:col-span-2 space-y-6">
<!-- 新規投稿 -->
<div class="glass-effect p-6 card-hover">
<h3 class="text-2xl font-bold gradient-text mb-4">
<i class="fas fa-edit mr-2"></i>新規投稿
</h3>
<div>
<textarea id="postContent" class="w-full p-4 border rounded-lg bg-white bg-opacity-90" rows="4" placeholder="今何を考えていますか？" maxlength="500"></textarea>
<div class="mt-4 flex justify-between items-center">
<div class="text-white text-sm opacity-75">
<i class="fas fa-info-circle mr-1"></i>あなたの思いを共有しましょう
<span id="char-count" class="ml-2">(0/500)</span>
</div>
<button onclick="createUserPost()" class="btn-primary px-6 py-3 rounded-lg text-white font-semibold">
<i class="fas fa-paper-plane mr-2"></i>投稿する
</button>
</div>
</div>
</div>
<div class="section-divider"></div>
<!-- タイムライン -->
<div class="glass-effect p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold text-white">
<i class="fas fa-stream mr-2"></i>タイムライン
<span id="post-count" class="text-sm font-normal opacity-75 ml-2">(0件の投稿)</span>
</h3>
<div class="flex space-x-2">
<button onclick="clearAllPosts()" class="bg-red-500 hover:bg-red-600 px-3 py-1 rounded text-white text-sm">
<i class="fas fa-trash mr-1"></i>全削除
</button>
<button onclick="exportData()" class="bg-green-500 hover:bg-green-600 px-3 py-1 rounded text-white text-sm">
<i class="fas fa-download mr-1"></i>エクスポート
</button>
</div>
</div>
<div id="timeline" class="space-y-4"></div>
<div id="empty-timeline" class="text-center py-12 text-white opacity-75">
<i class="fas fa-comments text-4xl mb-4"></i>
<p class="text-lg">まだ投稿がありません</p>
<p class="text-sm">最初の投稿をして、タイムラインを始めましょう！</p>
</div>
</div>
</div>
</div>
</div>
<footer class="glass-effect mx-4 mb-4 p-4 text-center">
<p class="text-white opacity-75">
<i class="fas fa-copyright mr-2"></i>2025 Verse - 次世代ソーシャルネットワーク v2.0
<span class="ml-4">
<i class="fas fa-bug mr-1"></i>RSS自動投稿完全修正版
</span>
</p>
</footer>
<script>
// === 設定とグローバル変数 ===
const DEFAULT_FEEDS = [
"https://feeds.feedburner.com/hatena/b/hotentry",
"https://gigazine.net/news/rss_2.0/",
"https://rss.cnn.com/rss/edition.rss",
"https://feeds.bbci.co.uk/news/rss.xml",
"https://www.reddit.com/r/worldnews/.rss"
];
const RSS_APIS = [
'https://api.rss2json.com/v1/api.json',
'https://cors-anywhere.herokuapp.com/',
'https://api.allorigins.win/get'
];
// グローバル状態
let posts = JSON.parse(localStorage.getItem('verse_posts') || '[]');
let feedUrls = JSON.parse(localStorage.getItem('verse_feeds') || '[]');
let profile = JSON.parse(localStorage.getItem('verse_profile') || '{}');
let processedItems = new Set(JSON.parse(localStorage.getItem('verse_processed') || '[]'));
// タイマーとステータス
let botInterval = null;
let rssInterval = null;
let isDarkMode = localStorage.getItem('verse_darkMode') === 'true';
let markovChain = null;
let isInitialized = false;
// 統計情報
let stats = {
totalPosts: 0,
rssSuccess: 0,
rssErrors: 0,
botPosts: 0,
lastRSSUpdate: null,
lastBotPost: null
};
// === 初期化処理 ===
function initializeApp() {
if (isInitialized) return;
// プロフィール初期化
if (!profile.icon) profile.icon = 'https://via.placeholder.com/100';
if (!profile.username) profile.username = 'ゲストユーザー';
if (!profile.selfIntro) profile.selfIntro = '';
// デフォルトフィード設定
if (feedUrls.length === 0) {
feedUrls = [...DEFAULT_FEEDS];
saveData();
addLog('rss-log', 'デフォルトRSSフィードを登録しました', 'success');
}
// UI初期化
updateAllUI();
updateStatusIndicators();
// ダークモード適用
if (isDarkMode) {
document.body.classList.add('dark');
document.body.style.background = 'linear-gradient(135deg, #1a202c 0%, #2d3748 100%)';
}
isInitialized = true;
addLog('rss-log', 'アプリケーション初期化完了', 'success');
addLog('bot-log', 'BOT機能初期化完了', 'success');
// 初回RSS取得（遅延実行）
setTimeout(() => {
addLog('rss-log', '初回RSS取得を開始します...', 'info');
fetchAllFeeds();
}, 3000);
}
// === データ管理 ===
function saveData() {
try {
localStorage.setItem('verse_posts', JSON.stringify(posts));
localStorage.setItem('verse_feeds', JSON.stringify(feedUrls));
localStorage.setItem('verse_profile', JSON.stringify(profile));
localStorage.setItem('verse_processed', JSON.stringify([...processedItems]));
localStorage.setItem('verse_darkMode', isDarkMode);
stats.totalPosts = posts.length;
} catch (error) {
console.error('データ保存エラー:', error);
addLog('rss-log', `データ保存エラー: ${error.message}`, 'error');
}
}
function clearAllPosts() {
if (confirm('すべての投稿を削除してもよろしいですか？\nこの操作は元に戻せません。')) {
posts = [];
processedItems.clear();
saveData();
renderTimeline();
addLog('rss-log', 'すべての投稿を削除しました', 'info');
addLog('bot-log', 'すべての投稿を削除しました', 'info');
}
}
function exportData() {
const exportData = {
posts: posts,
profile: profile,
feedUrls: feedUrls,
stats: stats,
exportDate: new Date().toISOString()
};
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `verse_export_${new Date().toISOString().split('T')[0]}.json`;
a.click();
URL.revokeObjectURL(url);
addLog('rss-log', 'データをエクスポートしました', 'success');
}
// === ログ機能 ===
function addLog(elementId, message, type = 'info') {
const logElement = document.getElementById(elementId);
if (!logElement) return;
const timestamp = new Date().toLocaleTimeString('ja-JP');
const logEntry = document.createElement('div');
const typeClass = {
'error': 'error-message',
'success': 'success-message',
'info': 'text-white opacity-75'
}[type] || 'text-white opacity-75';
logEntry.className = typeClass;
logEntry.innerHTML = `<span class="opacity-75">[${timestamp}]</span> ${message}`;
logElement.appendChild(logEntry);
logElement.scrollTop = logElement.scrollHeight;
// ログ数制限
while (logElement.children.length > 50) {
logElement.removeChild(logElement.firstChild);
}
}
// === ステータス管理 ===
function updateStatusIndicators() {
const botIndicator = document.getElementById('bot-status');
const rssIndicator = document.getElementById('rss-status');
const botStatusText = document.getElementById('bot-status-text');
const rssStatusText = document.getElementById('rss-status-text');
if (botIndicator && botStatusText) {
const isActive = botInterval !== null;
botIndicator.className = `status-indicator ${isActive ? 'status-active' : 'status-inactive'}`;
botStatusText.textContent = isActive ? '動作中' : '停止中';
}
if (rssIndicator && rssStatusText) {
const isActive = rssInterval !== null;
rssIndicator.className = `status-indicator ${isActive ? 'status-active' : 'status-inactive'}`;
rssStatusText.textContent = isActive ? '動作中' : '停止中';
}
}
function showSystemStatus() {
const statusInfo = `
=== Verse システムステータス ===
総投稿数: ${stats.totalPosts}
RSS成功: ${stats.rssSuccess}
RSSエラー: ${stats.rssErrors}
BOT投稿数: ${stats.botPosts}
最後のRSS更新: ${stats.lastRSSUpdate || 'なし'}
最後のBOT投稿: ${stats.lastBotPost || 'なし'}
RSS自動取得: ${rssInterval ? '動作中' : '停止中'}
BOT自動投稿: ${botInterval ? '動作中' : '停止中'}
登録フィード数: ${feedUrls.length}
処理済みアイテム: ${processedItems.size}
`;
alert(statusInfo);
}
// === 投稿管理 ===
function createPost(content, type = 'user', username = null, icon = null) {
if (!content || !content.trim()) {
addLog('rss-log', '空のコンテンツは投稿できません', 'error');
return false;
}
// RSS重複チェック
if (type === 'feed') {
const urlMatch = content.match(/href="([^"]+)"/);
const url = urlMatch ? urlMatch[1] : null;
if (url && processedItems.has(url)) {
addLog('rss-log', `重複記事をスキップ: ${url.substring(0, 50)}...`, 'info');
return false;
}
if (url) {
processedItems.add(url);
}
}
const post = {
id: Date.now() + Math.random(),
content: content.trim(),
likes: 0,
timestamp: new Date().toLocaleString('ja-JP'),
type: type,
username: username || profile.username,
icon: icon || profile.icon
};
posts.unshift(post);
// 統計更新
if (type === 'bot' || type === 'markov') {
stats.botPosts++;
stats.lastBotPost = post.timestamp;
}
if (type === 'feed') {
stats.rssSuccess++;
stats.lastRSSUpdate = post.timestamp;
}
saveData();
renderTimeline();
return true;
}
function createUserPost() {
const content = document.getElementById('postContent').value.trim();
if (content) {
if (createPost(content, 'user')) {
document.getElementById('postContent').value = '';
updateCharCount();
addLog('bot-log', 'ユーザー投稿を作成しました', 'success');
}
}
}
function likePost(id) {
const post = posts.find(p => p.id === id);
if (post) {
post.likes++;
saveData();
renderTimeline();
}
}
function deletePost(id) {
if (confirm('この投稿を削除しますか？')) {
const post = posts.find(p => p.id === id);
if (post && post.type === 'feed') {
const urlMatch = post.content.match(/href="([^"]+)"/);
if (urlMatch) {
processedItems.delete(urlMatch[1]);
}
}
posts = posts.filter(p => p.id !== id);
saveData();
renderTimeline();
}
}
// === タイムライン表示 ===
function renderTimeline() {
const timeline = document.getElementById('timeline');
const emptyTimeline = document.getElementById('empty-timeline');
const postCount = document.getElementById('post-count');
if (posts.length === 0) {
timeline.innerHTML = '';
emptyTimeline.style.display = 'block';
postCount.textContent = '(0件の投稿)';
return;
}
emptyTimeline.style.display = 'none';
postCount.textContent = `(${posts.length}件の投稿)`;
timeline.innerHTML = posts.map(post => {
const typeInfo = getPostTypeInfo(post.type);
return `
<div class="timeline-post p-6">
<div class="flex justify-between items-start mb-4">
<div class="flex items-center space-x-3">
<img src="${post.icon}" alt="アバター" class="w-10 h-10 rounded-full object-cover">
<div>
<div class="flex items-center">
<span class="font-semibold text-gray-800 dark:text-white">${post.username}</span>
<span class="username-badge">${typeInfo.badge}</span>
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">${post.timestamp}</div>
</div>
</div>
</div>
<div class="text-gray-800 dark:text-gray-200 mb-4 leading-relaxed">${post.content}</div>
<div class="flex items-center space-x-4 pt-4 border-t border-gray-100 dark:border-gray-600">
<button onclick="likePost(${post.id})" class="flex items-center space-x-2 text-gray-600 dark:text-gray-400 hover:text-red-500 transition-colors">
<i class="fas fa-heart"></i>
<span>${post.likes}</span>
</button>
<div class="relative">
<button onclick="toggleShareMenu(${post.id})" class="flex items-center space-x-2 text-gray-600 dark:text-gray-400 hover:text-blue-500 transition-colors">
<i class="fas fa-share"></i>
<span>シェア</span>
</button>
<div id="share-menu-${post.id}" class="share-menu hidden">
<button onclick="shareToX(${post.id})"><i class="fab fa-x-twitter text-blue-400 mr-2"></i>Xでシェア</button>
<button onclick="shareToLine(${post.id})"><i class="fab fa-line text-green-400 mr-2"></i>LINEでシェア</button>
<button onclick="copyPost(${post.id})"><i class="fas fa-copy mr-2"></i>コピー</button>
</div>
</div>
<button onclick="deletePost(${post.id})" class="flex items-center space-x-2 text-gray-600 dark:text-gray-400 hover:text-red-500 transition-colors ml-auto">
<i class="fas fa-trash"></i>
<span>削除</span>
</button>
</div>
</div>
`;
}).join('');
}
function getPostTypeInfo(type) {
const typeMap = {
'bot': { badge: '🤖 BOT' },
'markov': { badge: '🎲 MarkovBOT' },
'feed': { badge: '📡 RSS Feed' },
'user': { badge: '👤 ユーザー' }
};
return typeMap[type] || typeMap['user'];
}
// === シェア機能 ===
function getPostContentText(id) {
const post = posts.find(p => p.id === id);
if (!post) return '';
const tempDiv = document.createElement('div');
tempDiv.innerHTML = post.content;
return tempDiv.textContent || tempDiv.innerText || '';
}
function toggleShareMenu(id) {
document.querySelectorAll('[id^="share-menu-"]').forEach(el => el.classList.add('hidden'));
const menu = document.getElementById('share-menu-' + id);
if (menu) {
menu.classList.toggle('hidden');
setTimeout(() => {
const closeMenu = (e) => {
if (!menu.contains(e.target)) {
menu.classList.add('hidden');
document.removeEventListener('mousedown', closeMenu);
}
};
document.addEventListener('mousedown', closeMenu);
}, 100);
}
}
function shareToX(id) {
const text = encodeURIComponent(getPostContentText(id));
const url = encodeURIComponent(location.href);
window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, '_blank');
}
function shareToLine(id) {
const text = encodeURIComponent(getPostContentText(id) + ' ' + location.href);
window.open(`https://social-plugins.line.me/lineit/share?url=${text}`, '_blank');
}
function copyPost(id) {
const text = getPostContentText(id);
navigator.clipboard.writeText(text).then(() => {
alert('投稿内容をクリップボードにコピーしました！');
}).catch(() => {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
alert('投稿内容をコピーしました！');
});
}
// === BOT機能 ===
function postBotMessage() {
const content = document.getElementById('botContent').value.trim();
if (content) {
if (createPost(content, 'bot', 'BOT')) {
document.getElementById('botContent').value = '';
addLog('bot-log', `BOT投稿: "${content.substring(0, 30)}..."`, 'success');
}
}
}
// === マルコフ連鎖機能（強化版） ===
function initializeMarkovChain() {
try {
if (typeof RiTa === 'undefined') {
addLog('bot-log', 'RiTaライブラリが未読み込みです', 'error');
return false;
}
markovChain = new RiTa.Markov(3);
const userPosts = posts.filter(p =>
(p.type === 'user' || p.type === 'bot') &&
p.content.length > 20 &&
!p.content.includes('<div') &&
!p.content.includes('href=')
);
if (userPosts.length < 5) {
addLog('bot-log', `学習データ不足 (${userPosts.length}件) - 5件以上必要`, 'error');
return false;
}
const textData = userPosts
.map(p => cleanTextForMarkov(p.content))
.filter(text => text.length > 15)
.join('\n');
if (textData.length < 200) {
addLog('bot-log', 'テキストデータが不十分です', 'error');
return false;
}
markovChain.addText(textData);
addLog('bot-log', `マルコフ連鎖学習完了 (${userPosts.length}件の投稿を学習)`, 'success');
return true;
} catch (error) {
addLog('bot-log', `マルコフ初期化エラー: ${error.message}`, 'error');
return false;
}
}
function cleanTextForMarkov(text) {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = text;
let cleanText = tempDiv.textContent || tempDiv.innerText || '';
cleanText = cleanText
.replace(/https?:\/\/[^\s]+/g, '')
.replace(/[^\u3040-\u309F\u30A0-\u30FF\u4E00-\u9FAF\u3400-\u4DBFa-zA-Z0-9\s！？。、.,!?\n]/g, '')
.replace(/\s+/g, ' ')
.replace(/[。！？]{2,}/g, '。')
.trim();
return cleanText;
}
function generateMarkovText() {
try {
if (!initializeMarkovChain()) {
const fallbackMessages = [
"今日はいい天気ですね！どのように過ごされていますか？",
"最近面白いニュースありましたか？",
"新しいアイデアが浮かんできました。",
"皆さんはどう思いますか？",
"今日も一日頑張りましょう！"
];
return fallbackMessages[Math.floor(Math.random() * fallbackMessages.length)];
}
let bestText = '';
const maxAttempts = 15;
for (let i = 0; i < maxAttempts; i++) {
try {
const options = {
maxLength: 120,
minLength: 20,
count: Math.floor(Math.random() * 2) + 1
};
const sentences = markovChain.generate(options);
if (sentences && sentences.length > 0) {
let generatedText = sentences.join(' ').trim();
// 文章の自然な終端処理
if (generatedText.length > 150) {
const endMarkers = ['。', '！', '？'];
let bestEnd = -1;
endMarkers.forEach(marker => {
const pos = generatedText.lastIndexOf(marker, 130);
if (pos > 30) bestEnd = Math.max(bestEnd, pos);
});
if (bestEnd > -1) {
generatedText = generatedText.substring(0, bestEnd + 1);
}
}
// 品質チェック
if (generatedText.length >= 20 &&
generatedText.length <= 200 &&
!generatedText.includes('undefined') &&
generatedText.length > bestText.length) {
bestText = generatedText;
}
}
} catch (genError) {
continue;
}
}
if (!bestText || bestText.length < 10) {
bestText = "新しいアイデアについて考えています。皆さんの意見も聞きたいですね。";
}
return bestText;
} catch (error) {
addLog('bot-log', `マルコフ生成エラー: ${error.message}`, 'error');
return "マルコフ連鎖で自然な文章を生成しています。";
}
}
function postMarkovBot() {
const content = generateMarkovText();
if (createPost(content, 'markov', 'MarkovBOT')) {
addLog('bot-log', `マルコフ投稿: "${content.substring(0, 40)}..."`, 'success');
}
}
function startBotAutoPost() {
const interval = parseInt(document.getElementById('botIntervalSec').value) || 60;
if (interval < 10) {
alert('間隔は10秒以上で設定してください。');
return;
}
stopBotAutoPost();
// 初回投稿
setTimeout(postMarkovBot, 2000);
botInterval = setInterval(() => {
postMarkovBot();
}, interval * 1000);
updateStatusIndicators();
addLog('bot-log', `マルコフBOT自動投稿開始 (${interval}秒間隔)`, 'success');
}
function stopBotAutoPost() {
if (botInterval) {
clearInterval(botInterval);
botInterval = null;
updateStatusIndicators();
addLog('bot-log', 'マルコフBOT自動投稿を停止しました', 'info');
}
}
// === RSS機能（完全修正版） ===
function addDefaultFeeds() {
let addedCount = 0;
DEFAULT_FEEDS.forEach(url => {
if (!feedUrls.includes(url)) {
feedUrls.push(url);
addedCount++;
}
});
if (addedCount > 0) {
saveData();
renderFeedList();
addLog('rss-log', `${addedCount}件のデフォルトフィードを追加しました`, 'success');
} else {
addLog('rss-log', 'すべてのデフォルトフィードは既に登録されています', 'info');
}
}
function registerFeedUrl() {
const url = document.getElementById('feedUrl').value.trim();
if (!url) {
alert('URLを入力してください。');
return;
}
if (!url.startsWith('http')) {
alert('有効なURLを入力してください（http://またはhttps://で開始）。');
return;
}
if (feedUrls.includes(url)) {
alert('このフィードは既に登録されています。');
return;
}
feedUrls.push(url);
saveData();
renderFeedList();
document.getElementById('feedUrl').value = '';
addLog('rss-log', `フィード登録: ${url}`, 'success');
}
function removeFeedUrl(index) {
if (confirm('このフィードを削除しますか？')) {
const removedUrl = feedUrls[index];
feedUrls.splice(index, 1);
saveData();
renderFeedList();
addLog('rss-log', `フィード削除: ${removedUrl}`, 'info');
}
}
function renderFeedList() {
const feedList = document.getElementById('feed-list');
if (feedUrls.length === 0) {
feedList.innerHTML = '<div class="text-gray-500">登録されたフィードはありません</div>';
return;
}
feedList.innerHTML = feedUrls.map((url, index) => `
<div class="rss-item flex items-center justify-between">
<span class="text-xs truncate flex-1" title="${url}">${url}</span>
<button onclick="removeFeedUrl(${index})" class="text-red-500 hover:text-red-700 ml-2 text-xs">
<i class="fas fa-times"></i>
</button>
</div>
`).join('');
}
// 改良されたRSS取得機能
async function fetchAllFeeds() {
if (feedUrls.length === 0) {
addLog('rss-log', 'RSSフィードが登録されていません', 'error');
return;
}
addLog('rss-log', `RSS取得開始 (${feedUrls.length}件のフィード)`, 'info');
let successCount = 0;
let errorCount = 0;
for (let i = 0; i < feedUrls.length; i++) {
const url = feedUrls[i];
try {
addLog('rss-log', `[${i + 1}/${feedUrls.length}] 取得中: ${url.substring(0, 50)}...`, 'info');
const success = await fetchSingleFeed(url);
if (success) {
successCount++;
addLog('rss-log', `✓ 成功: ${url.substring(0, 50)}...`, 'success');
} else {
errorCount++;
addLog('rss-log', `✗ 失敗: ${url.substring(0, 50)}...`, 'error');
}
} catch (error) {
errorCount++;
addLog('rss-log', `✗ エラー: ${error.message}`, 'error');
}
// レート制限対策（フィード間に待機時間）
if (i < feedUrls.length - 1) {
await sleep(2000);
}
}
stats.rssSuccess += successCount;
stats.rssErrors += errorCount;
const resultMsg = `RSS取得完了: 成功 ${successCount}件 / エラー ${errorCount}件`;
addLog('rss-log', resultMsg, successCount > 0 ? 'success' : 'error');
if (successCount > 0) {
saveData();
}
}
async function fetchSingleFeed(feedUrl) {
const apis = [
// API 1: rss2json
async () => {
const response = await fetchWithTimeout(
`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(feedUrl)}&count=5`,
10000
);
const data = await response.json();
if (data.status !== 'ok') {
throw new Error(data.message || 'RSS API error');
}
return data.items || [];
},
// API 2: allorigins
async () => {
const response = await fetchWithTimeout(
`https://api.allorigins.win/get?url=${encodeURIComponent(feedUrl)}`,
10000
);
const data = await response.json();
if (!data.contents) {
throw new Error('No contents returned');
}
return parseRSSContent(data.contents);
}
];
for (const api of apis) {
try {
const items = await api();
return await processRSSItems(items, feedUrl);
} catch (error) {
continue;
}
}
return false;
}
async function processRSSItems(items, feedUrl) {
if (!items || items.length === 0) {
return false;
}
let processedCount = 0;
for (const item of items.slice(0, 3)) { // 最大3件まで
if (!item.title || !item.link) continue;
// 重複チェック
if (processedItems.has(item.link)) {
continue;
}
const cleanTitle = cleanHTML(item.title).substring(0, 100);
const cleanDescription = item.description
? cleanHTML(item.description).substring(0, 150)
: '';
const content = createRSSPostContent(cleanTitle, cleanDescription, item.link, feedUrl);
if (createPost(content, 'feed', 'RSS Feed')) {
processedCount++;
processedItems.add(item.link);
// 投稿間の間隔
if (processedCount < 3) {
await sleep(1000);
}
}
}
return processedCount > 0;
}
function createRSSPostContent(title, description, link, feedUrl) {
const feedDomain = new URL(feedUrl).hostname;
return `
<div class="border-l-4 border-blue-500 pl-4 bg-gray-50 dark:bg-gray-700 rounded-r-lg p-3">
<h4 class="font-semibold mb-2 text-gray-900 dark:text-white">${title}</h4>
${description ? `<p class="text-sm text-gray-600 dark:text-gray-300 mb-3">${description}${description.length >= 150 ? '...' : ''}</p>` : ''}
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500 dark:text-gray-400">
<i class="fas fa-globe mr-1"></i>${feedDomain}
</span>
<a href="${link}" target="_blank" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 text-sm font-medium">
<i class="fas fa-external-link-alt mr-1"></i>記事を読む
</a>
</div>
</div>
`;
}
function parseRSSContent(xmlContent) {
// 簡易XMLパース（実装を簡略化）
const items = [];
const parser = new DOMParser();
const doc = parser.parseFromString(xmlContent, 'text/xml');
const rssItems = doc.querySelectorAll('item');
rssItems.forEach(item => {
const title = item.querySelector('title')?.textContent;
const link = item.querySelector('link')?.textContent;
const description = item.querySelector('description')?.textContent;
if (title && link) {
items.push({ title, link, description });
}
});
return items;
}
function cleanHTML(text) {
if (!text) return '';
const tempDiv = document.createElement('div');
tempDiv.innerHTML = text;
return (tempDiv.textContent || tempDiv.innerText || '').trim();
}
async function fetchWithTimeout(url, timeout = 10000) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), timeout);
try {
const response = await fetch(url, {
signal: controller.signal,
headers: {
'Accept': 'application/json',
'User-Agent': 'Verse RSS Reader 2.0'
}
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return response;
} finally {
clearTimeout(timeoutId);
}
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function startRSSAutoPost() {
const interval = parseInt(document.getElementById('feedIntervalSec').value) || 180;
if (interval < 60) {
alert('間隔は60秒以上で設定してください。');
return;
}
stopRSSAutoPost();
// 初回実行（少し遅延）
setTimeout(() => {
addLog('rss-log', '自動RSS取得の初回実行を開始...', 'info');
fetchAllFeeds();
}, 5000);
rssInterval = setInterval(() => {
addLog('rss-log', '定期RSS取得を実行中...', 'info');
fetchAllFeeds();
}, interval * 1000);
updateStatusIndicators();
addLog('rss-log', `RSS自動取得開始 (${interval}秒間隔)`, 'success');
}
function stopRSSAutoPost() {
if (rssInterval) {
clearInterval(rssInterval);
rssInterval = null;
updateStatusIndicators();
addLog('rss-log', 'RSS自動取得を停止しました', 'info');
}
}
// === プロフィール機能 ===
function uploadProfileIcon(event) {
const file = event.target.files[0];
if (!file) return;
if (file.size > 5 * 1024 * 1024) {
alert('画像サイズは5MB以下にしてください。');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
profile.icon = e.target.result;
updateAllUI();
saveData();
alert('プロフィール画像を更新しました！');
};
reader.readAsDataURL(file);
}
function saveProfile() {
const username = document.getElementById('username').value.trim();
const selfIntro = document.getElementById('self-intro').value.trim();
if (username && username.length > 20) {
alert('ユーザー名は20文字以内で入力してください。');
return;
}
profile.username = username || 'ゲストユーザー';
profile.selfIntro = selfIntro;
updateAllUI();
saveData();
alert('プロフィールを保存しました！');
}
// === UI更新 ===
function updateAllUI() {
// プロフィール画像更新
const profileIcon = document.getElementById('profile-icon');
const headerIcon = document.getElementById('header-profile-icon');
if (profileIcon) profileIcon.src = profile.icon;
if (headerIcon) headerIcon.src = profile.icon;
// ユーザー名更新
const usernameElements = ['username-preview', 'header-username'];
usernameElements.forEach(id => {
const element = document.getElementById(id);
if (element) element.textContent = profile.username;
});
// 自己紹介更新
const selfIntroPreview = document.getElementById('self-intro-preview');
if (selfIntroPreview) {
selfIntroPreview.textContent = profile.selfIntro || 'まだ自己紹介がありません';
}
// タイムライン再描画
renderTimeline();
renderFeedList();
}
function updateCharCount() {
const postContent = document.getElementById('postContent');
const charCount = document.getElementById('char-count');
if (postContent && charCount) {
const length = postContent.value.length;
charCount.textContent = `(${length}/500)`;
charCount.style.color = length > 450 ? '#ef4444' : '';
}
}
function toggleDarkMode() {
isDarkMode = !isDarkMode;
if (isDarkMode) {
document.body.classList.add('dark');
document.body.style.background = 'linear-gradient(135deg, #1a202c 0%, #2d3748 100%)';
} else {
document.body.classList.remove('dark');
document.body.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
}
saveData();
}
// === イベントリスナー ===
document.addEventListener('DOMContentLoaded', function() {
// 文字数カウンター
const postContent = document.getElementById('postContent');
if (postContent) {
postContent.addEventListener('input', updateCharCount);
}
// プロフィール入力のリアルタイム更新
const usernameInput = document.getElementById('username');
const selfIntroInput = document.getElementById('self-intro');
if (usernameInput) {
usernameInput.addEventListener('input', function() {
const username = this.value.trim() || 'ゲストユーザー';
document.getElementById('username-preview').textContent = username;
document.getElementById('header-username').textContent = username;
});
}
if (selfIntroInput) {
selfIntroInput.addEventListener('input', function() {
const selfIntro = this.value.trim() || 'まだ自己紹介がありません';
document.getElementById('self-intro-preview').textContent = selfIntro;
});
}
});
// === 初期化実行 ===
window.addEventListener('load', function() {
// アプリ初期化
initializeApp();
// プロフィール情報を入力フィールドに設定
document.getElementById('username').value = profile.username || '';
document.getElementById('self-intro').value = profile.selfIntro || '';
// ページ終了時のクリーンアップ
window.addEventListener('beforeunload', function() {
stopBotAutoPost();
stopRSSAutoPost();
saveData();
});
});
</script>
</body>
</html>VerseVR
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Verse – プロダクション級ソーシャルVR</title>
<!-- A-Frame Core -->
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<!-- Networked-AFrame for multi-user sync -->
<script src="https://unpkg.com/networked-aframe@0.8.0/dist/networked-aframe.min.js"></script>
<!-- GUI for VR buttons -->
<script src="https://unpkg.com/aframe-gui/dist/aframe-gui.min.js"></script>
<!-- Environment presets -->
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<!-- Extras: teleport, locomotion, physics, super-hands -->
<script src="https://unpkg.com/aframe-extras@6.1.1/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-super-hands-component@4.0.3/dist/aframe-super-hands.min.js"></script>
<!-- Socket.IO for signaling -->
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
<!-- Simple-Peer for WebRTC voice chat -->
<script src="https://unpkg.com/simple-peer@9.11.0/simplepeer.min.js"></script>
<style>
body { margin: 0; }
#vr-scene { width: 100%; height: 100vh; }
.interactive:hover { animation: pulse 0.5s infinite alternate; }
@keyframes pulse { to { scale: 1.05; } }
</style>
</head>
<body>
<a-scene id="vr-scene"
networked-scene="room: verse-room; serverURL: https://YOUR_SIGNAL_SERVER; app: verse-vr; debug: false"
environment="preset: forest; groundColor:#445; skyColor:#889"
extras="teleportControls: true; locomotionControls: true"
physics="gravity: -9.8; debug: false">
<!-- Assets -->
<a-assets>
<audio id="click-sound" src="click.mp3"></audio>
<a-asset-item id="avatarModel" src="avatar.glb"></a-asset-item>
<img id="panel-bg" src="panel-bg.png" />
</a-assets>
<!-- Camera Rig -->
<a-entity id="cameraRig" position="0 1.6 0"
locomotion-controls="fly:false; speed:4"
teleport-controls="button: trigger; collisionEntities: #ground">
<a-entity camera look-controls>
<a-cursor fuse="true" fuseTimeout="300" material="color:cyan; shader:flat"></a-cursor>
</a-entity>
<a-entity hand-tracking-controls="hand: left" super-hands></a-entity>
<a-entity hand-tracking-controls="hand: right" super-hands></a-entity>
</a-entity>
<!-- Ground -->
<a-plane id="ground" position="0 0 0" rotation="-90 0 0" width="50" height="50" color="#444" static-body></a-plane>
<!-- Avatar Sync Template -->
<template id="avatar-template">
<a-entity>
<a-gltf-model src="#avatarModel" scale="0.6 0.6 0.6"></a-gltf-model>
</a-entity>
</template>
<a-entity networked-avatar networked="template:#avatar-template; attachTemplateToLocal:false"></a-entity>
<!-- GUI Menu -->
<a-gui-flex-container id="menu" flex-direction="row" justify-content="space-around"
panel-width="2" panel-height="0.2"
component-padding="0.05 0.1"
position="0 2 -1.5" material="src:#panel-bg; transparent:true">
<a-gui-button id="btnTextPost" value="Text Post" on-click="openTextInput()" font-size="28px" color="black"></a-gui-button>
<a-gui-button id="btnVoicePost" value="Voice Post" on-click="startVoiceRecognition()" font-size="28px" color="black"></a-gui-button>
<a-gui-button id="btnGPTChat" value="GPT BOT" on-click="callGPTBot()" font-size="28px" color="black"></a-gui-button>
<a-gui-button id="btnLikeMode" value="Like/Delete" on-click="toggleLikeMode()" font-size="28px" color="black"></a-gui-button>
<a-gui-button id="btnSpawnCube" value="Spawn Cube" on-click="spawnCube()" font-size="28px" color="black"></a-gui-button>
<a-gui-button id="btnVoiceChat" value="Voice Chat" on-click="toggleVoiceChat()" font-size="28px" color="black"></a-gui-button>
</a-gui-flex-container>
<!-- Containers -->
<a-entity id="post-container"></a-entity>
<a-entity id="ugc-container"></a-entity>
</a-scene>
<script>
// ----------- データ -----------
let posts = JSON.parse(localStorage.getItem('posts')||'[]');
let likeMode = false;
let recognition;
let socket = io('https://YOUR_SIGNAL_SERVER');
let peers = {};
let localStream;
// ----------- 投稿レンダリング -----------
function renderPosts() {
const container = document.getElementById('post-container');
container.innerHTML = '';
posts.forEach((p,i)=>{
const angle = (i/posts.length)*Math.PI*2;
const x = Math.cos(angle)*2;
const z = Math.sin(angle)*2;
const postEl = document.createElement('a-entity');
postEl.classList.add('interactive');
postEl.setAttribute('geometry','primitive: plane; width:1.2; height:0.5');
postEl.setAttribute('material','color:#fff; shader:flat');
postEl.setAttribute('position',`${x} 1.3 ${z}`);
postEl.setAttribute('rotation',`0 ${-angle*180/Math.PI+90} 0`);
postEl.setAttribute('text',`value:${p.content}; width:1.1; align:center; color:#000`);
// クリック処理
postEl.addEventListener('click', ()=>{
if(likeMode) {
p.likes = (p.likes||0)+1;
savePosts(); renderPosts();
}
});
// 削除ボタン
if(likeMode) {
const delBtn = document.createElement('a-entity');
delBtn.setAttribute('geometry','primitive: plane; width:0.2; height:0.1');
delBtn.setAttribute('material','color:#f88; shader:flat');
delBtn.setAttribute('position','0.55 -0.25 0.01');
delBtn.setAttribute('text','value:Del; width:0.2; align:center; color:#000');
delBtn.addEventListener('click', ()=>{ posts.splice(i,1); savePosts(); renderPosts(); });
postEl.appendChild(delBtn);
}
container.appendChild(postEl);
});
}
function savePosts(){ localStorage.setItem('posts', JSON.stringify(posts)); }
// ----------- テキスト投稿 -----------
window.openTextInput = ()=>{
const txt = prompt('投稿内容を入力してください');
if(txt){ posts.unshift({content:txt, likes:0}); savePosts(); renderPosts(); socket.emit('new-post', txt); }
};
// ----------- 音声投稿 -----------
window.startVoiceRecognition = ()=>{
if(!('webkitSpeechRecognition' in window)) return alert('音声認識非対応');
recognition = new webkitSpeechRecognition();
recognition.lang='ja-JP'; recognition.interimResults=false;
recognition.onresult=e=>{ const txt=e.results[0][0].transcript; posts.unshift({content:txt,likes:0}); savePosts(); renderPosts(); };
recognition.onerror=()=>alert('認識エラー'); recognition.start();
};
// ----------- GPT BOT -----------
window.callGPTBot = async ()=>{
const key='YOUR_OPENAI_API_KEY';
const res=await fetch('https://api.openai.com/v1/chat/completions',{ method:'POST',
headers:{'Content-Type':'application/json','Authorization':`Bearer ${key}`},
body:JSON.stringify({ model:'gpt-4o-mini', messages:[{role:'system',content:'あなたはVR BOTです。'}]
.concat(posts.slice(0,5).map(p=>({role:'user',content:p.content}))), max_tokens:50 })
});
const js=await res.json();
const txt=js.choices[0].message.content.trim();
posts.unshift({content:`🤖 GPT: ${txt}`,likes:0}); savePosts(); renderPosts();
};
// ----------- いいね／削除モード -----------
window.toggleLikeMode = ()=>{ likeMode=!likeMode; renderPosts(); };
// ----------- UGC: キューブ生成 -----------
window.spawnCube = ()=>{
const c=document.createElement('a-box');
c.setAttribute('class','interactive');
c.setAttribute('position','0 1 -1'); c.setAttribute('depth','0.5'); c.setAttribute('height','0.5'); c.setAttribute('width','0.5');
c.setAttribute('material','color:#4CC3D9'); c.setAttribute('dynamic-body','');
c.setAttribute('grabbable',''); c.setAttribute('stretchable','');
document.getElementById('ugc-container').appendChild(c);
};
// ----------- Voice Chat -----------
window.toggleVoiceChat = ()=>{ localStream?stopVoiceChat():startVoiceChat(); };
async function startVoiceChat() {
localStream = await navigator.mediaDevices.getUserMedia({audio:true});
socket.emit('join-voice');
socket.on('signal', ({ id, signal })=>{
if(!peers[id]) createPeer(id, false);
peers[id].signal(signal);
});
socket.on('user-joined', id=>{ createPeer(id, true); });
function createPeer(id, initiator) {
const peer = new SimplePeer({ initiator, trickle:false, stream:localStream });
peer.on('signal', signal=>{ socket.emit('signal',{ id: socket.id, to:id, signal }); });
peer.on('stream', stream=>{ const e=document.createElement('audio'); e.srcObject=stream; e.autoplay=true; document.body.appendChild(e); });
peers[id]=peer;
}
}
function stopVoiceChat(){ Object.values(peers).forEach(p=>p.destroy()); peers={}; localStream.getTracks().forEach(t=>t.stop()); localStream=null; }
// ----------- Socket.IO イベント -----------
socket.on('new-post', txt=>{ posts.unshift({content:txt,likes:0}); savePosts(); renderPosts(); });
// ----------- 初期ロード -----------
document.querySelector('a-scene').addEventListener('loaded', ()=>{ renderPosts(); });
</script>
</body>
</html>
C++の基礎と応用
C＋＋の基礎
ChatGPT:
C++の基礎を簡潔にまとめます。
■ 1. 基本構造
cppコピーする編集する#include <iostream> // 標準入出力
int main() {
std::cout << "Hello, World!" << std::endl;
return 0;
}
#include <iostream>: 入出力用int main(): プログラムの開始点std::cout: コンソール出力return 0: 正常終了
■ 2. 変数
cppコピーする編集するint number = 10;
double pi = 3.14;
char letter = 'A';
std::string text = "Hello";
bool flag = true;
■ 3. 条件分岐
cppコピーする編集するif (number > 5) {
std::cout << "Greater than 5" << std::endl;
} else {
std::cout << "5 or less" << std::endl;
}
■ 4. ループ
- for
cppコピーする編集するfor (int i = 0; i < 5; i++) {
std::cout << i << std::endl;
}
- while
cppコピーする編集するint i = 0;
while (i < 5) {
std::cout << i << std::endl;
i++;
}
■ 5. 関数
cppコピーする編集するint add(int a, int b) {
return a + b;
}
int main() {
std::cout << add(3, 4) << std::endl; // 7
return 0;
}
■ 6. クラス
cppコピーする編集するclass Person {
public:
std::string name;
void greet() {
std::cout << "Hello, " << name << std::endl;
}
};
int main() {
Person p;
p.name = "Taro";
p.greet();
return 0;
}
■ 7. ポインタ
cppコピーする編集するint num = 10;
int* ptr = #
std::cout << *ptr << std::endl; // 10
もし「もっと詳しく」「演習問題」など希望があれば教えてください。
あなた:
C＋＋の応用
ChatGPT:
C++の応用的な内容を段階的に紹介します。
■ 1. 参照とポインタの応用
ポインタ
cppコピーする編集するvoid swap(int* a, int* b) {
int temp = *a;
*a = *b;
*b = temp;
}
参照
cppコピーする編集するvoid swap(int& a, int& b) {
int temp = a;
a = b;
b = temp;
}
■ 2. クラスのコンストラクタ・デストラクタ
cppコピーする編集するclass Person {
public:
std::string name;
Person(std::string n) : name(n) {
std::cout << name << " created" << std::endl;
}
~Person() {
std::cout << name << " destroyed" << std::endl;
}
};
■ 3. 継承とポリモーフィズム
cppコピーする編集するclass Animal {
public:
virtual void speak() {
std::cout << "Some sound" << std::endl;
}
};
class Dog : public Animal {
public:
void speak() override {
std::cout << "Woof!" << std::endl;
}
};
void makeSound(Animal* a) {
a->speak();
}
■ 4. テンプレート
cppコピーする編集するtemplate <typename T>
T add(T a, T b) {
return a + b;
}
■ 5. 標準ライブラリ(STL)
ベクター
cppコピーする編集する#include <vector>
std::vector<int> numbers = {1, 2, 3, 4};
numbers.push_back(5);
マップ
cppコピーする編集する#include <map>
std::map<std::string, int> ages;
ages["Taro"] = 20;
■ 6. ラムダ式
cppコピーする編集するauto add = [](int a, int b) { return a + b; };
std::cout << add(3, 4) << std::endl;
■ 7. スマートポインタ
cppコピーする編集する#include <memory>
std::unique_ptr<int> p1 = std::make_unique<int>(10);
std::shared_ptr<int> p2 = std::make_shared<int>(20);
これらは実践的なC++開発で頻出するテクニックです。
もっと深い例（デザインパターン、マルチスレッド、ファイルIOなど）も必要なら教えてください。
あなた:
もっと
ChatGPT:
さらに高度なC++の応用技術を紹介します。
実践プログラムやパフォーマンス向上に不可欠な技法です。
■ 8. デザインパターンの例：シングルトン
cppコピーする編集するclass Singleton {
private:
static Singleton* instance;
Singleton() {}
public:
static Singleton* getInstance() {
if (!instance)
instance = new Singleton();
return instance;
}
};
Singleton* Singleton::
匿名相談・共感プラットフォーム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>匿名相談・共感プラットフォーム</title>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #eef1f5; margin: 0; padding: 20px; }
header { text-align: center; padding: 20px; background: #4a90e2; color: white; border-radius: 8px; }
.container { max-width: 800px; margin: 20px auto; }
.card { background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 15px; margin-bottom: 20px; }
textarea, input[type="text"] { width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ccc; border-radius: 5px; }
button { background: #4a90e2; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; margin-right: 5px; }
button:hover { background: #357ab8; }
.comment { background: #f5f5f5; border-left: 3px solid #4a90e2; padding: 8px; margin-top: 8px; border-radius: 5px; }
.meta { font-size: 0.85em; color: #555; }
.tag { display: inline-block; background: #ddd; border-radius: 5px; padding: 2px 8px; margin-right: 5px; font-size: 0.8em; }
footer { text-align: center; font-size: 0.8em; color: #888; margin-top: 50px; }
.search-bar { margin-bottom: 20px; }
.delete-btn { background: #e94e4e; }
.delete-btn:hover { background: #b73939; }
.edit-btn { background: #f0ad4e; }
.edit-btn:hover { background: #d98c00; }
.copy-btn { background: #6cc070; }
.copy-btn:hover { background: #4e9f50; }
</style>
</head>
<body>
<header>
<h1>匿名相談・共感プラットフォーム</h1>
<p>悩みや相談を匿名で投稿し、共感やコメントをもらおう</p>
</header>
<div class="container">
<div class="card">
<h3>新しい相談を投稿</h3>
<input type="text" id="postTags" placeholder="タグ（カンマ区切り）">
<textarea id="postText" placeholder="あなたの悩みや相談を書いてください..."></textarea>
<button onclick="addPost()">投稿する</button>
</div>
<div class="card search-bar">
<input type="text" id="searchInput" placeholder="投稿検索..." oninput="searchPosts()">
</div>
<div id="postsContainer"></div>
</div>
<footer>
© 2025 匿名相談・共感プラットフォーム
</footer>
<script>
let posts = JSON.parse(localStorage.getItem('posts')) || [];
function addPost() {
const text = document.getElementById('postText').value.trim();
const tags = document.getElementById('postTags').value.split(',').map(tag => tag.trim()).filter(tag => tag);
if (text) {
posts.unshift({ text, tags, empathy: 0, comments: [], date: new Date().toLocaleString() });
document.getElementById('postText').value = '';
document.getElementById('postTags').value = '';
saveAndRender();
}
}
function addEmpathy(index) {
posts[index].empathy++;
saveAndRender();
}
function addComment(index, commentId) {
const input = document.getElementById(commentId);
const commentText = input.value.trim();
if (commentText) {
posts[index].comments.push({ text: commentText, date: new Date().toLocaleString() });
input.value = '';
saveAndRender();
}
}
function editPost(index) {
const newText = prompt('投稿内容を編集してください:', posts[index].text);
if (newText !== null) {
posts[index].text = newText;
saveAndRender();
}
}
function deletePost(index) {
if (confirm('この投稿を削除しますか？')) {
posts.splice(index, 1);
saveAndRender();
}
}
function copyPost(index) {
navigator.clipboard.writeText(posts[index].text)
.then(() => alert('投稿内容をコピーしました'))
.catch(() => alert('コピーに失敗しました'));
}
function saveAndRender() {
localStorage.setItem('posts', JSON.stringify(posts));
renderPosts();
}
function renderPosts(filteredPosts = posts) {
const container = document.getElementById('postsContainer');
container.innerHTML = '';
filteredPosts.forEach((post, index) => {
let postHtml = `
<div class="card">
<p>${post.text}</p>
<div>${post.tags.map(tag => `<span class='tag'>#${tag}</span>`).join(' ')}</div>
<p class="meta">投稿日: ${post.date}</p>
<button onclick="addEmpathy(${index})">共感 (${post.empathy})</button>
<button class="copy-btn" onclick="copyPost(${index})">コピー</button>
<button class="edit-btn" onclick="editPost(${index})">編集</button>
<button class="delete-btn" onclick="deletePost(${index})">削除</button>
<h4>コメント</h4>
<input type="text" id="commentInput${index}" placeholder="コメントを書く...">
<button onclick="addComment(${index}, 'commentInput${index}')">送信</button>
`;
post.comments.forEach(comment => {
postHtml += `<div class="comment">${comment.text}<div class="meta">${comment.date}</div></div>`;
});
postHtml += '</div>';
container.innerHTML += postHtml;
});
}
function searchPosts() {
const query = document.getElementById('searchInput').value.toLowerCase();
const filtered = posts.filter(post =>
post.text.toLowerCase().includes(query) ||
post.tags.some(tag => tag.toLowerCase().includes(query))
);
renderPosts(filtered);
}
renderPosts();
</script>
</body>
</html>
AIキャラクター掲示板
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIキャラクター掲示板</title>
<style>
body {
font-family: Arial, sans-serif;
background: #e0e0e0;
margin: 0;
padding: 0;
}
header {
background: #3949ab;
color: white;
text-align: center;
padding: 15px;
}
.container {
max-width: 800px;
margin: 20px auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.post {
border-bottom: 1px solid #ddd;
padding: 10px 0;
display: flex;
align-items: flex-start;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.post-content {
flex-grow: 1;
}
.character {
font-weight: bold;
color: #3949ab;
}
.timestamp {
font-size: 0.8em;
color: gray;
}
.message {
margin: 5px 0;
}
.likes {
font-size: 0.9em;
cursor: pointer;
color: #ff5722;
}
.input-group {
margin-top: 20px;
}
input, textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
margin-top: 10px;
padding: 10px 15px;
background: #3949ab;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #303f9f;
}
</style>
</head>
<body>
<header>
<h1>AIキャラクター掲示板</h1>
<p>投稿数: <span id="postCount">0</span></p>
</header>
<div class="container" id="board"></div>
<div class="container input-group">
<label>あなたの名前:</label>
<input type="text" id="username" placeholder="例: カナタ">
<label>メッセージ:</label>
<textarea id="userMessage" placeholder="メッセージを入力..."></textarea>
<button onclick="postMessage()">投稿</button>
</div>
<script>
let postCounter = 0;
const aiCharacters = [
{ name: 'ネオン', avatar: 'https://via.placeholder.com/40/673ab7/ffffff?text=N', replies: ['それ面白いね！', '詳しく教えて！', 'すごい！'] },
{ name: 'ルナ', avatar: 'https://via.placeholder.com/40/ff4081/ffffff?text=L', replies: ['なるほど！', '私もそう思うわ。', '参考になったわ。'] },
{ name: 'ソラ', avatar: 'https://via.placeholder.com/40/03a9f4/ffffff?text=S', replies: ['良い話だね！', '素敵だ！', 'もっと教えて！'] }
];
function postMessage() {
const username = document.getElementById('username').value || '名無しさん';
const message = document.getElementById('userMessage').value.trim();
if (!message) return;
addPost(username, message, 'https://via.placeholder.com/40/9e9e9e/ffffff?text=U');
document.getElementById('userMessage').value = '';
aiCharacters.forEach((char, index) => {
setTimeout(() => aiReply(char), 1000 * (index + 1));
});
}
function addPost(user, message, avatarUrl) {
postCounter++;
document.getElementById('postCount').textContent = postCounter;
const board = document.getElementById('board');
const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
const post = document.createElement('div');
post.className = 'post';
post.innerHTML = `
<img src="${avatarUrl}" alt="avatar" class="avatar">
<div class="post-content">
<span class="character">${user}</span> <span class="timestamp">[${time}]</span>
<p class="message">${message}</p>
<span class="likes" onclick="likePost(this)">♡ いいね</span>
</div>`;
board.appendChild(post);
}
function aiReply(character) {
const reply = character.replies[Math.floor(Math.random() * character.replies.length)];
addPost(character.name, reply, character.avatar);
}
function likePost(element) {
let current = element.textContent;
if (current.includes('♡')) {
element.textContent = current.replace('♡', '❤️');
}
}
</script>
</body>
</html>