ユニケージ開発手法　コードレビュー　vol.40（本誌vol.51掲載）

著者：鮎瀬伊矩磨

今回はユニケージ開発において、ウェブブラウザ上で住所などを選択する際に用いるドリルダウン機能のスクリプトを紹介します。

記事本文掲載のシェルスクリプトマガジンvol.51は以下リンク先でご購入できます。

<!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-Style-type" content="text/css" />
		<meta http-equiv="Content-Script-type" content="text/javascript" />
		<title>ドリルダウン</title>
                <style type="text/css">
                        * {padding:0; margin:0}
                        button {width:70px}
                        .color_box {background-color:darkred; color:white}
                        td.data { border-bottom:1px solid black;border-right:1px solid black;
                                text-align:right;padding:1px }
                </style>
		<script type="text/javascript">
			function shiList(){
				var httpReq = new XMLHttpRequest();
				httpReq.open("POST","./DRILLDOWN_SHI.AJAX",false);
				httpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				httpReq.send( "KEN=" + document.getElementById("KEN").value );
				document.getElementById("SHI_SPAN").innerHTML = httpReq.responseText;

				sonotaList();
			}

			function sonotaList(){
 				var httpReq = new XMLHttpRequest();
				httpReq.open("POST","./DRILLDOWN_IKA.AJAX",false);
				httpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				httpReq.send( "KEN=" + document.getElementById("KEN").value + "&SHI=" + document.getElementById("SHI").value );
				document.getElementById("IKA_SPAN").innerHTML = httpReq.responseText;
			}
		</script>
	</head>
	<body style="width:1000px; height:600px">
		<div style="padding:1px; text-align:right; font-size:12px">
			<span style="cursor:pointer">メニューへ</span>
				&nbsp;
			<span style="cursor:pointer">閉じる</span>
		</div>
		<div class="color_box" style="height:40px; width:1000px">
			<div style="padding:10px; text-align:center">
				<span style="font-size:20px">
					USP
				</span>
			</div>
		</div>

		<div style="width:1000px; padding-top:30px; padding-left:5px">
			<form name="FORM"id="FORM" >
				都道府県：
				<select name="KEN" id="KEN" onchange="shiList();">
					<option value="_">_</option>
<!-- ###SEL_KEN### -->
					<option value="%1">%2</option>
<!-- ###SEL_KEN### -->
				</select>
				</br>
				</br>
				市区町村：
				<span id="SHI_SPAN">
<!-- ###SHI_HANI### -->
				<select name="SHI" id="SHI" onchange="sonotaList();">
<!-- ###SEL_SHI### -->
				<option value="%1">%2</option>
<!-- ###SEL_SHI### -->
				</select>
<!-- ###SHI_HANI### -->
				</span>
				</br>
				</br>
				以下住所：
				<span id="IKA_SPAN">
<!-- ###IKA_HANI### -->
				<select name="IKA" id="IKA">
<!-- ###SEL_IKA### -->
				<option value="%1">%2</option>
<!-- ###SEL_IKA### -->
				</select>
<!-- ###IKA_HANI### -->
				</span>
			</form>
		</div>
	</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>ドリルダウン</title>

* {padding:0; margin:0}

button {width:70px}

.color_box {background-color:darkred; color:white}

td.data { border-bottom:1px solid black;border-right:1px solid black;

text-align:right;padding:1px }

</style>

function shiList(){

var httpReq = new XMLHttpRequest();

httpReq.open("POST","./DRILLDOWN_SHI.AJAX",false);

httpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

httpReq.send( "KEN=" + document.getElementById("KEN").value );

document.getElementById("SHI_SPAN").innerHTML = httpReq.responseText;

sonotaList();

}

function sonotaList(){

var httpReq = new XMLHttpRequest();

httpReq.open("POST","./DRILLDOWN_IKA.AJAX",false);

httpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

httpReq.send( "KEN=" + document.getElementById("KEN").value + "&SHI=" + document.getElementById("SHI").value );

document.getElementById("IKA_SPAN").innerHTML = httpReq.responseText;

}

</script>

</head>

<span style="cursor:pointer">メニューへ</span>

</div>

USP

</span>

</div>

都道府県：

</select>

</br>

市区町村：

</select>

</span>

</br>

以下住所：

</select>

</span>

</form>

</div>

</body>

</html>

#!/bin/bash -xv
#
# DRILLDOWN.CGI : 画面の表示と都道府県のセレクトボックスの生成
#
# Written by hoge (hoge@usp-lab.com) Dec. 27, 2011 

exec 2> /tmp/log.$(basename $0)

##################################################
# 変数の定義
LANG=ja_JP.UTF-8
PATH=/home/UTL:/home/TOOL:$PATH

tmp=/tmp/tmp-$$

##################################################
# エラーハンドラ
ERROR_CHECK(){
        [ $(plus ${PIPESTATUS[@]}) -eq 0 ] && return

        exit 1
}

##################################################
# データ取得
cat JUUSHO  |
#  1:都道府県コード 2:市区町村コード 3:以下住所コード 4:都道府県 5:市区町村 6:以下住所
lineup 1 4  |
#  1:都道府県コード 2:都道府県
cat         > $tmp-todoufuken
ERROR_CHECK

##################################################
# HTML 作成
cat DRILLDOWN.HTML                    |
mojihame -lSEL_KEN - $tmp-todoufuken  |
mojihame -lSEL_SHI - /dev/null        |
mojihame -lSEL_IKA - /dev/null     > $tmp-html
ERROR_CHECK

##################################################
# 出力
echo "Content-type: text/html"
echo ""
cat $tmp-html

##################################################
# 終了処理
rm -f $tmp-*
exit 0

#!/bin/bash -xv

# DRILLDOWN.CGI : 画面の表示と都道府県のセレクトボックスの生成

# Written by hoge (hoge@usp-lab.com) Dec. 27, 2011

exec 2> /tmp/log.$(basename $0)

##################################################

# 変数の定義

LANG=ja_JP.UTF-8

PATH=/home/UTL:/home/TOOL:$PATH

tmp=/tmp/tmp-$$

##################################################

# エラーハンドラ

ERROR_CHECK(){

[ $(plus ${PIPESTATUS[@]}) -eq 0 ] && return

exit 1

}

##################################################

# データ取得

cat JUUSHO |

# 1:都道府県コード 2:市区町村コード 3:以下住所コード 4:都道府県 5:市区町村 6:以下住所

lineup 1 4 |

# 1:都道府県コード 2:都道府県

cat > $tmp-todoufuken

ERROR_CHECK

##################################################

# HTML 作成

cat DRILLDOWN.HTML |

mojihame -lSEL_KEN - $tmp-todoufuken |

mojihame -lSEL_SHI - /dev/null |

mojihame -lSEL_IKA - /dev/null > $tmp-html

ERROR_CHECK

##################################################

# 出力

echo "Content-type: text/html"

echo ""

cat $tmp-html

##################################################

# 終了処理

rm -f $tmp-*

exit 0

#!/bin/bash -xv
#
# DRILLDOWN_SHI.AJAX : 市区町村のセレクトボックスの生成 
#
# Written by hoge (hoge@usp-lab.com) Dec. 27, 2011

exec 2> /tmp/log.$(basename $0)

##################################################
# 変数の定義
LANG=ja_JP.UTF-8
PATH=/home/UTL:/home/TOOL:$PATH

tmp=/tmp/tmp-$$

##################################################
# エラーハンドラ
ERROR_CHECK(){
        [ $(plus ${PIPESTATUS[@]}) -eq 0 ] && return

        exit 1
}

##################################################
# POST データの受け取り
if [ ! -z "$CONTENT_LENGTH" ]; then
        dd bs=$CONTENT_LENGTH   |
        cgi-name -n_ -s_        > $tmp-name
	ERROR_CHECK
else
        touch $tmp-name
fi

##################################################
# データ取得
kencd=$(nameread KEN $tmp-name)

#  1:都道府県コード 2:市区町村コード 3:以下住所コード 4:都道府県 5:市区町村 6:以下住所
selr 1 "$kencd" JUUSHO  |
lineup 2 5              |
#  1:市区町村コード 2:市区町村
cat                     > $tmp-data
ERROR_CHECK

##################################################
# HTML 作成
cat DRILLDOWN.HTML                                            |
sed -n '/<!-- ###SHI_HANI### -->/,/<!-- ###SHI_HANI### -->/p' |
mojihame -lSEL_SHI - $tmp-data                                > $tmp-html
ERROR_CHECK

##################################################
# 出力
echo "Content-type: text/html"
echo ""
cat $tmp-html

##################################################
# 終了処理
rm -f $tmp-*
exit 0

#!/bin/bash -xv

# DRILLDOWN_SHI.AJAX : 市区町村のセレクトボックスの生成

# Written by hoge (hoge@usp-lab.com) Dec. 27, 2011

exec 2> /tmp/log.$(basename $0)

##################################################

# 変数の定義

LANG=ja_JP.UTF-8

PATH=/home/UTL:/home/TOOL:$PATH

tmp=/tmp/tmp-$$

##################################################

# エラーハンドラ

ERROR_CHECK(){

[ $(plus ${PIPESTATUS[@]}) -eq 0 ] && return

exit 1

}

##################################################

# POST データの受け取り

if [ ! -z "$CONTENT_LENGTH" ]; then

dd bs=$CONTENT_LENGTH |

cgi-name -n_ -s_ > $tmp-name

ERROR_CHECK

else

touch $tmp-name

##################################################

# データ取得

kencd=$(nameread KEN $tmp-name)

# 1:都道府県コード 2:市区町村コード 3:以下住所コード 4:都道府県 5:市区町村 6:以下住所

selr 1 "$kencd" JUUSHO |

lineup 2 5 |

# 1:市区町村コード 2:市区町村

cat > $tmp-data

ERROR_CHECK

##################################################

# HTML 作成

cat DRILLDOWN.HTML |

sed -n '//,//p' |

mojihame -lSEL_SHI - $tmp-data > $tmp-html

ERROR_CHECK

##################################################

# 出力

echo "Content-type: text/html"

echo ""

cat $tmp-html

##################################################

# 終了処理

rm -f $tmp-*

exit 0

#!/bin/bash -xv
#
# DRILLDOWN_SHI.AJAX : 以下住所のセレクトボックスの生成 
#
# Written by hoge (hoge@usp-lab.com) Dec. 27, 2011

exec 2> /tmp/log.$(basename $0)

##################################################
# 変数の定義
LANG=ja_JP.UTF-8
PATH=/home/UTL:/home/TOOL:$PATH

tmp=/tmp/tmp-$$

##################################################
# エラーハンドラ
ERROR_CHECK(){
        [ $(plus ${PIPESTATUS[@]}) -eq 0 ] && return

        exit 1
}

##################################################
# POST データの受け取り
if [ ! -z "$CONTENT_LENGTH" ]; then
        dd bs=$CONTENT_LENGTH   |
        cgi-name -n_ -s_        > $tmp-name
else
        touch $tmp-name
fi

##################################################
# データ取得
kencd=$(nameread KEN $tmp-name)
shicd=$(nameread SHI $tmp-name)

#  1:都道府県コード 2:市区町村コード 3:以下住所コード 4:都道府県 5:市区町村 6:以下住所
selr 1 $kencd JUUSHO  |
selr 2 $shicd         |
lineup 3 6            |
#  1:以下住所コード 2:以下住所
cat                   > $tmp-data
ERROR_CHECK

##################################################
# HTML 作成
cat DRILLDOWN.HTML                                                  |
sed -n '/<!-- ###IKA_HANI### -->/,/<!-- ###IKA_HANI### -->/p' |
mojihame -lSEL_IKA - $tmp-data                                   > $tmp-html
ERROR_CHECK

##################################################
# 出力
echo "Content-type: text/html"
echo ""
cat $tmp-html

##################################################
# 終了処理
rm -f $tmp-*
exit 0

#!/bin/bash -xv

# DRILLDOWN_SHI.AJAX : 以下住所のセレクトボックスの生成

# Written by hoge (hoge@usp-lab.com) Dec. 27, 2011

exec 2> /tmp/log.$(basename $0)

##################################################

# 変数の定義

LANG=ja_JP.UTF-8

PATH=/home/UTL:/home/TOOL:$PATH

tmp=/tmp/tmp-$$

##################################################

# エラーハンドラ

ERROR_CHECK(){

[ $(plus ${PIPESTATUS[@]}) -eq 0 ] && return

exit 1

}

##################################################

# POST データの受け取り

if [ ! -z "$CONTENT_LENGTH" ]; then

dd bs=$CONTENT_LENGTH |

cgi-name -n_ -s_ > $tmp-name

else

touch $tmp-name

##################################################

# データ取得

kencd=$(nameread KEN $tmp-name)

shicd=$(nameread SHI $tmp-name)

# 1:都道府県コード 2:市区町村コード 3:以下住所コード 4:都道府県 5:市区町村 6:以下住所

selr 1 $kencd JUUSHO |

selr 2 $shicd |

lineup 3 6 |

# 1:以下住所コード 2:以下住所

cat > $tmp-data

ERROR_CHECK

##################################################

# HTML 作成

cat DRILLDOWN.HTML |

sed -n '//,//p' |

mojihame -lSEL_IKA - $tmp-data > $tmp-html

ERROR_CHECK

##################################################

# 出力

echo "Content-type: text/html"

echo ""

cat $tmp-html

##################################################

# 終了処理

rm -f $tmp-*

exit 0

ユニケージ開発手法 コードレビュー vol.40（本誌vol.51掲載）

ユニケージ開発手法　コードレビュー　vol.40（本誌vol.51掲載）