様々な資料がここにあります。

 

 

魂内検索

DOCUMENTS

COMMAND

FORUM

UEC DOCS

VIDEO

 

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ライセンスに準拠するものとする。