<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>株価予測AI</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
header {
background-color: #007bff;
color: #fff;
text-align: center;
padding: 20px 10px;
}
header h1 {
margin: 0;
font-size: 24px;
}
main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
input[type="text"], button {
font-size: 16px;
padding: 10px;
margin: 10px 0;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
button {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result, .history {
margin-top: 20px;
}
.result p {
font-size: 18px;
margin: 8px 0;
}
canvas {
margin-top: 20px;
max-width: 100%;
}
</style>
</head>
<body>
<header>
<h1>株価予測AI</h1>
</header>
<main>
<p>株価を予測するために企業名またはティッカーシンボルを入力してください:</p>
<input type="text" id="stockInput" placeholder="例: AAPL, 7203.T">
<button onclick="predictStock()">予測する</button>
<div class="result" id="result"></div>
<canvas id="stockChart"></canvas>
<div class="history">
<h2>予測履歴</h2>
<ul id="history"></ul>
</div>
</main>
<script>
const historyList = document.getElementById('history');
const stockChartCanvas = document.getElementById('stockChart');
let stockChart;
function generateDummyData() {
// 過去1週間分のダミーデータを生成
const data = [];
for (let i = 6; i >= 0; i--) {
data.push({
date: new Date(Date.now() - i * 24 * 60 * 60 * 1000).toLocaleDateString(),
price: (Math.random() * 200 + 100).toFixed(2) // ¥100〜¥300
});
}
return data;
}
function predictStock() {
const stockSymbol = document.getElementById('stockInput').value.trim();
const resultDiv = document.getElementById('result');
// 入力チェック
if (!stockSymbol) {
resultDiv.innerHTML = "<p style='color: red;'>企業名またはティッカーシンボルを入力してください。</p>";
return;
}
// 過去の株価データを生成
const pastData = generateDummyData();
// 株価予測（ダミーデータ）
const predictedPrice = (Math.random() * 1000 + 100).toFixed(2); // ¥100〜¥1100
const change = (Math.random() * 10 - 5).toFixed(2); // -5%〜+5%の変動率
const predictionDate = new Date().toLocaleString();
// 結果を表示
resultDiv.innerHTML = `
<p><strong>${stockSymbol}</strong> の予測結果:</p>
<p>予測株価: <strong>¥${predictedPrice}</strong></p>
<p>予測変動率: <strong>${change}%</strong></p>
<p>予測日時: ${predictionDate}</p>
`;
// 履歴に追加
const historyItem = document.createElement('li');
historyItem.innerHTML = `
<strong>${stockSymbol}</strong>: ¥${predictedPrice} (${change}%) - ${predictionDate}
`;
historyList.prepend(historyItem);
// グラフを更新
updateChart(stockSymbol, pastData, predictedPrice);
// 入力欄をクリア
document.getElementById('stockInput').value = '';
}
function updateChart(symbol, pastData, predictedPrice) {
const labels = pastData.map(d => d.date);
const prices = pastData.map(d => parseFloat(d.price));
prices.push(parseFloat(predictedPrice)); // 予測値を追加
if (stockChart) {
stockChart.destroy(); // 既存のチャートを削除
}
stockChart = new Chart(stockChartCanvas, {
type: 'line',
data: {
labels: [...labels, '予測'],
datasets: [{
label: `${symbol} 株価推移`,
data: prices,
borderColor: '#007bff',
backgroundColor: 'rgba(0, 123, 255, 0.2)',
fill: true,
}]
},
options: {
responsive: true,
scales: {
x: {
title: {
display: true,
text: '日付'
}
},
y: {
title: {
display: true,
text: '株価 (¥)'
}
}
}
}
});
}
</script>
</body>
</html>
