{"id":25869,"date":"2025-02-22T18:30:39","date_gmt":"2025-02-22T09:30:39","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25869"},"modified":"2025-02-22T18:30:40","modified_gmt":"2025-02-22T09:30:40","slug":"minisns-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25869","title":{"rendered":"minisns.html"},"content":{"rendered":"\n
<!DOCTYPE html>
<html lang=\"ja\">
<head>
  <meta charset=\"UTF-8\">
  <title>\u30b9\u30d5\u30a3\u30a2<\/title>
  <style>
    \/* ======= \u57fa\u672c\u30ea\u30bb\u30c3\u30c8 ======= *\/
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: Arial, sans-serif; background: #f7f9fc; color: #333; line-height: 1.5; }
    header { background: #4a90e2; color: #fff; padding: 15px; text-align: center; }
    header h1 { font-size: 28px; }
    main { width: 90%; max-width: 800px; margin: 20px auto; }
    \/* ======= \u30e6\u30fc\u30b6\u30fc\u30a2\u30a4\u30b3\u30f3 ======= *\/
    .user-icon { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; vertical-align: middle; }
    \/* ======= \u8a8d\u8a3c\u30bb\u30af\u30b7\u30e7\u30f3 ======= *\/
    .auth-section { background: #fff; padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .auth-section h2 { margin-bottom: 10px; }
    .auth-section input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; }
    .auth-section button { background: #4a90e2; color: #fff; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; }
    .auth-section button:hover { background: #357ab8; }
    .toggle-auth { margin-top: 10px; font-size: 14px; color: #4a90e2; cursor: pointer; text-decoration: underline; }
    \/* ======= \u6295\u7a3f\u30d5\u30a9\u30fc\u30e0 ======= *\/
    .post-form { background: #fff; padding: 15px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .post-form textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; font-size: 14px; }
    .post-form button { background: #4a90e2; color: #fff; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; margin-top: 10px; }
    .post-form button:hover { background: #357ab8; }
    \/* ======= \u691c\u7d22\u30bb\u30af\u30b7\u30e7\u30f3 ======= *\/
    .search-section { background: #fff; padding: 10px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .search-section input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
    \/* ======= \u30bf\u30a4\u30e0\u30e9\u30a4\u30f3 ======= *\/
    .timeline { display: flex; flex-direction: column; gap: 15px; }
    .post-item { background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; }
    .post-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .post-username { font-weight: bold; }
    .post-meta { font-size: 12px; color: #777; }
    .post-content { font-size: 16px; margin-bottom: 10px; }
    .post-actions { margin-top: 10px; }
    .post-actions button { background: transparent; border: none; color: #4a90e2; cursor: pointer; margin-right: 10px; font-size: 14px; }
    .post-actions button:hover { text-decoration: underline; }
    .replies { margin-top: 15px; border-top: 1px solid #eee; padding-top: 10px; }
    .reply-item { background: #f2f2f2; padding: 10px; border-radius: 6px; margin-bottom: 10px; }
    .reply-header { font-size: 13px; font-weight: bold; margin-bottom: 5px; }
    .reply-meta { font-size: 11px; color: #555; text-align: right; }
    .edit-area { margin-top: 10px; }
    .edit-area textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
    .edit-area button { background: #4a90e2; color: #fff; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; margin-top: 5px; }
    .edit-area button:hover { background: #357ab8; }
    \/* ======= \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\uff08\u30ed\u30b0\uff0fRSS\uff09\u30bb\u30af\u30b7\u30e7\u30f3 ======= *\/
    .utility-section { margin-top: 20px; text-align: center; }
    .logs-section { background: #fff; padding: 15px; margin-top: 10px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-size: 12px; color: #555; max-height: 200px; overflow-y: auto; }
    .log-entry { border-bottom: 1px solid #eee; padding: 5px 0; }
    footer { text-align: center; padding: 15px; font-size: 14px; color: #777; margin-top: 20px; }
  <\/style>
<\/head>
<body>
  <header>
    <h1>\u30b9\u30d5\u30a3\u30a2<\/h1>
  <\/header>
  <main>
    <!-- \u8a8d\u8a3c\u30bb\u30af\u30b7\u30e7\u30f3\uff08\u30ed\u30b0\u30a4\u30f3\uff0f\u767b\u9332 or \u30e6\u30fc\u30b6\u30fc\u60c5\u5831\u8868\u793a\uff09 -->
    <section id=\"authSection\" class=\"auth-section\"><\/section>
    <!-- \u6295\u7a3f\u30d5\u30a9\u30fc\u30e0\uff08\u30ed\u30b0\u30a4\u30f3\u4e2d\u306e\u307f\u8868\u793a\uff09 -->
    <section id=\"postFormSection\" class=\"post-form\" style=\"display: none;\">
      <textarea id=\"postContent\" placeholder=\"\u3044\u307e\u3069\u3046\u3057\u3066\u308b\uff1f\"><\/textarea>
      <button id=\"postButton\">\u6295\u7a3f\u3059\u308b<\/button>
    <\/section>
    <!-- \u691c\u7d22\u30bb\u30af\u30b7\u30e7\u30f3 -->
    <section class=\"search-section\">
      <input type=\"text\" id=\"searchInput\" placeholder=\"\u6295\u7a3f\u3092\u691c\u7d22\">
    <\/section>
    <!-- \u30bf\u30a4\u30e0\u30e9\u30a4\u30f3 -->
    <section id=\"timeline\" class=\"timeline\"><\/section>
    <!-- \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\uff1a\u30ed\u30b0\u8868\u793a\uff0fRSS\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9 -->
    <section class=\"utility-section\">
      <button id=\"toggleLogsButton\">\u30ed\u30b0\u3092\u8868\u793a<\/button>
      <button id=\"downloadRSSButton\">RSS\u30d5\u30a3\u30fc\u30c9\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/button>
    <\/section>
    <!-- \u30ed\u30b0\u8868\u793a\u30bb\u30af\u30b7\u30e7\u30f3\uff08\u521d\u671f\u306f\u975e\u8868\u793a\uff09 -->
    <section id=\"logsSection\" class=\"logs-section\" style=\"display: none;\"><\/section>
  <\/main>
  <footer>
    <p>&copy; 2023 \u30b9\u30d5\u30a3\u30a2<\/p>
  <\/footer>
  <script>
    (function(){
      'use strict';

      \/\/ === \u5b9a\u6570\uff06\u30ad\u30fc\u5b9a\u7fa9 ===
      const POSTS_KEY = 'posts';
      const USERS_KEY = 'users';
      const CURRENT_USER_KEY = 'currentUser';
      const LOGS_KEY = 'logs';

      \/\/ === \u30c7\u30fc\u30bf\u7ba1\u7406\u5909\u6570 ===
      let posts = [];
      let users = [];
      let currentUser = null;
      let logs = [];

      \/\/ === \u30b9\u30c8\u30ec\u30fc\u30b8\u95a2\u9023\u95a2\u6570 ===
      const saveToStorage = (key, data) => localStorage.setItem(key, JSON.stringify(data));
      const loadFromStorage = (key) => {
        const stored = localStorage.getItem(key);
        return stored ? JSON.parse(stored) : null;
      };

      const loadData = () => {
        posts = loadFromStorage(POSTS_KEY) || [];
        users = loadFromStorage(USERS_KEY) || [];
        currentUser = loadFromStorage(CURRENT_USER_KEY) || null;
        logs = loadFromStorage(LOGS_KEY) || [];
      };

      const saveData = () => {
        saveToStorage(POSTS_KEY, posts);
        saveToStorage(USERS_KEY, users);
        saveToStorage(CURRENT_USER_KEY, currentUser);
        saveToStorage(LOGS_KEY, logs);
      };

      \/\/ === \u30ed\u30b0\u51e6\u7406 ===
      const addLog = (message) => {
        const entry = { timestamp: new Date(), message };
        logs.push(entry);
        saveToStorage(LOGS_KEY, logs);
      };

      const renderLogs = () => {
        const logsSection = document.getElementById('logsSection');
        logsSection.innerHTML = '';
        logs.forEach(log => {
          const div = document.createElement('div');
          div.className = 'log-entry';
          div.textContent = `[${formatDate(log.timestamp)}] ${log.message}`;
          logsSection.appendChild(div);
        });
      };

      \/\/ === \u65e5\u4ed8\u30d5\u30a9\u30fc\u30de\u30c3\u30c8 ===
      const formatDate = (date) => {
        const d = new Date(date);
        const y = d.getFullYear();
        const m = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        const h = String(d.getHours()).padStart(2, '0');
        const min = String(d.getMinutes()).padStart(2, '0');
        return `${y}-${m}-${day} ${h}:${min}`;
      };

      \/\/ === RSS\u751f\u6210 ===
      const generateRSS = () => {
        const now = new Date();
        let rss = `<?xml version=\"1.0\" encoding=\"UTF-8\"?>\\n`;
        rss += `<rss version=\"2.0\">\\n<channel>\\n`;
        rss += `<title>Advanced Mini SNS RSS Feed<\/title>\\n`;
        rss += `<link>${location.origin + location.pathname}<\/link>\\n`;
        rss += `<description>RSS Feed of posts from Advanced Mini SNS<\/description>\\n`;
        rss += `<lastBuildDate>${now.toUTCString()}<\/lastBuildDate>\\n`;
        rss += `<language>ja<\/language>\\n`;
        posts.forEach(post => {
          const postUrl = `${location.origin + location.pathname}?post=${post.id}`;
          const title = `Post by ${post.username}: ${post.content.substring(0,20)}...`;
          rss += `<item>\\n`;
          rss += `<title>${title}<\/title>\\n`;
          rss += `<link>${postUrl}<\/link>\\n`;
          rss += `<description><![CDATA[${post.content}]]><\/description>\\n`;
          rss += `<pubDate>${new Date(post.timestamp).toUTCString()}<\/pubDate>\\n`;
          rss += `<guid>${post.id}<\/guid>\\n`;
          rss += `<\/item>\\n`;
        });
        rss += `<\/channel>\\n<\/rss>`;
        return rss;
      };

      const downloadRSS = () => {
        const rssContent = generateRSS();
        const blob = new Blob([rssContent], { type: 'application\/rss+xml' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'feed.xml';
        a.click();
        URL.revokeObjectURL(url);
        addLog('RSS\u30d5\u30a3\u30fc\u30c9\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9');
      };

      \/\/ === \u8a8d\u8a3c\u51e6\u7406 ===
      const renderAuthSection = () => {
        const authSection = document.getElementById('authSection');
        authSection.innerHTML = '';
        if (currentUser) {
          \/\/ \u30ed\u30b0\u30a4\u30f3\u6e08\u307f\uff1a\u30a2\u30a4\u30b3\u30f3\u3068\u30a6\u30a7\u30eb\u30ab\u30e0\u30e1\u30c3\u30bb\u30fc\u30b8\u3001\u30ed\u30b0\u30a2\u30a6\u30c8\u30dc\u30bf\u30f3
          const container = document.createElement('div');
          if (currentUser.icon) {
            const img = document.createElement('img');
            img.src = currentUser.icon;
            img.className = 'user-icon';
            container.appendChild(img);
          }
          const welcomeDiv = document.createElement('span');
          welcomeDiv.textContent = `\u3088\u3046\u3053\u305d\u3001${currentUser.username} \u3055\u3093\uff01`;
          container.appendChild(welcomeDiv);
          const logoutBtn = document.createElement('button');
          logoutBtn.textContent = '\u30ed\u30b0\u30a2\u30a6\u30c8';
          logoutBtn.onclick = () => {
            addLog(`\u30e6\u30fc\u30b6\u30fc ${currentUser.username} \u30ed\u30b0\u30a2\u30a6\u30c8`);
            currentUser = null;
            saveData();
            renderAuthSection();
            togglePostForm();
            renderTimeline();
          };
          authSection.appendChild(container);
          authSection.appendChild(logoutBtn);
        } else {
          \/\/ \u672a\u30ed\u30b0\u30a4\u30f3\uff1a\u30ed\u30b0\u30a4\u30f3\u30d5\u30a9\u30fc\u30e0\u3092\u8868\u793a
          renderLoginForm(authSection);
        }
      };

      const renderLoginForm = (container) => {
        container.innerHTML = '<h2>\u30ed\u30b0\u30a4\u30f3<\/h2>';
        const usernameInput = document.createElement('input');
        usernameInput.type = 'text';
        usernameInput.placeholder = '\u30e6\u30fc\u30b6\u30fc\u540d';
        const passwordInput = document.createElement('input');
        passwordInput.type = 'password';
        passwordInput.placeholder = '\u30d1\u30b9\u30ef\u30fc\u30c9';
        const loginBtn = document.createElement('button');
        loginBtn.textContent = '\u30ed\u30b0\u30a4\u30f3';
        loginBtn.onclick = () => {
          const username = usernameInput.value.trim();
          const password = passwordInput.value;
          if (!username || !password) { alert('\u30e6\u30fc\u30b6\u30fc\u540d\u3068\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002'); return; }
          const user = users.find(u => u.username === username && u.password === password);
          if (user) {
            currentUser = user;
            saveData();
            addLog(`\u30e6\u30fc\u30b6\u30fc ${username} \u30ed\u30b0\u30a4\u30f3\u6210\u529f`);
            renderAuthSection();
            togglePostForm();
            renderTimeline();
          } else {
            alert('\u30e6\u30fc\u30b6\u30fc\u540d\u307e\u305f\u306f\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u6b63\u3057\u304f\u3042\u308a\u307e\u305b\u3093\u3002');
          }
        };
        container.appendChild(usernameInput);
        container.appendChild(passwordInput);
        container.appendChild(loginBtn);
        const toggleLink = document.createElement('div');
        toggleLink.className = 'toggle-auth';
        toggleLink.textContent = '\u65b0\u898f\u767b\u9332\u306f\u3053\u3061\u3089';
        toggleLink.onclick = () => renderRegisterForm(container);
        container.appendChild(toggleLink);
      };

      const renderRegisterForm = (container) => {
        container.innerHTML = '<h2>\u65b0\u898f\u767b\u9332<\/h2>';
        const usernameInput = document.createElement('input');
        usernameInput.type = 'text';
        usernameInput.placeholder = '\u30e6\u30fc\u30b6\u30fc\u540d';
        const passwordInput = document.createElement('input');
        passwordInput.type = 'password';
        passwordInput.placeholder = '\u30d1\u30b9\u30ef\u30fc\u30c9';
        const confirmInput = document.createElement('input');
        confirmInput.type = 'password';
        confirmInput.placeholder = '\u30d1\u30b9\u30ef\u30fc\u30c9\u78ba\u8a8d';
        \/\/ \u30a2\u30a4\u30b3\u30f3\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u7528\u30d5\u30a3\u30fc\u30eb\u30c9
        const iconInput = document.createElement('input');
        iconInput.type = 'file';
        iconInput.accept = 'image\/*';
        iconInput.style.marginBottom = '10px';
        const registerBtn = document.createElement('button');
        registerBtn.textContent = '\u767b\u9332';
        registerBtn.onclick = () => {
          const username = usernameInput.value.trim();
          const password = passwordInput.value;
          const confirmPassword = confirmInput.value;
          if (!username || !password || !confirmPassword) { alert('\u5168\u3066\u306e\u9805\u76ee\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002'); return; }
          if (password !== confirmPassword) { alert('\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u4e00\u81f4\u3057\u307e\u305b\u3093\u3002'); return; }
          if (users.some(u => u.username === username)) { alert('\u305d\u306e\u30e6\u30fc\u30b6\u30fc\u540d\u306f\u65e2\u306b\u4f7f\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002'); return; }
          \/\/ \u30a2\u30a4\u30b3\u30f3\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u3001FileReader \u3067 Data URL \u306b\u5909\u63db
          if (iconInput.files && iconInput.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
              const iconData = e.target.result;
              const newUser = { username, password, icon: iconData };
              users.push(newUser);
              saveData();
              addLog(`\u30e6\u30fc\u30b6\u30fc ${username} \u767b\u9332\u5b8c\u4e86\uff08\u30a2\u30a4\u30b3\u30f3\u8a2d\u5b9a\u6e08\u307f\uff09`);
              alert('\u767b\u9332\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u304f\u3060\u3055\u3044\u3002');
              renderLoginForm(container);
            };
            reader.readAsDataURL(iconInput.files[0]);
          } else {
            const newUser = { username, password, icon: '' };
            users.push(newUser);
            saveData();
            addLog(`\u30e6\u30fc\u30b6\u30fc ${username} \u767b\u9332\u5b8c\u4e86\uff08\u30a2\u30a4\u30b3\u30f3\u672a\u8a2d\u5b9a\uff09`);
            alert('\u767b\u9332\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u304f\u3060\u3055\u3044\u3002');
            renderLoginForm(container);
          }
        };
        container.appendChild(usernameInput);
        container.appendChild(passwordInput);
        container.appendChild(confirmInput);
        container.appendChild(iconInput);
        container.appendChild(registerBtn);
        const toggleLink = document.createElement('div');
        toggleLink.className = 'toggle-auth';
        toggleLink.textContent = '\u30ed\u30b0\u30a4\u30f3\u306f\u3053\u3061\u3089';
        toggleLink.onclick = () => renderLoginForm(container);
        container.appendChild(toggleLink);
      };

      const togglePostForm = () => {
        const postFormSection = document.getElementById('postFormSection');
        postFormSection.style.display = currentUser ? 'block' : 'none';
      };

      \/\/ === \u30bf\u30a4\u30e0\u30e9\u30a4\u30f3\uff06\u6295\u7a3f\u8868\u793a ===
      const renderTimeline = () => {
        const timeline = document.getElementById('timeline');
        timeline.innerHTML = '';
        let filteredPosts = posts.slice();
        const searchValue = document.getElementById('searchInput').value.trim().toLowerCase();
        if (searchValue) {
          filteredPosts = filteredPosts.filter(post =>
            post.content.toLowerCase().includes(searchValue) ||
            post.username.toLowerCase().includes(searchValue)
          );
        }
        \/\/ \u65b0\u3057\u3044\u6295\u7a3f\u9806\u306b\u30bd\u30fc\u30c8
        filteredPosts.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
        filteredPosts.forEach(post => {
          timeline.appendChild(renderPost(post));
        });
      };

      const renderPost = (post) => {
        const postDiv = document.createElement('div');
        postDiv.className = 'post-item';
        postDiv.setAttribute('data-id', post.id);

        \/\/ \u30d8\u30c3\u30c0\u30fc\uff08\u6295\u7a3f\u8005\u540d\uff06\u65e5\u6642\uff09
        const headerDiv = document.createElement('div');
        headerDiv.className = 'post-header';
        const usernameSpan = document.createElement('span');
        usernameSpan.className = 'post-username';
        usernameSpan.textContent = post.username;
        const metaSpan = document.createElement('span');
        metaSpan.className = 'post-meta';
        metaSpan.textContent = formatDate(post.timestamp);
        headerDiv.appendChild(usernameSpan);
        headerDiv.appendChild(metaSpan);
        postDiv.appendChild(headerDiv);

        \/\/ \u6295\u7a3f\u5185\u5bb9\uff08\u7de8\u96c6\u30e2\u30fc\u30c9\u304b\u901a\u5e38\u8868\u793a\u304b\uff09
        const contentDiv = document.createElement('div');
        contentDiv.className = 'post-content';
        if (post.editing) {
          const editArea = document.createElement('div');
          editArea.className = 'edit-area';
          const editTextarea = document.createElement('textarea');
          editTextarea.value = post.content;
          editArea.appendChild(editTextarea);
          const saveBtn = document.createElement('button');
          saveBtn.textContent = '\u4fdd\u5b58';
          saveBtn.onclick = () => {
            const newContent = editTextarea.value.trim();
            if (!newContent) { alert('\u6295\u7a3f\u5185\u5bb9\u304c\u7a7a\u3067\u3059\u3002'); return; }
            post.content = newContent;
            post.editing = false;
            saveData();
            addLog(`\u6295\u7a3f ${post.id} \u7de8\u96c6\u5b8c\u4e86`);
            renderTimeline();
          };
          const cancelBtn = document.createElement('button');
          cancelBtn.textContent = '\u30ad\u30e3\u30f3\u30bb\u30eb';
          cancelBtn.style.marginLeft = '5px';
          cancelBtn.onclick = () => { post.editing = false; renderTimeline(); };
          editArea.appendChild(saveBtn);
          editArea.appendChild(cancelBtn);
          contentDiv.appendChild(editArea);
        } else {
          contentDiv.textContent = post.content;
        }
        postDiv.appendChild(contentDiv);

        \/\/ \u30a2\u30af\u30b7\u30e7\u30f3\u30dc\u30bf\u30f3\uff08\u3044\u3044\u306d\u3001\u7de8\u96c6\u3001\u524a\u9664\u3001\u8fd4\u4fe1\uff09
        const actionsDiv = document.createElement('div');
        actionsDiv.className = 'post-actions';
        const likeBtn = document.createElement('button');
        likeBtn.textContent = `\u3044\u3044\u306d (${post.likes || 0})`;
        likeBtn.onclick = () => {
          post.likes = (post.likes || 0) + 1;
          saveData();
          addLog(`\u6295\u7a3f ${post.id} \u306b\u3044\u3044\u306d`);
          renderTimeline();
        };
        actionsDiv.appendChild(likeBtn);

        if (currentUser && currentUser.username === post.username) {
          const editBtn = document.createElement('button');
          editBtn.textContent = '\u7de8\u96c6';
          editBtn.onclick = () => { post.editing = true; renderTimeline(); };
          const deleteBtn = document.createElement('button');
          deleteBtn.textContent = '\u524a\u9664';
          deleteBtn.onclick = () => {
            if (confirm('\u672c\u5f53\u306b\u524a\u9664\u3057\u307e\u3059\u304b\uff1f')) {
              posts = posts.filter(p => p.id !== post.id);
              saveData();
              addLog(`\u6295\u7a3f ${post.id} \u524a\u9664`);
              renderTimeline();
            }
          };
          actionsDiv.appendChild(editBtn);
          actionsDiv.appendChild(deleteBtn);
        }

        if (currentUser) {
          const replyBtn = document.createElement('button');
          replyBtn.textContent = '\u8fd4\u4fe1';
          replyBtn.onclick = () => toggleReplyForm(post.id);
          actionsDiv.appendChild(replyBtn);
        }
        postDiv.appendChild(actionsDiv);

        \/\/ \u8fd4\u4fe1\u4e00\u89a7\u8868\u793a
        const repliesDiv = document.createElement('div');
        repliesDiv.className = 'replies';
        if (post.replies && post.replies.length > 0) {
          post.replies.forEach(reply => {
            repliesDiv.appendChild(renderReply(reply));
          });
        }
        postDiv.appendChild(repliesDiv);

        \/\/ \u8fd4\u4fe1\u30d5\u30a9\u30fc\u30e0\uff08\u521d\u671f\u306f\u975e\u8868\u793a\uff09
        const replyFormDiv = document.createElement('div');
        replyFormDiv.className = 'reply-form';
        replyFormDiv.style.display = 'none';
        const replyTextarea = document.createElement('textarea');
        replyTextarea.placeholder = '\u8fd4\u4fe1\u5185\u5bb9\u3092\u5165\u529b';
        const submitReplyBtn = document.createElement('button');
        submitReplyBtn.textContent = '\u8fd4\u4fe1\u3059\u308b';
        submitReplyBtn.onclick = () => {
          const replyContent = replyTextarea.value.trim();
          if (!replyContent) { alert('\u8fd4\u4fe1\u5185\u5bb9\u304c\u7a7a\u3067\u3059\u3002'); return; }
          addReply(post.id, replyContent);
          replyTextarea.value = '';
          toggleReplyForm(post.id, true);
        };
        replyFormDiv.appendChild(replyTextarea);
        replyFormDiv.appendChild(submitReplyBtn);
        postDiv.appendChild(replyFormDiv);

        return postDiv;
      };

      const renderReply = (reply) => {
        const replyDiv = document.createElement('div');
        replyDiv.className = 'reply-item';
        const replyHeader = document.createElement('div');
        replyHeader.className = 'reply-header';
        replyHeader.textContent = reply.username;
        const replyContent = document.createElement('div');
        replyContent.textContent = reply.content;
        const replyMeta = document.createElement('div');
        replyMeta.className = 'reply-meta';
        replyMeta.textContent = formatDate(reply.timestamp);
        replyDiv.appendChild(replyHeader);
        replyDiv.appendChild(replyContent);
        replyDiv.appendChild(replyMeta);
        return replyDiv;
      };

      const toggleReplyForm = (postId, forceHide = false) => {
        const postDiv = document.querySelector(`.post-item[data-id=\"${postId}\"]`);
        if (!postDiv) return;
        const replyForm = postDiv.querySelector('.reply-form');
        replyForm.style.display = (forceHide || replyForm.style.display === 'block') ? 'none' : 'block';
      };

      const addReply = (postId, replyContent) => {
        const post = posts.find(p => p.id === postId);
        if (!post) return;
        if (!post.replies) { post.replies = []; }
        post.replies.push({
          id: Date.now(),
          username: currentUser.username,
          content: replyContent,
          timestamp: new Date()
        });
        saveData();
        addLog(`\u6295\u7a3f ${post.id} \u306b\u8fd4\u4fe1\u8ffd\u52a0`);
        renderTimeline();
      };

      \/\/ === \u6295\u7a3f\u4f5c\u6210\u51e6\u7406 ===
      const initPostButton = () => {
        document.getElementById('postButton').addEventListener('click', () => {
          const postContentElem = document.getElementById('postContent');
          const content = postContentElem.value.trim();
          if (!content) { alert('\u6295\u7a3f\u5185\u5bb9\u304c\u7a7a\u3067\u3059\u3002'); return; }
          const newPost = {
            id: Date.now(),
            username: currentUser.username,
            content: content,
            timestamp: new Date(),
            likes: 0,
            replies: []
          };
          posts.push(newPost);
          saveData();
          addLog(`\u6295\u7a3f ${newPost.id} \u8ffd\u52a0`);
          renderTimeline();
          postContentElem.value = '';
        });
      };

      \/\/ === \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u51e6\u7406\uff1a\u30ed\u30b0\uff0fRSS ===
      const initUtilityButtons = () => {
        document.getElementById('toggleLogsButton').addEventListener('click', () => {
          const logsSection = document.getElementById('logsSection');
          if (logsSection.style.display === 'none' || logsSection.style.display === '') {
            renderLogs();
            logsSection.style.display = 'block';
            document.getElementById('toggleLogsButton').textContent = '\u30ed\u30b0\u3092\u975e\u8868\u793a';
          } else {
            logsSection.style.display = 'none';
            document.getElementById('toggleLogsButton').textContent = '\u30ed\u30b0\u3092\u8868\u793a';
          }
        });
        document.getElementById('downloadRSSButton').addEventListener('click', downloadRSS);
      };

      \/\/ === \u521d\u671f\u5316\u51e6\u7406 ===
      const init = () => {
        loadData();
        renderAuthSection();
        togglePostForm();
        renderTimeline();
        initPostButton();
        initUtilityButtons();
        document.getElementById('searchInput').addEventListener('input', renderTimeline);
      };

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


<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[80],"tags":[3],"class_list":["post-25869","post","type-post","status-publish","format-standard","hentry","category-html","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25869"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25869\/revisions"}],"predecessor-version":[{"id":25870,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25869\/revisions\/25870"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25869"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}