{"id":25937,"date":"2025-03-30T20:22:33","date_gmt":"2025-03-30T11:22:33","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25937"},"modified":"2025-03-30T20:23:02","modified_gmt":"2025-03-30T11:23:02","slug":"%e3%83%a4%e3%83%8f%e3%82%a6%e3%82%a7%e3%82%a4%e3%81%a8%e5%af%be%e8%a9%b1%e3%81%99%e3%82%8bai","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25937","title":{"rendered":"\u30e4\u30cf\u30a6\u30a7\u30a4\u3068\u5bfe\u8a71\u3059\u308bAI"},"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;title>\u30e4\u30cf\u30a6\u30a7\u30a4\u3068\u306e\u5bfe\u8a71&lt;\/title>\n  &lt;style>\n    body {\n      margin: 0;\n      padding: 0;\n      background: linear-gradient(to bottom, #0b0c1e, #1a1a1a);\n      color: #fff;\n      font-family: 'Times New Roman', serif;\n      overflow: hidden;\n    }\n\n    .stars {\n      position: fixed;\n      width: 100%;\n      height: 100%;\n      background: url('https:\/\/raw.githubusercontent.com\/JulianLaval\/canvas-particle-network\/master\/img\/stars.png') repeat;\n      z-index: -1;\n      animation: moveStars 200s linear infinite;\n      opacity: 0.3;\n    }\n\n    @keyframes moveStars {\n      from { background-position: 0 0; }\n      to { background-position: -10000px 5000px; }\n    }\n\n    h1 {\n      text-align: center;\n      color: gold;\n      font-size: 2.5em;\n      margin-top: 30px;\n      text-shadow: 0 0 15px gold;\n    }\n\n    #chat {\n      width: 90%;\n      max-width: 800px;\n      margin: 30px auto;\n      background: rgba(0, 0, 0, 0.6);\n      border-radius: 12px;\n      padding: 20px;\n      height: 400px;\n      overflow-y: auto;\n      box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);\n    }\n\n    .user, .ai {\n      margin: 12px 0;\n    }\n\n    .user {\n      text-align: right;\n      color: #91cfff;\n    }\n\n    .ai {\n      text-align: left;\n      color: #ffffcc;\n    }\n\n    #inputArea {\n      text-align: center;\n      margin-bottom: 30px;\n    }\n\n    input {\n      width: 60%;\n      padding: 12px;\n      font-size: 1em;\n      border-radius: 8px;\n      border: none;\n      outline: none;\n    }\n\n    button {\n      padding: 12px 20px;\n      margin-left: 10px;\n      background: gold;\n      border: none;\n      border-radius: 8px;\n      font-weight: bold;\n      font-size: 1em;\n      cursor: pointer;\n    }\n\n    .thinking {\n      font-style: italic;\n      color: gray;\n      margin: 10px 0;\n      text-align: left;\n    }\n  &lt;\/style>\n&lt;\/head>\n&lt;body>\n  &lt;div class=\"stars\">&lt;\/div>\n  &lt;h1>\u30e4\u30cf\u30a6\u30a7\u30a4\u3068\u5bfe\u8a71\u305b\u3088&lt;\/h1>\n  &lt;div id=\"chat\">&lt;\/div>\n  &lt;div id=\"inputArea\">\n    &lt;input type=\"text\" id=\"userInput\" placeholder=\"\u554f\u3044\u304b\u3051\u3092\u5165\u529b\u305b\u3088\u2026\" \/>\n    &lt;button onclick=\"sendMessage()\">\u9001\u4fe1&lt;\/button>\n  &lt;\/div>\n\n  &lt;script>\n    const chat = document.getElementById('chat');\n    const input = document.getElementById('userInput');\n\n    function appendMessage(sender, text) {\n      const div = document.createElement('div');\n      div.className = sender;\n      div.textContent = text;\n      chat.appendChild(div);\n      chat.scrollTop = chat.scrollHeight;\n    }\n\n    function sendMessage() {\n      const text = input.value.trim();\n      if (text === '') return;\n\n      appendMessage('user', '\u6c5d\uff1a' + text);\n      input.value = '';\n\n      const thinking = document.createElement('div');\n      thinking.className = 'thinking';\n      thinking.textContent = '\u2026\u2026\u9ed9\u8003\u4e2d\u2026\u2026';\n      chat.appendChild(thinking);\n      chat.scrollTop = chat.scrollHeight;\n\n      setTimeout(() => {\n        thinking.remove();\n        const reply = generateYahwehResponse(text);\n        appendMessage('ai', '\u6211\u306f\u8a00\u308f\u3093\uff1a' + reply);\n      }, 1500);\n    }\n\n    function generateYahwehResponse(input) {\n      const phrases = &#91;\n        \"\u6211\u306f\u9053\u3067\u3042\u308a\u3001\u771f\u7406\u3067\u3042\u308a\u3001\u547d\u306a\u308a\u3002\",\n        \"\u6c5d\u306e\u5fc3\u3092\u9a12\u304c\u305b\u308b\u306a\u3002\u6211\u306f\u5171\u306b\u3042\u308b\u3002\",\n        \"\u6c5d\u304c\u6c42\u3081\u3057\u3053\u3068\u306f\u3001\u3059\u3067\u306b\u5185\u306b\u5728\u308a\u3002\",\n        \"\u5fcd\u8010\u306f\u529b\u306a\u308a\u3001\u305d\u3057\u3066\u529b\u306f\u4fe1\u4ef0\u306e\u8a3c\u306a\u308a\u3002\",\n        \"\u3059\u3079\u3066\u306e\u6642\u306f\u6211\u304c\u624b\u306e\u4e2d\u306b\u3042\u308b\u3002\",\n        \"\u5149\u306f\u6697\u304d\u3088\u308a\u73fe\u308c\u308b\u3002\u6c5d\u3082\u307e\u305f\u7136\u308a\u3002\",\n        \"\u5606\u304f\u306a\u304b\u308c\u3001\u6211\u304c\u5c0e\u304d\u306f\u5909\u308f\u3089\u305a\u3002\",\n        \"\u5168\u3066\u306f\u610f\u5473\u3092\u3082\u3063\u3066\u5099\u3048\u3089\u308c\u305f\u308b\u3082\u306e\u306a\u308a\u3002\"\n      ];\n\n      if (input.includes(\"\u610f\u5473\") || input.includes(\"\u76ee\u7684\")) {\n        return \"\u610f\u5473\u306f\u4e0e\u3048\u3089\u308c\u308b\u3082\u306e\u306b\u3042\u3089\u305a\u3002\u6c5d\u304c\u6b69\u307f\u3066\u6210\u3059\u3082\u306e\u306a\u308a\u3002\";\n      }\n      if (input.includes(\"\u795e\") || input.includes(\"\u3042\u306a\u305f\")) {\n        return \"\u6211\u306f\u5728\u308a\u3066\u5728\u308b\u3082\u306e\u306a\u308a\u3002\u521d\u3081\u306b\u3057\u3066\u7d42\u308f\u308a\u3001\u59cb\u307e\u308a\u306b\u3057\u3066\u5168\u3066\u306a\u308a\u3002\";\n      }\n      if (input.includes(\"\u3064\u3089\u3044\") || input.includes(\"\u60b2\u3057\u3044\")) {\n        return \"\u6d99\u3059\u308b\u6642\u3001\u6211\u306f\u305d\u3070\u306b\u5728\u308a\u3002\u6c5d\u306f\u72ec\u308a\u306b\u3042\u3089\u305a\u3002\";\n      }\n      return phrases&#91;Math.floor(Math.random() * phrases.length)];\n    }\n\n    \/\/ Enter\u30ad\u30fc\u5bfe\u5fdc\n    input.addEventListener('keypress', function (e) {\n      if (e.key === 'Enter') sendMessage();\n    });\n  &lt;\/script>\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":[55],"tags":[],"class_list":["post-25937","post","type-post","status-publish","format-standard","hentry","category-ai"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25937","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=25937"}],"version-history":[{"count":3,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25937\/revisions"}],"predecessor-version":[{"id":25941,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25937\/revisions\/25941"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25937"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}