データバインド（DHTML）でデータを正常表示できる方法を教えてください。

以前ウィンドウズXP環境で、DHTMLのデータバインドを良く使っていたのですが、
最近見たらデーター部分が非表示になってしまい見ることができません。
ActiveX関連のセキュリティも低くしてみましたが駄目でした。

非表示サンプル状況
http://altair.site/~sample01/
※本来は画像が表示されて、ページ送りにより、別画像が次々に見えるはずなのですが。

index.htmlのソースは下記です。---（↓ここから）

<INPUT ID="BackData" TYPE="button" VALUE="< 前へ" onClick="BackItem()">
<INPUT ID="NextData" TYPE="button" VALUE="次へ >" onClick="NextItem()">
<input type="button" value="印刷ボタン" onclick="print()">
<input type="button" value="Back" onClick="history.back()">

---（↑ここまで）

list.txtの内容は下記です。---（↓ listここから）
no,image,name
1/5 送迎バスデザイン（三菱ローザ・カーマーキング）,01b.jpg,,
2/5 送迎バスデザイン（三菱ローザ・カーマーキング）,01c.jpg,,
3/5 送迎バス施工例（三菱ローザ・カーマーキング）,01d.jpg,,
4/5 送迎カー・マーキング施工例,02.jpg,,
5/5 送迎カー・マーキング施工例,03.jpg,,

---（↑ listここまで）

見えるようになる方法を教えていただけると大変助かります。
どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答2件

すみません。
これで。
lightbox 本家のやつは微妙に使いにくいので変更しました。

初期表示、ちょっと CSS つかって枠がついています。

画像選択すると、lightbox 本家のものよりだいぶ残念な結果ですが、オプションで調整できると思うので
そこらへんはお任せします。

index.html utf-8 で保存すること

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>CSVリスト読み＆画像一覧表示</title>
6	<link rel="stylesheet" href="Nivo-Lightbox-master/nivo-lightbox.css" type="text/css" />
7	<link rel="stylesheet" href="Nivo-Lightbox-master/themes/default/default.css" type="text/css" />
8	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
9	<script src="Nivo-Lightbox-master/nivo-lightbox.min.js"></script>
10
11 	<script src="dataBind.js" charset="utf-8"></script>
12
13<!--
14本家 lightbox よりも軽く、 onload で動作しない、 nivo-lightbox を使います。
15デフォルトだとアニメーションとか凝ったうごきをしませんが、こっちの方が確実です。
16
17じゃんけんの素材は、
18https://www.google.co.jp/search?q=%E3%81%98%E3%82%83%E3%82%93%E3%81%91%E3%82%93+%E7%94%BB%E5%83%8F&oq=%E3%81%98%E3%82%83%E3%82%93%E3%81%91%E3%82%93%E3%80%80%E7%94%BB%E5%83%8F&aqs=chrome..69i57j0l5.3654j0j4&sourceid=chrome&es_sm=91&ie=UTF-8
19
20＜Nivo lightbox＞
21Github からダウンロードし、解凍したら、index.html と同じところに、Nivo-lightbox-master/ フォルダごと
22コピーしてください。
23
24 -->
25
26<style>
27div.ui-databind-images {
28	border-radius: 8px;
29	border: solid 1px #CCC;
30	background-color: #EEE;
31	width: 90%;
32}
33div.ui-databind-images ul {
34	margin: 0;
35	padding: 0;
36}
37div.ui-databind-images ul li {
38	display: inline-block;
39	width: 38px;
40	height: 32px;
41}
42div.ui-databind-images span:after {
43	content:"Images";
44	vertical-align: top;
45	border-radius: 4px;
46	border: solid 1px #CCC;
47	font-weight: bolder;
48	color: red;
49	font-family: "Arial Narrow";
50	font-size: 9pt;
51	padding: 0 1em 0 0.5em;
52
53
54}
55div.ui-databind-images a {
56
57	margin-left: 0.5em;
58}
59</style>
60
61</head>
62<body>
63<script>
64/**
65 *  Download :: https://github.com/gilbitron/Nivo-Lightbox
66 *  Document and Tutorials :: http://docs.dev7studios.com/jquery-plugins/nivo-lightbox
67 */
68//
69// 本家 lightbox.start($link) をベタスクリプトから追いかけましたが、どうも、init() を通ってないです。
70// いきなりイベントハンドラだけ設定したりとか、動きがどうも怪しいので、類似派生系の Nivo-lightbox を
71// 使います。こいつは、スクリプトで追加する専用かな？Download& Document HP を見ると、script から設定
72// する方法しか記述されていません。
73//   アニメーションしたいとか、フェードIN/OUT にもう少し凝りたいとか、要求が出てきたら、ご自分で調整してみて
74//   ください。
75// 引数１個増やして、<a/><img/> タグ描画完了時にコールバックを呼び出すように変更しました。
76// このコールバックの引数に、 <a/> を囲った div を設定するので、以下のように、lightbox を初期化してください。
77//
78initDataBindActiveXControl("test/list1.txt", "group_test1", function($div) {
79	$div.find("a").nivoLightbox();
80});
81initDataBindActiveXControl("test2/list1.txt", "group_test2", function($div) {
82	$div.find("a").nivoLightbox();
83});
84</script>
85
86</body>
87</html>

dataBind.js utf-8 で保存すること

JavaScript
1function initDataBindActiveXControl(listUrl, lightboxGroupLabel, doneCallback) {
2	/**
3	 * オリジナルソースがちょっと残念な結果だったので、list1.txt を読み込んでごにょごにょする
4	 * 方法に変更します。
5	 */
6	var listFolder = listUrl.substring(0, listUrl.lastIndexOf("/"));
7
8	//alert(listFolder);
9	var CSV = null;
10	var CSV_HEADER = null;
11	var CSV_LINES = [];
12	var CONSTRUCTOR = null;
13
14	doneCallback = doneCallback || function(div) {};
15
16	/**
17	 * コールバックに渡すタグ構成は、
18	 * <div class="ui-databind-images">
19	 *    <span></span>
20	 *    <ul>
21	 *       <li><a><img /></a></li>
22	 *       // 画像個数分列挙
23	 *    </ul>
24	 * </div>
25	 *
26	 */
27	function renderHtmlForLightbox2(baseUrl, groupLabel) {
28		var div = $("<div />");
29
30		div.addClass("ui-databind-images");
31
32		div.append($("<span />"));
33		var ul = $("<ul />");
34
35		$(CSV_LINES).each(function(i, o) {
36			var li = $("<li />");
37			var anc = $("<a />");
38			anc.attr("href", baseUrl + "/" + o.image);
39			anc.attr("title", o.no);
40			anc.attr("data-lightbox", groupLabel);
41			anc.attr("data-title", o.no);
42			anc.attr("rel", "lightbox");
43
44			var img = $("<img />");
45			img.attr("src", baseUrl + "/" + o.image);
46			img.attr("width", "32px");
47			img.attr("height", "32px");
48			img.attr("border", "none");
49
50			anc.append(img);
51			li.append(anc);
52			ul.append(li);
53		});
54
55		div.append(ul);
56		$(document.body).append(div);
57
58		doneCallback(div);
59	}
60
61	function sjisText2Csv(text) {
62		var arr = [];
63		var lines = [];
64
65		CSV_HEADER = null;
66
67		// 受信データの改行コードは、¥r¥n でした。
68		// split(/¥r¥n|¥r|¥n/) で分割できないんですけど、何か違います？
69		// firefox では分割できたのに、chrome はなんでできないの？
70		//
71		$(escape(text).split(/%0D%0A/ig)).each(function(i, line) {
72			line = unescape(line);
73			if (line != "") {
74				if (i == 0)
75					CSV_HEADER = line.split(/,/);
76				else
77					lines.push(line.split(/,/));
78			}
79		});
80
81		var strBean = "function(m){";
82		var toStr = "this.toString = function(){return '['";
83		$(CSV_HEADER).each(function(i, ele) {
84			if (ele.trim() != "") {
85				strBean += "this." + ele + "=m[" + i + "];";
86				toStr += " + this." + ele + " + ', ' ";
87			}
88		});
89		toStr += " + ']';}";
90		strBean += toStr;
91		strBean += "}";
92
93		//alert(strBean);
94
95		CONSTRUCTOR = eval("(" + strBean + ")");
96
97		$(lines).each(function(i, x) {
98			CSV_LINES.push(new CONSTRUCTOR(x));
99		});
100
101		/*
102		$(CSV_LINES).each(function(i, o) {
103			alert("(no,image,name)=" + o.no + "//" + o.image + "//" + o.name);
104		});
105		*/
106	}
107
108	// listUrl ファイルを受信してセットアップする
109	$.ajax({
110		url: listUrl,
111		dataType:"text",
112		async: false,
113		beforeSend: function(xhr) {
114			//SJIS 文字コードのCSVファイルを読み込むための設定
115			// ここをコメントアウトすると文字化けします。
116			// 理由：ダウンロードしたテキストCSVファイル内容を utf-8 文字コードで解析するため。
117			xhr.overrideMimeType("text/html; charset=SHIFT_JIS");
118		},
119		complete: function(xhr) {
120			sjisText2Csv(xhr.responseText, this.url);
121			renderHtmlForLightbox2(listFolder, lightboxGroupLabel);
122		},
123		error: function(x,y,z) {
124			alert(x + "::" + y + "::" + z);
125		}
126	});
127}
128

動作確認は、java/動的WebProject/ Java は一切使わず、Chrome47 for mac で確認。

この書き込みの内容でお願いしますね、
CSS は若干怪しいので改善してみてください。

投稿2015/12/10 15:49

編集2015/12/12 16:20

ipadcaron

総合スコア1693

altair

2015/12/10 23:42

ipadcaron様ご回答ありがとうございます。以前この今は見えないタイプをWEB校正用に、たくさん作っているので、最低行２行追加で見えるようになるなら嬉しい限りです。さらに、当時もIE以外のブラウザの方から「見えない」と言われたので、マルチブラウザ対応なら良いと思いますが、こちらにプログラミングの素養があまりないので、うまく使えるか不安です。さらにさらに、「サーバーサイドでインターセプター」となると、何のことやら言葉の意味さえ不明です。という事で、jqueryを使った最低行２行追加タイプが無難かもしれません。急ぎませんので、どうぞよろしくお願いいたします。ありがとうございます。

ipadcaron

2015/12/11 10:05

環境構成を教えてください。 index.htmlとlist1.txt がどこにあって、利用者はどのようにしてそれを見るのか。最近見た環境は、windowsxpのieから？それとも、最新のブラウザ？ie10以上で見た？ものは作りましたが返答次第ではごめんなさいです。自分の環境は、win7 ie11 と firefox40 です。デスクトップに index.html と list.txt を配置し、ie ではアクセス拒否で動かず、firefox では期待通り動きました。でも、これも、tomcat が動作するサーバにデプロイされていれば、ie でも問題なく動作します。なので利用環境、os,ブラウザ,全体構成、閲覧者のpcのos,ブラウザ、など細かな情報が必要です。

altair

2015/12/11 14:14

ipadcaron様こんにちは。返信ありがとうございます。環境は、win7、IE11です。 index.html、list.txt、list.txtで表示させたい画像はすべて同じところにあります。（同じフォルダ内）サンプルは下記にアップロードしました。 http://altair.site/~sample01/test.zip この中身は、現在上記URLの「sample01」フォルダ内にあり、うまく表示できればlist内にあるカーマーキングのデザインやタイトルが表示される（以前は表示されていた）はずなのですが、現在は、「次へ」などの上部のボタンしか表示されません。最近ダウンロードしたfirefoxでも見る事ができませんでした。同じような環境で64ビットPC、32ビットPCで見ても同じ状態です。（DELL PRECISION or VOSTRO など） XPで古いIEの時には見えていたので、OSかIEが新しくなったため見えなくなったような気がしていますが、 ipadcaron 様のWIN7、IE11環境で正常表示できているのですか？そうだとしましたら、追加２行について、ぜひともアドバイスをいただけたら嬉しい限りです。どうぞよろしくお願いいたします。

ipadcaron

2015/12/11 15:41

つまり、閲覧するユーザは、 <test.zip> + folder1/index.html - folder1/list1.txt - folder1/ＲＣ－２１３Ｖ.jpg - folder1/RGV-250SP.jpg - folder1/CIVIC-TYPE-R-EURO-2015.jpg //... という階層構造で、folder1/index.html をダブルクリックでIE11で開くと。というわけですね。こういう構成の場合は、IE11 で取れるアプローチは限られてきます。 WIN7 IE11 で上記のファイル構成をデスクトップに置いたとき、 ajax がアクセス拒否で動作しません。<iframe /> がもしかしたら動くかもしれませんが、まだ試してないのでわかりません。 File API も、ローカルのファイル直接指定した場合は当然動作しません。 Firefox はどうかというと、ajax で普通にローカルのファイルが取得できます。 <input type="file" /> 経由でユーザに List1.txt を選択させる方式に変更すれば、 IE11 でも Firefox でもどちらでも FileAPI でローカル・リモート（ネットワークドライブ）のファイルを取得できます。この場合、既存レイアウトに変更が必要になりますが、既存のHTMLやJavaScriptは極力触らずにいままでどおり動かしたい、という結構虫のいい話なのでｗ実装が微妙にややこしくなりがちです。 <object /> タグに classid で指定した暗号的な文字列が DataBind ActiveX コントロールのレジストリ登録名称です。これをキーにしてIE はActiveXコントロールをロードし、タグのプロパティ情報と <param /> を初期値としてコントロールを初期化し、HTMLにレンダリングします。 IE11 は標準化対応の流れから、今後外部やプラグインとして作成した ActiveX コントロールは動作できないようになります。いままで独自路線で世界を牽引してきたわけですが、ここ４－５年で急速に底辺のブラウザだった ChoromeやFirefox の標準化の流れに乗っかろうとしています。てなわけで、DataBind や Time、css expression （CSS 内で javaScript が実行できる仕組み）などは今後利用できなくなります。で、<object /> タグでロードする DHTML の ActiveX コントロールは DataBind してくれるユーティリティプラグインで、これは、タグのプロパティ DATASRC. DATABIND などに DATAURL で取得したファイル内容を動的にバインドして表示する仕組みです。これを javaScriptで実現するには、ファイルを読み込む、という仕掛けがネックになります。CSVとして読み込みができれば、あとはプロパティを持っているタグにCSVデータを書き込むだけなので大した作業ではないんです。一般的に普通の会社で導入するブラウザは、標準使用に IEシリーズ（今回はIE11）、セキュリティ障害などで万が一IEが全社一斉使用不可などになった時のバックアップとして Firefox か GoogleChrome が使われるのがいいとこでしょう。私は以前居た会社で２回ほど、IEの深刻なセキュリティ障害により、半日程度IEが使えなくなった状況に遭遇しています。今の会社でも、IE11 を標準として、バックアップに Firefox40 がインストールされており、普段遣いのブラウザは IE11 です。履歴を検閲されるのでもっぱら Firefox 使っていますけどね；；

ipadcaron

2015/12/11 15:46

http://altair.site/~sample01/test.zip あぁ、そうか、利用者は、　http://altair.site/~sample01/index.html 　http://altair.site/~sample02/index.html 　http://altair.site/~sample03/index.html 　http://altair.site/~sample04/index.html 　http://altair.site/~sample05/index.html を閲覧するんですね？test.zip は sample01/ 以下の内容をまとめたものであって実体はどこかの自社サーバーのどこかに配置すると。ならばIE11でも動くはずです。この方向で進めますが、万が一力尽きた（飽きた）ときはご自身で努力される部分を残すことも考慮しておいてください。質問してくれれば答えますけど。

行動規範の内容に同意します

すみません。test.zip の中身を見せてもらいました。
index.html がちょっと残念な予想だったので、少し記述を改めました。

設置方法は、各資料に書いてあります。
まずは、http://altair.site/~sample01/ 以下に配置して表示されるまでを確認してみてください。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6 	<link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet" />
7 	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
8 	<script src="dataBind.js" charset="utf-8"></script>
9<!--
10lightbox2 について、
11以下のHPからダウンロードし、解凍したら、
12この index.html と同じ階層に lightbox2-master/ フォルダをコピペしてください。
13http://lokeshdhakar.com/projects/lightbox2/
14
15じゃんけんの素材は、
16https://www.google.co.jp/search?q=%E3%81%98%E3%82%83%E3%82%93%E3%81%91%E3%82%93+%E7%94%BB%E5%83%8F&oq=%E3%81%98%E3%82%83%E3%82%93%E3%81%91%E3%82%93%E3%80%80%E7%94%BB%E5%83%8F&aqs=chrome..69i57j0l5.3654j0j4&sourceid=chrome&es_sm=91&ie=UTF-8
17
18 -->
19
20
21</head>
22<body>
23<script>
24// リストが複数ある場合は、ここをコピペして、内容をかえてください
25// 引数１個目：CSV ファイルのパス
26// 引数２個目： lightbox が判別する グループ名称、これを全部一緒にすると、全画像が繋がります。
27// メソッド名がなんやらそんな感じですが、オリジナルの HTML を実際に拝見してちょっと萎えました。
28// このファイルを
29// http://altair.site/~sample01/index.hrml すげ替えるだけで動作します。
30// test/ フォルダのような list.txt と画像群が１セットになったフォルダが他にもあるなら、
31// image01, image02, image03 ... などと適当フォルダ名をつけて、この index.html
32// と同じ階層に突っ込んでください。
33// initDataBindActiveXControl("image01/list1.txt", "GROUP1");
34// initDataBindActiveXControl("image02/list1.txt", "GROUP2");
35// initDataBindActiveXControl("image03/list1.txt", "GROUP3");
36// initDataBindActiveXControl("image04/list1.txt", "GROUP4");
37// initDataBindActiveXControl("image05/list1.txt", "GROUP5");
38//
39// 上記のように定義すると、水平線を境界にした小さい画像の並びが５段できます。
40// どの画像でもクリックすれば拡大イメージが表示されます。あとは触って確認して
41// ください。
42//
43initDataBindActiveXControl("test/list1.txt", "group_test1");
44initDataBindActiveXControl("test2/list1.txt", "group_test2");
45</script>
46
47<!--
48ここで lightbox を読んでる・・・サンプルね。サンプルの通りにすると動作するが、
49上にもってくと動作しない・・・
50 -->
51	<script src="lightbox2-master/dist/js/lightbox-plus-jquery.min.js"></script>
52
53</body>
54</html>

上、utf-8 形式、index.html で保存してください。

JavaScript
1function initDataBindActiveXControl(listUrl, lightboxGroupLabel) {
2	/**
3	 * オリジナルソースがちょっと残念な結果だったので、list1.txt を読み込んでごにょごにょする
4	 * 方法に変更します。
5	 */
6	var listFolder = listUrl.substring(0, listUrl.lastIndexOf("/"));
7
8	//alert(listFolder);
9	var CSV = null;
10	var CSV_HEADER = null;
11	var CSV_LINES = [];
12	var CONSTRUCTOR = null;
13
14	function renderHtmlForLightbox2(baseUrl, groupLabel) {
15		var div = $("<div />");
16
17		$(CSV_LINES).each(function(i, o) {
18			var anc = $("<a />");
19			anc.attr("href", baseUrl + "/" + o.image);
20			anc.attr("title", o.no);
21			anc.attr("data-lightbox", groupLabel);
22			anc.attr("data-title", o.no);
23			anc.attr("rel", "lightbox");
24
25			var img = $("<img />");
26			img.attr("src", baseUrl + "/" + o.image);
27			img.attr("width", "32px");
28			img.attr("height", "32px");
29			img.attr("border", "none");
30
31			anc.append(img);
32			div.append(anc);
33		});
34
35		$(document.body).append(div);
36		$(document.body).append("<hr />");
37
38	}
39
40	function sjisText2Csv(text) {
41		var arr = [];
42		var lines = [];
43
44		CSV_HEADER = null;
45
46		// 受信データの改行コードは、¥r¥n でした。
47		// split(/¥r¥n|¥r|¥n/) で分割できないんですけど、何か違います？
48		// firefox では分割できたのに、chrome はなんでできないの？
49		//
50		$(escape(text).split(/%0D%0A/ig)).each(function(i, line) {
51			line = unescape(line);
52			if (line != "") {
53				if (i == 0)
54					CSV_HEADER = line.split(/,/);
55				else
56					lines.push(line.split(/,/));
57			}
58		});
59
60		var strBean = "function(m){";
61		var toStr = "this.toString = function(){return '['";
62		$(CSV_HEADER).each(function(i, ele) {
63			if (ele.trim() != "") {
64				strBean += "this." + ele + "=m[" + i + "];";
65				toStr += " + this." + ele + " + ', ' ";
66			}
67		});
68		toStr += " + ']';}";
69		strBean += toStr;
70		strBean += "}";
71
72		//alert(strBean);
73
74		CONSTRUCTOR = eval("(" + strBean + ")");
75
76		$(lines).each(function(i, x) {
77			CSV_LINES.push(new CONSTRUCTOR(x));
78		});
79
80		/*
81		$(CSV_LINES).each(function(i, o) {
82			alert("(no,image,name)=" + o.no + "//" + o.image + "//" + o.name);
83		});
84		*/
85	}
86
87	// listUrl ファイルを受信してセットアップする
88	$.ajax({
89		url: listUrl,
90		dataType:"text",
91		async: false,
92		beforeSend: function(xhr) {
93			//SJIS 文字コードのCSVファイルを読み込むための設定
94			// ここをコメントアウトすると文字化けします。
95			// 理由：ダウンロードしたテキストCSVファイル内容を utf-8 文字コードで解析するため。
96			xhr.overrideMimeType("text/html; charset=SHIFT_JIS");
97		},
98		complete: function(xhr) {
99			sjisText2Csv(xhr.responseText, this.url);
100			renderHtmlForLightbox2(listFolder, lightboxGroupLabel);
101		},
102		error: function(x,y,z) {
103			alert(x + "::" + y + "::" + z);
104		}
105	});
106}
107