急に画像掲示板を作りたくなった時、一からフルスクラッチするのと、既存の配布物を改造するのとでは大違い。手間はなるべく少なく済ませたいですね。
実際若いころは、「あ、○○○作ろ!」「ライブラリ使わず全部自分で作ろ!」「メンドイ;x;」放置。よくあることです。素晴らしいアイデアもプログラミングスキルも、完成させられなければ閃いていない、持っていないのと同じです。
今回はネットしてる人なら誰でも知っている「ふたばちゃんねる」で配布されている画像掲示板のコアを使用したいと思います。
結果から言うと↓が出来上がった。
配布物チェック
今回、配布されていたふたばちゃんねる配布物(以下コア)をそのまま使うにはちょっと問題があったので改良してみました。解説します。
- sjis 表記の HTML を UTF-8 に変更
- クッキー保存データのエンコード方法変更
- スレ立て時画像が無くてもエラーが出ないように
- デフォルトの名無し、無題、本文なしの自由度を高める
- 画像付きレスが背景ピンクの枠からはみ出す問題を解決
- その他、WEB ページ制作で基本的な事
sjis 表記の HTML を UTF-8 に変更
コアは shift-jis で書かれています。いずれ日本語以外にも対応したいので、UTF-8 に書き換えたいと思います。何でもいいのでテキストエディタで shift-jis から UTF-8(BOMなし) にエンコード。筆者は Notepad++ を使用。
消す追加
コア59行目を修正
<META HTTP-EQUIV=”Content-type” CONTENT=”text/html; charset=Shift_JIS“>
↓
<META HTTP-EQUIV=”Content-type” CONTENT=”text/html; charset=UTF-8“>
投稿後「画面を切り替えます」という文字が出ますが Apatch の設定でデフォルトの文字コードが何か解りませんので用心します。
コア625行目
echo “<html><head><META HTTP-EQUIV=\”refresh\” content=\”1;URL=”.PHP_SELF2.”\”></head>”;
echo “<body>$mes 画面を切り替えます</body></html>”;
↓
echo “<html><head>“;
echo “<meta http-equiv=\”Content-Type\” content=\”text/html; charset=UTF-8\”>”;
echo “<META HTTP-EQUIV=\”refresh\” content=\”1;URL=”.PHP_SELF2.”\”></head>”;
echo “<body>$mes 画面を切り替えます</body></html>”;
クッキー保存データのエンコード方法変更
投稿に使用した名前や削除パスをクッキーに保存する機能がありますが、クッキーはマルチバイト文字をサポートしていませんので名前にマルチバイト文字を使用したら、URL エンコードしてあげないといけません。文字コードも変更してしまったし、きちんと対応しましょう。
消す追加
コア600行部分以下
//クッキー保存
setcookie (“pwdc”, $c_pass,time()+7*24*3600); /* 1週間で期限切れ */
if(function_exists(“mb_internal_encoding”)&&function_exists(“mb_convert_encoding”)
&&function_exists(“mb_substr”)){
if(ereg(“MSIE|Opera”,$_SERVER[“HTTP_USER_AGENT”])){
$i=0;$c_name=”;
mb_internal_encoding(“SJIS”);
while($j=mb_substr($names,$i,1)){
$j = mb_convert_encoding($j, “UTF-16”, “SJIS”);
$c_name.=”%u”.bin2hex($j);
$i++;
}
header(“Set-Cookie: namec=$c_name; expires=”.gmdate(“D, d-M-Y H:i:s”,time()+7*24*3600).” GMT”,false);
}else{
$c_name=$names;
setcookie (“namec”, $c_name,time()+7*24*3600); /* 1週間で期限切れ */
}
}
これを↓
//クッキー保存
setcookie (“pwdc”, $c_pass,time()+7*24*3600); /* 1週間で期限切れ */
$c_name = urlencode($names);
if(ereg(“MSIE|Opera”,$_SERVER[“HTTP_USER_AGENT”])){
header(“Set-Cookie: namec=$c_name; expires=”.gmdate(“D, d-M-Y H:i:s”,time()+7*24*3600).” GMT”,false);
}else{
setcookie (“namec”, $c_name,time()+7*24*3600); /* 1週間で期限切れ */
}
なんかいろいろコードでエスケープしているのを php 関数の urlencode() で処理。
エンコードしたらデコードしないといけません。
コア71行目
function l(e){var P=getCookie(“pwdc”),N=getCookie(“namec”),i;…(省略)
↓
function l(e){var P=getCookie(“pwdc”),N=decodeURIComponent(getCookie(“namec”)),i;…(省略)
注意しないといけないのは、この部分は php ではなく javascript であるということです。php のdecodeurl() では思った通りの処理は返ってきません。なので javascript の decodeURIComponent() を使います。
スレ立て時画像が無くてもエラーが出ないように
デフォルトではスレ立て時に画像がないのをチェックボックスで明示的に示さないとエラー画面になります。これは使い勝手が悪いので画像がなくてもスルーして投稿が完了するようにします。
消す追加
コア395行目
if(!$resto&&!$textonly&&!is_file($dest)) error(“画像がありません”,$dest);
この部分を削除。同時に396行目を削除すると画像と本文が両方無くてもエラーが出ないようになります。
デフォルトの名無し、無題、本文なしの自由度を高める
デフォルトでは名前、題名、本文いずれか null で投稿すると、決められた文字が代わりにログファイルに保管されてしまいます。ちょくちょくデフォルトの名無し名を変更したいとか、本文無しの場合の文字列を変更させたいとか、そういう願望に対応させるには、「ログ内のデータは null で、表示されるタイミングでデフォルトの文字列に置き換える」といった動作が必要です。
消す追加
コア49行あたりにデフォルト文字列を定義しておきます。
define(“DEF_NAME”, ‘名無し’); //デフォルトの名前無し
define(“DEF_SUB”, ‘無題’); //デフォルトの無題
define(“DEF_BODY”, ‘本文なし’); //デフォルトの本文無し
コア495~497行目
以下を削除して null データが勝手に置き換えられるのを阻止します。
if(!$name) $name=”名無し”;
if(!$com) $com=”本文なし”;
if(!$sub) $sub=”無題”;
コア191行目
// メイン作成
$dat.=”<table border=0><tr><td nowrap align=right valign=top>…</td><td bgcolor=#F0E0D6 nowrap>\n”;
$dat.=”<input type=checkbox name=\”$no\” value=delete><font color=#cc1105 size=+1><b>$sub</b></font> \n”;
$dat.=”Name <font color=#117743><b>$name</b></font> $now No.$no \n”;
$dat.=”$imgsrc<blockquote>$com</blockquote>”;
$dat.=”</td></tr></table>\n”;
↓
// メイン作成
$name = $name == ” ? DEF_NAME : $name; // デフォルトの名前無し
$sub = $sub == ” ? DEF_SUB : $sub; // デフォルトの無題
$com = $com == ” ? DEF_BODY : $com; // デフォルトの本文無し
$dat.=”<input type=checkbox name=\”$no\” value=delete><font color=#cc1105 size=+1><b>$sub</b></font> \n”;
$dat.=”Name <font color=#117743><b>$name</b></font> $now No.$no \n”;
if(!$resno) $dat.=”[<a href=”.PHP_SELF.”?res=$no>返信</a>]”;
$dat.=”\n<blockquote>$com</blockquote>”;
コア244行目
// メイン作成
$dat.=”<table border=0><tr><td nowrap align=right valign=top>…</td><td bgcolor=#F0E0D6 nowrap>\n”;
$dat.=”<input type=checkbox name=\”$no\” value=delete><font color=#cc1105 size=+1><b>$sub</b></font> \n”;
$dat.=”Name <font color=#117743><b>$name</b></font> $now No.$no \n”;
$dat.=”$imgsrc<blockquote>$com</blockquote>”;
$dat.=”</td></tr></table>\n”;
↓
// メイン作成
$name = $name == ” ? DEF_NAME : $name; // デフォルトの名前無し
$sub = $sub == ” ? DEF_SUB : $sub; // デフォルトの無題
$com = $com == ” ? DEF_BODY : $com; // デフォルトの本文無し
$dat.=”<table border=0><tr><td nowrap align=right valign=top>…</td><td bgcolor=#F0E0D6 nowrap>\n”;
$dat.=”<input type=checkbox name=\”$no\” value=delete><font color=#cc1105 size=+1><b>$sub</b></font> \n”;
$dat.=”Name <font color=#117743><b>$name</b></font> $now No.$no \n”;
$dat.=”$imgsrc<blockquote>$com</blockquote>”;
$dat.=”</td></tr></table>\n”;
これで名無し、無題、本文なしを動的に変更させることができます。
画像付きレスが背景ピンクの枠からはみ出す問題を解決
画像付きレス投稿の本文が背景ピンクの枠からはみ出してしまいます。挿入された画像の幅分、文字の右側に余白を設けないといけません。
消す追加
コア232行目
” border=0 align=left width=$w height=$h hspace=20 alt=\””.$size.” B\”></a>”<blockquote style=\”margin-left:”.($w+20).”px;\”>”;
コア271行目
” border=0 align=left width=$w height=$h hspace=20 alt=\””.$size.” B\”></a><blockquote>“;
コア248行目
$dat.=”$imgsrc<blockquote>$com</blockquote>”;
↓
$dat.=$imgsrc.$com.”</blockquote>”;
その他、WEB ページ制作で基本的な事
コア35行目:管理者パスは変更しておきましょう。
define(“ADMIN_PASS”, ‘admin_pass‘); //管理者パス
コア38行目:index.htm の方が都合がいいので変更しておきます。
define(“PHP_SELF2”, ‘futaba.htm‘); //入り口ファイル名
コア47行目:id の種も変更しておきます。
define(“IDSEED”, ‘idの種‘); //idの種
コア73行目:Google アナリティクスコードなどは</head>の上に設置するといいでしょう。