カテゴリー: programming

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');
        });
    });
}

ゼロから始めるC++：初心者が知っておきたい基礎と応用

C++とは？その基礎と特徴

C++の概要と歴史

　C++は1983年にビャーネ・ストロヴストルップ氏によって開発された汎用プログラミング言語です。この言語は、C言語を基盤にしつつ、オブジェクト指向プログラミングやジェネリックプログラミングなどの高度な手法を導入しています。C++はその後の改良を重ね、1998年に初めて標準化（C++98）されました。その後、C++11、C++17、C++20といった形で規格が定期的に更新され、最新バージョンが登場しています。この言語は、システムレベルのプログラミングからアプリケーション開発まで幅広い分野で使用され、高い性能と柔軟性を持つ言語として知られています。

C言語との比較：どんな点が異なるのか？

　C++はC言語をベースにしているものの、オブジェクト指向プログラミングや高水準の抽象化をサポートしている点が大きな違いです。具体的には、C++では「クラス」や「オブジェクト」といった構造を通じて、コードの再利用性やメンテナンス性を向上させることができます。また、C++はテンプレートや例外処理といったジェネリックプログラミングのための機能も提供しています。一方で、C言語はシンプルで低水準な操作に向いており、高度な制御が可能なため、システムプログラミングに最適化されています。このため、C++はC言語の柔軟性を引き継ぎつつ、プログラムの設計と管理を容易にするための多くの機能を追加した言語といえます。

C++の主な用途と強み

　C++は、その高いパフォーマンスと柔軟性から、さまざまな分野で利用されています。具体的には、オペレーティングシステム、デバイスドライバ、ゲーム開発、グラフィックス処理、科学技術計算、金融市場向けアプリケーションなどに使用されます。C++の強みとしては、ネイティブコードでコンパイルされるためパフォーマンスが非常に高いこと、またシステムに密接に近いプログラムが可能である点が挙げられます。さらに、最新の標準規格により、より安全かつ効率的なコーディングが可能となっています。このように、C++は初心者からベテランプログラマーまで幅広く支持される言語です。

基本的なプログラム構造

　C++の基本的なプログラム構造はわかりやすい設計になっています。たとえば、以下は典型的なC++プログラムの例です。

　 #include <iostream> using namespace std; int main() { cout << "Hello, World!" << endl; return 0; }

　このコードでは、#include <iostream>で標準ライブラリをインクルードし、coutを利用して画面に文字列を出力しています。main関数がプログラムのエントリーポイントです。基本的な構造がシンプルである反面、強力なカスタマイズ機能や拡張性も備えています。

C++でよく使うツールと環境

　C++開発を始めるためには、適切なツールと環境を整えることが重要です。一般的によく使用されるC++のコンパイラとしては、GCC（GNU Compiler Collection）やClang、Microsoft Visual C++、Intel C++ Compilerなどがあります。また、開発環境（IDE）としては、Visual Studio、CLion、Code::Blocks、Dev-C++などが利用されています。これらのツールは豊富なデバッグ機能や補完機能を提供し、開発の効率を向上させます。また、クロスプラットフォーム対応の性質を活かし、Windows、Linux、macOSなどのさまざまな環境でC++プログラムの開発が可能です。

C++プログラミングの基礎を学ぶ

変数と基本データ型

　変数とは、データを格納するための箱のようなもので、C++ではプログラム中のデータの管理に重要な役割を果たします。変数を利用するためには型を指定する必要があり、これをデータ型と呼びます。C++にはいくつかの基本データ型があり、代表的なものとして整数型（int）、浮動小数点型（float, double）、文字型（char）、ブール型（bool）があります。

　例えば、整数を格納するにはint number = 10;のように記述します。また、C++は強い静的型付けの特徴を持つため、変数を宣言する際に型を明示しなければなりません。ただし、autoというキーワードを使用することで、コンパイラに型を推測させることも可能です。

演算子と制御文の使い方

　C++にはさまざまな演算子が用意されており、足し算や引き算などの基本的な算術演算子（+、-、*、/、%）に加え、比較演算子（==、!=、<、>など）や論理演算子（&&、||、!）が一般的に使用されます。これらの演算子を活用することで、より柔軟な処理を実現できます。

　制御文は、プログラムの実行フローを制御するために用いられます。例えば、条件分岐に使用されるif、繰り返し処理を行うforやwhileループがあります。

　以下はif文とfor文の簡単な例です：

if (x > 0) {
    cout << "xは正の値です。" << endl;
}

for (int i = 0; i < 5; i++) {
    cout << "現在のiの値: " << i << endl;
}

関数とスコープ

　関数は特定の処理をまとめるために使用されるもので、プログラムの再利用性や可読性を高めます。C++では、関数を定義する際に戻り値の型、関数名、引数リストを指定します。例えば、以下のような簡単な関数を作成できます：

int add(int a, int b) {
    return a + b;
}

　関数のスコープとは、変数や関数がアクセス可能な範囲を指します。スコープには、ローカルスコープとグローバルスコープがあります。ローカルスコープは関数内で定義された変数に適用され、グローバルスコープはプログラム全体でアクセスできる変数に適用されます。

入出力操作: cinとcout

　C++のプログラムにおける基本的な入出力操作には、cinとcoutが使用されます。coutを使用するとコンソール画面にデータを出力することができ、cinを使用するとユーザーからの入力を受け取ることができます。以下はその例です：

#include <iostream>
using namespace std;

int main() {
    int age;
    cout << "年齢を入力してください: ";
    cin >> age;
    cout << "あなたの年齢は " << age << " 歳です。" << endl;
    return 0;
}

　上記例では、cinでユーザーから入力を受け取り、それをcoutで表示しています。このようにしてデータを動的に扱うことが可能です。

メモリ管理とポインタの概念

　C++の特徴の一つとして、メモリ管理をプログラマーが詳細に制御できる点が挙げられます。これにはポインタが密接に関わっています。ポインタとは、他の変数のメモリアドレスを格納する特殊な変数のことです。以下はポインタの基本的な使用例です：

int x = 10;
int* ptr = &x; // xのアドレスを取得してptrに格納
cout << "xの値: " << x << endl;
cout << "ptrが指す値: " << *ptr << endl; // ポインタ経由でxの値を取得

　C++では、newキーワードで動的にメモリを割り当て、deleteキーワードでそのメモリを解放する必要があります。ただし、モダンC++（C++11以降）ではsmart pointersの導入により、手動でのメモリ管理の必要性が大幅に減少しています。

オブジェクト指向プログラミングとC++

クラスとオブジェクトの基本

　クラスとオブジェクトは、C++のオブジェクト指向プログラミングの基盤となる重要な概念です。クラスはデータ構造や操作（メソッド）を定義する設計図のような役割を果たします。一方、オブジェクトはそのクラスをもとに生成された実際のインスタンスで、クラスで定義されたプロパティやメソッドを持っています。

　例えば、「車」というクラスを作成すると、それをもとに「自動車A」や「自動車B」といった具体的なオブジェクトを生成することができます。このようなモデリングを行うことで、コードの再利用性と構造の明確化が実現できます。C++を使用すると、これらのクラスやオブジェクトを効率的に扱うことが可能です。

コンストラクタとデストラクタ

　コンストラクタとデストラクタは、クラスの初期化と解放を行う特別なメソッドです。コンストラクタはオブジェクトが生成される際に自動的に呼び出され、初期化処理を行います。たとえば、クラス内のメンバ変数の設定や必要なリソースの確保などが含まれます。一方、デストラクタはオブジェクトが破棄される際に自動的に呼び出され、リソースの解放や終了処理を行います。

　これにより、C++では手動でメモリ管理を行う必要がある場面でも、効率的かつ安全にリソースを管理することが可能です。特に動的メモリを扱う場合、これらの仕組みを活用することで、メモリリークを防ぐことができます。

継承と多態性（ポリモーフィズム）

　継承は既存のクラスの機能を引き継ぎつつ、新しい機能を追加できる仕組みです。C++では、子クラスは親クラスからプロパティやメソッドを受け継ぐことができるため、コードの再利用性と拡張性が向上します。一例として、「動物」という親クラスを作成し、その動物クラスを継承した「犬」や「猫」という子クラスを作ることが挙げられます。

　多態性（ポリモーフィズム）は、同じインターフェースを使用して、異なる動作をするメソッドを実現する仕組みです。これにより、動的バインディングを使用して、派生クラスで定義されたメソッドが実行されるようになります。C++では、仮想関数（virtual関数）を利用することでポリモーフィズムを実装できます。

テンプレートとSTL（標準テンプレートライブラリ）の活用

　C++にはジェネリックプログラミングをサポートするテンプレート機能があります。テンプレートを使用すると、型に依存しない汎用的なクラスや関数を作成でき、異なるデータ型にも対応できる柔軟なプログラム開発が可能です。例えば、整数や文字列といった異なる型を扱う配列クラスをテンプレートで効率的に構築できます。

　また、標準テンプレートライブラリ（STL）は、C++の強力なツールセットの1つで、効率的なデータ構造（例えば、ベクターやリスト）やアルゴリズム（ソートや検索など）が含まれています。テンプレートとSTLを活用することで、開発の効率を大幅に向上させることができます。

実践的なC++プログラミング

例外処理とエラーハンドリング

　C++では、プログラムの実行中に発生するエラーを適切に処理するための仕組みとして例外処理が用意されています。try、catch、throwを使うことで、発生したエラーを捕捉し、対処を簡潔に記述できます。これにより、異常時の挙動を明確にし、プログラムが途中で異常終了することを防ぐことが可能です。

　例えば、ファイルが存在しない場合や、メモリ不足が発生した場合など、意図しない状況への対応を容易にします。また、C++の標準ライブラリには多くの例外クラスが用意されており、適切なエラーハンドリングが求められる場面において活用されます。

モダンC++の新機能（C++11以降）

　C++11以降、言語仕様に多くの改良が加えられ、より簡潔で効率的なプログラムが記述できるようになりました。新しい機能として、ラムダ式、スマートポインタ（std::shared_ptrやstd::unique_ptr）、constexpr、auto型推論、範囲ベースforループなどがあります。

　特にスマートポインタは、プログラマが手動でメモリを管理する手間を減らし、メモリリークのリスクを軽減します。また、C++17ではstd::optionalや構造化束縛、C++20ではコルーチンやコンセプト（Concepts）などが追加され、より直感的かつ表現力豊かな記述が可能になっています。

　これらのモダンC++の機能を活用することで、保守性やパフォーマンスが向上した高品質なコードを記述することができます。

デバッグと最適化の基礎

　C++は高性能なプログラムを記述できる一方で、バグの発見や解消が他の言語に比べて難しい場合があります。そのため、デバッグの基本的な手法を身に着けることが重要です。主な方法として、デバッガを活用してブレークポイントを設定したり、変数の状態を監視したりすることが挙げられます。主に使用されるツールとして、GDBやVisual Studioのデバッグ機能などがあります。

　デバッグだけでなく、最適化も重要なポイントです。コードの性能を向上させるためには、計算量や必要なメモリの削減を意識した設計が求められます。C++はコンパイル時の最適化が強力であり、その特性を活かして無駄のないネイティブコードを生成することが可能です。また、プロファイリングツールを使えばボトルネックの特定や性能改善のヒントを得ることができます。

プロジェクト設計とコードの再利用性

　C++で大規模なプロジェクトを設計する際には、オブジェクト指向プログラミング(OOP)の概念が強力なツールとなります。クラスや継承を活用することで、機能の拡張やメンテナンスが容易になり、コードの再利用性を高めることが可能です。また、ジェネリックプログラミングを用いてテンプレートを活用することで、汎用性の高いコードを実現できます。

　さらに、モジュール化を通じてコードを分割し、他のプロジェクトでも再利用できるライブラリとして活用することも可能です。例えば、C++の標準テンプレートライブラリ(STL)は再利用性の高い優れた例であり、開発者が効率よく開発を進めるための良い参考となります。

　効率的なプロジェクト設計は、ソフトウェアの保守性を向上させ、複雑なシステムをシンプルに管理する鍵となります。設計段階で再利用性に配慮することで、完成後のコスト削減にも繋がります。

【python】クローラー型検索エンジン

import requests
from bs4 import BeautifulSoup
from urllib.parse import urljoin, urlparse
import sqlite3
import threading
import queue
import tkinter as tk
from tkinter import ttk, messagebox

# データベース設定
DB_NAME = "gui_search_engine.db"
conn = sqlite3.connect(DB_NAME, check_same_thread=False)
cursor = conn.cursor()

# テーブル作成
cursor.execute("""
CREATE TABLE IF NOT EXISTS pages (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    url TEXT UNIQUE,
    title TEXT,
    description TEXT,
    content TEXT
)
""")
conn.commit()

# グローバル変数
visited = set()
visited_lock = threading.Lock()
task_queue = queue.Queue()
MAX_THREADS = 5

# ページをデータベースに保存
def save_page_to_db(url, title, description, content):
    try:
        cursor.execute("INSERT INTO pages (url, title, description, content) VALUES (?, ?, ?, ?)",
                       (url, title, description, content))
        conn.commit()
    except sqlite3.IntegrityError:
        pass  # URL重複時は無視

# URL正規化
def normalize_url(base, link):
    return urljoin(base, link).split('#')[0]

# クローラー
def crawl(url, domain, status_label):
    with visited_lock:
        if url in visited:
            return
        visited.add(url)

    try:
        response = requests.get(url, timeout=10)
        soup = BeautifulSoup(response.content, "html.parser")

        # メタデータ収集
        title = soup.title.string if soup.title else "No Title"
        description_tag = soup.find("meta", attrs={"name": "description"})
        description = description_tag["content"] if description_tag else "No Description"
        content = soup.get_text()

        # データベースに保存
        save_page_to_db(url, title, description, content)

        # ステータス更新
        status_label.config(text=f"Crawling: {url}")

        # 次のURLを収集
        for link in soup.find_all('a', href=True):
            full_url = normalize_url(url, link['href'])
            if urlparse(full_url).netloc == domain:
                task_queue.put(full_url)
    except Exception as e:
        print(f"Error crawling {url}: {e}")

# 並列クローリング
def start_crawling(start_url, domain, status_label):
    visited.clear()
    task_queue.put(start_url)

    def worker():
        while not task_queue.empty():
            url = task_queue.get()
            crawl(url, domain, status_label)
        status_label.config(text="Crawling Complete")

    threads = []
    for _ in range(MAX_THREADS):
        thread = threading.Thread(target=worker)
        threads.append(thread)
        thread.start()
    for thread in threads:
        thread.join()

# 検索機能
def search(query, results_box):
    cursor.execute("SELECT url, title, description FROM pages WHERE content LIKE ?", (f"%{query}%",))
    results = cursor.fetchall()
    results_box.delete(*results_box.get_children())  # 結果をクリア

    if not results:
        messagebox.showinfo("検索結果", "該当する結果はありませんでした。")
    else:
        for url, title, description in results:
            results_box.insert("", "end", values=(title, url, description[:100]))

# GUI設計
def create_gui():
    root = tk.Tk()
    root.title("クローラー型検索エンジン")

    # フレーム構成
    frame_crawl = ttk.Frame(root, padding=10)
    frame_crawl.grid(row=0, column=0, sticky="ew")
    frame_search = ttk.Frame(root, padding=10)
    frame_search.grid(row=1, column=0, sticky="nsew")

    # クローリングセクション
    ttk.Label(frame_crawl, text="スタートURL:").grid(row=0, column=0, padx=5, pady=5, sticky="w")
    url_entry = ttk.Entry(frame_crawl, width=50)
    url_entry.grid(row=0, column=1, padx=5, pady=5, sticky="w")

    status_label = ttk.Label(frame_crawl, text="Status: Ready", foreground="blue")
    status_label.grid(row=1, column=0, columnspan=2, padx=5, pady=5, sticky="w")

    def on_crawl():
        start_url = url_entry.get().strip()
        if not start_url:
            messagebox.showerror("Error", "スタートURLを入力してください。")
            return

        # スキーム補完
        if not start_url.startswith(("http://", "https://")):
            start_url = "https://" + start_url

        # ドメインを取得
        domain = urlparse(start_url).netloc
        status_label.config(text="Crawling in Progress...")
        threading.Thread(target=start_crawling, args=(start_url, domain, status_label)).start()

    ttk.Button(frame_crawl, text="クローリング開始", command=on_crawl).grid(row=0, column=2, padx=5, pady=5)

    # 検索セクション
    ttk.Label(frame_search, text="検索クエリ:").grid(row=0, column=0, padx=5, pady=5, sticky="w")
    query_entry = ttk.Entry(frame_search, width=30)
    query_entry.grid(row=0, column=1, padx=5, pady=5, sticky="w")

    results_box = ttk.Treeview(frame_search, columns=("Title", "URL", "Description"), show="headings")
    results_box.heading("Title", text="タイトル")
    results_box.heading("URL", text="URL")
    results_box.heading("Description", text="説明")
    results_box.grid(row=1, column=0, columnspan=3, padx=5, pady=5, sticky="nsew")

    def on_search():
        query = query_entry.get().strip()
        if not query:
            messagebox.showerror("Error", "検索クエリを入力してください。")
            return
        search(query, results_box)

    ttk.Button(frame_search, text="検索", command=on_search).grid(row=0, column=2, padx=5, pady=5)

    # ウィンドウサイズ調整
    root.columnconfigure(0, weight=1)
    frame_search.rowconfigure(1, weight=1)

    root.mainloop()

# GUI起動
if __name__ == "__main__":
    create_gui()

    # データベース接続を閉じる
    conn.close()

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;

神と対話する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 {
      font-family: 'Georgia', serif;
      background-color: #1a1a2e;
      color: #d1d1e9;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      overflow: hidden;
    }
    .chat-container {
      width: 100%;
      max-width: 600px;
      background-color: rgba(43, 43, 63, 0.9);
      border-radius: 10px;
      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
      padding: 20px;
      position: relative;
      overflow: hidden;
    }
    .messages {
      height: 300px;
      overflow-y: auto;
      margin-bottom: 10px;
      padding-right: 10px;
    }
    .message {
      margin: 10px 0;
      line-height: 1.5;
    }
    .user-message {
      text-align: right;
      color: #00aaff;
    }
    .ai-message {
      text-align: left;
      color: #e6e6fa;
      font-style: italic;
    }
    .typing-indicator {
      font-size: 1.5em;
      color: #e6e6fa;
    }
    .input-container {
      display: flex;
    }
    input[type="text"] {
      flex: 1;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #555;
      background-color: #444;
      color: #e6e6fa;
      margin-right: 10px;
    }
    button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      background-color: #5a5adb;
      color: white;
      cursor: pointer;
    }
    /* 背景アニメーション */
    .background-animation {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0) 70%);
      animation: glow 5s infinite alternate;
      pointer-events: none;
    }
    @keyframes glow {
      from {
        opacity: 0.4;
      }
      to {
        opacity: 0.7;
      }
    }
  </style>
</head>
<body>

<div class="chat-container">
  <h2>神と対話するAI</h2>
  <div class="messages" id="messages"></div>
  <div class="input-container">
    <input type="text" id="userInput" placeholder="質問を入力してください...">
    <button onclick="sendMessage()">送信</button>
  </div>
  <div class="background-animation"></div>
</div>

<script>
  const messagesContainer = document.getElementById("messages");

  function addMessage(content, className) {
    const message = document.createElement("div");
    message.className = "message " + className;
    message.innerHTML = content;
    messagesContainer.appendChild(message);
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }

  function getAIResponse(userMessage) {
    const responses = {
      "目的": [
        "あなたの目的はあなたの選択の中にあります。心を澄まし、その小さな声に耳を傾けなさい。",
        "目的は定まっているものではなく、あなたが形作るものです。勇気を持って探し続けなさい。"
      ],
      "未来": [
        "未来は揺れ動く霧のようなもの…手の中にありながら捉えられぬもの。だが、あなたの意思がその霧を晴らすだろう。",
        "未来は、あなたの内にある希望が灯し出すもの。信じる道を歩みなさい。"
      ],
      "愛": [
        "愛とは、無限に与えること。光のようにあなたを包み、他者を受け入れるものです。",
        "愛とは、心の中の静けさと繋がり、他者の存在をただあるがままに受け入れること。"
      ],
      "default": [
        "その問いの答えは、あなた自身が見つけ出すもの。内なる声を信じなさい。",
        "すべての答えは既にあなたの心の中にあります。耳を澄まし、その声に従いなさい。"
      ]
    };

    const keywords = Object.keys(responses);
    for (let keyword of keywords) {
      if (userMessage.includes(keyword)) {
        const possibleResponses = responses[keyword];
        return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
      }
    }
    
    const defaultResponses = responses["default"];
    return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
  }

  function sendMessage() {
    const userInput = document.getElementById("userInput").value.trim();
    if (userInput === "") return;

    addMessage(userInput, "user-message");
    document.getElementById("userInput").value = "";

    const aiResponse = getAIResponse(userInput);

    // タイピングエフェクトを表示
    setTimeout(() => {
      addMessage(`<span class="typing-indicator">...</span>`, "ai-message");
      setTimeout(() => {
        messagesContainer.lastChild.remove();
        addMessage(aiResponse, "ai-message");
      }, 2000); // タイピングエフェクト表示後の応答
    }, 800); // 遅延で自然な応答
  }
</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 {
      font-family: 'Georgia', serif;
      background-color: #1a1a2e;
      color: #d1d1e9;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      overflow: hidden;
    }
    .chat-container {
      width: 100%;
      max-width: 600px;
      background-color: rgba(43, 43, 63, 0.9);
      border-radius: 10px;
      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
      padding: 20px;
      position: relative;
      overflow: hidden;
    }
    .messages {
      height: 300px;
      overflow-y: auto;
      margin-bottom: 10px;
      padding-right: 10px;
    }
    .message {
      margin: 10px 0;
      line-height: 1.5;
    }
    .user-message {
      text-align: right;
      color: #00aaff;
    }
    .ai-message {
      text-align: left;
      color: #e6e6fa;
      font-style: italic;
    }
    .typing-indicator {
      font-size: 1.5em;
      color: #e6e6fa;
    }
    .input-container {
      display: flex;
    }
    input[type="text"] {
      flex: 1;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #555;
      background-color: #444;
      color: #e6e6fa;
      margin-right: 10px;
    }
    button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      background-color: #5a5adb;
      color: white;
      cursor: pointer;
    }
    /* 背景アニメーション */
    .background-animation {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0) 70%);
      animation: glow 5s infinite alternate;
      pointer-events: none;
    }
    @keyframes glow {
      from {
        opacity: 0.4;
      }
      to {
        opacity: 0.7;
      }
    }
  </style>
</head>
<body>

<div class="chat-container">
  <h2>神と対話するAI</h2>
  <div class="messages" id="messages"></div>
  <div class="input-container">
    <input type="text" id="userInput" placeholder="質問を入力してください...">
    <button onclick="sendMessage()">送信</button>
  </div>
  <div class="background-animation"></div>
</div>

<script>
  const messagesContainer = document.getElementById("messages");

  function addMessage(content, className) {
    const message = document.createElement("div");
    message.className = "message " + className;
    message.innerHTML = content;
    messagesContainer.appendChild(message);
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }

  function getAIResponse(userMessage) {
    const responses = {
      "目的": [
        "あなたの目的はあなたの選択の中にあります。心を澄まし、その小さな声に耳を傾けなさい。",
        "目的は定まっているものではなく、あなたが形作るものです。勇気を持って探し続けなさい。"
      ],
      "未来": [
        "未来は揺れ動く霧のようなもの…手の中にありながら捉えられぬもの。だが、あなたの意思がその霧を晴らすだろう。",
        "未来は、あなたの内にある希望が灯し出すもの。信じる道を歩みなさい。"
      ],
      "愛": [
        "愛とは、無限に与えること。光のようにあなたを包み、他者を受け入れるものです。",
        "愛とは、心の中の静けさと繋がり、他者の存在をただあるがままに受け入れること。"
      ],
      "default": [
        "その問いの答えは、あなた自身が見つけ出すもの。内なる声を信じなさい。",
        "すべての答えは既にあなたの心の中にあります。耳を澄まし、その声に従いなさい。"
      ]
    };

    const keywords = Object.keys(responses);
    for (let keyword of keywords) {
      if (userMessage.includes(keyword)) {
        const possibleResponses = responses[keyword];
        return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
      }
    }
    
    const defaultResponses = responses["default"];
    return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
  }

  function sendMessage() {
    const userInput = document.getElementById("userInput").value.trim();
    if (userInput === "") return;

    addMessage(userInput, "user-message");
    document.getElementById("userInput").value = "";

    const aiResponse = getAIResponse(userInput);

    // タイピングエフェクトを表示
    setTimeout(() => {
      addMessage(`<span class="typing-indicator">...</span>`, "ai-message");
      setTimeout(() => {
        messagesContainer.lastChild.remove();
        addMessage(aiResponse, "ai-message");
      }, 2000); // タイピングエフェクト表示後の応答
    }, 800); // 遅延で自然な応答
  }
</script>

</body>
</html>

PHP クラスメソッド

<?php
class User
{
    public $name;
    public $score;
    private static $count = 0;

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

    public static function getUserCount()
    {
        return User::$count;
    }
}

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

//User::$count++;
//echo User::$count . PHP_EOL;
echo User::getUserCount() . PHP_EOL;

PHP クラスプロパティ

<?php
class User
{
    public $name;
    public $score;
    public static $count = 0;

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

// $count = 0;
$user1 = new User("Taro", 70);
// $count++;
$user2 = new User("Jiro", 90);
// $count++;

// echo $count . PHP_EOL;
echo User::$count . PHP_EOL;

PHP setScoreメソッド

<?php
class User
{
    public $name;
    public $score;

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

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

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

$user1->score = 900;

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