HTMLを動的に作成する
問題
HTMLで書かれたデータを取り込むで作成した当せん番号のデータに基づき、これをブラウザで照会できるよう、HTML入力フォームを作りたい。入力の手間を減らすため、抽せん回はドロップダウンメニューで選択できるようにする。当せん番号データファイルから該当する番号を動的に選択肢として（<option>）生成するものとする。
解答
動的にHTMLを生成したいことは多々ある。Open usp Tukubaiには、このような使い道を想定したコマンドmojihameが用意されている。テンプレートとなる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=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css
" />
<title>Open usp Tukubai 宝くじ当せんチェック</title>
<style type="text/css">
* {padding:0px;} /* defaultのpaddingを全て0に */
td.komoku {font-size:15px; text-align:right;}
</style>
<script type="text/javascript">
function getXMLHttpRequest(){
if(!window.ActiveXObject) { //FF,Crome,IE8対応
return new XMLHttpRequest();
}
try{ //IE7対応
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){ //IE6対応
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function GetOutput(){
var httpReq = getXMLHttpRequest();
httpReq.open("POST","LOTTERY.AJAX",true);
httpReq.setRequestHeader(
'Content-Type','application/x-www-form-urlencoded'
);
httpReq.onreadystatechange = function(){
if(httpReq.readyState != 4 ||
httpReq.status != 200 ) return;
document.getElementById('output').innerHTML
= httpReq.responseText;
}
httpReq.send(sendAJAX());
}
// AJAXの送信情報の作成
function sendAJAX(){
var data = "NUMBER=" +
document.getElementById("number").value + "&";
data = data + "GROUP=" +
document.getElementById("group").value + "&";
data = data + "KIND=" +
document.getElementById("kind").value;
return data;
}
</script>
</head>
<body onload="GetOutput();">
<form name="INPUT_FORM" id="INPUT_FORM" style="width:800px; height:600px;"/>
<div>
<table style="width:800px; height:50px; text-align:cent
er; border:3px solid #000000;">
<tr>
<td style="width:100px; border:solid 1px;" />
<strong>USP</strong>
</td>
<td style="font-size:22px">
<strong>Tukubai 宝くじ当せんチェック</strong>
</td>
</tr>
</table>
<br />
<table style="width:800px; height:120px;" />
<tr>
<td class="komoku" style="width:360px;">
番号６桁
</td>
<td style="width:400px; text-align:left;">
<input type="text" name="number" id="number"
style="width:150px;" onkeyup="GetOutput();"
value="" />
</td>
</tr>
<tr>
<td class="komoku" style="width:360px;">組</td>
<td style="width:400px; text-align:left;">
<select name="group" id="group"
style="width:150px;"
onchange="GetOutput();" />
<option value="00" />選択して下さい</option>
<!-- ###GROUP_LIST### -->
<option value="%1" />%2</option>
<!-- ###GROUP_LIST### -->
</select>
</td>
</tr>
<tr>
<td class="komoku" style="width:360px;">
宝くじ種類
</td>
<td style="width:400px; text-align:left;">
<select name="kind" id="kind"
style="width:350px;" onchange="GetOutput();" />
<option value="00" />選択して下さい</option>
<!-- ###KIND_LIST### -->
<option value="%1" />%2</option>
<!-- ###KIND_LIST### -->
</select>
</td>
</tr>
</table>
</div>
<br />
<label for="output">当せん可能性：</label><br />
<div id="output">
<!-- ###OUTPUT### -->
<textarea cols="97" rows="10">
<!-- ###FILEHAME### -->
</textarea>
<table style="width:800px;">
<tr>
<td style="font-size:18px; text-align:right;">
賞金 ###AMOUNT###
</td>
</tr>
</table>
<!-- ###OUTPUT### -->
</div>
</form>
</body>
</html>
テンプレートにはmojihameが反応するマクロ文字列を埋め込んでおく。このテンプレートHTMLと表データをmojihameに掛けると、データがハメ込まれたHTMLになる。HTMLを生成するCGIは次のようになる。
#!/bin/sh
#
######################################################
# LOTTERY.CGI 当せん番号チェックのHTMLフォームを自動生成
# (CGIというdirectory作成後、その下に配置してください)
#
# Written by N.Tounaka(tounaka@usp-lab.com)
# Date : 7 Sep.2012
# Arrenged by USP MAGAZINE(mag@uap-lab.com)
# Date : 8 Sep.2012
######################################################
# 環境変数のセット
export PATH=$PATH:/home/USERNAME/tukubai/bin
export LANG=ja_JP.UTF-8
# シェル変数のセット
homedir=$(pwd); homedir=${homedir%/*}
htmd=$homedir/HTML
pomd=$homedir/POMPA
# ヘッダーの出力
cat << HTTP_HEADER
Content-type: text/html
HTTP_HEADER
# ドロップダウンリスト(組番号,抽せん回の2か所)を
# はめ込みながら、HTML本体を出力
cat $htmd/LOTTERY.HTML |
mojihame -d_ -lGROUP_LIST - $pomd/GROUP_LIST |
mojihame -d_ -lKIND_LIST - $pomd/KIND_LIST
exit 0
HTMLテンプレートはそれなりのサイズになるが、CGIスクリプトは短く、実質14行だ。Open usp Tukubaiを使えばシェルスクリプトで簡単に動的にHTMLを生成できる。
ループ文不要、スッキリ書ける
HTMLテンプレートの95行、97行、109行、111行がmojihameで使用するマクロ文字列だ。1行に2フィールドあるデータとHTMLテンプレートをmojihameで処理すると各行のn番目のフィールドが%nにハメ込まれ、それが行数分だけ繰り返される。結果として、<option>タグ行が自動生成される。mojihameのおかげでCGIスクリプト内にはループ文を書かなくて済むため、スッキリしたソースコードになる。
※ usp Tukubaiはユニバーサル・シェル・プログラミング研究所の登録商標。
※1 Open usp Tukubaiは最新バージョンを採用のこと。古いバージョンでは適切に動作しない可能性がある。
※2 USP MAGAZINE 2012 autumnより加筆修正後転載。
※3 本ページで公開されているプログラムとそれに付随するデータの著作権およびライセンスは、特に断りがない限りOpen usp Tukubai本体と同じMITライセンスに準拠するものとする。
