運動会のグループ得点掲示板のWebページ開発
海星
まずはASPでイントラネット上の得点入力とリアルタイム表示のWebページを働かせることができるようになりましたが、さらにPHPとCGIでの開発でスキルアップを図る構想です。
薄型大画面ディスプレイが安くなった時代なので、2階の窓に大型ディスプレイを2台程度固定して構内LANのWebページを表示することでリアルタイムの得点表示が図れます。
同時に得点集計結果を本部席の無線LANパソコンから、構内LANサーバの得点ファイルを書き換えれば、効率的に得点発表ができるのです。
私の勤務校では、立派な大型ディスプレイが用意できませんし、安全に固定する責任者の問題もありますので提案のみにとどめます。ただ、実際にプロジェクタのリバースモードですりガラスに投影してみましたが、屋外からは10メートルも離れたら見えませんでした。明るさが全く足りませんでした。
また、セキュリティーに関してはLANシステムということで考慮していませんので、得点登録ページのURLを知っている何者かが別室から得点エントリーを行えば得点が変わり混乱が起こる可能性があります。高度化したければASPのプログラミングによりパスワード等を埋め込む仕様拡張を施すことができるでしょう。
初回はこんなところです。
海 星
--
海 星
海星
そして以下の3つのファイルを準備し、ブラウザ上から操作します。
運動会のグループ得点掲示板 システム仕様
1 動作環境
Windows98からWindowsXPでPWSかIISが作動しているイントラサーバ機および、イントラネット上でイントラサーバのWebサービスを参照できるネットワーク端末機
2 使用ファイル
(1)得点ファイル(サーバの共有フォルダに保存する。ここでは"C:\fileshare\danten.csv")
(2)得点表示ASPファイル(サーバのWeb公開フォルダに保存する。ここでは"C:\interpub\wwwroot\get_ten0.asp")
(3)得点登録ASPファイル(サーバのWeb公開フォルダに保存する。ここでは"C:\interpub\wwwroot\put_ten0.asp")
海 星
海星
akadan,100
aodan,150
kidan,200
midoridan,80
このデータを5秒おきに参照しWebページを表示するASPファイルを作動させます。得点表示ASPファイル "get_ten0.asp"を次回紹介します。
海 星
海星
<%@ LANGUAGE = "VBScript" %>
<% Option Explicit %>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="refresh" content="5">
<TITLE>グループ得点表示</TITLE>
<style type="text/css">
<!--
.style1 {font-size: x-large}
.style2 {font-size: xx-large}
-->
</style>
</HEAD>
<BODY>
<P>
<%
Dim ten1,ten2,ten3,ten4,i
Dim dicDan,Dankey_Array,Dan1_w
Dim objFS, objTS, strText
' データ読み込み
Set objFS = Server.CreateObject("Scripting.FileSystemObject")
Set objTS = objFS.OpenTextFile("C:\\fileshare\\danten.csv",1,false)
Set dicDan = CreateObject("Scripting.Dictionary")
While not objTS.AtEndOfStream
Dan1_w = split(objTS.ReadLine(),",")
dicDan.Add Dan1_w(0), Dan1_w(1)
Wend
ten1 = dicDan.Item("akadan")
ten2 = dicDan.Item("aodan")
ten3 = dicDan.Item("kidan")
ten4 = dicDan.Item("midoridan")
objTS.Close
Set objTS = Nothing
Set objFS = Nothing
Set dicDan = Nothing
%>
</P>
<p align="center" class="style1">各グループ得点リアルタイム表示</p>
<table width="586" border="2" align="center">
<tr>
<th width="254" bgcolor="#CCFFFF" scope="col"><span
class="style1">赤団体</span></th>
<th width="314" bgcolor="#FFCCFF" scope="col"><span
class="style1">青団体</span></th>
</tr>
<tr>
<td height="52" bgcolor="#CCFFFF" scope="col"><span class="style2">
<% Response.Write ten1 %>
</span></td>
<td bgcolor="#FFCCFF" scope="col"><span class="style2">
<% Response.Write ten2 %>
</span></td>
</tr>
<tr>
<th bgcolor="#99FF99" scope="col"><span class="style1">黄団体</span></th>
<th bgcolor="#FFFF99" scope="col"><span class="style1">緑団体</span></th>
</tr>
<tr>
<td height="44" bgcolor="#99FF99" scope="col"><span class="style2">
<% Response.Write ten3 %>
</span></td>
<td bgcolor="#FFFF99" scope="col"><span class="style2">
<% Response.Write ten4 %>
</span></td>
</tr>
</table>
<p> </p>
</BODY>
</HTML>
海星
まず、6行目のmetaタグで5秒ごとにこのページを塗り替える指定をしています。もし、もっとゆっくり更新したければ、content="5"
の部分の秒数を増やせばいいです。
<meta http-equiv="refresh" content="5">
以下の部分で得点ファイルを読み取る準備をします。オブジェクト指向らしい部品の定義です。くだけた例えでは、objFSはCDプレーヤーの指定のようなものです。objTSとは、目的のCDみたいなものです。名前を付けピリオドで結んだ命令文を指示していきます。具体的に、後に出てくるobjTS.ReadLine()とは、指定したファイルから1行分の文字列を読み出すことです。
dicDanは、連想配列とよぶ変数の部品です。4つの団体の得点を入力順序を気にせずに指定するためにキーワードと内容との組み合わせを操作します。
Set objFS = Server.CreateObject("Scripting.FileSystemObject")
Set objTS = objFS.OpenTextFile("C:\\fileshare\\danten.csv",1,false)
Set dicDan = CreateObject("Scripting.Dictionary")
以下の部分で得点ファイルを1行ずつ空っぽになるまで読み、コンマの前をキーワードとして、連想配列dicDanに得点を埋め込みます。
While not objTS.AtEndOfStream
Dan1_w = split(objTS.ReadLine(),",")
dicDan.Add Dan1_w(0), Dan1_w(1)
Wend
連想配列をHTMLの表に埋め込むために、変数に取り出しています。
ten1 = dicDan.Item("akadan")
ten2 = dicDan.Item("aodan")
ten3 = dicDan.Item("kidan")
ten4 = dicDan.Item("midoridan")
オブジェクト指向のプログラムでは、準備したオブジェクトは解放するのが習わしです。
objTS.Close
Set objTS = Nothing
Set objFS = Nothing
Set dicDan = Nothing
そして、目当ての位置にResponse.Write命令を使って読み取った得点を表示させます。これは残りの3つの得点も同様です。
<td>
<% Response.Write ten1 %>
</td>
まずはこれをひな形と考えて、2団体ずつ表示するASPや1団体ずつ表示するASPに改造して活用してみてください。
海 星
海星
以下の記述を"put_ten0.asp"のファイル名でWeb公開フォルダに保存します。ここでは"C:\interpub\wwwroot\put_ten0.asp"
<%@ LANGUAGE = "VBScript" %>
<% Option Explicit %>
<HTML>
<HEAD>
<TITLE>グループ得点登録</TITLE>
<style type="text/css">
<!--
.style1 {font-size: x-large}
.style2 {font-size: xx-large}
-->
</style>
</HEAD>
<BODY>
<P>
<%
Dim ten1,ten2,ten3,ten4
Dim dicDan,Dankey_Array,i
Dim objFS, objTS, strText
ten1 = Request.form("ten1")
ten2 = Request.form("ten2")
ten3 = Request.form("ten3")
ten4 = Request.form("ten4")
'Dictionaryオブジェクトを生成します。
Set dicDan = CreateObject("Scripting.Dictionary")
dicDan.Add "akadan", ten1
dicDan.Add "aodan", ten2
dicDan.Add "kidan", ten3
dicDan.Add "midoridan", ten4
Response.Write dicDan.Item("akadan") & "<br>"
Response.Write dicDan.Item("aodan") & "<br>"
Response.Write dicDan.Item("kidan") & "<br>"
Response.Write dicDan.Item("midoridan") & "<br>"
Dankey_array = dicDan.Keys
Response.Write "連想配列の個数 " & dicDan.Count & "<br>"
Response.Write Dankey_array(0) & " " & Dankey_array(1) & " " &
Dankey_array(2) & " " & Dankey_array(3)
Response.Write ten1 & " " & ten2 & " " & ten3 & " " & ten4
' データ保存
Set objFS = Server.CreateObject("Scripting.FileSystemObject")
Set objTS = objFS.OpenTextFile("C:\\fileshare\\danten.csv",2,true)
for i = 0 to dicDan.Count - 1
strText = Dankey_array(i) & "," & dicDan.Item(Dankey_array(i))
objTS.WriteLine(strText)
Next
objTS.Close
Set objTS = Nothing
Set objFS = Nothing
Set dicDan = Nothing
%>
</P>
<p align="center" class="style1">各グループ得点表示 プロトタイプ</p>
<table width="586" border="2" align="center">
<tr>
<th width="254" bgcolor="#CCFFFF" scope="col"><span
class="style1">赤団体</span></th>
<th width="314" bgcolor="#FFCCFF" scope="col"><span
class="style1">青団体</span></th>
</tr>
<tr>
<th height="52" bgcolor="#CCFFFF" scope="col"><span class="style2">
<% Response.Write ten1 %>
</span></th>
<th bgcolor="#FFCCFF" scope="col"><span class="style2">
<% Response.Write ten2 %>
</span></th>
</tr>
<tr>
<th bgcolor="#99FF99" scope="col"><span class="style1">黄団体</span></th>
<th bgcolor="#FFFF99" scope="col"><span class="style1">緑団体</span></th>
</tr>
<tr>
<th height="44" bgcolor="#99FF99" scope="col"><span class="style2">
<% Response.Write ten3 %>
</span></th>
<th bgcolor="#FFFF99" scope="col"><span class="style2">
<% Response.Write ten4 %>
</span></th>
海星
大切なことを説明しそびれていましたが、この得点登録ASPは、得点登録HTMLファイル"set_ten.htm"から呼び出して実行させます。そして、Webプログラム定番であるフォーム内の項目の転送を活用して、4つの団体の得点を受け取らせ得点ファイルを書き換えます。得点登録HTMLファイル"set_ten.htm"は、4つめのファイルとして、後であらためて掲載します。
サーバに届いたフォーム内のPOST項目データをRequest.form命令で取り込みます。
ten1 = Request.form("ten1")
（以下3通りも同様）
データ形式を連想配列にするため、Dictionaryオブジェクトを生成し、akadan,aodan,kidan,midoridanのキーワードの元に各得点を登録します。
Set dicDan = CreateObject("Scripting.Dictionary")
dicDan.Add "akadan", ten1
dicDan.Add "aodan", ten2
dicDan.Add "kidan", ten3
dicDan.Add "midoridan", ten4
開発中のデバッグ用の表示命令です。削除してかまいません。
Response.Write dicDan.Item("akadan") & "<br>"
開発中のデバッグ用の表示命令です。削除してかまいません。
Dankey_array = dicDan.Keys
Response.Write "連想配列の個数 " & dicDan.Count & "<br>"
Response.Write Dankey_array(0) & " " & Dankey_array(1) & " " &
Dankey_array(2) & " " & Dankey_array(3)
Response.Write ten1 & " " & ten2 & " " & ten3 & " " & ten4
データ保存のためにファイルシステムオブジェクトobjFSを作成し、"danten.csv"ファイルをobjTSと指名する。そして、objTS.WriteLine(strText)のように、書込操作する。
Set objFS = Server.CreateObject("Scripting.FileSystemObject")
Set objTS = objFS.OpenTextFile("C:\\fileshare\\danten.csv",2,true)
for i = 0 to dicDan.Count - 1
strText = Dankey_array(i) & "," & dicDan.Item(Dankey_array(i))
objTS.WriteLine(strText)
Next
各オブジェクトを解放する。
objTS.Close
Set objTS = Nothing
Set objFS = Nothing
Set dicDan = Nothing
データ書込のASPはセキュリティに関わるので、公開しているWebページから間接的に働かせることが多いものです。そして、インターネット上でASPを動かすときには、文字コードの違いも考慮しなければならないようです。
海 星
海星
最初のファイルリストからもれていて申し訳ありませんが、このHTMLファイルも付け加えます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>運動会グループ得点エントリーページ</title>
<style type="text/css">
<!--
.style1 {font-size: x-large}
.style2 {font-size: large}
.style3 {font-size: x-large; color: #660000; }
body {
background-color: #FFFFCC;
}
-->
</style>
</head>
<body>
<p align="center" class="style3">運動会グループ得点エントリー</p>
<form action="http://127.0.0.1/SyuusyokuHP/set_ten0.asp" method="post"
name="form1" id="form1">
<table width="497" border="2" align="center">
<caption>
<span class="style2"> 各 団 体 得 点
</span>
</caption>
<tr>
<th bgcolor="#CCFFFF" scope="col">赤団体</th>
<th bgcolor="#FFCCFF" scope="col">青団体</th>
<th bgcolor="#99FF99" scope="col">黄団体</th>
<th bgcolor="#FFFF99" scope="col">緑団体</th>
</tr>
<tr>
<td height="45" bgcolor="#CCFFFF"><div align="center"><span
class="style1"><span class="style1"><span class="style2"><span class="style2">
<input name="ten1" type="text" id="ten1" size="10" maxlength="8">
</span></span></span></span></div></td>
<td bgcolor="#FFCCFF"><div align="center"><span class="style1"><span
class="style1"><span class="style2"><span class="style2">
<input name="ten2" type="text" id="ten2" size="10" maxlength="8">
</span></span></span></span></div></td>
<td bgcolor="#99FF99"><div align="center"><span class="style1"><span
class="style1"><span class="style2"><span class="style2">
<input name="ten3" type="text" id="ten3" size="10" maxlength="8">
</span></span></span></span></div></td>
<td bgcolor="#FFFF99"><div align="center"><span class="style1"><span
class="style1"><span class="style2"><span class="style2">
<input name="ten4" type="text" id="ten4" size="10" maxlength="8">
</span></span></span></span></div></td>
</tr>
</table>
<p><span class="style1"><span class="style2">
</span></span></p>
<p align="center">
<input type="submit" value="得点登録">
</p>
<p> </p>
</form>
<p> </p>
</body>
</html>
海星
CGIやPHPやJAVAサーブレットなども同様の仕組みを取ります。
フォームタグの中のinputタグで取り込みたいデータを打ち込む枠を取ります。
<input name="ten1" type="text" id="ten1">
（以下3通りも同様）
フォームタグでは、報告先のプログラムをaction属性で指定します。ここではイントラサーバ自体で動かしているので、"127.0.0.1"を記述していますが、ネット上ではサーバ名もしくはコンピュータ名を記述します。"/SyuuskyokuHP"フォルダは独自のフォルダなので、各自のイントラサーバの環境に合わせて変えてください。なお、ASPファイルは、物理ファイルとしての絶対指定ではなく、http://の指定で呼び出さなければ反応しません。
method属性は、postかgetを指定します。詳しくはふれませんが、報告に封書を使うかハガキを使うかを選ぶようなものです。
<form action="http://127.0.0.1/SyuusyokuHP/set_ten0.asp" method="post"
name="form1" id="form1">
type属性が"submit"のinputタグは、報告先のプログラムに報告を送る合図のボタンです。このボタンをクリックした瞬間にネットの先のサーバに合図が送られます。
<input type="submit" value="得点登録">
なお注意しなければならないのは、イントラネットで活用する際には、端末パソコンのインターネット設定で、LANでプロキシを介さないIPアドレス指定にイントラサーバのIPアドレスを埋め込んでおかなければうまく反応しません。
以上のような説明になります。図もなしに文章だけで説明すると分かりづらいと思いますが、コストパフォーマンスの高い技術ですから、これを雛形にいろいろ応用してみましょう。
海 星
海星
また、得点登録ページを自己回帰するコードにしているので、htmlファイル抜きで、TenTouroku.phpファイルのみで登録機能は働きます。
運用する際には、リンク先のURLの"http ://127.0.0.1/Taiikusai1/"の部分を各環境のイントラサーバのドメイン名に変更します。
* * * * * * * * * * * * * * * * * * * *
１ 得点表示Webページ TenHyouji.php
<html>
<?php
$fp = fopen("ten.csv","w");
fputcsv($fp,array("ao", $_POST['ao']),",");
fputcsv($fp,array("midori", $_POST['midori']),",");
fputcsv($fp,array("ki", $_POST['ki']),",");
fputcsv($fp,array("aka", $_POST['aka']),",");
fclose($fp);
?>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>体育祭得点更新ページ 1</title>
<style type="text/css">
<!--
.style1 {
font-size: x-large;
color: #0000FF;
}
body {
background-color: #FFFF99;
}
-->
</style>
</head>
<body>
<p align="center" class="style1">体育祭 各団体得点データの書き換え</p>
<form name="form1" method="post"
action="http://127.0.0.1/Taiikusai1/TTenWrite1.php">
<div align="center">
<table width="200" border="1">
<tr align="center" valign="middle">
<td width="54" bgcolor="#FF99FF">団体名</td>
<td width="130" bgcolor="#FF9933">得点</td>
</tr>
<tr align="center" valign="middle">
<td bgcolor="#00FFFF">青団</td>
<td align="right"><input name="ao" type="text" id="ao"
value="<?php echo $_POST['ao']; ?>"></td>
</tr>
<tr align="center" valign="middle">
<td bgcolor="#00FF00">緑団</td>
<td align="right"><input name="midori" type="text" id="midori"
value="<?php echo $_POST['midori']; ?>"></td>
</tr>
<tr align="center" valign="middle">
<td bgcolor="#FFFF00">黄団</td>
<td align="right"><input name="ki" type="text" id="ki"
value="<?php echo $_POST['ki']; ?>"></td>
</tr>
<tr align="center" valign="middle">
<td bgcolor="#FF00CC">赤団</td>
<td align="right"><input name="aka" type="text" id="aka"
value="<?php echo $_POST['aka']; ?>"></td>
</tr>
</table>
<br>
<input type="submit" value="得点データを書き換え">
</div>
</form>
<p align="center"> </p>
</body>
</html>
* * * * * * * * * * * * * * * * * * * *
２ 得点登録ページ TenTouroku.php
<html>
<?php
$fp = fopen("ten.csv","w");
fputcsv($fp,array("ao", $_POST['ao']),",");
fputcsv($fp,array("midori", $_POST['midori']),",");
fputcsv($fp,array("ki", $_POST['ki']),",");
fputcsv($fp,array("aka", $_POST['aka']),",");
fclose($fp);
?>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>体育祭得点更新ページ 1</title>
<style type="text/css">
<!--
.style1 {
font-size: x-large;
color: #0000FF;
}
body {
background-color: #FFFF99;
}
-->
</style>
</head>
<body>
<p align="center" class="style1">体育祭 各団体得点データの書き換え</p>
<form name="form1" method="post"
action="http://127.0.0.1/Taiikusai1/TTenWrite1.php">
<div align="center">
<table width="200" border="1">
<tr align="center" valign="middle">
<td width="54" bgcolor="#FF99FF">団体名</td>
<td width="130" bgcolor="#FF9933">得点</td>
</tr>
<tr align="center" valign="middle">
<td bgcolor="#00FFFF">青団</td>
<td align="right"><input name="ao" type="text" id="ao"
value="<?php echo $_POST['ao']; ?>"></td>
</tr>
<tr align="center" valign="middle">
<td bgcolor="#00FF00">緑団</td>
<td align="right"><input name="midori" type="text" id="midori"
value="<?php echo $_POST['midori']; ?>"></td>
</tr>
<tr align="center" valign="middle">
<td bgcolor="#FFFF00">黄団</td>
<td align="right"><input name="ki" type="text" id="ki"
value="<?php echo $_POST['ki']; ?>"></td>
</tr>
<tr align="center" valign="middle">
<td bgcolor="#FF00CC">赤団</td>
<td align="right"><input name="aka" type="text" id="aka"
value="<?php echo $_POST['aka']; ?>"></td>
</tr>
</table>
<br>
<input type="submit" value="得点データを書き換え">
</div>
</form>
</body>
</html>
海 星