{"id":26095,"date":"2025-07-16T17:44:15","date_gmt":"2025-07-16T08:44:15","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26095"},"modified":"2025-07-16T17:44:17","modified_gmt":"2025-07-16T08:44:17","slug":"ai%e3%82%ad%e3%83%a3%e3%83%a9%e3%82%af%e3%82%bf%e3%83%bc%e6%8e%b2%e7%a4%ba%e6%9d%bf","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26095","title":{"rendered":"AI\u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u63b2\u793a\u677f"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"ja\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  &lt;title>AI\u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u63b2\u793a\u677f&lt;\/title>\n  &lt;style>\n    body {\n      font-family: Arial, sans-serif;\n      background: #e0e0e0;\n      margin: 0;\n      padding: 0;\n    }\n    header {\n      background: #3949ab;\n      color: white;\n      text-align: center;\n      padding: 15px;\n    }\n    .container {\n      max-width: 800px;\n      margin: 20px auto;\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n    }\n    .post {\n      border-bottom: 1px solid #ddd;\n      padding: 10px 0;\n      display: flex;\n      align-items: flex-start;\n    }\n    .avatar {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      margin-right: 10px;\n    }\n    .post-content {\n      flex-grow: 1;\n    }\n    .character {\n      font-weight: bold;\n      color: #3949ab;\n    }\n    .timestamp {\n      font-size: 0.8em;\n      color: gray;\n    }\n    .message {\n      margin: 5px 0;\n    }\n    .likes {\n      font-size: 0.9em;\n      cursor: pointer;\n      color: #ff5722;\n    }\n    .input-group {\n      margin-top: 20px;\n    }\n    input, textarea {\n      width: 100%;\n      padding: 8px;\n      margin-top: 5px;\n      border-radius: 4px;\n      border: 1px solid #ccc;\n      box-sizing: border-box;\n    }\n    button {\n      margin-top: 10px;\n      padding: 10px 15px;\n      background: #3949ab;\n      color: white;\n      border: none;\n      border-radius: 5px;\n      cursor: pointer;\n    }\n    button:hover {\n      background: #303f9f;\n    }\n  &lt;\/style>\n&lt;\/head>\n&lt;body>\n\n&lt;header>\n  &lt;h1>AI\u30ad\u30e3\u30e9\u30af\u30bf\u30fc\u63b2\u793a\u677f&lt;\/h1>\n  &lt;p>\u6295\u7a3f\u6570: &lt;span id=\"postCount\">0&lt;\/span>&lt;\/p>\n&lt;\/header>\n\n&lt;div class=\"container\" id=\"board\">&lt;\/div>\n\n&lt;div class=\"container input-group\">\n  &lt;label>\u3042\u306a\u305f\u306e\u540d\u524d:&lt;\/label>\n  &lt;input type=\"text\" id=\"username\" placeholder=\"\u4f8b: \u30ab\u30ca\u30bf\">\n  \n  &lt;label>\u30e1\u30c3\u30bb\u30fc\u30b8:&lt;\/label>\n  &lt;textarea id=\"userMessage\" placeholder=\"\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u5165\u529b...\">&lt;\/textarea>\n  \n  &lt;button onclick=\"postMessage()\">\u6295\u7a3f&lt;\/button>\n&lt;\/div>\n\n&lt;script>\n  let postCounter = 0;\n\n  const aiCharacters = &#91;\n    { name: '\u30cd\u30aa\u30f3', avatar: 'https:\/\/via.placeholder.com\/40\/673ab7\/ffffff?text=N', replies: &#91;'\u305d\u308c\u9762\u767d\u3044\u306d\uff01', '\u8a73\u3057\u304f\u6559\u3048\u3066\uff01', '\u3059\u3054\u3044\uff01'] },\n    { name: '\u30eb\u30ca', avatar: 'https:\/\/via.placeholder.com\/40\/ff4081\/ffffff?text=L', replies: &#91;'\u306a\u308b\u307b\u3069\uff01', '\u79c1\u3082\u305d\u3046\u601d\u3046\u308f\u3002', '\u53c2\u8003\u306b\u306a\u3063\u305f\u308f\u3002'] },\n    { name: '\u30bd\u30e9', avatar: 'https:\/\/via.placeholder.com\/40\/03a9f4\/ffffff?text=S', replies: &#91;'\u826f\u3044\u8a71\u3060\u306d\uff01', '\u7d20\u6575\u3060\uff01', '\u3082\u3063\u3068\u6559\u3048\u3066\uff01'] }\n  ];\n\n  function postMessage() {\n    const username = document.getElementById('username').value || '\u540d\u7121\u3057\u3055\u3093';\n    const message = document.getElementById('userMessage').value.trim();\n    if (!message) return;\n\n    addPost(username, message, 'https:\/\/via.placeholder.com\/40\/9e9e9e\/ffffff?text=U');\n    document.getElementById('userMessage').value = '';\n    aiCharacters.forEach((char, index) => {\n      setTimeout(() => aiReply(char), 1000 * (index + 1));\n    });\n  }\n\n  function addPost(user, message, avatarUrl) {\n    postCounter++;\n    document.getElementById('postCount').textContent = postCounter;\n\n    const board = document.getElementById('board');\n    const time = new Date().toLocaleTimeString(&#91;], {hour: '2-digit', minute:'2-digit'});\n    const post = document.createElement('div');\n    post.className = 'post';\n    post.innerHTML = `\n      &lt;img src=\"${avatarUrl}\" alt=\"avatar\" class=\"avatar\">\n      &lt;div class=\"post-content\">\n        &lt;span class=\"character\">${user}&lt;\/span> &lt;span class=\"timestamp\">&#91;${time}]&lt;\/span>\n        &lt;p class=\"message\">${message}&lt;\/p>\n        &lt;span class=\"likes\" onclick=\"likePost(this)\">\u2661 \u3044\u3044\u306d&lt;\/span>\n      &lt;\/div>`;\n    board.appendChild(post);\n  }\n\n  function aiReply(character) {\n    const reply = character.replies&#91;Math.floor(Math.random() * character.replies.length)];\n    addPost(character.name, reply, character.avatar);\n  }\n\n  function likePost(element) {\n    let current = element.textContent;\n    if (current.includes('\u2661')) {\n      element.textContent = current.replace('\u2661', '\u2764\ufe0f');\n    }\n  }\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\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,6],"tags":[3],"class_list":["post-26095","post","type-post","status-publish","format-standard","hentry","category-html","category-web","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26095","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=26095"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26095\/revisions"}],"predecessor-version":[{"id":26096,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26095\/revisions\/26096"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26095"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}