{"id":25670,"date":"2024-11-21T18:59:17","date_gmt":"2024-11-21T09:59:17","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25670"},"modified":"2024-11-21T18:59:19","modified_gmt":"2024-11-21T09:59:19","slug":"%e6%a0%aa%e4%be%a1%e4%ba%88%e6%83%b3ai-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25670","title":{"rendered":"\u682a\u4fa1\u4e88\u60f3AI.html"},"content":{"rendered":"<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ja&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;\u682a\u4fa1\u4e88\u6e2cAI&lt;\/title&gt;\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/chart.js&quot;&gt;&lt;\/script&gt;\n    &lt;style&gt;\n        body {\n            font-family: 'Arial', sans-serif;\n            background-color: #f5f5f5;\n            margin: 0;\n            padding: 0;\n        }\n        header {\n            background-color: #007bff;\n            color: #fff;\n            text-align: center;\n            padding: 20px 10px;\n        }\n        header h1 {\n            margin: 0;\n            font-size: 24px;\n        }\n        main {\n            max-width: 800px;\n            margin: 20px auto;\n            padding: 20px;\n            background: #fff;\n            border-radius: 8px;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n        }\n        input&#x5B;type=&quot;text&quot;], button {\n            font-size: 16px;\n            padding: 10px;\n            margin: 10px 0;\n            width: 100%;\n            border: 1px solid #ccc;\n            border-radius: 5px;\n            box-sizing: border-box;\n        }\n        button {\n            background-color: #007bff;\n            color: #fff;\n            cursor: pointer;\n        }\n        button:hover {\n            background-color: #0056b3;\n        }\n        .result, .history {\n            margin-top: 20px;\n        }\n        .result p {\n            font-size: 18px;\n            margin: 8px 0;\n        }\n        canvas {\n            margin-top: 20px;\n            max-width: 100%;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;header&gt;\n        &lt;h1&gt;\u682a\u4fa1\u4e88\u6e2cAI&lt;\/h1&gt;\n    &lt;\/header&gt;\n    &lt;main&gt;\n        &lt;p&gt;\u682a\u4fa1\u3092\u4e88\u6e2c\u3059\u308b\u305f\u3081\u306b\u4f01\u696d\u540d\u307e\u305f\u306f\u30c6\u30a3\u30c3\u30ab\u30fc\u30b7\u30f3\u30dc\u30eb\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044:&lt;\/p&gt;\n        &lt;input type=&quot;text&quot; id=&quot;stockInput&quot; placeholder=&quot;\u4f8b: AAPL, 7203.T&quot;&gt;\n        &lt;button onclick=&quot;predictStock()&quot;&gt;\u4e88\u6e2c\u3059\u308b&lt;\/button&gt;\n\n        &lt;div class=&quot;result&quot; id=&quot;result&quot;&gt;&lt;\/div&gt;\n\n        &lt;canvas id=&quot;stockChart&quot;&gt;&lt;\/canvas&gt;\n\n        &lt;div class=&quot;history&quot;&gt;\n            &lt;h2&gt;\u4e88\u6e2c\u5c65\u6b74&lt;\/h2&gt;\n            &lt;ul id=&quot;history&quot;&gt;&lt;\/ul&gt;\n        &lt;\/div&gt;\n    &lt;\/main&gt;\n\n    &lt;script&gt;\n        const historyList = document.getElementById('history');\n        const stockChartCanvas = document.getElementById('stockChart');\n        let stockChart;\n\n        function generateDummyData() {\n            \/\/ \u904e\u53bb1\u9031\u9593\u5206\u306e\u30c0\u30df\u30fc\u30c7\u30fc\u30bf\u3092\u751f\u6210\n            const data = &#x5B;];\n            for (let i = 6; i &gt;= 0; i--) {\n                data.push({\n                    date: new Date(Date.now() - i * 24 * 60 * 60 * 1000).toLocaleDateString(),\n                    price: (Math.random() * 200 + 100).toFixed(2) \/\/ \u00a5100\u301c\u00a5300\n                });\n            }\n            return data;\n        }\n\n        function predictStock() {\n            const stockSymbol = document.getElementById('stockInput').value.trim();\n            const resultDiv = document.getElementById('result');\n\n            \/\/ \u5165\u529b\u30c1\u30a7\u30c3\u30af\n            if (!stockSymbol) {\n                resultDiv.innerHTML = &quot;&lt;p style='color: red;'&gt;\u4f01\u696d\u540d\u307e\u305f\u306f\u30c6\u30a3\u30c3\u30ab\u30fc\u30b7\u30f3\u30dc\u30eb\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002&lt;\/p&gt;&quot;;\n                return;\n            }\n\n            \/\/ \u904e\u53bb\u306e\u682a\u4fa1\u30c7\u30fc\u30bf\u3092\u751f\u6210\n            const pastData = generateDummyData();\n\n            \/\/ \u682a\u4fa1\u4e88\u6e2c\uff08\u30c0\u30df\u30fc\u30c7\u30fc\u30bf\uff09\n            const predictedPrice = (Math.random() * 1000 + 100).toFixed(2); \/\/ \u00a5100\u301c\u00a51100\n            const change = (Math.random() * 10 - 5).toFixed(2); \/\/ -5%\u301c+5%\u306e\u5909\u52d5\u7387\n            const predictionDate = new Date().toLocaleString();\n\n            \/\/ \u7d50\u679c\u3092\u8868\u793a\n            resultDiv.innerHTML = `\n                &lt;p&gt;&lt;strong&gt;${stockSymbol}&lt;\/strong&gt; \u306e\u4e88\u6e2c\u7d50\u679c:&lt;\/p&gt;\n                &lt;p&gt;\u4e88\u6e2c\u682a\u4fa1: &lt;strong&gt;\u00a5${predictedPrice}&lt;\/strong&gt;&lt;\/p&gt;\n                &lt;p&gt;\u4e88\u6e2c\u5909\u52d5\u7387: &lt;strong&gt;${change}%&lt;\/strong&gt;&lt;\/p&gt;\n                &lt;p&gt;\u4e88\u6e2c\u65e5\u6642: ${predictionDate}&lt;\/p&gt;\n            `;\n\n            \/\/ \u5c65\u6b74\u306b\u8ffd\u52a0\n            const historyItem = document.createElement('li');\n            historyItem.innerHTML = `\n                &lt;strong&gt;${stockSymbol}&lt;\/strong&gt;: \u00a5${predictedPrice} (${change}%) - ${predictionDate}\n            `;\n            historyList.prepend(historyItem);\n\n            \/\/ \u30b0\u30e9\u30d5\u3092\u66f4\u65b0\n            updateChart(stockSymbol, pastData, predictedPrice);\n\n            \/\/ \u5165\u529b\u6b04\u3092\u30af\u30ea\u30a2\n            document.getElementById('stockInput').value = '';\n        }\n\n        function updateChart(symbol, pastData, predictedPrice) {\n            const labels = pastData.map(d =&gt; d.date);\n            const prices = pastData.map(d =&gt; parseFloat(d.price));\n            prices.push(parseFloat(predictedPrice)); \/\/ \u4e88\u6e2c\u5024\u3092\u8ffd\u52a0\n\n            if (stockChart) {\n                stockChart.destroy(); \/\/ \u65e2\u5b58\u306e\u30c1\u30e3\u30fc\u30c8\u3092\u524a\u9664\n            }\n\n            stockChart = new Chart(stockChartCanvas, {\n                type: 'line',\n                data: {\n                    labels: &#x5B;...labels, '\u4e88\u6e2c'],\n                    datasets: &#x5B;{\n                        label: `${symbol} \u682a\u4fa1\u63a8\u79fb`,\n                        data: prices,\n                        borderColor: '#007bff',\n                        backgroundColor: 'rgba(0, 123, 255, 0.2)',\n                        fill: true,\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    scales: {\n                        x: {\n                            title: {\n                                display: true,\n                                text: '\u65e5\u4ed8'\n                            }\n                        },\n                        y: {\n                            title: {\n                                display: true,\n                                text: '\u682a\u4fa1 (\u00a5)'\n                            }\n                        }\n                    }\n                }\n            });\n        }\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\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-25670","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\/25670","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=25670"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25670\/revisions"}],"predecessor-version":[{"id":25672,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25670\/revisions\/25672"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25670"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}