{"id":25679,"date":"2024-11-23T04:13:18","date_gmt":"2024-11-22T19:13:18","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25679"},"modified":"2025-01-06T17:49:00","modified_gmt":"2025-01-06T08:49:00","slug":"%e9%ab%98%e5%ba%a6%e3%81%aaai%e9%a2%a8%e6%96%87%e7%ab%a0%e7%94%9f%e6%88%90%e3%83%84%e3%83%bc%e3%83%ab","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25679","title":{"rendered":"\u9ad8\u5ea6\u306aAI\u98a8\u6587\u7ae0\u751f\u6210\u30c4\u30fc\u30eb"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\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>\u9ad8\u5ea6\u306aAI\u98a8\u6587\u7ae0\u751f\u6210\u30c4\u30fc\u30eb&lt;\/title>\n  &lt;style>\n    \/* \u5168\u4f53\u30b9\u30bf\u30a4\u30eb *\/\n    body {\n      font-family: Arial, sans-serif;\n      margin: 0;\n      padding: 0;\n      background-color: #f4f4f9;\n    }\n    .container {\n      max-width: 800px;\n      margin: 50px auto;\n      padding: 20px;\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    }\n    h1 {\n      text-align: center;\n      color: #333;\n    }\n    textarea {\n      width: 100%;\n      height: 120px;\n      margin: 10px 0;\n      padding: 10px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      resize: none;\n    }\n    button {\n      display: block;\n      width: 100%;\n      padding: 10px;\n      font-size: 16px;\n      color: white;\n      background-color: #007bff;\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n    }\n    button:hover {\n      background-color: #0056b3;\n    }\n    .output {\n      margin-top: 20px;\n      padding: 15px;\n      background: #f1f1f1;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n    }\n    .loading {\n      text-align: center;\n      margin-top: 20px;\n      font-size: 16px;\n      color: #555;\n    }\n    .spinner {\n      width: 50px;\n      height: 50px;\n      margin: 10px auto;\n      border: 5px solid rgba(0, 0, 0, 0.1);\n      border-top-color: #007bff;\n      border-radius: 50%;\n      animation: spin 1s linear infinite;\n    }\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  &lt;\/style>\n&lt;\/head>\n&lt;body>\n  &lt;div class=\"container\">\n    &lt;h1>\u9ad8\u5ea6\u306aAI\u98a8\u6587\u7ae0\u751f\u6210\u30c4\u30fc\u30eb&lt;\/h1>\n    &lt;form id=\"textForm\">\n      &lt;label for=\"topic\">\u30c6\u30fc\u30de\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044:&lt;\/label>\n      &lt;textarea id=\"topic\" placeholder=\"\u4f8b: \u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u306e\u672a\u6765\">&lt;\/textarea>\n      &lt;button type=\"submit\">\u6587\u7ae0\u3092\u751f\u6210\u3059\u308b&lt;\/button>\n    &lt;\/form>\n    &lt;div id=\"loading\" class=\"loading\" style=\"display: none;\">\n      &lt;div class=\"spinner\">&lt;\/div>\n      \u6587\u7ae0\u3092\u751f\u6210\u4e2d\u3067\u3059\u2026\u304a\u5f85\u3061\u304f\u3060\u3055\u3044\u3002\n    &lt;\/div>\n    &lt;div id=\"output\" class=\"output\" style=\"display: none;\">\n      &lt;h3>\u751f\u6210\u3055\u308c\u305f\u6587\u7ae0:&lt;\/h3>\n      &lt;p id=\"generatedText\">&lt;\/p>\n    &lt;\/div>\n  &lt;\/div>\n\n  &lt;script>\n    const form = document.getElementById(\"textForm\");\n    const topicInput = document.getElementById(\"topic\");\n    const loadingDiv = document.getElementById(\"loading\");\n    const outputDiv = document.getElementById(\"output\");\n    const generatedText = document.getElementById(\"generatedText\");\n\n    \/\/ \u30b5\u30f3\u30d7\u30eb\u30c7\u30fc\u30bf\uff08\u30ad\u30fc\u30ef\u30fc\u30c9\u3054\u3068\u306b\u5206\u985e\uff09\n    const textDatabase = {\n      \u30c6\u30af\u30ce\u30ed\u30b8\u30fc: &#91;\n        \"\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u306f\u4eba\u3005\u306e\u751f\u6d3b\u3092\u5927\u304d\u304f\u5909\u3048\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\",\n        \"\u672a\u6765\u306e\u793e\u4f1a\u3067\u306fAI\u3068\u30ed\u30dc\u30c3\u30c8\u304c\u4e3b\u8981\u306a\u5f79\u5272\u3092\u679c\u305f\u3059\u3067\u3057\u3087\u3046\u3002\",\n        \"\u6280\u8853\u9769\u65b0\u306f\u533b\u7642\u3001\u6559\u80b2\u3001\u74b0\u5883\u4fdd\u8b77\u306e\u5206\u91ce\u3067\u91cd\u8981\u306a\u5909\u5316\u3092\u3082\u305f\u3089\u3057\u307e\u3059\u3002\",\n      ],\n      \u74b0\u5883: &#91;\n        \"\u74b0\u5883\u4fdd\u8b77\u306f\u6301\u7d9a\u53ef\u80fd\u306a\u672a\u6765\u306e\u9375\u3067\u3059\u3002\",\n        \"\u518d\u751f\u53ef\u80fd\u30a8\u30cd\u30eb\u30ae\u30fc\u306f\u5730\u7403\u3092\u5b88\u308b\u5927\u304d\u306a\u624b\u6bb5\u3067\u3059\u3002\",\n        \"\u6c17\u5019\u5909\u52d5\u3078\u306e\u5bfe\u7b56\u306f\u56fd\u969b\u7684\u306a\u5354\u529b\u3092\u5fc5\u8981\u3068\u3057\u307e\u3059\u3002\",\n      ],\n      \u6559\u80b2: &#91;\n        \"\u6559\u80b2\u306e\u672a\u6765\u306f\u30c7\u30b8\u30bf\u30eb\u5316\u306b\u3088\u308a\u5909\u308f\u308a\u307e\u3059\u3002\",\n        \"\u30aa\u30f3\u30e9\u30a4\u30f3\u5b66\u7fd2\u306f\u4e16\u754c\u4e2d\u306e\u4eba\u3005\u306b\u5e73\u7b49\u306a\u6559\u80b2\u6a5f\u4f1a\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\",\n        \"AI\u306f\u500b\u5225\u5316\u3055\u308c\u305f\u5b66\u7fd2\u4f53\u9a13\u3092\u53ef\u80fd\u306b\u3057\u307e\u3059\u3002\",\n      ],\n    };\n\n    \/\/ \u30e9\u30f3\u30c0\u30e0\u306a\u6587\u7ae0\u3092\u53d6\u5f97\u3059\u308b\u95a2\u6570\n    const getRandomText = (texts) => {\n      return texts&#91;Math.floor(Math.random() * texts.length)];\n    };\n\n    \/\/ \u30d5\u30a9\u30fc\u30e0\u9001\u4fe1\u30a4\u30d9\u30f3\u30c8\n    form.addEventListener(\"submit\", (event) => {\n      event.preventDefault();\n      const topic = topicInput.value.trim();\n\n      if (!topic) {\n        alert(\"\u30c6\u30fc\u30de\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\uff01\");\n        return;\n      }\n\n      \/\/ \u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u8868\u793a\n      loadingDiv.style.display = \"block\";\n      outputDiv.style.display = \"none\";\n\n      setTimeout(() => {\n        \/\/ \u30c6\u30fc\u30de\u304b\u3089\u95a2\u9023\u3059\u308b\u6587\u7ae0\u3092\u63a2\u3059\n        let generated = \"\u7533\u3057\u8a33\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u8a72\u5f53\u3059\u308b\u30c7\u30fc\u30bf\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002\";\n        Object.keys(textDatabase).forEach((key) => {\n          if (topic.includes(key)) {\n            generated = getRandomText(textDatabase&#91;key]);\n          }\n        });\n\n        \/\/ \u7d50\u679c\u3092\u8868\u793a\n        generatedText.textContent = `\u30c6\u30fc\u30de\u300c${topic}\u300d\u306b\u57fa\u3065\u3044\u3066\u751f\u6210\u3055\u308c\u305f\u6587\u7ae0:\\n\\n${generated}`;\n        outputDiv.style.display = \"block\";\n        loadingDiv.style.display = \"none\";\n      }, 1500); \/\/ \u64ec\u4f3c\u7684\u306a\u9045\u5ef6\u3092\u8ffd\u52a0\n    });\n  &lt;\/script>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n\n<\/pre><\/div>","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-25679","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\/25679","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=25679"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25679\/revisions"}],"predecessor-version":[{"id":25767,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25679\/revisions\/25767"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25679"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}