基本

学校裏サイトや掲示板を作ろうとしている方向けに、簡単作成ガイドを提供します。ぜひとも参考にして下さい。

ただし、プログラミングやセキュリティーについては不十分な内容となっておりますから各自で調べて下さい。


導入

サイトを公開するにはサーバーが必要です。CGIまたはPHPが使えるサーバーを作るか借りましょう。

無料サーバーと、その初期ドメインで運営すると完全無料でサイトが作れます。


はじめの一歩

さて、掲示板を作るにはある程度プログラムする必要がありますが、それ以前にHTMLやCSSが出来なければなりません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initiral-scale=1.0">
<title>タイトル</title>
<style>
/* ここにCSSを記述 */
*{margin:0 auto;}
</style>
</head>
<body>
<h1>見出しタイトル</h1>
<p>内容(文章)</p>
<p>{CONTENT}</p>
</body>
</html>

他の型もありますが、このようなコードを原型と考えて下さい。個人的に推奨します。


プログラム

以上のHTMLは、各ページでほぼ共通部分ですので「テンプレート」として使いまわしたいですね。そこでサーバーサイドプログラムが必要です。

この記事では主にPHPを使用します。

<?php
header('content-type:text/html;charset=UTF-8');
$html_file = '先ほどのHTMLを保存しているパス';
$content = 'コンテント';
echo str_replace('{CONTENT}', $content, file_get_contents($html_file));

このように書くこどで「{CONTENT}」の部分が可変のHTMLテンプレートが出来ます。この場合は「コンテント」に置換されます。

これだけだと面白くないので、何か使えるものを作ってみましょう。

<?php
header('content-type:text/html;charset=UTF-8');
$html_file = '先ほどのHTMLを保存しているパス';

//投稿内容を保存しておくファイルのパス ここではphpと同一ディレクトリに「chat.txt」の名前で保存する。
$chat_file = 'chat.txt';

//投稿したらこの処理をする
if (isset($_POST['name'], $_POST['message'])){

    //特殊文字を変換 メッセージは自動改行も
    $name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');
    $message = nl2br(htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8'), false);
    file_put_contents($chat_file, '<p><b>'.$name.'</b></p><p>'.$message.'</p><hr>', FILE_APPEND | LOCK_EX);

    //「フォーム再送信」を防止するために、リロードする
    header('Location:./');
    exit;
}

//投稿内容を保存するファイルが存在し、かつ中身があること
if (file_exists($chat_file) && !empty(file_get_contents($chat_file))){

    //ファイルの中身を取得
    $content = file_get_contents($chat_file);
} else {
    $content = '誰も投稿していません。';
}

//投稿内容の下に投稿フォームを追加
$content .= '<form action="" method="POST"><p><label>名前<input type="text" name="name"></label></p>
<p><label>メッセージ<br><textarea name="message" rows="5"></textarea></label></p>
<p><label><button type="submit">投 稿</button></label></p></form>';

echo str_replace('{CONTENT}', $content, file_get_contents($html_file));

これでチャットが完成しました。

HTMLファイルは最初と同じで結構ですが「{CONTENT}」を何処かに書かかないと置換されません。

実質的には、これで十分なセキュリティーレベルですが後々に拡張するとなると脆弱性があります。また、複数のセキュリティー対策をすることが大事です。

そこで、次はXSS攻撃とCSRF攻撃を防御する話をします。


次回: 最低限舐められないための対策




広告