<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度なAI風文章生成ツール</title>
<style>
/* 全体スタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
textarea {
width: 100%;
height: 120px;
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: none;
}
button {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.output {
margin-top: 20px;
padding: 15px;
background: #f1f1f1;
border: 1px solid #ddd;
border-radius: 4px;
}
.loading {
text-align: center;
margin-top: 20px;
font-size: 16px;
color: #555;
}
.spinner {
width: 50px;
height: 50px;
margin: 10px auto;
border: 5px solid rgba(0, 0, 0, 0.1);
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<h1>高度なAI風文章生成ツール</h1>
<form id="textForm">
<label for="topic">テーマを入力してください:</label>
<textarea id="topic" placeholder="例: テクノロジーの未来"></textarea>
<button type="submit">文章を生成する</button>
</form>
<div id="loading" class="loading" style="display: none;">
<div class="spinner"></div>
文章を生成中です…お待ちください。
</div>
<div id="output" class="output" style="display: none;">
<h3>生成された文章:</h3>
<p id="generatedText"></p>
</div>
</div>
<script>
const form = document.getElementById("textForm");
const topicInput = document.getElementById("topic");
const loadingDiv = document.getElementById("loading");
const outputDiv = document.getElementById("output");
const generatedText = document.getElementById("generatedText");
// サンプルデータ（キーワードごとに分類）
const textDatabase = {
テクノロジー: [
"テクノロジーは人々の生活を大きく変える可能性があります。",
"未来の社会ではAIとロボットが主要な役割を果たすでしょう。",
"技術革新は医療、教育、環境保護の分野で重要な変化をもたらします。",
],
環境: [
"環境保護は持続可能な未来の鍵です。",
"再生可能エネルギーは地球を守る大きな手段です。",
"気候変動への対策は国際的な協力を必要とします。",
],
教育: [
"教育の未来はデジタル化により変わります。",
"オンライン学習は世界中の人々に平等な教育機会を提供します。",
"AIは個別化された学習体験を可能にします。",
],
};
// ランダムな文章を取得する関数
const getRandomText = (texts) => {
return texts[Math.floor(Math.random() * texts.length)];
};
// フォーム送信イベント
form.addEventListener("submit", (event) => {
event.preventDefault();
const topic = topicInput.value.trim();
if (!topic) {
alert("テーマを入力してください！");
return;
}
// ローディング表示
loadingDiv.style.display = "block";
outputDiv.style.display = "none";
setTimeout(() => {
// テーマから関連する文章を探す
let generated = "申し訳ありませんが、該当するデータが見つかりませんでした。";
Object.keys(textDatabase).forEach((key) => {
if (topic.includes(key)) {
generated = getRandomText(textDatabase[key]);
}
});
// 結果を表示
generatedText.textContent = `テーマ「${topic}」に基づいて生成された文章:\n\n${generated}`;
outputDiv.style.display = "block";
loadingDiv.style.display = "none";
}, 1500); // 擬似的な遅延を追加
});
</script>
</body>
</html>
