画像掲示板の泉という画像掲示板サイトを運営しています。
たまたま知り合いからWEBの制作を依頼された際、画像アップローダー的な機能を用意する必要がでてきたため、勉強がてらPHPでファイルアップローダーを作っていたので、そのコードを元にサイトにしたのがこの画像掲示板でした。
そこで、私同様に画像掲示板をプログラムで０から作ってみたいとお考えになった方（初心者）に向けて、初心者向けの画像掲示板作成ガイドをご用意しました。PHPで説明していますが、他の言語でも似たような形で設計すれば問題ないと思います。
画像掲示板作成方法の概略だけ簡単にまとめただけですので、実際に実用的な掲示板サイトとするには、色々やっておかないと後々運営上問題となることが多いので、画像掲示板の作り方イメージを把握する程度でご確認下さい。
この記事の目次
画像掲示板の作り方
画像掲示板を構築するためには、まず画像アップロード部分の理解が必要です。
PHPで画像アップロードをするには
PHPで画像アップロードをするには、$_FILESスーパーグローバル変数を使用します。$_FILES変数は、POSTでアップロードされたファイルに関する情報を格納してくれる便利な連想配列です。
$_FILESスーパーグローバル変数
アップロードされたファイルに関する情報を$_FILES変数は格納します。格納される情報には以下のようなものがあります。画像データに関する情報を勝手に集めてくれるイメージです。
| 要素 | 説明 |
|---|---|
| ファイル名 | アップロードされたファイルの名前 |
| ファイルサイズ | アップロードされたファイルのサイズ(単位はバイト) |
| MIMEタイプ | アップロードされたファイルのMIMEタイプ（ファイルまたはデータの種類） |
| 一時ファイル名 | アップロードされたファイルの一時ファイル名 |
| エラー情報 | アップロードされたファイルのエラーコード |
PHPで画像アップロードをするサンプルコード
この$_FILES変数を使うとファイルアップロード自体はとても簡単にできます。サンプルコードは以下になります。
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit" value="アップロード">
</form>//$_FILESスーパーグローバル変数を使用して、アップロードされた画像情報を取得
$image = $_FILES['image'];
//move_uploaded_file関数を使用して、画像をサーバーの安全な場所に保存します。
move_uploaded_file($image['tmp_name'], './images/' . $image['name']);
//画像を表示します。
echo '<img src="./images/' . $image['name'] . '">';画像の情報をDBまたはファイルに保存
先ほどのサンプルコードでお分かりのように、画像アップロード自体はPHPでとても簡単に作れますが、掲示板で活用するためには$_FILES変数が集めてくれたアップロードファイル情報をDB／ファイルに保存しておくことが必要です。
実際の掲示板では、タイトル・名前・コメント本文などと一緒に画像ファイルがアップロードされてくると思うので、それら全てをDBまたはファイルに保存します。
アップロード画像のサムネイルを作成する
画像アップロードはできましたが、アップロードされる画像には様々なサイズのものが存在すると思います。iPhoneの基本設定で撮影した写真のサイズは「3,024 × 4,032（約1,200万画素）」もあるらしいので、そのような画像をそのままサイト上に表示させたら、レイアウトが破壊されるどころではありません。
そこで、アップロードされた画像のサムネイルを生成します。
PHPのGDライブラリでサムネイルを作成
画像掲示板の泉では、PHPのGDライブラリを使ってサムネイル生成をしています。GDライブラリでサムネイルを生成する流れは以下の通りです。
GDライブラリで画像のサムネイルを作成する流れ
- サムネイルの画像サイズを決定します。
- 元となる画像をロードします。
- サムネイル画像の土台を作成します。
- 元画像を作成したサムネイル画像に縮小コピーします。
- サムネイル画像を保存します。
PHPのGDライブラリでサムネイルを作成するサンプルコード
多少複雑になりますが、元画像をサイズ指定の土台にコピーする感じで、サムネイル画像を生成しています。
//サムネイル画像の幅と高さを設定
$thumbWidth = 200;
$thumbHeight = 200;
//元画像を読み込む
$originalImage = imagecreatefromjpeg('original.jpg');
//サムネイル画像のキャンバス（土台）を作成
$thumbImage = imagecreatetruecolor($thumbWidth, $thumbHeight);
//サムネイル画像を作成
imagecopyresampled($thumbImage, $originalImage, 0, 0, 0, 0, $thumbWidth, $thumbHeight, imagesx($originalImage), imagesy($originalImage));
//サムネイル画像を出力
imagejpeg($thumbImage, 'thumb.jpg');
//画像リソースを破棄
imagedestroy($originalImage);
imagedestroy($thumbImage);実際には、縦横比が様々な画像があるので、サムネイルの画像サイズは固定値とはしない方がよいでしょう。
掲示板投稿データを投稿順に保存
ここまでで、アップロードされた画像、サムネイル画像、タイトル・名前・コメント本文が確保できたと思います。これらを投稿されたデータ毎に並べていけば、画像掲示板サイトの完成です。
投稿データの保存は、昔ながらのテキスログファイル形式で保存してもよいでしょうが、配列操作が多発して非常にプログラムが面倒になるので、できればDBに保存する方が後々の取り回しが楽だと思います。
%s<>%s<>%s<>%s<>%s<>%s・・・<>%s<>%s<>%s<>\n掲示板プログラムとして他に絶対必要なこと
実際に掲示板に作りこむためには、他にもいろいろな機能が必要と思いますが、忘れてはいけないのは投稿者情報の確保です。
PHPではWeb サーバーのヘッダ情報などを取得することができる、$_SERVERスーパーグローバル変数を使用することで、投稿者のログを取得することができます。
//リクエストを送信したクライアントの IP アドレス
echo $_SERVER['REMOTE_ADDR'];
//リクエストを送信したクライアントのリモートホスト
$_SERVER['REMOTE_HOST']
//リクエストを送信したクライアントのユーザーエージェント
echo $_SERVER['HTTP_USER_AGENT'];
//リクエストを送信した前のページの URL
echo $_SERVER['HTTP_REFERER'];おわりに
まだまだ投稿も少ない自己満足の画像掲示板ですが、少しずつバージョンアップをしておこうと思います。
余談：掲示板のレイアウトを変更
画像掲示板の泉で使っているサイトレイアウトは、もともと大手画像掲示板サイトさんが採用していたレイアウトでした。
当初は、左フレームの掲示板ジャンル部分と右側の掲示板スレッド部分を別々のファイルとするHTMLフレームで構築していましたが、フレームサイトは検索エンジンと相性が悪いようで、フレームの右だけ、左だけが検索にヒットするものの、frameset定義を入れたindex.htmlがヒットしないという残念な状況が発生したりしていました。
そこで、フレームサイトをやめ、普通の一枚htmlで同様のレイアウトを実現しまして、今もそのレイアウトを踏襲しています。