programming - 長留裕平のブログ

Java ジェネリクス

public class MyApp {
  private static <T> void showThreeTimes(T n) {
    System.out.println(n);
    System.out.println(n);
    System.out.println(n);
  }

  public static void main(String[] args) {
    showThreeTimes(3);
    showThreeTimes(5.2);
  }
}

Java メソッド

public class MyApp {
  private static void showAd() {
    System.out.println("---------");
    System.out.println("SALE! 50% OFF!");
    System.out.println("---------");
  }

  private static void showContent() {
    System.out.println("BREAKING NEWS!");
    System.out.println("Two baby pandas born at our Zoo!");
  }

  public static void main(String[] args) {
    showAd();
    showContent();
    showAd();
  }
}

高度な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>

PHP トレイト

<?php
trait LogTrait
{
    public function log()
    {
        echo "Instance created" . PHP_EOL;
    }
}

abstract class Score
{
    use LogTrait;

    private $subject;
    protected $points;

    public function __construct($subject, $points)
    {
        $this->subject = $subject;
        $this->points = $points;
        $this->log();
    }

    abstract protected function getResult();

    public function getInfo()
    {
        return "{$this->subject}, {$this->points}, {$this->getResult()}";
    }
}

class MathScore extends Score
{
    public function __construct($points)
    {
        parent::__construct("Math", $points);
    }

    protected function getResult()
    {
        echo "MathScore method" . PHP_EOL;
        return $this->points >= 50 ? "Pass" : "Fail";
    }
}

class EnglishScore extends Score
{
    public function __construct($points)
    {
        parent::__construct("English", $points);
    }

    protected function getResult()
    {
        echo "EnglishScore method" . PHP_EOL;
        return $this->points >= 95 ? "Pass" : "Fail";
    }
}

class User
{
    use LogTrait;

    private $name;
    private $score;

    public function __construct($name, $score)
    {
        $this->name = $name;
        $this->score = $score;
        $this->log();
    }

    public function getInfo()
    {
        return "{$this->name}, {$this->score->getInfo()}";
    }
}

$user1 = new User("Taro", new MathScore(70));
$user2 = new User("Jiro", new EnglishScore(90));

echo $user1->getInfo() . PHP_EOL;
echo $user2->getInfo() . PHP_EOL;

PHP logメソッド

<?php
interface Loggable
{
    public function log();
}

abstract class Score implements Loggable
{
    private $subject;
    protected $points;

    public function __construct($subject, $points)
    {
        $this->subject = $subject;
        $this->points = $points;
        $this->log();
    }
    public function log()
    {
        echo "Instance created: {$this->subject}" . PHP_EOL;
    }

    abstract protected function getResult();

    public function getInfo()
    {
        return "{$this->subject}, {$this->points}, {$this->getResult()}";
    }
}

class MathScore extends Score
{
    public function __construct($points)
    {
        parent::__construct("Math", $points);
    }

    protected function getResult()
    {
        echo "MathScore method" . PHP_EOL;
        return $this->points >= 50 ? "Pass" : "Fail";
    }
}

class EnglishScore extends Score
{
    public function __construct($points)
    {
        parent::__construct("English", $points);
    }

    protected function getResult()
    {
        echo "EnglishScore method" . PHP_EOL;
        return $this->points >= 95 ? "Pass" : "Fail";
    }
}

class User implements Loggable
{
    private $name;
    private $score;

    public function __construct($name, $score)
    {
        $this->name = $name;
        $this->score = $score;
        $this->log();
    }
    public function log()
    {
        echo "Instance created: {$this->name}" . PHP_EOL;
    }
    public function getInfo()
    {
        return "{$this->name}, {$this->score->getInfo()}";
    }
}

$user1 = new User("Taro", new MathScore(70));
$user2 = new User("Jiro", new EnglishScore(90));

echo $user1->getInfo() . PHP_EOL;
echo $user2->getInfo() . PHP_EOL;

PHP 抽象メソッド

<?php
abstract class Score
{
    private $subject;
    protected $points;

    public function __construct($subject, $points)
    {
        $this->subject = $subject;
        $this->points = $points;
    }

    abstract protected function getResult();

    public function getInfo()
    {
        return "{$this->subject}, {$this->points}, {$this->getResult()}";
    }
}

class MathScore extends Score
{
    public function __construct($points)
    {
        parent::__construct("Math", $points);
    }

    // protected function getResult()
    // {
    //     echo "MathScore method" . PHP_EOL;
    //     return $this->points >= 50 ? "Pass" : "Fail";
    // }
}

class EnglishScore extends Score
{
    public function __construct($points)
    {
        parent::__construct("English", $points);
    }

    protected function getResult()
    {
        echo "EnglishScore method" . PHP_EOL;
        return $this->points >= 95 ? "Pass" : "Fail";
    }
}

class User
{
    private $name;
    private $score;

    public function __construct($name, $score)
    {
        $this->name = $name;
        $this->score = $score;
    }

    public function getInfo()
    {
        return "{$this->name}, {$this->score->getInfo()}";
    }
}

$user1 = new User("Taro", new MathScore(70));
$user2 = new User("Jiro", new EnglishScore(90));

echo $user1->getInfo() . PHP_EOL;
echo $user2->getInfo() . PHP_EOL;

PHP 子クラス

<?php
class Score
{
    private $subject;
    private $points;

    public function __construct($subject, $points)
    {
        $this->subject = $subject;
        $this->points = $points;
    }

    private function getResult()
    {
        return $this->points >= 80 ? "Pass" : "Fail";
    }

    public function getInfo()
    {
        return "{$this->subject}, {$this->points}, {$this->getResult()}";
    }
}

class MathScore extends Score
{
    public function __construct($points)
    {
        parent::__construct("Math", $points);
    }
}

class EnglishScore extends Score
{
    public function __construct($points)
    {
        parent::__construct("English", $points);
    }
}

class User
{
    private $name;
    private $score;

    public function __construct($name, $score)
    {
        $this->name = $name;
        $this->score = $score;
    }

    public function getInfo()
    {
        return "{$this->name}, {$this->score->getInfo()}";
    }
}

$user1 = new User("Taro", new MathScore(70));
$user2 = new User("Jiro", new EnglishScore(90));

echo $user1->getInfo() . PHP_EOL;
echo $user2->getInfo() . PHP_EOL;

ChatGPT風サイト.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高度なChatGPT風チャット</title>
    <style>
        /* 全体のスタイル */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: var(--background-color, #f4f6f9);
            transition: background-color 0.3s ease;
        }
        .chat-container {
            width: 90%;
            max-width: 600px;
            background-color: var(--chat-bg-color, #ffffff);
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: background-color 0.3s ease;
        }
        .chat-header {
            padding: 15px;
            text-align: center;
            background-color: var(--header-bg-color, #3f51b5);
            color: var(--header-text-color, #ffffff);
            font-weight: bold;
            position: relative;
        }
        .theme-toggle-btn {
            position: absolute;
            right: 15px;
            top: 15px;
            padding: 5px 10px;
            cursor: pointer;
            border: none;
            background-color: var(--header-text-color, #ffffff);
            color: var(--header-bg-color, #3f51b5);
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        .chat-messages {
            padding: 20px;
            overflow-y: auto;
            flex-grow: 1;
            border-bottom: 1px solid #ddd;
            max-height: 70vh;
        }
        .message {
            margin-bottom: 15px;
            line-height: 1.5;
            display: inline-block;
            max-width: 70%;
            padding: 10px;
            border-radius: 10px;
            animation: fadeIn 0.3s ease;
        }
        .user-message {
            text-align: right;
            color: #333;
            background-color: var(--user-msg-bg-color, #e0f7fa);
            align-self: flex-end;
        }
        .bot-message {
            text-align: left;
            color: var(--bot-msg-color, #3f51b5);
            background-color: var(--bot-msg-bg-color, #e8eaf6);
            align-self: flex-start;
        }
        .typing-indicator {
            font-style: italic;
            color: #999;
            display: none;
        }
        .chat-input {
            display: flex;
            padding: 10px;
            background-color: #f4f6f9;
            border-top: 1px solid #ddd;
        }
        .chat-input input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            outline: none;
        }
        .chat-input button {
            margin-left: 10px;
            padding: 12px 20px;
            background-color: var(--button-bg-color, #3f51b5);
            color: var(--button-text-color, #ffffff);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        /* アニメーション効果 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            高度なChatGPT風 チャット
            <button class="theme-toggle-btn" onclick="toggleTheme()">🌞 ダークモード</button>
        </div>
        <div class="chat-messages" id="chatMessages">
            <div class="message bot-message">こんにちは！質問があればどうぞ。</div>
        </div>
        <div class="typing-indicator" id="typingIndicator">Botが入力中...</div>
        <div class="chat-input">
            <input type="text" id="userInput" placeholder="メッセージを入力..." />
            <button onclick="sendMessage()">送信</button>
        </div>
    </div>

    <script>
        let currentTopic = null; // 現在のトピックを保持
        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.body.style.setProperty("--header-bg-color", isDarkMode ? "#555" : "#3f51b5");
            document.body.style.setProperty("--header-text-color", isDarkMode ? "#fff" : "#ffffff");
            document.body.style.setProperty("--user-msg-bg-color", isDarkMode ? "#666" : "#e0f7fa");
            document.body.style.setProperty("--bot-msg-bg-color", isDarkMode ? "#777" : "#e8eaf6");
            document.body.style.setProperty("--bot-msg-color", isDarkMode ? "#aaa" : "#3f51b5");
            document.body.style.setProperty("--button-bg-color", isDarkMode ? "#888" : "#3f51b5");
            document.body.style.setProperty("--button-text-color", isDarkMode ? "#fff" : "#ffffff");
            document.querySelector(".theme-toggle-btn").textContent = isDarkMode ? "🌜 ライトモード" : "🌞 ダークモード";
        }

        function saveChatHistory(text, sender) {
            const chatMessages = document.getElementById("chatMessages");
            const messageElement = document.createElement("div");
            messageElement.className = `message ${sender}-message`;
            messageElement.textContent = text;
            chatMessages.appendChild(messageElement);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function getBotResponse(userMessage) {
            if (userMessage.includes("ありがとう")) {
                currentTopic = "ありがとう";
                return "どういたしまして！お役に立てて嬉しいです！";
            } else if (userMessage.includes("助けて")) {
                currentTopic = "助けて";
                return "どのようなことでお困りですか？";
            } else if (userMessage.includes("質問")) {
                currentTopic = "質問";
                return "どのような質問でしょうか？詳しく教えてください！";
            } else if (currentTopic === "ありがとう") {
                return "他に質問があればいつでもどうぞ。";
            } else {
                currentTopic = null;
                return "ご質問ありがとうございます。どのような内容でしょうか？";
            }
        }

        function showTypingIndicator() {
            document.getElementById("typingIndicator").style.display = "block";
        }

        function hideTypingIndicator() {
            document.getElementById("typingIndicator").style.display = "none";
        }

        function sendMessage() {
            const userInput = document.getElementById("userInput");
            if (userInput.value.trim() !== "") {
                saveChatHistory(userInput.value, "user");

                showTypingIndicator();
                setTimeout(() => {
                    hideTypingIndicator();
                    const botResponse = getBotResponse(userInput.value);
                    saveChatHistory(botResponse, "bot");
                }, 1500);

                userInput.value = "";
            }
        }

        // Enterキーでメッセージ送信
        document.getElementById("userInput").addEventListener("keypress", function(event) {
            if (event.key === "Enter") {
                sendMessage();
                event.preventDefault();
            }
        });
    </script>
</body>
</html>