19.6.お知らせ画面を作る
バナーの入れ替えが簡単になったところで、いよいよホームページ本体の編集画面を作成する。我々のホームページ内でもっとも頻繁に更新するエリアは「お知らせ」ページだ。月に1～2度ほどイベントの案内を発信する。だが、逆に言うとそれ以外のページはまず更新の必要がない。何年も前に作ったページがそのまま放置されているが全く問題にならない。要するに「お知らせ」ページの更新さえ簡単にできれば、それ以上は望まれないということだ。
お知らせページの概要は以下の通り。
■oshirase.html
<!DOCTYPE HTML>
<html>
<head>
<title>お知らせ</title>
</head>
<body>
<h3>預かり保育実施のお知らせ</h3>
時間 8:00～18:00<BR>
春・夏・冬休み期間中も預かり保育実施します<BR>
土日祝日、年末年始は預かり保育休止します<BR>
<hr>
<h3>新入園児追加募集・二次募集のお知らせ</h3>
年少・年中・年長追加募集中<BR>
お電話で問い合わせください<BR>
<hr>
<h3>読み聞かせ読書会のお知らせ</h3>
○月○日、△△先生による読み聞かせ読書会を開催<BR>
保護者、卒園生のお母さんもご参加ください<BR>
</body>
</html>
お知らせといってもせいぜいこの程度の内容だ。ここに順次追記していく。最新のお知らせが常に先頭に表示される。過去のお知らせはそのまま残る。という日記スタイルのページとなる。
前項「19.4.ホームページ編集画面を作る」で示したedit_html.phpを使ってoshirase.htmlを開いても編集可能だが、HTMLを直接記述するスタイルは全く望まれていない。
■edit_oshirase.php
お知らせ追記用のコントロールパネル
<?php
$filename = 'oshirase.html';
$fp = fopen($filename, 'r');
$row = array();
if ($fp){
while(!feof($fp)){
$row[] = fgets($fp);
}
fclose($fp);
}
?>
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<style>
textarea {
width: 600px;
height: 10em;
}
</style>
<script>
// 子窓を開く
function openWindow0() {
window.open('subwindow.php?slot6', 'child', 'width=500,height=800,scrollbars=yes')
}
function openWindow1() {
window.open('subwindow.php?slot7', 'child', 'width=500,height=800,scrollbars=yes')
}
function openWindow2() {
window.open('subwindow.php?slot8', 'child', 'width=500,height=800,scrollbars=yes')
}
function openWindow3() {
window.open('subwindow.php?slot9', 'child', 'width=500,height=800,scrollbars=yes')
}
function openWindow4() {
window.open('subwindow.php?slot10', 'child', 'width=500,height=800,scrollbars=yes')
}
function openWindow5() {
window.open('subwindow.php?slot11', 'child', 'width=500,height=800,scrollbars=yes')
}
</script>
<body style="float: left">
<form name="form2" id="fwrite" action="write_oshirase.php" method="POST">
<input type="button" id="submit-btn" value="保存"><BR>
<textarea name="zenhan" style="display:none;">
<?php
foreach ($row as $i => $text){
if ($i <= 5){
echo $text;
}
}
?>
</textarea >
<table border="1" cellspacing="0">
<tr>
<td>
▼タイトル
</td>
</tr>
<tr>
<td>
<input type="text" name="title" id="title" value="" style="font-size:1em;width:600px;">
</td>
</tr>
<tr>
<td>
▼本文1
</td>
</tr>
<tr>
<td>
<textarea name="honbun1"></textarea>
</td>
</tr>
<tr>
<td>
▼画像1 <a href="javascript:void(0)" onClick="openWindow0()">リストから選択</a>
</td>
</tr>
<tr>
<td>
<input type="text" id="slot6" name="gazo1" value="" style="font-size:1em;width:600px;">
</td>
</tr>
<tr>
<td>
▼画像1リンク先PDF <a href="javascript:void(0)" onClick="openWindow1()">リストから選択</a>
</td>
</tr>
<tr>
<td>
<input type="text" id="slot7" name="link1" value="" style="font-size:1em;width:600px;">
</td>
</tr>
<tr>
<td>
▼文字1
</td>
</tr>
<tr>
<td>
<input type="text" name="moji1" value="" style="font-size:1em;width:600px;">
</td>
</tr>
<tr>
<td>
▼文字1リンク先PDF <a href="javascript:void(0)" onClick="openWindow2()">リストから選択</a><BR>
</td>
</tr>
<tr>
<td>
<input type="text" id="slot8" name="link2" value="" style="font-size:1em;width:600px;">
</td>
</tr>
<tr>
<td>
▼本文2
</td>
</tr>
<tr>
<td>
<textarea name="honbun2"></textarea>
</td>
</tr>
<tr>
<td>
▼画像2 <a href="javascript:void(0)" onClick="openWindow3()">リストから選択</a>
</td>
</tr>
<tr>
<td>
<input type="text" id="slot9" name="gazo2" value="" style="font-size:1em;width:600px;">
</td>
</tr>
<tr>
<td>
▼画像2リンク先PDF <a href="javascript:void(0)" onClick="openWindow4()">リストから選択</a>
</td>
</tr>
<tr>
<td>
<input type="text" id="slot10" name="link3" value="" style="font-size:1em;width:600px;">
</td>
</tr>
<tr>
<td>
▼文字2
</td>
</tr>
<tr>
<td>
<input type="text" name="moji2" value="" style="font-size:1em;width:600px;">
</td>
</tr>
<tr>
<td>
▼文字2リンク先PDF <a href="javascript:void(0)" onClick="openWindow5()">リストから選択</a>
</td>
</tr>
<tr>
<td>
<input type="text" id="slot11" name="link4" value="" style="font-size:1em;width:600px;">
</td>
</tr>
<tr>
<td>
▼過去のお知らせ<BR>
</td>
</tr>
<tr>
<td>
<textarea name="kouhan">
<?php
foreach ($row as $i => $text){
if ($i > 5){
echo $text;
}
}
?>
</textarea>
</td>
</tr>
</table>
</form>
<script>
$(function(){
$("#submit-btn").click(function(){
if($("#title").val() == ""){
alert("タイトルが未設定です");
return;
}
$("#fwrite").submit();
});
});
</script>
一般的な手法ではあるがフォームを作り、その空欄を埋めることでコンテンツを記述できるような仕組みとした。
フォームの構成は以下の通り
［前半］行番号0～5を収録、
<!DOCTYPE HTML>
<html>
<head>
<title>お知らせ</title>
</head>
<body>
までの6行を収めている。ここはチームメンバーには触って欲しくない箇所なので
style="display:none;"
のスタイルを加えて非表示にしている。
［タイトル］お知らせのタイトル部分
［本文1］お知らせの本文その1
［画像1］画像その1
［画像1のリンク先］画像をクリックした時のジャンプ先、園児募集のポスター画像をクリックしたら募集要項のPDFが表示されるというような使い方を想定している。
［文字1］1行テキスト
［文字1のリンク先］文字1のハイパーリンク先、「ここをクリック」みたいなテキストをクリックしたらイベントの詳細を記述するPDFや別URLにジャンプするという使い方を想定している。
［本文2］
［画像2］
［画像2のリンク先］
［文字2］
［文字2のリンク先］
同じフォームが2回続く、こうすることで本文の前に画像を置いたり、画像を2つ並べたりといったレイアウトの自由度が生まれると考えた。使わないフォームは空欄のまま残してよい。
［過去のお知らせ］過去のお知らせがHTMLタグ付きの状態で表示される。滅多にないが過去のお知らせを訂正したい時はここから編集する。画像をfloat にしたり、文字色を変えたり、HTMLの再編集を行うことも想定している。
［保存］ボタンを押してフォームの内容をwrite_oshirase.phpにPOSTするその前にJavaScriptによってタイトルの有無を判定し、タイトルが空欄ならば「タイトルが未設定です」のアラートを表示する。
以下の行(最後から11行)でタイトルの有無の判定を行っている。これはJavaScriptでボタンのクリックを処理する時の一般的な構文である。
<script>
$(function(){
$("#submit-btn").click(function(){
if($("#title").val() == ""){
alert("タイトルが未設定です");
return;
}
$("#fwrite").submit();
});
});
</script>
ここは以下のように書き換えることもできる。結果は同じだ。色々な書き方ができるというのは覚える身にとっては不幸だ。結局両方覚えなければならない。
<script>
$(document).ready(function(){
$("#submit-btn").on("click", function(){
if($("#title").val() == ""){
alert("タイトルが未設定です");
return;
}
$("#fwrite").submit();
});
});
</script>
JavaScriptはしばしばfunction()の中にfunction()を入れ子にするという変なことをする。こうすることでfunction()文をHTML内のどこに置いてもよいという状況が生まれる。
さて、小窓を開くスクリプトを追加したので、これに対応するためにsubwindow.phpの方も修正しなければならない。
■subwindow.php
<?php
$src_dir = './'; // ex. $src_dir='sozai/'; $src_dir='./';(current_dir)
$src_files = scandir($src_dir , 1);
$exclusions = array("html","HTML","htm","HTM","php","PHP","exe","EXE","");
$extensions = array("jpg","JPG","jpeg","JPEG","png","PNG","gif","GIF");
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
ul {
list-style: none;
margin-left: 0px;
padding-left: 0px;
}
</style>
</head>
<script>
var str = location.search;
var get = str.substring(1,str.length);
$(function(){
$('li').click(function(){
if (!window.opener || window.opener.closed){
window.alert('メインウィンドウが見当たりません。');
}else{
switch(get){
case 'slot0':
window.opener.document.form1.slot0.value = $(this).text();
window.close();
break;
case 'slot1':
window.opener.document.form1.slot1.value = $(this).text();
window.close();
break;
case 'slot2':
window.opener.document.form1.slot2.value = $(this).text();
window.close();
break;
case 'slot3':
window.opener.document.form1.slot3.value = $(this).text();
window.close();
break;
case 'slot4':
window.opener.document.form1.slot4.value = $(this).text();
window.close();
break;
case 'slot5':
window.opener.document.form1.slot5.value = $(this).text();
window.close();
break;
case 'slot6':
window.opener.document.form2.slot6.value = $(this).text();
window.close();
break;
case 'slot7':
window.opener.document.form2.slot7.value = $(this).text();
window.close();
break;
case 'slot8':
window.opener.document.form2.slot8.value = $(this).text();
window.close();
break;
case 'slot9':
window.opener.document.form2.slot9.value = $(this).text();
window.close();
break;
case 'slot10':
window.opener.document.form2.slot10.value = $(this).text();
window.close();
break;
case 'slot11':
window.opener.document.form2.slot11.value = $(this).text();
window.close();
break;
default:
}
}
});
});
</script>
<body>
<h2>素材リスト</h2>
<ul>
<?php
foreach ($src_files as $file){
if ($file){
$ext = pathinfo($file, PATHINFO_EXTENSION);
if(!in_array($ext,$exclusions)){
if(in_array($ext,$extensions)){
echo '<li><img src="'.$src_dir.'thumbs/'.$file.'">';
}else{
echo '<li><div style=" display:inline-block; width:100px; height:100px; background:lightgray;"></div>';
}
echo '<a href="rename.php?name='.$file.'"style="padding:10px;">'.$file.'</a></li>';
echo "<HR>";
}
}
}
?>
</ul>
</body>
</html>
switch文で受けるcaseの数が増えた。
■write_oshirase.php
普通、定期的に更新する日記スタイルやブログスタイルのホームページを管理・運用する時はデータベースを使う。めんどくさそうだが、後から訂正したり引用したりといった作業が発生するなら結局データベース化した方が簡単だ。
だが我々の場合後からの訂正は基本ない。それよりもレイアウトの自由度が優先する。急に大量の写真をアップしたいと言い出したり、動画を置きたいと言い出したり、想定外の要求を想定しなければならない。きっとデータベースによる管理では対応し切れない。結局都度都度HTMLやCSSでゴリゴリ手書きした方がよいということになる。そのため、やはりHTML直接編集の系は残しておきたい。
そこでフォームに入力された内容にHTMLタグを自動挿入するプログラムとした。後から訂正するためにはHTMLを直接編集しなければならないが、そもそもそのニーズはない。
<?php
header('X-XSS-Protection: 0');
$zenhan = $_POST['zenhan'];
$title = $_POST['title'];
$honbun1 = $_POST['honbun1'];
$gazo1 = $_POST['gazo1'];
$link1 = $_POST['link1'];
$moji1 = $_POST['moji1'];
$link2 = $_POST['link2'];
$honbun2 = $_POST['honbun2'];
$gazo2 = $_POST['gazo2'];
$link3 = $_POST['link3'];
$moji2 = $_POST['moji2'];
$link4 = $_POST['link4'];
$kouhan = $_POST['kouhan'];
$fp = fopen('oshirase.html', 'w');
if ($fp){
if (flock($fp, LOCK_EX)){ //ファイルロック処理(多重書き込みによる、ファイル破損回避)
fwrite($fp, $zenhan."\n");
if($title){fwrite($fp, "<h3>".$title."</h3>\n");}
if($honbun1){fwrite($fp, nl2BR($honbun1, false)."<BR>\n");}
if($gazo1){
if($link1){fwrite($fp, "<a href=\"".$link1."\" target=\"_top\"><img src=\"".$gazo1."\"></a><BR>\n");}
else{fwrite($fp, "<img src=\"".$gazo1."\"><BR>\n");}}
if($moji1){
if($link2){fwrite($fp, "<a href=\"".$link2."\" target=\"_top\">".$moji1."</a><BR>\n");}
else{fwrite($fp, $moji1."<BR>\n");}}
if($honbun2){fwrite($fp, nl2br($honbun2, false)."<BR>\n");}
if($gazo2){
if($link3){fwrite($fp, "<a href=\"".$link3."\" target=\"_top\"><img src=\"".$gazo2."\"></a><BR>\n");}
else{fwrite($fp, "<img src=\"".$gazo2."\"><BR>\n");}}
if($moji2){
if($link4){fwrite($fp, "<a href=\"".$link4."\" target=\"_top\">".$moji2."</a><BR>\n");}
else{fwrite($fp, $moji2."<BR>\n");}}
fwrite($fp, "<hr>\n");
fwrite($fp, $kouhan."\n");
}
flock($fp, LOCK_UN);
}
fclose($fp);
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>お知らせ更新しました</h1>
<p><a href="oshirase.html">確認</a></p>
</body>
</html>
本文1のスロットに何も記載がない時、すなわち$honbun1=""の時、if(isset($honbun1)){ で条件分岐しようとするとTrueが返ってきてしまう。
$honbun1=""なのにif(isset($honbun1)){ がTrue!
本文1に記載があってもなくてもTrue!
これでは条件分岐にならないので当初if(strlen($honbun1)>1){ で分岐していた。if(strlen($honbun1)>1){ すなわち変数$honbun1の文字数が1バイト以上の時True。これなら$honbun1=""の時確実にFalseが返ってくる。
でもなんとなく素人臭いような美しいスクリプトでないような気がしていた。
調べてみたらif($honbun1){ とすれば解決することがわかった。$honbun1=""の時、if($honbun1){ はFalseを返す。$honbun1に何らかの文字が入っていればTrueを返す。なんだこんなんでよかったのか。ということで「19.5.バナー管理画面を作る」の■write_banner.phpスクリプトの方も書き直しておいた。
