PHPで簡易チャットを作る方法【サンプルコード付き】

php

PHPで簡易チャットを作る方法

PHPで簡易チャットを作る方法を紹介します。このサンプルでは、名前とメッセージを入力してチャットへ投稿し、投稿内容を一覧表示できます。チャットデータはCSVファイルへ保存されるため、ページを再読み込みしても内容が保持されます。社内連絡や簡易メッセージ機能、サポートチャットなどを手軽に作成したい場合に利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

PHP簡易チャット
自分
2026-06-12 09:00:01
今日の待ち合わせの時間は？
山田
2026-06-12 09:00:18
9時に噴水前。
後藤
2026-06-12 09:00:30
了解

コードをコピーして使おう！

<?php

// チャットデータを保存するCSVファイルです
$csv_file = 'data.csv';

// HTMLエスケープ用です
function h($value)
{
    return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
}

// メッセージ送信時の処理です
if ($_SERVER['REQUEST_METHOD'] === 'POST') {

    $message = trim($_POST['message'] ?? '');

    if ($message !== '') {

        $fp = fopen($csv_file, 'a');

        if ($fp) {

            // 「自分」として保存します
            fputcsv($fp, [
                date('Y-m-d H:i:s'),
                'self',
                '自分',
                $message
            ]);

            fclose($fp);

        }

    }

    header('Location: index.php');
    exit;

}

// チャット内容を読み込みます
$messages = [];

if (file_exists($csv_file)) {

    $fp = fopen($csv_file, 'r');

    if ($fp) {

        // ヘッダー行を読み飛ばします
        fgetcsv($fp);

        while (($row = fgetcsv($fp)) !== false) {

            if (count($row) >= 4) {

                $messages[] = [
                    'datetime' => $row[0],
                    'type' => $row[1],
                    'name' => $row[2],
                    'message' => $row[3]
                ];

            }

        }

        fclose($fp);

    }

}

?>

<!DOCTYPE html>
<html lang="ja">

<head>

<meta charset="UTF-8">

<title>PHP簡易チャット</title>

<style>

body{
    font-family:sans-serif;
    background:#f8fafc;
    margin:40px;
}

.php-simple-chat_wrap{
    max-width:800px;
    margin:auto;
}

.php-simple-chat_box{
    background:#ffffff;
    border:1px solid #d1d5db;
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
}

.php-simple-chat_row{
    display:flex;
    margin-bottom:16px;
}

.php-simple-chat_row.left{
    justify-content:flex-start;
}

.php-simple-chat_row.right{
    justify-content:flex-end;
}

.php-simple-chat_bubble{
    max-width:70%;
    padding:14px 18px;
    border-radius:18px;
}

.php-simple-chat_row.left .php-simple-chat_bubble{
    background:#e5e7eb;
}

.php-simple-chat_row.right .php-simple-chat_bubble{
    background:#86efac;
}

.php-simple-chat_name{
    font-weight:bold;
    margin-bottom:4px;
}

.php-simple-chat_date{
    font-size:12px;
    color:#6b7280;
    margin-bottom:8px;
}

.php-simple-chat_textarea{
    width:100%;
    height:90px;
    box-sizing:border-box;
    padding:10px;
    margin-bottom:12px;
}

.php-simple-chat_button{
    padding:10px 24px;
    background:#0b6bff;
    color:#ffffff;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

</style>

</head>

<body>

<div class="php-simple-chat_wrap">

    <div class="php-simple-chat_box">

        <?php foreach ($messages as $item): ?>

            <div class="php-simple-chat_row <?= $item['type'] === 'self' ? 'right' : 'left' ?>">

                <div class="php-simple-chat_bubble">

                    <div class="php-simple-chat_name">
                        <?= h($item['name']) ?>
                    </div>

                    <div class="php-simple-chat_date">
                        <?= h($item['datetime']) ?>
                    </div>

                    <div>
                        <?= nl2br(h($item['message'])) ?>
                    </div>

                </div>

            </div>

        <?php endforeach; ?>

    </div>

    <form method="post">

        <textarea
            class="php-simple-chat_textarea"
            name="message"
            placeholder="メッセージを入力してください"
        ></textarea>

        <button
            class="php-simple-chat_button"
            type="submit"
        >
            送信
        </button>

    </form>

</div>

</body>

</html>

ファイル構成と設置方法

このサンプルでは、index.php と data.csv を同じフォルダに配置して使用します。チャットメッセージは data.csv に日時・送信者種別・表示名・メッセージの順で保存されます。送信したメッセージは右側、自分以外のメッセージは左側に表示されます。 

sample/
├── index.php
└── data.csv

index.php と data.csv をサーバーへアップロードし、ブラウザから index.php にアクセスしてください。メッセージを入力して送信すると、data.csv に追記保存され、チャット一覧へ即座に表示されます。CSVの type 列を self にすると右側、other にすると左側の吹き出しで表示されます。

コメント