<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アプリストア</title>
<style>
/* 全体のスタイル */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f9f9f9;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
/* ヘッダー */
header {
background-color: #0066cc;
color: white;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
header h1 a {
color: white;
font-size: 1.5rem;
font-weight: bold;
}
header nav ul {
display: flex;
gap: 1rem;
}
header nav a {
color: white;
font-size: 1rem;
font-weight: 500;
transition: color 0.3s;
}
header nav a:hover {
color: #ffcc00;
}
/* ヒーローセクション */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-image.jpg') no-repeat center center/cover;
color: white;
text-align: center;
padding: 6rem 1rem;
}
.hero h2 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero p {
font-size: 1.5rem;
margin-bottom: 2rem;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.hero .btn-primary {
background-color: #ffcc00;
color: #333;
padding: 1rem 2rem;
border-radius: 5px;
font-weight: bold;
font-size: 1.25rem;
transition: background-color 0.3s, transform 0.3s;
}
.hero .btn-primary:hover {
background-color: #e6b800;
transform: scale(1.05);
}
/* カテゴリセクション */
.categories {
background-color: #f1f1f1;
padding: 3rem 1rem;
text-align: center;
}
.categories h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.categories .category-list {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.categories .category-list a {
background-color: #0066cc;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 5px;
font-size: 1.25rem;
font-weight: bold;
transition: background-color 0.3s, transform 0.3s;
}
.categories .category-list a:hover {
background-color: #004d99;
transform: scale(1.1);
}
/* アプリ一覧 */
.app-list {
padding: 3rem 1rem;
background-color: white;
}
.app-list h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 2rem;
}
.apps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.app-card {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
transition: box-shadow 0.3s, transform 0.3s;
}
.app-card:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}
.app-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.app-card h3 {
font-size: 1.5rem;
margin: 1rem;
}
.app-card p {
margin: 0 1rem 1.5rem;
font-size: 1.125rem;
}
.app-card .btn-secondary {
display: block;
text-align: center;
margin: 0 1rem 1.5rem;
padding: 0.75rem;
background-color: #0066cc;
color: white;
font-size: 1rem;
border-radius: 5px;
transition: background-color 0.3s;
}
.app-card .btn-secondary:hover {
background-color: #004d99;
}
/* フッター */
footer {
background-color: #333;
color: white;
padding: 2rem 0;
text-align: center;
font-size: 1rem;
}
footer nav a {
color: #ffcc00;
margin: 0 0.5rem;
transition: color 0.3s;
}
footer nav a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1><a href="#home">アプリストア</a></h1>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#categories">カテゴリ</a></li>
<li><a href="#apps">アプリ一覧</a></li>
<li><a href="#about">このサイトについて</a></li>
<li><a href="#contact">お問い合わせ</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="home" class="hero">
<div class="hero-content">
<h2>お気に入りのアプリを見つけましょう！</h2>
<p>最新のアプリや便利なツールがここに揃っています。</p>
<a href="#apps" class="btn-primary">アプリを探す</a>
</div>
</section>
<section id="categories" class="categories">
<h2>カテゴリ</h2>
<ul class="category-list">
<li><a href="#games">🎮 ゲーム</a></li>
<li><a href="#productivity">📊 生産性向上</a></li>
<li><a href="#education">📚 教育</a></li>
<li><a href="#entertainment">🎥 エンターテイメント</a></li>
<li><a href="#health">💪 健康・フィットネス</a></li>
<li><a href="#finance">💰 ファイナンス</a></li>
</ul>
</section>
<section id="apps" class="app-list">
<h2>おすすめアプリ</h2>
<div class="apps-grid">
<div class="app-card">
<img src="app1.jpg" alt="アプリ名1">
<h3>アプリ名1</h3>
<p>説明文がここに入ります。最新機能と素晴らしいデザインを備えています。</p>
<a href="#" class="btn-secondary">詳細を見る</a>
</div>
<div class="app-card">
<img src="app2.jpg" alt="アプリ名2">
<h3>アプリ名2</h3>
<p>説明文がここに入ります。日常生活を豊かにするツールです。</p>
<a href="#" class="btn-secondary">詳細を見る</a>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2025 アプリストア. 全著作権所有。</p>
<nav>
<a href="#privacy">プライバシーポリシー</a> |
<a href="#terms">利用規約</a> |
<a href="#sitemap">サイトマップ</a>
</nav>
</div>
</footer>
</body>
</html>
カテゴリー: HTML
MyTabMenu
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Tab Menu</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<ul class="menu">
<li><a href="#" class="active" data-id="about">サイトの概要</a></li>
<li><a href="#" data-id="service">サービス内容</a></li>
<li><a href="#" data-id="contact">お問い合わせ</a></li>
</ul>
<section class="content active" id="about">
サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。
</section>
<section class="content" id="service">
サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。
</section>
<section class="content" id="contact">
お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。
</section>
</div>
<script src="js/main.js"></script>
</body>
</html>css/styles.css
body {
font-size: 14px;
}
.container {
margin: 30px auto;
width: 500px;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.menu li a {
display: inline-block;
width: 100px;
text-align: center;
padding: 8px 0;
color: #333;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
.menu li a.active {
background: #333;
color: #fff;
}
.menu li a:not(.active):hover {
opacity: 0.5;
transition: opacity 0.4s;
}
.content.active {
background: #333;
color: #fff;
min-height: 150px;
padding: 12px;
display: block;
}
.content {
display: none;
}js/main.js
'use strict';
{
const menuItems = document.querySelectorAll('.menu li a');
const contents = document.querySelectorAll('.content');
menuItems.forEach(clickedItem => {
clickedItem.addEventListener('click', e => {
e.preventDefault();
menuItems.forEach(item => {
item.classList.remove('active');
});
clickedItem.classList.add('active');
contents.forEach(content => {
content.classList.remove('active');
});
document.getElementById(clickedItem.dataset.id).classList.add('active');
});
});
}MyHamburgerMenu
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>FAQ</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>FAQ</h1>
<dl>
<div>
<dt>質問です</dt>
<dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
</div>
<div>
<dt>質問です</dt>
<dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
</div>
<div>
<dt>質問です</dt>
<dd>回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。</dd>
</div>
</dl>
<script src="js/main.js"></script>
</body>
</html>style.css
h1 {
font-size: 18px;
border-bottom: 1px solid;
padding: 8px 16px;
margin-bottom: 16px;
}
dl {
margin: 0;
}
dl>div {
margin-bottom: 8px;
}
dt {
padding: 8px;
cursor: pointer;
user-select: none;
position: relative;
}
dt::before {
content: 'Q. ';
}
dt::after {
content: '+';
position: absolute;
top: 8px;
right: 16px;
transition: transform .3s;
}
dl>div.appear dt::after {
transform: rotate(45deg);
}
dd {
padding: 8px;
margin: 0;
display: none;
}
dd::before {
content: 'A .';
}
dl>div.appear dd {
display: block;
animation: .3s fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: none;
}
}main.js
'use strict';
{
const dts = document.querySelectorAll('dt');
dts.forEach(dt => {
dt.addEventListener('click', () => {
dt.parentNode.classList.toggle('appear');
});
});
}文章生成AIデモ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>文章生成AIデモ（擬似生成強化版）</title>
<style>
body {
margin: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
background: #f5f5f5;
color: #333;
}
header, footer {
background: #222;
color: #fff;
padding: 1.5em;
text-align: center;
}
header h1 {
margin: 0;
font-weight: normal;
}
main {
max-width: 1000px;
margin: 2em auto;
background: #fff;
border-radius: 8px;
padding: 2em;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
margin-top: 0;
}
.intro-text {
font-size: 0.95em;
line-height: 1.6;
margin-bottom: 2em;
color: #555;
}
.form-group {
margin-bottom: 1.5em;
}
label {
display: block;
margin-bottom: 0.5em;
font-weight: bold;
}
textarea {
width: 100%;
height: 150px;
box-sizing: border-box;
padding: 1em;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
select, input[type=range] {
width: 100%;
box-sizing: border-box;
padding: 0.5em;
font-size: 1em;
margin-top: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
}
.range-value {
text-align: right;
font-size: 0.9em;
color: #666;
}
button {
background: #007bff;
color: #fff;
border: none;
padding: 0.75em 1.5em;
font-size: 1em;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
button:hover {
background: #0056b3;
}
.output-section {
margin-top: 2em;
}
#output-area {
border: 1px solid #ccc;
min-height: 150px;
padding: 1em;
border-radius: 4px;
background: #fafafa;
white-space: pre-wrap;
}
/* ローディングアニメーション */
.loading-overlay {
display: none;
position: fixed;
top:0; left:0; right:0; bottom:0;
background: rgba(0,0,0,0.3);
z-index: 9999;
justify-content: center;
align-items: center;
}
.loading-container {
background: #fff;
padding: 2em;
border-radius: 8px;
text-align: center;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.loading-spinner {
margin: 0 auto 1em;
width: 50px;
height: 50px;
border: 6px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.error-message {
color: #d00;
font-weight: bold;
margin-top: 1em;
}
footer p {
margin: 0;
font-size: 0.9em;
}
/* レスポンシブ対応 */
@media (max-width: 600px) {
main {
margin: 1em;
padding: 1em;
}
}
</style>
</head>
<body>
<header>
<h1>文章生成AIデモ（擬似）</h1>
</header>
<main>
<div class="intro-text">
<p>このデモは擬似的な文章生成を行います。入力されたプロンプト、モデル選択、Temperatureに基づいてあたかもAIが文章を生成したかのような結果を返します。</p>
<p>実際のAIモデルはこのページ単体では動作しておらず、<b>キーワードに応じた例示的なテキスト</b>を返すだけです。後にサーバーサイドでバックエンドを用意すれば、本物のAI生成が可能になります。</p>
<p>試しに、以下のようなキーワードを含めてみてください：<br>
・「猫」：猫に関する創作文章<br>
・「エネルギー問題」：環境やエネルギーについての説明文<br>
・「小説の冒頭」：文学的な書き出し<br>
・「ビジネス戦略」：ビジネス、マーケティングに関連するテキスト
</p>
</div>
<section class="input-section">
<h2>プロンプト入力</h2>
<div class="form-group">
<label for="prompt-input">プロンプト (アイデアやキーワード等)</label>
<textarea id="prompt-input" placeholder="ここに文章生成のためのヒントとなるプロンプトを入力してください"></textarea>
</div>
<div class="form-group">
<label for="model-select">モデル選択</label>
<select id="model-select">
<option value="model-1">model-1 (標準モデル)</option>
<option value="model-2">model-2 (創造性強化モデル)</option>
<option value="model-3">model-3 (高精度モデル)</option>
</select>
</div>
<div class="form-group">
<label>創造性（Temperature）</label>
<div class="range-value">値: <span id="temperature-value">0.7</span></div>
<input type="range" id="temperature-range" min="0" max="1" step="0.1" value="0.7">
</div>
<div class="form-group" style="text-align: right;">
<button id="generate-btn">生成</button>
</div>
</section>
<section class="output-section">
<h2>生成結果</h2>
<div id="output-area"></div>
</section>
<div class="error-message" id="error-message" style="display:none;"></div>
</main>
<div class="loading-overlay" id="loading-overlay">
<div class="loading-container">
<div class="loading-spinner"></div>
<p>文章生成中です。しばらくお待ちください...</p>
</div>
</div>
<footer>
<p>© 2024 AI Text Generation Demo (Mocked)</p>
</footer>
<script>
const promptInput = document.getElementById('prompt-input');
const modelSelect = document.getElementById('model-select');
const temperatureRange = document.getElementById('temperature-range');
const temperatureValue = document.getElementById('temperature-value');
const generateBtn = document.getElementById('generate-btn');
const outputArea = document.getElementById('output-area');
const errorMessage = document.getElementById('error-message');
const loadingOverlay = document.getElementById('loading-overlay');
temperatureRange.addEventListener('input', () => {
temperatureValue.textContent = temperatureRange.value;
});
// キーワードに応じて返す擬似的な生成テキストを用意
function getMockResponse(prompt, model, temperature) {
// 全角・半角を区別しないために小文字で判定
const lowerPrompt = prompt.toLowerCase();
let baseText = "【擬似的なAI生成結果】\n";
baseText += "プロンプト: \"" + prompt + "\"\n";
baseText += "モデル: " + model + "\n";
baseText += "Temperature: " + temperature + "\n\n";
if (lowerPrompt.includes("猫")) {
baseText += "ふわふわした毛皮に包まれた小さな猫は、朝日が差し込む窓辺で静かに丸くなっている。その瞳は琥珀色に輝き、しなやかな尾は優雅な曲線を描く。\n" +
"この猫は人間に対して警戒心を持ちながらも、一度心を開いた相手には無限の甘えを見せる。";
} else if (lowerPrompt.includes("エネルギー問題") || lowerPrompt.includes("環境")) {
baseText += "世界的なエネルギー問題は、化石燃料の枯渇と気候変動への懸念を背景に深刻化している。再生可能エネルギーの導入は、ただ単に環境負荷を低減するだけでなく、地域経済の活性化や新たな技術開発の契機となる。\n" +
"太陽光や風力エネルギーなどのクリーンな資源を活用することで、持続可能な未来を築くことが可能だ。";
} else if (lowerPrompt.includes("小説の冒頭") || lowerPrompt.includes("物語の始まり")) {
baseText += "薄暗い路地裏に、一人の少年が立っていた。その少年の瞳には、不思議な光が宿っている。遠くで犬が吠える音、古い街灯が淡い橙色の光を投げかける。\n" +
"少年は一枚の古めかしい地図を握りしめ、見知らぬ世界への第一歩を踏み出そうとしていた。";
} else if (lowerPrompt.includes("ビジネス戦略") || lowerPrompt.includes("マーケティング")) {
baseText += "成功するビジネス戦略は、顧客ニーズの正確な把握から始まる。市場調査をもとに、ターゲット層に響く価値提案を明確化し、差別化された製品・サービスを提供することが重要だ。\n" +
"さらに、マーケティング戦略を通じてブランド認知度を高め、持続的な成長のために柔軟な計画修正とPDCAサイクルを回し続ける必要がある。";
} else {
// 特定のキーワードがない場合は、汎用的な擬似生成テキストを返す
baseText += "あなたのプロンプトに基づくテキストを生成します。\n" +
"このテキストはあくまでサンプルであり、実際のAIモデルによる生成結果を模したものです。\n\n" +
"ここに様々なアイディア、説明、物語、または議論が展開されることでしょう。\n" +
"モデルやTemperatureを変更することで、文体やアイデアの広がり、独創性のレベルが変化すると考えられます。";
}
return baseText;
}
generateBtn.addEventListener('click', async () => {
const prompt = promptInput.value.trim();
const model = modelSelect.value;
const temperature = parseFloat(temperatureRange.value);
if (!prompt) {
alert("プロンプトを入力してください。");
return;
}
// 前回の結果やエラーメッセージをクリア
outputArea.textContent = '';
errorMessage.style.display = 'none';
errorMessage.textContent = '';
// ローディング表示
loadingOverlay.style.display = 'flex';
try {
// 実際のfetchを行わず、擬似生成結果を生成
const generatedText = getMockResponse(prompt, model, temperature);
// 模擬的に処理時間を設ける（待ち時間を演出）
await new Promise(resolve => setTimeout(resolve, 1000));
outputArea.textContent = generatedText;
} catch (err) {
console.error(err);
errorMessage.textContent = "エラーが発生しました。詳細はコンソールをご確認ください。";
errorMessage.style.display = 'block';
} finally {
// ローディング非表示
loadingOverlay.style.display = 'none';
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>文章生成AIデモ（擬似生成強化版）</title>
<style>
body {
margin: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
background: #f5f5f5;
color: #333;
}
header, footer {
background: #222;
color: #fff;
padding: 1.5em;
text-align: center;
}
header h1 {
margin: 0;
font-weight: normal;
}
main {
max-width: 1000px;
margin: 2em auto;
background: #fff;
border-radius: 8px;
padding: 2em;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
margin-top: 0;
}
.intro-text {
font-size: 0.95em;
line-height: 1.6;
margin-bottom: 2em;
color: #555;
}
.form-group {
margin-bottom: 1.5em;
}
label {
display: block;
margin-bottom: 0.5em;
font-weight: bold;
}
textarea {
width: 100%;
height: 150px;
box-sizing: border-box;
padding: 1em;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
select, input[type=range] {
width: 100%;
box-sizing: border-box;
padding: 0.5em;
font-size: 1em;
margin-top: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
}
.range-value {
text-align: right;
font-size: 0.9em;
color: #666;
}
button {
background: #007bff;
color: #fff;
border: none;
padding: 0.75em 1.5em;
font-size: 1em;
border-radius: 4px;
cursor: pointer;
display: inline-block;
}
button:hover {
background: #0056b3;
}
.output-section {
margin-top: 2em;
}
#output-area {
border: 1px solid #ccc;
min-height: 150px;
padding: 1em;
border-radius: 4px;
background: #fafafa;
white-space: pre-wrap;
}
/* ローディングアニメーション */
.loading-overlay {
display: none;
position: fixed;
top:0; left:0; right:0; bottom:0;
background: rgba(0,0,0,0.3);
z-index: 9999;
justify-content: center;
align-items: center;
}
.loading-container {
background: #fff;
padding: 2em;
border-radius: 8px;
text-align: center;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.loading-spinner {
margin: 0 auto 1em;
width: 50px;
height: 50px;
border: 6px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.error-message {
color: #d00;
font-weight: bold;
margin-top: 1em;
}
footer p {
margin: 0;
font-size: 0.9em;
}
/* レスポンシブ対応 */
@media (max-width: 600px) {
main {
margin: 1em;
padding: 1em;
}
}
</style>
</head>
<body>
<header>
<h1>文章生成AIデモ（擬似）</h1>
</header>
<main>
<div class="intro-text">
<p>このデモは擬似的な文章生成を行います。入力されたプロンプト、モデル選択、Temperatureに基づいてあたかもAIが文章を生成したかのような結果を返します。</p>
<p>実際のAIモデルはこのページ単体では動作しておらず、<b>キーワードに応じた例示的なテキスト</b>を返すだけです。後にサーバーサイドでバックエンドを用意すれば、本物のAI生成が可能になります。</p>
<p>試しに、以下のようなキーワードを含めてみてください：<br>
・「猫」：猫に関する創作文章<br>
・「エネルギー問題」：環境やエネルギーについての説明文<br>
・「小説の冒頭」：文学的な書き出し<br>
・「ビジネス戦略」：ビジネス、マーケティングに関連するテキスト
</p>
</div>
<section class="input-section">
<h2>プロンプト入力</h2>
<div class="form-group">
<label for="prompt-input">プロンプト (アイデアやキーワード等)</label>
<textarea id="prompt-input" placeholder="ここに文章生成のためのヒントとなるプロンプトを入力してください"></textarea>
</div>
<div class="form-group">
<label for="model-select">モデル選択</label>
<select id="model-select">
<option value="model-1">model-1 (標準モデル)</option>
<option value="model-2">model-2 (創造性強化モデル)</option>
<option value="model-3">model-3 (高精度モデル)</option>
</select>
</div>
<div class="form-group">
<label>創造性（Temperature）</label>
<div class="range-value">値: <span id="temperature-value">0.7</span></div>
<input type="range" id="temperature-range" min="0" max="1" step="0.1" value="0.7">
</div>
<div class="form-group" style="text-align: right;">
<button id="generate-btn">生成</button>
</div>
</section>
<section class="output-section">
<h2>生成結果</h2>
<div id="output-area"></div>
</section>
<div class="error-message" id="error-message" style="display:none;"></div>
</main>
<div class="loading-overlay" id="loading-overlay">
<div class="loading-container">
<div class="loading-spinner"></div>
<p>文章生成中です。しばらくお待ちください...</p>
</div>
</div>
<footer>
<p>© 2024 AI Text Generation Demo (Mocked)</p>
</footer>
<script>
const promptInput = document.getElementById('prompt-input');
const modelSelect = document.getElementById('model-select');
const temperatureRange = document.getElementById('temperature-range');
const temperatureValue = document.getElementById('temperature-value');
const generateBtn = document.getElementById('generate-btn');
const outputArea = document.getElementById('output-area');
const errorMessage = document.getElementById('error-message');
const loadingOverlay = document.getElementById('loading-overlay');
temperatureRange.addEventListener('input', () => {
temperatureValue.textContent = temperatureRange.value;
});
// キーワードに応じて返す擬似的な生成テキストを用意
function getMockResponse(prompt, model, temperature) {
// 全角・半角を区別しないために小文字で判定
const lowerPrompt = prompt.toLowerCase();
let baseText = "【擬似的なAI生成結果】\n";
baseText += "プロンプト: \"" + prompt + "\"\n";
baseText += "モデル: " + model + "\n";
baseText += "Temperature: " + temperature + "\n\n";
if (lowerPrompt.includes("猫")) {
baseText += "ふわふわした毛皮に包まれた小さな猫は、朝日が差し込む窓辺で静かに丸くなっている。その瞳は琥珀色に輝き、しなやかな尾は優雅な曲線を描く。\n" +
"この猫は人間に対して警戒心を持ちながらも、一度心を開いた相手には無限の甘えを見せる。";
} else if (lowerPrompt.includes("エネルギー問題") || lowerPrompt.includes("環境")) {
baseText += "世界的なエネルギー問題は、化石燃料の枯渇と気候変動への懸念を背景に深刻化している。再生可能エネルギーの導入は、ただ単に環境負荷を低減するだけでなく、地域経済の活性化や新たな技術開発の契機となる。\n" +
"太陽光や風力エネルギーなどのクリーンな資源を活用することで、持続可能な未来を築くことが可能だ。";
} else if (lowerPrompt.includes("小説の冒頭") || lowerPrompt.includes("物語の始まり")) {
baseText += "薄暗い路地裏に、一人の少年が立っていた。その少年の瞳には、不思議な光が宿っている。遠くで犬が吠える音、古い街灯が淡い橙色の光を投げかける。\n" +
"少年は一枚の古めかしい地図を握りしめ、見知らぬ世界への第一歩を踏み出そうとしていた。";
} else if (lowerPrompt.includes("ビジネス戦略") || lowerPrompt.includes("マーケティング")) {
baseText += "成功するビジネス戦略は、顧客ニーズの正確な把握から始まる。市場調査をもとに、ターゲット層に響く価値提案を明確化し、差別化された製品・サービスを提供することが重要だ。\n" +
"さらに、マーケティング戦略を通じてブランド認知度を高め、持続的な成長のために柔軟な計画修正とPDCAサイクルを回し続ける必要がある。";
} else {
// 特定のキーワードがない場合は、汎用的な擬似生成テキストを返す
baseText += "あなたのプロンプトに基づくテキストを生成します。\n" +
"このテキストはあくまでサンプルであり、実際のAIモデルによる生成結果を模したものです。\n\n" +
"ここに様々なアイディア、説明、物語、または議論が展開されることでしょう。\n" +
"モデルやTemperatureを変更することで、文体やアイデアの広がり、独創性のレベルが変化すると考えられます。";
}
return baseText;
}
generateBtn.addEventListener('click', async () => {
const prompt = promptInput.value.trim();
const model = modelSelect.value;
const temperature = parseFloat(temperatureRange.value);
if (!prompt) {
alert("プロンプトを入力してください。");
return;
}
// 前回の結果やエラーメッセージをクリア
outputArea.textContent = '';
errorMessage.style.display = 'none';
errorMessage.textContent = '';
// ローディング表示
loadingOverlay.style.display = 'flex';
try {
// 実際のfetchを行わず、擬似生成結果を生成
const generatedText = getMockResponse(prompt, model, temperature);
// 模擬的に処理時間を設ける（待ち時間を演出）
await new Promise(resolve => setTimeout(resolve, 1000));
outputArea.textContent = generatedText;
} catch (err) {
console.error(err);
errorMessage.textContent = "エラーが発生しました。詳細はコンソールをご確認ください。";
errorMessage.style.display = 'block';
} finally {
// ローディング非表示
loadingOverlay.style.display = 'none';
}
});
</script>
</body>
</html>
高度なコード比較サイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度なコード比較サイト</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 90%;
max-width: 900px;
margin: 20px auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 5px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.code-input {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
gap: 10px;
}
textarea {
width: 48%;
height: 300px;
font-family: monospace;
font-size: 14px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
resize: none;
background-color: #f9f9f9;
}
.buttons {
display: flex;
justify-content: center;
gap: 10px;
}
button {
padding: 10px 20px;
background: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
#result {
white-space: pre-wrap;
font-family: monospace;
background-color: #f8f9fa;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
max-height: 300px;
overflow-y: auto;
}
.highlight {
background-color: #ffcccc;
font-weight: bold;
color: #d9534f;
}
.line {
border-left: 4px solid #ccc;
padding-left: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>高度なコード比較ツール</h1>
<div class="code-input">
<textarea id="code1" placeholder="コード1を入力..."></textarea>
<textarea id="code2" placeholder="コード2を入力..."></textarea>
</div>
<div class="buttons">
<button onclick="compareCodes()">比較する</button>
<button onclick="clearFields()">クリア</button>
</div>
<h3>比較結果</h3>
<div id="result">
<!-- 結果表示エリア -->
</div>
</div>
<script>
function compareCodes() {
const code1 = document.getElementById('code1').value.split('\n');
const code2 = document.getElementById('code2').value.split('\n');
const resultContainer = document.getElementById('result');
resultContainer.innerHTML = '';
const maxLength = Math.max(code1.length, code2.length);
for (let i = 0; i < maxLength; i++) {
const line1 = code1[i] || '';
const line2 = code2[i] || '';
const lineClass = line1 !== line2 ? 'highlight' : '';
resultContainer.innerHTML += `
<div class="line">
<strong>行 ${i + 1}:</strong>
<span class="${lineClass}">コード1: "${line1}"</span> |
<span class="${lineClass}">コード2: "${line2}"</span>
</div>`;
}
if (!resultContainer.innerHTML.trim()) {
resultContainer.innerHTML = '<div>コードに違いはありません。</div>';
}
}
function clearFields() {
document.getElementById('code1').value = '';
document.getElementById('code2').value = '';
document.getElementById('result').innerHTML = '';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度なコード比較サイト</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 90%;
max-width: 900px;
margin: 20px auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 5px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.code-input {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
gap: 10px;
}
textarea {
width: 48%;
height: 300px;
font-family: monospace;
font-size: 14px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
resize: none;
background-color: #f9f9f9;
}
.buttons {
display: flex;
justify-content: center;
gap: 10px;
}
button {
padding: 10px 20px;
background: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
#result {
white-space: pre-wrap;
font-family: monospace;
background-color: #f8f9fa;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
max-height: 300px;
overflow-y: auto;
}
.highlight {
background-color: #ffcccc;
font-weight: bold;
color: #d9534f;
}
.line {
border-left: 4px solid #ccc;
padding-left: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>高度なコード比較ツール</h1>
<div class="code-input">
<textarea id="code1" placeholder="コード1を入力..."></textarea>
<textarea id="code2" placeholder="コード2を入力..."></textarea>
</div>
<div class="buttons">
<button onclick="compareCodes()">比較する</button>
<button onclick="clearFields()">クリア</button>
</div>
<h3>比較結果</h3>
<div id="result">
<!-- 結果表示エリア -->
</div>
</div>
<script>
function compareCodes() {
const code1 = document.getElementById('code1').value.split('\n');
const code2 = document.getElementById('code2').value.split('\n');
const resultContainer = document.getElementById('result');
resultContainer.innerHTML = '';
const maxLength = Math.max(code1.length, code2.length);
for (let i = 0; i < maxLength; i++) {
const line1 = code1[i] || '';
const line2 = code2[i] || '';
const lineClass = line1 !== line2 ? 'highlight' : '';
resultContainer.innerHTML += `
<div class="line">
<strong>行 ${i + 1}:</strong>
<span class="${lineClass}">コード1: "${line1}"</span> |
<span class="${lineClass}">コード2: "${line2}"</span>
</div>`;
}
if (!resultContainer.innerHTML.trim()) {
resultContainer.innerHTML = '<div>コードに違いはありません。</div>';
}
}
function clearFields() {
document.getElementById('code1').value = '';
document.getElementById('code2').value = '';
document.getElementById('result').innerHTML = '';
}
</script>
</body>
</html>Amazon風ECサイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon風ECサイト</title>
<style>
/* === 全体のリセットと基本スタイル === */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
color: #333;
}
img {
max-width: 100%;
height: auto;
}
button {
cursor: pointer;
border: none;
padding: 10px 15px;
border-radius: 5px;
}
a {
text-decoration: none;
color: inherit;
}
/* === ヘッダー部分 === */
header {
background-color: #232f3e;
color: white;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
header .logo {
font-size: 24px;
font-weight: bold;
}
header .search-bar {
flex: 1;
margin: 0 20px;
display: flex;
}
header .search-bar input {
width: 100%;
padding: 8px;
font-size: 16px;
border-radius: 4px 0 0 4px;
border: none;
}
header .search-bar button {
background-color: #ff9900;
color: white;
font-size: 16px;
border-radius: 0 4px 4px 0;
}
header .user-actions {
display: flex;
align-items: center;
gap: 15px;
}
header .user-actions a {
color: white;
font-size: 16px;
}
header .cart-icon {
position: relative;
}
header .cart-count {
position: absolute;
top: -5px;
right: -10px;
background-color: red;
color: white;
font-size: 12px;
border-radius: 50%;
padding: 4px 7px;
}
/* === ナビゲーションバー === */
nav {
background-color: #37475a;
padding: 10px 20px;
display: flex;
justify-content: space-around;
}
nav a {
color: white;
font-size: 16px;
}
/* === バナーセクション === */
.banner {
background-image: url('https://via.placeholder.com/1200x400');
background-size: cover;
background-position: center;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
.banner h1 {
font-size: 36px;
margin-bottom: 10px;
}
.banner button {
background-color: #ff9900;
border: none;
color: white;
font-size: 16px;
padding: 10px 20px;
}
/* === 商品セクション === */
.products {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
}
.product {
width: 23%;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
text-align: center;
}
.product img {
height: 150px;
object-fit: cover;
border-radius: 8px;
}
.product h3 {
font-size: 18px;
margin: 10px 0;
}
.product .price {
font-size: 16px;
color: #ff9900;
margin-bottom: 10px;
}
.product button {
background-color: #ff9900;
color: white;
font-size: 14px;
}
.product .favorite {
background-color: #e0e0e0;
color: #333;
font-size: 14px;
margin-top: 10px;
}
/* === カートポップアップ === */
.cart-popup {
position: fixed;
top: 70px;
right: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
width: 300px;
padding: 20px;
display: none;
z-index: 1000;
}
.cart-popup h3 {
margin-bottom: 10px;
font-size: 18px;
}
.cart-popup .cart-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.cart-popup .cart-item span {
font-size: 14px;
}
.cart-popup button {
width: 100%;
background-color: #ff9900;
border: none;
color: white;
padding: 10px;
font-size: 16px;
}
/* === レスポンシブ対応 === */
@media (max-width: 768px) {
.product {
width: 48%;
}
header .search-bar {
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 480px) {
.product {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">Amazon風ECサイト</div>
<div class="search-bar">
<input type="text" placeholder="商品を検索">
<button>検索</button>
</div>
<div class="user-actions">
<a href="#">ログイン</a>
<div class="cart-icon" onclick="toggleCartPopup()">
<img src="https://via.placeholder.com/32" alt="カート">
<div class="cart-count">0</div>
</div>
</div>
</header>
<nav>
<a href="#">ホーム</a>
<a href="#">カテゴリ</a>
<a href="#">セール</a>
<a href="#">おすすめ</a>
</nav>
<div class="banner">
<div>
<h1>ビッグセール開催中！</h1>
<button>セールを見る</button>
</div>
</div>
<div class="products">
<div class="product">
<img src="https://via.placeholder.com/200" alt="商品1">
<h3>商品1</h3>
<div class="price">¥3,000</div>
<button onclick="addToCart('商品1', '¥3,000')">カートに追加</button>
<button class="favorite" onclick="addToFavorite('商品1')">お気に入り</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/200" alt="商品2">
<h3>商品2</h3>
<div class="price">¥5,000</div>
<button onclick="addToCart('商品2', '¥5,000')">カートに追加</button>
<button class="favorite" onclick="addToFavorite('商品2')">お気に入り</button>
</div>
</div>
<div class="cart-popup" id="cart-popup">
<h3>カートの中身</h3>
<div id="cart-items"></div>
<button onclick="checkout()">購入手続きへ</button>
</div>
<script>
let cart = [];
let favorites = [];
function addToCart(name, price) {
cart.push({ name, price });
updateCart();
alert(`${name} をカートに追加しました！`);
}
function addToFavorite(name) {
if (!favorites.includes(name)) {
favorites.push(name);
alert(`${name} をお気に入りに追加しました！`);
} else {
alert(`${name} はすでにお気に入りに追加されています！`);
}
}
function updateCart() {
const cartCount = document.querySelector('.cart-count');
const cartItems = document.getElementById('cart-items');
cartCount.textContent = cart.length;
cartItems.innerHTML = '';
cart.forEach(item => {
const div = document.createElement('div');
div.className = 'cart-item';
div.innerHTML = `<span>${item.name}</span><span>${item.price}</span>`;
cartItems.appendChild(div);
});
}
function toggleCartPopup() {
const cartPopup = document.getElementById('cart-popup');
cartPopup.style.display = cartPopup.style.display === 'block' ? 'none' : 'block';
}
function checkout() {
alert('購入手続きを開始します！');
cart = [];
updateCart();
toggleCartPopup();
}
</script>
</body>
</html>
高度なAI風文章生成ツール
<!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>
株価予想AI.html
<!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>
Youtube風サイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyTube - 動画共有プラットフォーム</title>
<style>
/* 共通スタイル */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
header {
background-color: #ff0000;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
header .logo {
font-size: 24px;
cursor: pointer;
}
header .search-bar input {
width: 300px;
padding: 8px;
border: none;
border-radius: 4px;
}
header .search-bar button {
padding: 8px 12px;
margin-left: 5px;
background-color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
header .user-menu img {
border-radius: 50%;
}
nav {
background-color: #333;
color: white;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: white;
}
main {
padding: 20px;
}
.video-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.video-card {
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
margin: 15px;
overflow: hidden;
width: 320px;
}
.video-card img {
width: 100%;
}
.video-card h3, .video-card p {
margin: 10px;
}
.video-player-page {
display: none;
}
.video-player {
max-width: 800px;
margin: 0 auto;
}
.video-player video {
width: 100%;
margin-bottom: 10px;
}
.recommendations ul {
list-style: none;
padding: 0;
}
.recommendations ul li {
display: flex;
margin-bottom: 10px;
}
.recommendations ul li img {
margin-right: 10px;
border-radius: 4px;
}
.comments textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
}
.comments button {
padding: 10px 15px;
background-color: #ff0000;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- ヘッダー -->
<header>
<div class="logo" onclick="showPage('home')">MyTube</div>
<div class="search-bar">
<input type="text" placeholder="動画を検索">
<button>検索</button>
</div>
<div class="user-menu">
<img src="https://via.placeholder.com/40" alt="ユーザーアイコン">
</div>
</header>
<nav>
<ul>
<li><a href="#" onclick="showPage('home')">ホーム</a></li>
<li><a href="#">トレンド</a></li>
<li><a href="#">音楽</a></li>
<li><a href="#">ゲーム</a></li>
<li><a href="#">ニュース</a></li>
</ul>
</nav>
<!-- ホームページ -->
<main class="video-grid" id="home-page">
<article class="video-card" onclick="showPage('video-player')">
<img src="https://via.placeholder.com/320x180" alt="Video Thumbnail">
<h3>動画タイトル1</h3>
<p>チャンネル名: ユーザーA</p>
<p>再生回数: 10,000回</p>
</article>
<article class="video-card" onclick="showPage('video-player')">
<img src="https://via.placeholder.com/320x180" alt="Video Thumbnail">
<h3>動画タイトル2</h3>
<p>チャンネル名: ユーザーB</p>
<p>再生回数: 8,500回</p>
</article>
</main>
<!-- 動画再生ページ -->
<main class="video-player-page" id="video-player-page">
<section class="video-player">
<video controls>
<source src="sample-video.mp4" type="video/mp4">
お使いのブラウザでは動画を再生できません。
</video>
<h1>動画タイトル1</h1>
<p>再生回数: 10,000回 | 投稿日: 2024年11月19日</p>
<p>チャンネル名: ユーザーA</p>
<p>動画の説明文: これは動画の説明文です。概要やリンク、関連情報をここに記載します。</p>
</section>
<aside class="recommendations">
<h2>おすすめ動画</h2>
<ul>
<li>
<a href="#" onclick="showPage('video-player')">
<img src="https://via.placeholder.com/150x100" alt="Video Thumbnail">
<p>動画タイトル2</p>
</a>
</li>
</ul>
</aside>
<section class="comments">
<h2>コメント</h2>
<form>
<textarea placeholder="コメントを追加"></textarea>
<button>送信</button>
</form>
<ul>
<li>ユーザーA: 素晴らしい動画です！</li>
<li>ユーザーB: もっと見たい！</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 MyTube - 動画共有プラットフォーム</p>
</footer>
<script>
function showPage(page) {
document.getElementById('home-page').style.display = page === 'home' ? 'block' : 'none';
document.getElementById('video-player-page').style.display = page === 'video-player' ? 'block' : 'none';
}
</script>
</body>
</html>
創作アイディア生成サイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>創作アイディア生成サイト</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--background-color, #f4f6f9);
}
.container {
max-width: 800px;
width: 90%;
padding: 20px;
text-align: center;
background-color: var(--chat-bg-color, #ffffff);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
margin-top: 20px;
}
.title {
font-size: 24px;
margin-bottom: 15px;
}
.theme-toggle-btn {
position: absolute;
right: 15px;
top: 15px;
padding: 5px 10px;
cursor: pointer;
border: none;
background-color: #0078d7;
color: #ffffff;
border-radius: 5px;
}
.dropdown, .input, .button {
width: 80%;
margin: 5px;
padding: 10px;
font-size: 16px;
}
.idea-display {
margin-top: 20px;
font-size: 18px;
padding: 15px;
color: #333;
background-color: #f4f4f4;
border-radius: 10px;
text-align: left;
}
.related-ideas {
font-size: 14px;
color: #555;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">創作アイディア生成サイト</h1>
<button class="theme-toggle-btn" onclick="toggleTheme()">🌙 ダークモード</button>
<label for="categorySelect">カテゴリを選択</label>
<select id="categorySelect" class="dropdown">
<option value="fantasy">ファンタジー</option>
<option value="sci-fi">SF</option>
<option value="mystery">ミステリー</option>
<option value="horror">ホラー</option>
</select>
<BR>
<label for="elementSelect">詳細要素を選択</label>
<select id="elementSelect" class="dropdown">
<option value="character">キャラクター</option>
<option value="plot">プロット</option>
<option value="setting">舞台設定</option>
<option value="theme">テーマ</option>
</select>
<button class="button" onclick="generateIdea()">アイディア生成</button>
<div class="idea-display" id="ideaDisplay">ここに生成されたアイディアが表示されます。</div>
<div class="related-ideas" id="relatedIdeas"></div>
</div>
<script>
const ideas = {
"fantasy": {
"character": ["勇敢な騎士", "神秘的な魔法使い", "不思議な生物"],
"plot": ["王国を救うための冒険", "魔法の秘宝を巡る争い", "禁断の魔法を探求する旅"],
"setting": ["ドラゴンが住む山", "不思議な森", "海底の王国"],
"theme": ["友情と勇気", "運命と戦い", "魔法と現実の対立"]
},
"sci-fi": {
"character": ["宇宙飛行士", "AIロボット", "サイボーグ"],
"plot": ["異星人との接触", "未来都市の陰謀", "宇宙戦争"],
"setting": ["宇宙ステーション", "荒廃した地球", "人工惑星"],
"theme": ["人間と機械の共存", "進化の危機", "文明の崩壊と再生"]
}
};
const relatedIdeas = {
"友情と勇気": ["戦場での友情", "共に戦う友人の絆"],
"運命と戦い": ["運命に抗うヒーロー", "過去を背負う主人公の決意"]
};
let isDarkMode = false;
function toggleTheme() {
isDarkMode = !isDarkMode;
document.body.style.setProperty("--background-color", isDarkMode ? "#333" : "#f4f6f9");
document.body.style.setProperty("--chat-bg-color", isDarkMode ? "#444" : "#ffffff");
document.querySelector(".theme-toggle-btn").textContent = isDarkMode ? "🌞 ライトモード" : "🌙 ダークモード";
}
function generateIdea() {
const category = document.getElementById("categorySelect").value;
const element = document.getElementById("elementSelect").value;
const ideaArray = ideas[category][element];
const randomIdea = ideaArray[Math.floor(Math.random() * ideaArray.length)];
document.getElementById("ideaDisplay").textContent = randomIdea;
displayRelatedIdeas(randomIdea);
}
function displayRelatedIdeas(idea) {
const relatedDiv = document.getElementById("relatedIdeas");
relatedDiv.innerHTML = "<h4>関連するアイディア:</h4>";
const relatedItems = relatedIdeas[idea] || ["関連アイディアが見つかりません"];
relatedItems.forEach(item => {
const relatedItemDiv = document.createElement("div");
relatedItemDiv.textContent = `- ${item}`;
relatedDiv.appendChild(relatedItemDiv);
});
}
</script>
</body>
</html>