ChatGPTで0からホームページ作成Part2：コメント投稿機能を追加

ChatGPTで0からホームページ作成：記事ページにコメント機能を追加してみた

こんにちは、YPO industryです。
今回は「PHPのみで作ったホームページに、コメント投稿機能を追加」してみました。WordPressを使わず、自作記事ページに組み込む方法なので、Xサーバーでもそのまま動作します！

✅ 今回の目標

記事ページにコメントを投稿できるようにする
投稿コメントは記事フォルダ内（ローカル）に保存
表示が崩れないように、デザインとも整合させる
改行を含むコメントは1行目のみ表示
投稿後にページ再読み込みしても再投稿されないようにする

📁 記事ページの構成（フォルダ）

/category/カテゴリ名/サブカテゴリ名/記事フォルダ/
├ index.php　← 今回編集するファイル
├ content.html
├ top.jpg
└ comments.txt（コメントを保存するテキストファイルが自動生成される）

🧩 コメント機能の追加内容

1. PHP処理の追加（index.phpの上部）

// コメント処理
$comment_file = __DIR__ . '/comments.txt';
$comment_message = "";

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['comment']) && isset($_POST['name'])) {
    $name = trim($_POST['name']);
    $comment = trim($_POST['comment']);

    if ($name !== "" && $comment !== "") {
        $safe_name = htmlspecialchars($name, ENT_QUOTES, 'UTF-8');
        $safe_comment = htmlspecialchars($comment, ENT_QUOTES, 'UTF-8');

        // 改行をスペースに変換（1行表示にする）
        $safe_comment = preg_replace('/\r\n|\r|\n/', ' ', $safe_comment);

        $entry = date('Y-m-d H:i') . " [" . $safe_name . "] " . $safe_comment . "\n";
        file_put_contents($comment_file, $entry, FILE_APPEND | LOCK_EX);

        // 二重投稿防止（POST-Redirect-GET）
        header("Location: " . $_SERVER['REQUEST_URI']);
        exit;
    }
}

2. コメントフォームと表示ブロックの追加（記事本文の下）

<!-- コメントセクション -->
<div class="comment-section" style="margin-top: 40px; padding: 20px; border-top: 1px solid #ccc;">
  <h3>コメントを投稿する</h3>
  <?php if (!empty($comment_message)) echo "<p style='color: green;'>$comment_message</p>"; ?>
  <form method="post" action="">
    <p><label>名前：</label><br>
    <input type="text" name="name" required style="width: 100%; max-width: 300px;"></p>

    <p><label>コメント：</label><br>
    <textarea name="comment" rows="4" required style="width: 100%; max-width: 600px;"></textarea></p>

    <input type="submit" value="投稿" style="padding: 6px 20px;">
  </form>

  <hr style="margin: 30px 0;">

  <h3>コメント一覧</h3>
  <div style="background-color: #f9f9f9; padding: 10px;">
    <?php
    if (file_exists($comment_file)) {
        $lines = array_reverse(file($comment_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES));
        foreach ($lines as $line) {
            $first_line = explode("\n", $line)[0]; // 1行目だけ抽出
            echo "<p style='border-bottom:1px solid #ddd;padding:5px 0;'>" . htmlspecialchars($first_line) . "</p>";
        }
    } else {
        echo "<p>まだコメントはありません。</p>";
    }
    ?>
  </div>
</div>

🧪 実装してわかったポイント

header("Location: ...") を使えば、投稿後のページ再読み込みで再投稿される問題が防げる
preg_replace() で改行をスペースに変換すれば、表示が崩れない
投稿コメントはテキストで保存するだけでも十分使える！

✅ 今後やりたいこと

コメントの文字数制限や投稿間隔の制限
コメント削除ボタン（管理者向け）
「いいね」や「通報」機能の追加
折りたたみ表示（コメントが増えたときに備えて）

✍ まとめ

WordPressのようなCMSを使わなくても、PHPの基本だけで立派なコメント機能が作れると実感しました。
ホームページを手作りしてる方にはぜひ試してほしい機能です！

ご質問やアドバイス、実装してみた感想などありましたら、ぜひコメントで教えてください！
次回も引き続き、ChatGPTと一緒にホームページを進化させていきます ✨