条件によってHTMLのところどころの要素を書き換える：パート２

JavaScript

今までのおさらい。

だらだらと書いてみたあとで作ってみたが、条件が増えてエライことになった。

  • 教室のタイプ（room:13種類）
  • VHSなどのテープ系デッキのタイプ（tape:5種類）
  • LDやDVDなどのディスク系デッキのタイプ（disk:6種類）
  • OHCのタイプ（ohc:2種類）

場所に応じて4パターン、780通りもある。そんなのは素のHTMLを個別に作成して管理できるはずがない。
　
一つのHTMLにパラメータを渡して、スクリプトでパラメータに応じて本文を作成する方法をとる。　

呼び出し側のHTML

ハイパーリンクにパラメータをくっつけている。

<p><a href="fullset/index.htm?room=media&tape=SR-VS30&disk=DVL-919&ohc=VZ-27-f">ほげ教室</a></p>
<p><a href="fullset/index.htm?room=1_normal&tape=HR-DVS2&disk=DVL-919&ohc=HV-700SX-f">ふが教室</a></p>

　

呼び出される側のHTMLのヘッダ

ヘッダーに仕込む。与えられた文字列を分解して、パラメータに仕込む。

<script type="text/javascript">
<!--
var params = location.href.split("?")[1];
params = params.split("&");

for(var i = 0; i < params.length; i++) {
  var tmp = params[i].split("=");
  switch(tmp[0]){
  	case "room":
  		var room = tmp[1];
  		break;
  	case "tape":
  		var tape = tmp[1];
  		break;
  	case "disk":
  		var disk = tmp[1];
  		break;
  	case "ohc":
  		var ohc = tmp[1];
  		break;
  }
}
-->
</script>

呼び出される側のHTMLの本文

idを決めて、書き換えられるって感じ。

<div id="gaiyou"><script type="text/javascript" src="js/gaiyou.js">概要</script></div>
<div id="disk_deck"><script type="text/javascript" src="../common_js/disk_deck.js">ディスクデッキ利用時の操作</script></div>
<div id="faq_manual"><script type="text/javascript" src="../common_js/faq_manual.js">ohcデッキ利用時の操作</script></div>

だいたい3パターンになった

パターン１：概要

function div_text(p_class, p_text){
	return "<div class='" + p_class + "'>" + p_text + "</div>\n";
}
function div_img(p_class, p_img, p_text, p_style){
	var img_url = "images/gaiyou/";
	
	var rtn = "<div class='" + p_class + "'";
	if(p_style){
		rtn += " style='" + p_style + "'";
	}
	
	rtn += "><img src='" + img_url + p_img + "'>";
	
	if(p_text){
		rtn += "<br />" + p_text;
	}
	rtn += "</div>\n";
	return rtn;
}

var TagName = "gaiyou";



var gaiyou_arr = new Array();
gaiyou_arr["media"] = [
	{image: "image01.jpg", text: "教卓全体"},
	{image: "image02.jpg", text: "常設パソコン"},
	{image: "image03.jpg", text: "語学テレコ"},
	{image: "image04.jpg", text: "教材提示装置（OHC)"},
	{image: "image05.jpg", text: "VHSデッキ・DVD/CLDプレイヤー"}];
gaiyou_arr["1_b1"] = gaiyou_arr["media"];
//他のデータは省略



/*パラメータが不正な場合*/
if (gaiyou_arr[room] == undefined){
room = "null";
gaiyou_arr["null"] = [
	{image: "alternative.jpg", text: "じろう"},
	{image: "alternative.jpg", text: "じろう"},
	{image: "alternative.jpg", text: "じろう"},
	{image: "alternative.jpg", text: "じろう"},
	{image: "alternative.jpg", text: "じろう"}];
}

var text1 = "卓は教材の映像や音声を出力できます。本体にはパソコン、DVDデッキ、VHSデッキ、OHC（教材提示装置）が収納されています。";
var sub_title = "<h3>卓機器一覧</h3>";
var sub_text = "<p>卓は以下の機器を収納しています。</p>";

var clboth = "<div class='clear_both'></div>\n";
var change_documents = "" +
	"<div class='img_layout'>" +
	div_text("text", text1) +
	div_img("img", gaiyou_arr[room][0]["image"], gaiyou_arr[room][0]["text"]) +
	clboth +
	div_text("text_long", sub_title + sub_text ) +
	clboth +
	div_img("img" ,gaiyou_arr[room][1]["image"], gaiyou_arr[room][1]["text"]) +
	div_img("img" ,gaiyou_arr[room][2]["image"], gaiyou_arr[room][2]["text"]) +
	clboth +
	div_img("img" ,gaiyou_arr[room][3]["image"], gaiyou_arr[room][3]["text"]) +
	div_img("img" ,gaiyou_arr[room][4]["image"], gaiyou_arr[room][4]["text"]) +
	clboth +
	"</div>";


if(document.all || document.getElementById){ // IE4/5、NN6用の分岐 
	if(document.all)document.all(TagName).innerHTML = change_documents;
	else document.getElementById(TagName).innerHTML = change_documents; 
} 
else if(document.layers){ // NN4.7用の分岐 
	with(document.layers[TagName]){ //with構文 
		document.open(); 
		document.write(change_documents); // レイヤー"naiyou"に変数msgの値を書き出す。 
		document.close(); 
	} 
}

差し替えるテキストを作成するところが面倒だったのでdiv_textとdiv_img関数を作る。
　

パターン２：ディスク

書き換えるところをループにしている。
画像用の関数にはテキストとかスタイルも設定できる。

function div_text(p_class, p_text){
	return "<div class='" + p_class + "'>" + p_text + "</div>\n";
}
function div_img(p_class, p_img, p_text, p_style){
	var img_url = "../common_images/disk_deck/";
	
	var rtn = "<div class='" + p_class + "'";
	if(p_style){
		rtn += " style='" + p_style + "'";
	}
	
	rtn += "><img src='" + img_url + disk + "/" + p_img + "'>";
	
	if(p_text){
		rtn += "<br />" + p_text;
	}
	rtn += "</div>\n";
	return rtn;
}

var TagName = "disk_deck";

var disk_title = "デッキについて";

var disk_arr = [
	{title: ""},
	{text: "", image: "1_1.jpg", attr: "コンパネのスイッチ"},
	{text: " 鍵でフルセットプレゼン卓の扉を開けます。", image: "1_2.jpg", attr: "教卓全面の扉をあける"},
	{text: "「開/閉」ボタンを押して、トレイにセットします。"},
	{text: "デッキ本体のボタンを使って操作します。", image: "1_4.jpg", attr: "再生ボタン"},
	{text: "デッキ本体での操作には制限があり、単純な操作しか行えません。<br />メニュー、チャプター操作や一時停止操作などはリモコンをお使いください。", image: "1_5.jpg", attr: "リモコン"},
	{title: ""},
	{text: "", image: "2_1.jpg", attr: "メディアを取り出してから電源をオフ"},
	{text: "「コントロールパネル」の「終了」ボタンを押してください。", image: "2_2.jpg", attr: "コンパネ「終了」ボタン"},
	{text: "「コントロールパネル」の「AV音量」を中間の位置に戻します。", image: "2_3.jpg", attr: "図は「0」ですが、「5」にして下さい"},
	{text: "最後に全ての扉を閉じて、「終了時消灯」ランプが消灯していることを確認します。", image: "2_4.jpg", attr: "赤いランプが消えます"}
];


var temp_title_name_s = "デッキ利用時の操作";
var temp_disk_arr_1_a = "鍵で「コントロールパネル」の扉を開け「ビデオプロジェクター電源」の「ON／OFF」ボタンと";
var temp_disk_arr_1_b = "ボタンを押します。<br />プレビューモニターに出力する場合は、「プレビューモニター（PREVIEW MONITOR）」の";
var temp_disk_arr_1_c = "ボタンを押します。";
var temp_title_name_e = "デッキ終了時の操作";
var temp_disk_arr_2_a = "の「開/閉」ボタンを押して、";
var temp_disk_arr_2_b = "を取り出してください。次に「電源」ボタンを押して電源オフします。";


switch(disk){
	case "DVL-919":
		var title_name ="DVD/CLD";
		var button_name = "「DVD/CLD」";
		var text_name = "DVDまたはCDまたはLD";
		break;
	case "DVD-S50":
		var title_name = "DVD";
		var button_name = "「DVD」";
		var text_name = "DVD";
		break;
	case "D-VR7-f":
	case "D-VR7-w":
	case "NV-VP41B-S":
	case "NV-VP70-S":
		var title_name = "DVD/VHS";
		var button_name = "「DVD/VHS」";
		var text_name = "DVDまたはVHS";
		break;
	default:
		title_name="";
		break;
}

disk_arr[0].title = title_name + temp_title_name_s;
disk_arr[1].text= temp_disk_arr_1_a + button_name + temp_disk_arr_1_b + button_name + temp_disk_arr_1_c;
disk_arr[6].title = title_name + temp_title_name_e;
disk_arr[7].text = title_name + temp_disk_arr_2_a + text_name + temp_disk_arr_2_b;


var clboth = "<div class='clear_both'></div>\n";
var change_documents = "<div class='img_layout'>";
change_documents += div_text("text_long","<h2>" + title_name + disk_title + "</h2>");

for(i=0; i<disk_arr.length; i++){
	if(disk_arr[i]["title"]){
		change_documents += div_text("text_long","<h3>" + disk_arr[i]["title"] + "</h3>");
	}else if(disk_arr[i]["text"]){
		change_documents += div_text("text", disk_arr[i]["text"]);
		if(disk_arr[i]["image"]){
			change_documents += div_img("img", disk_arr[i]["image"], disk_arr[i]["attr"]);
		}
	}
	change_documents += clboth;
}
change_documents += "</div>";
	
if(title_name==""){
	change_documents="";
}

if(document.all || document.getElementById){ // IE4/5、NN6用の分岐 
	if(document.all)document.all(TagName).innerHTML = change_documents;
	else document.getElementById(TagName).innerHTML = change_documents; 
} 
else if(document.layers){ // NN4.7用の分岐 
	with(document.layers[TagName]){ //with構文 
		document.open(); 
		document.write(change_documents); // レイヤー"naiyou"に変数msgの値を書き出す。 
		document.close(); 
	} 
}

　

パターン３：FAQ

「title」だけなら、タイトル
「que」「ans」なら、Q&Aを作る。「img」があったら、画像も挿入する。

var TagName = "faq_manual";
var img_url = "../common_images/faq_manual/";

var title = "「よくある問い合わせ（FAQ）」";

var faq_arr = [	
{title: "教室全般"},
	{que: "卓の起動はどのように行うのですか？", 
		ans: "卓の扉を鍵で開けてください。自動的に電源が投入され「電源表示」ランプが点灯します。"},
	{que: "照明機器は卓で操作できますか？", 
		ans: "「コントロールパネル」の「環境設定」で蛍光灯やダウンライトのオン/オフが操作できます。暗幕は手動で開／閉する教室もあります。", 
		img: "room/1.jpg"}
				];

var clboth = "<div class='clear_both'></div>\n";
var change_documents = "<div class='img_layout'><h2>" + title + "</h2>\n<div class='faq'>";

for(i=0; i<faq_arr.length; i++){
	if(faq_arr[i]["title"]){
		change_documents += "<h3>" + faq_arr[i]["title"] + "</h3>\n";
	}else{
		change_documents += "<div class='que'>" + faq_arr[i]["que"] + "</div>\n" +
			"<div class='ans'>" + faq_arr[i]["ans"] + "</div>";
		if(faq_arr[i]["img"]){
			change_documents += "<div class='img_center'><img src='" + img_url + faq_arr[i]["img"] + "'></div>\n";
		}
		change_documents += clboth;
	}
}
change_documents += "</div></div>";


if(document.all || document.getElementById){ // IE4/5、NN6用の分岐 
	if(document.all)document.all(TagName).innerHTML = change_documents;
	else document.getElementById(TagName).innerHTML = change_documents; 
} 
else if(document.layers){ // NN4.7用の分岐 
	with(document.layers[TagName]){ //with構文 
		document.open(); 
		document.write(change_documents); // レイヤー"naiyou"に変数msgの値を書き出す。 
		document.close(); 
	} 
}

さいごに

本当なら、XMLファイルを読み込む感じが良いとおもうけど、複数のファイルを読み出す方法が分からなかったのでスクリプトの中にデータを埋め込んである。
複数のデータをエレガントに読み出す方法があったらしりたいな・・・