TipsBox(小道具集) 5

                 
 
 データバインドについては、以前に掲載しましたが、今回体系的に書き直しました。
 このページは、テーブルにデータベースのデータを表示する、DataBindの方法を紹介します。
                

#1               
 DataBind とは

  HTMLのWebページにデータべ−スのデータを表示したい場合があります。   
  現在では、PHPなどのCGIとして、データベース(DB)を利用することができますし、Ajax でデータファイルを読み込む方法も紹介されています。 しかし、これらはやや面倒な設定・処理が必要です。
  非常に簡単なテーブルを検索表示するには、配列を利用した「simpleDB」を紹介していますが、これより大きなデータのDBを操作するには、IEのDataBind が便利です。 DataBind はIE4.0 で利用できるActiveXといわれるツールです。 利用がIEに限定されますが、応用が広いツールです。

                             1)    Microsoft MSDN Online          http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/content/data_binding.htm
                         2)    データバインド入門:                http://www.makoto3.net/document/databind/databind_all.html
 
 参考資料2に詳細な説明がありますが、このWebページではやや異なる使い方を紹介します。

 もっともシンプルに camData_1.csv のデータをテーブルとして表示するサンプルは下の例です。


【camData_1.csv】

Hinnshumei,Kana,Sansho,Kakei
相合傘, あいあいがさ, 紅色、二段・獅子咲、中輪、晩春咲、1967萩屋薫命名、ユキツバキ系(新潟), 中輪
愛染, あいせん, 白地紅縦絞、時に桃地、一重、筒咲、筒蕊、小輪、早春咲、1976梶川財基命名(長崎), 小輪
愛祖の里, あいそのさと, 紅、一重、筒・ラッパ咲、筒蕊、中輪、春咲、1977内藤文雄作出(愛知), 中輪
逢初め, あいぞめ, 極淡桃、一重、筒咲、筒蕊、小輪、早春咲、1993吉岡忠則命名(熊本・長崎), 小輪

【 サンプルhtml  dBind_1.html

<html>
<head>
</head>
<body>
<!-- データの表示 -->
<table style='FONT-SIZE: 8pt' datasrc=' #myDatabase;' border='1'>
<thead><tr>
<th>品種名 </th>
<th>かな </th>
<th>参照 </th>
<th>花径 </th>
</tr></thead>
<tbody>
<tr>
<td align='left'><span datafld='Hinnshume'></span></td>
<td align='left'><span datafld='Kana&'></span></td>
<td align='left'><span datafld='Sansho'></span></td>
<td align='left'><span datafld='Kakei'></span></td>
</tr></tbody></table>
<object id='myDatabase classid='CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83'>
<param name='UseHeader' value='-1'>
<param name='DataURL' value=' camData_1.csv></object>
</body>
</html>


 camData_1.csv は, (カンマ)区切りのデータ並びです。 最初にフィールド名を英名で列記します。
 HTMLコードは、CSVデータをテーブルに表示する基本的な記述です。 赤字の部分はCSVデータに合わせて変更・編集が必要な部分です。 逆にいえば、このソースの赤字の部分をご自分のCSVデータに合わせれば、簡単にデータがテーブルとして表示できます。
 
 下に<objecct>・・・</object> の範囲に、ActiveXの設定(データソースオブジェクト)を記述しています。 この記述も決まった記述で普通には変更する必要はありません。  

#2
 DataBind で画像を表示する

 DataBind で画像を表示するには、
   <td><img datafld='Img' height='85' width='100' style='WIDTH: 130px; HEIGHT: 95px'></td>
 とセルにIMGダグを挿入し、データフィルドにImg フィールドを設定しますと、画面に画像を表示することができます。
 対応するCSVのImg フィールドは"img/Asagao.jpg" などと、フォルダー名と画像ファイル名を記述します。 img/Asagao.jpg は同じフォルダーのimg フォルダー内のAsagao.jpg を意味しますので、img フォルダーに画像ファイルを置く必要があります。 


 【 サンプルhtml  dBind_2.html  】

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=shift_jis">
<title>dBind_2 画像を表示する</title>
</head>
<body>
<!-- データの表示 -->
<table style='FONT-SIZE: 8pt' datasrc='#myDatabase' border='1'>
<thead><tr>
<th style='WIDTH: 130px'>図</th>
<th>品種名</th>
<th>かな</th>
<th>参照</th>
<th>花径</th>
</tr></thead>
<tbody>
<tr>
<td><img datafld='Img' height='85' width='100' style='WIDTH: 130px; HEIGHT: 95px'></td>
<td align='left'><span datafld='Hinnshumei'></span></td>
<td align='left'><span datafld='Kana'></span></td>
<td align='left'><span datafld='Sansho'></span></td>
<td align='left'><span datafld='Kakei'></span></td>
</tr></tbody></table>
<object id='myDatabase' classid='CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83'>
<param name='UseHeader' value='-1'>
<param name='DataURL' value='camData_2.csv'>
</object>
</body>
</html>


【 camData_2.csv 】

Img,Hinnshumei,Kana,Sansho,Kakei
img/Asagao.jpg,相合傘,あいあいがさ,紅色、二段・獅子咲、中輪、晩春咲、1967萩屋薫命名、ユキツバキ系(新潟),中輪
img/BeniSasameyuki.jpg,愛染,あいせん,白地紅縦絞、時に桃地、一重、筒咲、筒蕊、小輪、早春咲、1976梶川財基命名(長崎),小輪
img/BettyRidley.jpg,愛祖の里,あいそのさと,紅、一重、筒・ラッパ咲、筒蕊、中輪、春咲、1977内藤文雄作出(愛知),中輪
img/BlackSwan.jpg,逢初め,あいぞめ,極淡桃、一重、筒咲、筒蕊、小輪、早春咲、1993吉岡忠則命名(熊本・長崎),小輪


#3
 DataBind で拡大画像を表示する

 DataBaindで表示した画像をクリックすると、サブウインドウに画像を拡大するには、
   <td><img onclick='showFullImg()' datafld='Img' height='85' width='100' style="WIDTH: 130px; HEIGHT: 95px"></td>
 とクリックイベントを記述し、これに対応する拡大画像表示のための関数 function showFullImg( ) を記述します。 この関数は定型的で多くの場合には変更しないで利用できます。

 【 サンプルhtml  dBind_3.html  】

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=shift_jis">
<title>dBind_3 拡大画像を表示する</title>
<script language="JavaScript"><!--
/* フル画像ページを表示する  */
function showFullImg() {
    srcElement = window.event.srcElement;
    sB=srcElement.src.substr(srcElement.src.indexOf('img')+4);
    sC=sB.substr(0,sB.indexOf('.'));
    location.href='fullhtml/' + sC+ '.html';
  }
// --></script>

</head>
<body><!-- データの表示 -->
<table style="FONT-SIZE: 8pt" datasrc='#myDatabase' border='1'>
<thead><tr>
<th style="WIDTH: 130px">図</th>
<th>品種名</th>
<th>かな</th>
<th>参照</th>
<th>花径</th>
</tr></thead>
<tbody>
<tr>
<td><img onclick='showFullImg()' datafld='Img' height='85' width='100' style="WIDTH: 130px; HEIGHT: 95px"></td>
<td align='left'><span datafld='Hinnshumei'></span></td>
<td align='left'><span datafld='Kana'></span></td>
<td align='left'><span datafld='Sansho'></span></td>
<td align='left'><span datafld='Kakei'></span></td>
</tr></tbody></table>
<object id="myDatabase" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="RowDelim" value="&#10;">
<param name="FieldDelim" value=",">
<param name="TextQualifier" value='"'>
<param name="EscapeChar" value="">
<param name="UseHeader" value="-1">
<param name="SortAscending" value="-1">
<param name="SortColumn" value="">
<param name="FilterValue" value="">
<param name="FilterCriterion" value="??">
<param name="FilterColumn" value="">
<param name="CharSet" value="">
<param name="Language" value="ja">
<param name="CaseSensitive" value="-1">
<param name="Sort" value="">
<param name="Filter" value="">
<param name="AppendData" value="0">
<param name="DataURL" value="camData_2.csv">
<param name="ReadyState" value="4">
</object>
</body>
</html>

【 camData_2.csv 】

Img,Hinnshumei,Kana,Sansho,Kakei
img/Asagao.jpg,相合傘,あいあいがさ,紅色、二段・獅子咲、中輪、晩春咲、1967萩屋薫命名、ユキツバキ系(新潟),中輪
img/BeniSasameyuki.jpg,愛染,あいせん,白地紅縦絞、時に桃地、一重、筒咲、筒蕊、小輪、早春咲、1976梶川財基命名(長崎),小輪
img/BettyRidley.jpg,愛祖の里,あいそのさと,紅、一重、筒・ラッパ咲、筒蕊、中輪、春咲、1977内藤文雄作出(愛知),中輪
img/BlackSwan.jpg,逢初め,あいぞめ,極淡桃、一重、筒咲、筒蕊、小輪、早春咲、1993吉岡忠則命名(熊本・長崎),小輪


 データバインドにはパラメータの設定があります。使う設定だけを記述すればよいのですが、あっても問題はありません。

<param name="属性名" value=""> や、JavaScript の 識別子.属性名 = で指定できる属性には以下のものがあります。

  • DataURL - データファイルのURL。
  • UseHeader - データ先頭行をヘッダ(列名)と見なす場合に true。
  • FieldDelim - フィールドの区切り文字。省略時はカンマ(,)。
  • RowDelim - 行の区切り文字。省略時は改行。
  • EscapeChar - エスケープに用いる文字。(例:value="\")
  • TextQualifier - データを囲む文字。省略時はダブルクォート(")。
  • CharSet - キャラクタセット情報。(例:value="Shift_JIS")
  • Language - 言語情報。
  • Sort - 指定した列でソートする。"-列名" とすると逆順にソート。
  • Filter - 条件。(例:value="AGE&gt;20")
  • CaseSensitive - 大文字小文字を区別する場合に true。
  • AppendData - データを追加する。

#4
 DataBind にリンクを貼る

  dBind_1.html のように、品種名などを表示させ、品種名をクリックすると、他のHPの特定のページにリンクさせるには、
   <td align='left'><a datafld="Url" target="_blank"><span datafld='Name'></span></a></td>
 のように、Name のセルに上のような記述をします。 CSVファイルのUrl フィールドは普通のhtppアドレス記述を行います。

 【 サンプルhtml  dBind_4.html  】

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=shift_jis">
<title>dBind_4 リンクを付加する</title>
<style type="text/css">
<!--
A {
 COLOR: #000000; TEXT-DECORATION: none
 }
--></style>
</head>
<body>
<!-- データの表示 -->
<table style="FONT-SIZE: 11pt" datasrc='#myDatabase' border='1'>
<thead><tr>
<th>Species</th>
<th>Name</th>
<th>By</th>
<th>Year</th>
</tr></thead>
<tbody>
<tr>
<td align='left'><span datafld='Species'></span></td>
<td align='left'><a datafld="Url" target="_blank"><span datafld='Name'></span></a></td>
<td align='left'><span datafld='By'></span></td>
<td align='left'><span datafld='Year'></span></td>
</tr></tbody></table>
<object id="myDatabase" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"><param name="RowDelim" value="&#10;"><param name="FieldDelim" value=","><param name="TextQualifier" value='"'><param name="EscapeChar" value=""><param name="UseHeader" value="-1"><param name="SortAscending" value="-1"><param name="SortColumn" value=""><param name="FilterValue" value=""><param name="FilterCriterion" value="??"><param name="FilterColumn" value=""><param name="CharSet" value=""><param name="Language" value="ja"><param name="CaseSensitive" value="-1"><param name="Sort" value=""><param name="Filter" value=""><param name="AppendData" value="0">
<param name="DataURL" value="camData_3.csv">
<param name="ReadyState" value="4"></object>
</body>
</html>


【 camData_3.csv 】

Species,Name,By,Year,Url
jap,ALICE CREIGHTON ,"Walter, Creighton, Semmes, AL.",2008,"http://www.camellias-acs.com/display.aspx?catid=3,137,144&pageid=1207"
jap,ALLISON FAITH ,"Clarence and Lillian Gordy, Ocala, FL",2008,"http://www.camellias-acs.com/display.aspx?catid=3,137,144&pageid=1208"
jap,ASHTON'S HIGH RISE,Ackerman,2008,"http://www.camellias-acs.com/display.aspx?catid=3,137,144&pageid=1209"
jap,BEN GEORGE,"H. Smith, Valdosta, GA",2008,"http://www.camellias-acs.com/display.aspx?catid=3,137,143&pageid=1210"
jap,BEV PIETS SMILE,"Meyer Piet, Arcadia, CA",2008,"http://www.camellias-acs.com/display.aspx?catid=3,137,143&pageid=1211"
jap,BURGUNDY AND GOLD,"Clarence and Lillian Gordy, Ocala, FL",2008,"http://www.camellias-acs.com/display.aspx?catid=3,137,143&pageid=1213"
jap,CLEO GLIDDON ARRAS ,"Frances Arras Ashcraft, Mobile, AL",2008,"http://www.camellias-acs.com/display.aspx?catid=3,137,148&pageid=1214"


  実際には、上のhtmlコードでは、品種名が赤字となりアンダーラインが表示されます。機能的には問題がないのですが、下のCSS定義をhead部に追加記述すると、通常の文字の状態になります。 

<style type="text/css"><!--
  A {
      COLOR: #000000; TEXT-DECORATION: none
    }
--></style>

#5
 DataBind の複合検索

  DataBind には、ソートや選択(ソート)などの設定が用意されています。 上の dBind_4.html に下のボタンのコードに下のコードを挿入すると、ボタンのクリックでSpecies フィールドが jpn のレコードのみが表示されます。
    <BUTTONonclick="carData.object.Filter='Species=jpn';carData.Reset();">JPN</BUTTON>

  上は1つのフィールドの選択表示ですが、組み合わせての検索(複合検索)を行うには、JavaScriptのコードが必要になります。
  下のコードで検索枠に検索文字を入力し、[複合検索] ボタンをクリックすれば、組み合わせての検索の結果が表示されます。
  JavaScript のコードは定型的ですので、フィールド名、対象CSV名を変更すれば、他の例にも容易に変更できます。
  当然ですが、dBind_4.html と同様に、複合検索後に品種名をクリックすると、関連Webページにリンク表示されます。 

 【 サンプルhtml  dBind_5.html  】

<html>
<head>
<meta http-equiv='Content-Type' Content='text/html; charset=shift_JIS'>
<title>dBind_5 複合検索</title>
<script language='JavaScript'><!--
//複合検索
function sorttable(){
   sS="";
   n= document.myFORM.sA.value; if(n == '') n = '*'; sS=sS+ 'Species=' + n + '&';
   n= document.myFORM.sB.value; if(n == '') n = '*'; sS=sS+ 'Name=' + n + '&';
   n= document.myFORM.sC.value; if(n == '') n = '*'; sS=sS+ 'By=' + n + '&';
   n= document.myFORM.sD.value; if(n == '') n = '*'; sS=sS+ 'Year=' + n;
   myDatabase.Filter = sS;
   myDatabase.reset();
}
function clearInput() {
  document.myFORM.sA.value="";
  document.myFORM.sB.value="";
  document.myFORM.sC.value="";
  document.myFORM.sD.value="";
}
// --></script>
<style type="text/css"><!--
A {
 COLOR: #000000; TEXT-DECORATION: none
 }
--></style>
</head>
<body><!-- 検索入力 -->
<form name='myFORM'><font size='2'>
  種別:<input name='sA' size='15'>
  品種名:<input name='sB' size='22' style="WIDTH: 139px; HEIGHT: 20px">
  作出 :<input name='sC' size='23' style="WIDTH: 143px; HEIGHT: 20px">
  登録年:<input name='sD' size='15'>
<input type='button' onclick='sorttable()' value='複合検索'>
<input type= 'button'onclick='myDatabase.object.filter=""; myDatabase.reset();clearInput()' value='全行表示'><br>
</form>
<!-- データの表示 -->
<table style="FONT-SIZE: 11pt" datasrc='#myDatabase' border='1'>
<thead><tr>
<th>種別</th>
<th>品種名</th>
<th>作出</th>
<th>登録年</th>
</tr></thead>
<tbody>
<tr>
<td align='left'><span datafld='Species'></span></td>
<td align='left'><a datafld="Url" target="_blank"><span datafld='Name'></span></a></td>
<td align='left'><span datafld='By'></span></td>
<td align='left'><span datafld='Year'></span></td>
</tr></tbody></table>
<object id="myDatabase" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"><param name="RowDelim" value="&#10;"><param name="FieldDelim" value=","><param name="TextQualifier" value='"'><param name="EscapeChar" value=""><param name="UseHeader" value="-1"><param name="SortAscending" value="-1"><param name="SortColumn" value=""><param name="FilterValue" value=""><param name="FilterCriterion" value="??"><param name="FilterColumn" value=""><param name="CharSet" value=""><param name="Language" value="ja"><param name="CaseSensitive" value="-1"><param name="Sort" value=""><param name="Filter" value=""><param name="AppendData" value="0"><param name="DataURL" value="camData_3.csv"><param name="ReadyState" value="4"></object></font>
</body>
</html>

#6
 DataBind とautoCards

  autoCards システムは、JavaScript による多数の画像表示システムです。
  autoCardsシステムとDataBind を組み合わせることもできます。

 このシステムは下のdbTest1.html に示した動作を基本にしています。 dataBind の Object を記述すると、このデータベースはJavaScript のコードで操作したり、フィールド・データを取得することができます。 body 部に SPANタグやTABLEタグを記述する必要はありません。
 myDb.recordset.Fields("img").value の記述で、CSVファイルのデータの1レコード(行)の img フィールドの値を得られます。
 document.getElementById("card").src = "imgFull/" + myDb.recordset.Fields("img").value; のように、img フィールドの値を IMGタグにセットすると、画像を表示することができます。
 myDb.recordset.MoveNext();  で次のレコードデータを取得することができます。

 また、次のコードで、絞り込み(フイルター)処理ができます。
 myDb.Filter ='Species= RET'; //フィルターを設定
  myDb.reset();                 //実行
   
 下のコードでは、Species フィールドが RET のレコードを絞り込んでいます。 結果として、第一レコードは、BigDipper.jpg になります。
 
【 dbTest1.csv 】

img, Jname, Species
AcsJubilee.jpg, ACSジュビリー, JAP
BigDipper.jpg,  ビッグ・ディッパー, RET
AveMaria.jpg, アベマリア, JAP
BillWoodroof.jpg, ビル・ウッドルーフ, RET


 【 サンプルhtml dbTest1.html

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=shift_jis">
<title>dbTest_1</title>
<script language='JavaScript'><!--
var imgA;
var aStr;
onload = function init() {
    document.getElementById("card").src = "imgFull/" + myDb.recordset.Fields("img").value;
    alert("Rec1: " + myDb.recordset.Fields("img").value);
    myDb.recordset.MoveNext();  //次のレコードに移行
    document.getElementById("card").src = "imgFull/" + myDb.recordset.Fields("img").value;
    alert("Rec2: " + myDb.recordset.Fields("img").value);
   
    myDb.Filter ='Species= RET'; //フィルターを設定
    myDb.reset();                 //実行
    document.getElementById("card").src = "imgFull/" + myDb.recordset.Fields("img").value;
    alert("Rec1: " + myDb.recordset.Fields("img").value);
    myDb.recordset.MoveNext();  //次のレコードに移行
    document.getElementById("card").src = "imgFull/" + myDb.recordset.Fields("img").value;
    alert("Rec2: " + myDb.recordset.Fields("img").value);
 }
// --></script>
</head>
<body>
<img id="card" height="95" hspace="0" width="130" border="0" >
<object id="myDb" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83>
<param name="CharSet" value="shift_jis">
<param name="Language" value="ja">
<param name="DataURL" value="dbTest1.csv">
</object>
</body>
</html>

 下のコードは、いろいろと細かい処理がついてコードが長くなっていますが、検索付きのautoCards システムのコードです。

 【 autoWestC.csv 】

img,Jname,Name,Species,Color,Pattern,Size,FForm,Country,Year,By,Ref
AcsJubilee.jpg,ACSジュビリー,ACS Jubilee,JAP,淡色,-,大輪,千重,USA,1994,Nuccio's,"JAP, 大輪, 1994 Nuccio's"
AngelWings.jpg,エンジェル・ウィングス,Angel Wings,NRH,藤桃,-,中輪,八重,USA,1970,Kramer,"NRH, 中輪, 1970 Kramer"
AveMaria.jpg,アベマリア,Ave Maria,JAP,淡桃,-,小輪,千重,USA,1956,Breschini,"JAP, 小輪, 1956 Breschini"
AyAyAy.jpg,アイ・アイ・アイ,Ay-ay-ay!,JAP,赤紅,絞り,中輪,八重,USA,1995,Nuccio's,"JAP, 中輪, 1995 Nuccio's"
BabyPearl.jpg,ベビー・パール,Baby Pearl,JAP,淡色,暈し,小輪,千重,USA,1980,Nuccio's,"JAP, 小輪, 1980 Nuccio's"
・・・・
・・・・


 【 サンプルhtml autoCardDb_1.html  】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head><title>掲載洋種ツバキ一覧 autoCardDb_1</title>
<meta http-equiv="Content-Type" Content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<script language='JavaScript'><!--
/* 表示サムネイル画像を制限し、スクロールに従い追加表示する仕様 08/6/6 */
var AAA=0
var board;
var tell, tell2;
var bigCard;
var bigImg;
var sImg;
var scrw;      //screen.width
var scrh;      //screen.height
var sCw;     //smallCardのwidth
var sCh;     //smallCardのheight
var BX =1.1; //Card間の間隔比0.1
var lp;      //Card並びの左端トップ位置
var qImg = new Array();
var qCap = new Array();
var qRef = new Array();
//検索レコードデータを画像配列にセット
var qCount; //レコード数

//レコードデータをqCap[],qImg[]にセットする
function setRecData(){
   
    qCount = myDb.recordset.recordCount;  // レコード数を求める
    for (i= 0; i<qCount; i++ ) {
     qCap[i]=myDb.recordset.Fields("Jname").value;
        qImg[i]=myDb.recordset.Fields("img").value;
        qRef[i]=myDb.recordset.Fields("Ref").value;
        myDb.recordset.MoveNext();
     }
  }
//複合検索
function sorttable(){
   removeCards();
   myDb.Filter = "";
   myDb.reset();
   sS="";
   n= document.myFORM.fSpecies.value;                      sS=sS+ 'Species=' + n + ' & ';
   n= document.myFORM.fJName.value; if(n == '') n = '*'; sS=sS+ 'JName=' + n + ' & ';
   n= document.myFORM.fColor.value;                        sS=sS+ 'Color=' + n + ' & ';
   n= document.myFORM.fPattern.value;                      sS=sS+ 'Pattern=' + n + ' & ';
   n= document.myFORM.fSize.value;                           sS=sS+ 'Size=' + n + ' & ';
   n= document.myFORM.fFForm.value;                       sS=sS+ 'FForm=' + n + ' & ';
   n= document.myFORM.fBy.value;   if(n == '') n = '*';  sS=sS+ 'By=' + n;
   myDb.Filter = sS;
   myDb.reset();
   setRecData();
   setImg();
  }
function setImg() {
   for (var i = 0; i<qCount; i++) {
   addImg(i);
        }
   bigImg.src      = "imgFull/" +qImg[0];
   tell.innerText  = qCap[0];
   tell2.innerText = qRef[0];

function clearInput() {
  document.myFORM.fSpecies.value="*";
  document.myFORM.fJName.value="";
  document.myFORM.fColor.value="*";
  document.myFORM.fPattern.value="*";
  document.myFORM.fSize.value="*";
  document.myFORM.fFForm.value="*";
  document.myFORM.fBy.value="";
 }
//現在の画面のサムネイル画像を削除する
function removeCards()
{
    for(i=0;i<qCount;i++) {//qCount
         idName="sCard"+i;
         rObj=document.getElementById(idName);
         rObj.parentNode.removeChild(rObj);
     }
 }
// =============== images constructor =================
function addImg(n) {
 var o = document.createElement('img');
        o.src = "imgFull/"+ qImg[n];                                           
        o.style.width  = sCw +"px";
        o.style.height = sCh +"px";
        o.id = "sCard" + n;
        var topP, difL, leftP;
        // top位置の設定
        if(n <= 15) { topP = 100 +(Math.floor(n/4) *sCh*BX); }
        else {
               topP = (100 +(Math.floor((n-16)/8)+4) *sCh*BX);
             }
        o.style.top = topP;
         
        // left位置の設定
        if(n <= 15) {
             if((n%4)<=1) { leftP = lp + (sCw *BX * (n%4)); }
             else         { leftP = lp + (sCw *BX * ((n%4) +4)); }
        }
        else { leftP= lp +(sCw *BX*((n-16)%8)); }
        o.style.left = leftP;
       
        o.onmousedown = function() {
            actImg(n);
        }
  board.appendChild(o);
        //return o; //card[]などにセットする場合には必須です
 }
 function actImg(n) {
        srcElement = window.event.srcElement;
        bigImg.src =srcElement.src;
        tell.innerText = qCap[n];
        tell2.innerText = qRef[n];
 }
 /* スクロールに従ってフル画像枠を移動する */
function scrollBigImg()
{
 var divObj = bigCard;
 var dBody  = document.body;
 if(dBody.scrollTop<=50) { bigCard.style.top=50 +"px";}
    else { bigCard.style.top =5 +dBody.scrollTop +"px"; }
}
/* 拡大画像の表示幅を変化させる */
var cbi =0;
function chgBigImgSize() {
        if(cbi ==0) {
            bigImg.style.width = sCw *3 +"px";
            tell.style.width =sCw *3 +"px";
            tell2.style.width =sCw *3 +"px";
            bigCard.style.left = (scrw - (sCw*BX *3))/2 +10 +"px";
            cbi=1;
         }
        else {
            bigImg.style.width = sCw *4 +"px";
            tell.style.width =sCw *4 +"px";
            tell2.style.width =sCw *4 +"px";
            bigCard.style.left = (scrw - (sCw*BX *4))/2 +10 +"px";
            cbi=0;
         }
}
onload = function init() {
        board  =document.getElementById("boardD");
       
        bigCard =document.getElementById("bigD");
        bigImg =document.getElementById("bigImgA");
        tell =document.getElementById("tellD");
        tell2 =document.getElementById("tell2D");
       
        scrw  = screen.width -20;  //scroll bar 分を引く
        scrh  = screen.height -20; //scroll bar 分を引く
        board.style.width  =scrw +"px";
       
        sCw = Math.round(scrw/9.0);  //横に8縦に 8.8 + 0.2 とする
        sCh = sCw *0.75; //高さは幅の0.75
        bigCard.style.width = sCw *4 +"px";
        bigImg.style.width  = sCw *4 +"px";
        bigCard.style.left  = (scrw - (sCw*BX *4))/2 +10 +"px";
        bigCard.style.top   ="50px";
        lp = Math.round(sCw *0.1);    //
        tell.style.width    = sCw *4 +"px";
        tell.style.height   = 30 +"px";
        tell.style.left     ="0px";
       
        tell2.style.width   =sCw *4 +"px";
        tell2.style.height  = 30 +"px";
        tell2.style.left    ="0px";
       
        setRecData();
        setImg();
        //for (var i = 0; i<qImg.length; i++) {
     //  addImg(i);
        //}
        //bigImg.src = "imgFull/" +qImg[0];
        //tell.innerText= qCap[0];
      
   } 
// --></script>
<style type="text/css">
<!--
UNKNOWN {
 PADDING-RIGHT: 0px;
 PADDING-LEFT: 0px;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 PADDING-TOP: 0px
 }
SPAN {
 VISIBILITY: hidden
 }
#boardD {
 LEFT: 0%;
 WIDTH: 100%;
    POSITION: absolute
 TOP: 300px;
 BACKGROUND-COLOR: #006600
 }
#boardD IMG {
 BORDER-RIGHT: #ffffff 3px solid;
 BORDER-TOP: #ffffff 3px solid;
 BORDER-LEFT: #ffffff 3px solid;
 BORDER-BOTTOM: #ffffff 3px solid;
 POSITION: absolute
 }
#bigD {
 Z-INDEX: 10;
 POSITION: absolute
 }
#bigD IMG {
 BORDER-RIGHT: #ffffff 10px solid;
 BORDER-TOP: #ffffff 10px solid;
 BORDER-LEFT: #ffffff 10px solid;
 BORDER-BOTTOM: #ffffff 10px solid
    POSITION: relative;
 TOP: 50px;
 }
#tellD {
 COLOR: #ffffff;
 BACKGROUND-COLOR: #006600;
    POSITION: relative;
    TOP: 0px;
 TEXT-ALIGN: center
 }
#tell2D {
 LEFT: 50px;
 WIDTH: 200px;
 COLOR: #ffffff;
 POSITION: relative;
 TOP: 0px;
 BACKGROUND-COLOR: #006600;
    TEXT-ALIGN: center
 }
BODY {
 BACKGROUND-COLOR: #006000
 }
-->
</style>
</head>
<body onscroll="scrollBigImg()"><!-- 検索入力 -->
<form name='myFORM' style="FONT-WEIGHT: bold; COLOR: #ffffaa"><font size='2'>
  種別:&nbsp;<select id="fSpecies" >
   <option value="JAP">JAP
   <option value="RET">RET
   <option value="NRH">NRH
   <option value="SAS">SAS
   <option SELECTED value="*">*
   </option>
</select>
  品種名:<input name='fJName' size='22' style="WIDTH: 139px; HEIGHT: 20px">
  花色:<select id="fColor" >
   <option value="輝紅色">輝紅色
   <option value="紫紅">紫紅
   <option value="赤紅">赤紅
   <option value="赤緋">赤緋
   <option value="淡色">淡色
   <option value="藤桃">藤桃
   <option value="濃桃">濃桃
   <option value="白">白
   <option SELECTED value="*">*
   </option>
</select>
  模様:<select id="fPattern" >
   <option value="-">-
   <option value="絞り">絞り
   <option value="唐子">唐子
   <option value="斑">斑
   <option value="覆輪">覆輪
   <option value="暈し">暈し
   <option SELECTED value="*">*
   </option>
</select>
  花径:<select id="fSize" >
   <option value="極大輪">極大輪
   <option value="大輪">大輪
   <option value="中・大輪">中・大輪
   <option value="中輪">中輪
   <option value="小・中輪">小・中輪
   <option value="小輪">小輪
   <option value="極小輪">極小輪
   <option SELECTED value="*">*
   </option>
</select>
  花型:<select id="fFForm" >
   <option value="一重">一重
   <option value="八重">八重
   <option value="唐子">唐子
   <option value="千重">千重
   <option value="唐子・千重">唐子・千重
   <option value="蓮華">蓮華
   <option SELECTED value="*">*
   </option>
</select>
  作成者:<input name='fBy' size='22' style="WIDTH: 139px; HEIGHT: 20px">

<input type='button' onclick='sorttable()' value='複合検索'>
<input type='button' onclick='removeCards(); myDb.object.filter=""; myDb.reset();clearInput();setRecData();setImg();' value='全行表示'><br>
</font></form>
<div id="boardD">
   <div id="bigD">
     <div id="tellD">FindAutoCards</div>
     <div id="tell2D">tell2</div>
     <img id="bigImgA" onclick="chgBigImgSize()">
   </div>
</div>
<object id="myDb" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"><param name="RowDelim" value="&#10;"><param name="FieldDelim" value=","><param name="TextQualifier" value='"'><param name="EscapeChar" value=""><param name="UseHeader" value="-1"><param name="SortAscending" value="-1"><param name="SortColumn" value=""><param name="FilterValue" value=""><param name="FilterCriterion" value="??"><param name="FilterColumn" value=""><param name="CharSet" value="shift_jis"><param name="Language" value="ja"><param name="CaseSensitive" value="-1"><param name="Sort" value=""><param name="Filter" value=""><param name="AppendData" value="0"><param name="DataURL" value="autoWestC.csv"><param name="ReadyState" value="4"></object></font>
</body>
</html>


 == images constructor == 以下のコードは、autoCards システムのコードで、この部分は、qImg[ ] 配列に画像ファイル名をセットし、qCap[ ] 配列にタイトル(品種名)、qRef[ ] 配列に説明文文字列をセットすれば、画面に自動的に画像を表示するコードになっています。
 サムネイル画像をクリックすると、中央の拡大画像に表示されます。 拡大画像はクリックすると、やや小型になり、再度のクリックで元のサイズに戻ります。

 CSVのデータをdataBind でセットされたレコードデータを、qImg[ ] 配列・qCap[ ] 配列・qRef[ ] 配列にセットし、画像を表示します。 画面の[複合検索]をクリックすると、現在の画面のサムネイル画像を消して、フィルター処理で絞り込んだレコードのデータをqImg[ ] 配列・qCap[ ] 配列・qRef[ ] 配列に再セットし、画像を再表示します。

 赤字の部分が、CSVファイルのフィールド項目に関連する記述です。CSVファイルを変える場合には、この部分を変更します。

 makeAutoCardsDb.vbs

    autoCardsDb_1.html の形のhtml を完全に自動作成するVBSプログラムは作成できませんが、半自動作成するVBSプログラムを作成しました。
                                                                                                                     makeAutoCardsDb.zip          

#7
 CSV ファイルを書き直す
 
  これは、ローカルなhtml の使用での動作ですが、dataBaind の元のデータであるCSVファイルのデータを書き直すことができます。
  ローカルな使用ですので、応用・使用は限定されますが、いろいろな応用が考えられます。

    上記の 「データバインド入門」 でも、レコードの追加のコードの紹介がありますが、これはTable の列を追加するもので、元のCSVファイルのデータを更新・追加することはありません。

  DataBind_editRec.htm は、理解のために、「データバインド入門」 のサンプルhtml の一部を変更し、ローカルな条件でCSVファイルを更新します。
  サンプルのDataBind_editRec.htm は、デモ用で、書き込み動作は止めてあります。
                                                  サンプルのDataBind_editRec.htm
  動作の確認は、ダウンロードしてローカルな状態下でテストください。   
                                                  テスト用のeditRecord.zip のダウンロード

     CSVファイルの更新は、VBScript の関数で、読み込んだレコード列文字列を編集後のレコード列文字列を置換する処理で行っています。
  VBScript の部分のみを下に紹介します。 全体のコードはダウンロードのhtml ソースをご覧ください。  

<script Language="VBScript">
'CSVのレコードを書き換える
Function editCSV(sR1, sR2)
    Set fso = CreateObject("Scripting.FileSystemObject")
    'location.pathnameから appPathを読み取る
    intNum=InStrRev(location.pathname,"\",-1)
    strPath=Mid(Left(location.pathname,intNum),2)
    Const ForReading = 1,ForWriting = 2,ForAppending = 8
    Set objFile = Fso.OpenTextFile(strPath & "car_1.csv", 1)
    sA = objFile.ReadAll
    sA = Replace(sA,sR1,sR2)
    objFile.Close
    With fso.CreateTextFile(strPath & "car_1.csv", ForWriting)
        .Write sA
        .Close
    End With
    msgbox "書き換えました"
    Set fso=Nothing
End Function
</script>


   DataBind_editRec.htm の応用例としては、SasukeiA.html があります。

#8
 画像を分類リストで表示する

  autoCardsDb は、サムネイル画像を表示し、検索機能が付いていますが、Webページとして利用する場合には、対象の多数の画像ファイルを読み込むのに時間が掛かります。 最近のコンピュータの機能は高いのであまり問題になりませんが、やはり気になります。

  CSVファイルを読み込み、このタイトルのみをテーブルに表示し、ここから目的の画像のみを表示する仕様はデータバインドを利用すると簡単に作成できます。  ここでは、分類フィールドを設定し、区分で検索しリストを表示する仕様とします。

 indexTab_img.jpg

  ここでは、画面の画像とhtml のコードを紹介します。 画面左には1つのinput box と1列のテーブルがあります。 input box にアルファベットを入力し、[ Reset ] ボタンをクリックすると、アルファベットの品種名のリストが表示されます。 リストの品種名をクリックすると該当の画像が表示されます。

【 NisiCam_1.csv  】 

Img,Name,Caption
ACSJubilee_Ni.jpg,"ACS Jubilee",A
AdolpheAudusson_Ni.jpg,"Adolphe Audusson",A
Adorable_Ni.jpg,"Adorable",A
AltaGavin_Ni.jpg,"AltaGavin",A
AmabelLansdell_Ni.jpg,"AmabelLansdell",A
AngelWings_Ni.jpg,"Angel Wings",A
AnnetteGehry_Ni.jpg,"Annette Gehry",A
Anticipation_Ni.jpg,"Anticipation",A
Arcadia_Ni.jpg,"Arcadia",A
AspasiaMacArthur_Ni.jpg,"Aspasia MacArthur",A
AveMaria_Ni.jpg,"Ave Maria",A
BarbaraWoodroof_Ni.jpg,"Babara Woodroof",B
BalletDancer_Ni.jpg,"Ballet Dancer",B
・・・・・・・・・・・
・・・・・・・・・・・

【 tabIndex_A.html  】

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=shift_jis">
<title>テーブルリストで画像を表示する</title>
<script language="JavaScript"><!--
var bigImg
function chRecord(select_record) {
      myDb.recordset.AbsolutePosition = select_record.recordNumber;
      bigImg.src = "file://E:/NisiCamAdd/" + myDb.recordset.fields("img");
 }
function resetRec() {
      var sA = "Caption=" + document.getElementById("inp1").value;
      myDb.Filter = sA;
      myDb.reset();
 }
//初期設定
onload = function() {
      bigImg   = document.getElementById("mainImg");
 }
// --></script>
</head>
<body style="BACKGROUND-IMAGE: url(subp/Moris_Marrygold_120a.jpg)">
<input id="inp1" value="A" style="WIDTH: 85px; HEIGHT: 20px" size="14">&nbsp;
<input onclick ="resetRec()" style="FONT-WEIGHT: bold" type="button" value="Reset">
<table datasrc='#myDb' style   ="WIDTH: 164px; HEIGHT: 24px; BACKGROUND-COLOR: #ffffff" cellspacing="0" cellpadding="2" width="164" border="1">
  <tr style="CURSOR: hand" onclick="chRecord(this)">
    <td style="FONT-SIZE: 12px"><span datafld='Name'></span></td>
  </tr>
</table>
<img id ="mainImg" height="490" alt="ACSJubilee_Ni.jpg" hspace="0" src="file://E:/NisiCamAdd/ACSJubilee_Ni.jpg" width="700" border="0" style="BORDER-RIGHT: #ffffff 10px solid; BORDER-TOP: #ffffff 10px solid; LEFT: 15%; BORDER-LEFT: #ffffff 10px solid; BORDER-BOTTOM: #ffffff 10px solid; POSITION: absolute; TOP: 3%">
<object id="myDb" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="FieldDelim" value=","><param name="TextQualifier" value='"'><param name="CharSet" value="shift_jis"><param name="Language" value="ja"><param name="Filter" value="Caption=A"><param name="DataURL" value="NisiCam_1.csv">
</object><br>
<br>
</body>
</html>


  CSVファイルのNisiCam_1.csv は、img, Name, Caption の3つのフィールドを持っています。 それぞれ、画像ファイル名、品種名、分類区分アルファベットのデータがセットされています。 テーブルの表示リストは、Caption 区分でアルファベットで検索・表示します。
  
  html コードで、CSVファイルと画像ファイル格納フォルダーの記述部分を赤字としています。 ご自分のデータに変更する場合には、これらの箇所を変更します。

  tabIndex_A.html は、ホームページで多数の画像を分類して表示する場合に使用できます。 また、ご自分のコンピュータに多数の画像をお持ちの方は、これらの画像を分類して表示するツールとして使用できます。
  上のhtml コードは、自分のコンピュータの(ローカルの) E:/NisiCamAdd フォルダーの画像ファイル群を対象としています。 ローカルな場合のパスは、このように、" file://E:/NisiCamAdd/ACSJubilee_Ni.jpg" のように記述します。 画像フォルダーが、tabIndex_A.html のあるフォルダーの [ img ] フォルダー内にある場合には、ごく普通に、"img/" と記述します。


#9  
 異なるフォルダーの画像を検索する

  多くの画像ファイルを持っている人はいろいろな手段で、分類を行ってると思いますが、ツバキの品種画像などを一括して管理・利用するには努力が必要です。  前項のtabIndex_A.html を拡張して、いろいろなフォルダーに納めたツバキの品種画像ファイルを検索するhtml のページを作成しました。 これはローカルな使用専用です。

  indexTabB_img.jpg

  画面の上部には、Caption とPath のリストボックスがあります。左端には、リスト表示の1列のテーブルがあり、中央には、画像表示の IMG タグがあります。

 【 NisiCam_2.csv 】

img,Caption,Path
ACSJubilee_Ni.jpg,A,NisiCamAdd
AdolpheAudusson_Ni.jpg,A,NisiCamAdd
AdolpheAudusson_Ni2.jpg,A,NisiCamAdd
Adorable_Ni.jpg,A,NisiCamAdd
AltaGavin_Ni.jpg,A,NisiCamAdd
AmabelLansdell_Ni.jpg,A,NisiCamAdd
AngelWings_Ni.jpg,A,NisiCamAdd
AngelWings_Ni2.jpg,A,NisiCamAdd
AnnBlairBrown_Ni.jpg,A,NisiCam2/ShowF


【 tabIndex_B.html  】

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=shift_jis">
<title></title>
<script language="JavaScript"><!--
var bigImg
function chRecord(select_record) {
 myDb.recordset.AbsolutePosition = select_record.recordNumber;
    bigImg.src = "file://E:/" + myDb.recordset.fields("Path") + "/" + myDb.recordset.fields("img");
 }
function resetRec() {
    var sS="";
    sS=sS+ 'Caption=' + document.myFORM.fCaption.value + ' & ';
    sS=sS+ 'Path=' + document.myFORM.fPath.value ;
    myDb.Filter = sS;
    myDb.reset();
 }
//初期設定
onload = function() {
     bigImg   = document.getElementById("mainImg");
 }
// --></script>
</head>
<body style="BACKGROUND-IMAGE: url(subp/Moris_Marrygold_120a.jpg)">
<form name="myFORM">
<strong>Caption:</strong>
   <select style="WIDTH: 116px" id="fCaption">
   <option value="A">A
   <option value="B">B
   <option value="C">C
   <option value="D">D
   <option value="E">E
   <option value="F">F
   <option value="G">G
   <option value="H">H
   <option value="I">I
   <option value="J">J
   <option value="K">K
   <option value="L">L
   <option value="M">M
   <option value="N">N
   <option value="O">O
   <option value="P">P
   <option value="Q">Q
   <option value="R">R
   <option value="S">S
   <option value="T">T
   <option value="U">U
   <option value="V">V
   <option value="W">W
   <option value="X">X
   <option value="Y">Y
   <option value="Z">Z
   <option SELECTED value="*">*
   </option>
   </select>&nbsp;&nbsp;
<strong>Path:</strong>
   <select style="WIDTH: 116px" id="fPath">
   <option value="NisiCamAdd">NisiCamAdd
   <option value="NisiCam2/ShowF">NisiCam2/ShowF
   <option SELECTED value="*">*
   </option>
   </select>&nbsp;&nbsp;
<input onclick ="resetRec()" style="FONT-WEIGHT: bold" type="button" value="Reset">
</form>  

<table datasrc='#myDb' style   ="WIDTH: 164px; HEIGHT: 24px; BACKGROUND-COLOR: #ffffff" cellspacing="0" cellpadding="2" width="164" border="1">
  <tr style="CURSOR: hand" onclick="chRecord(this)">
    <td style="FONT-SIZE: 12px"><span datafld='img'></span></td>
  </tr>
</table>
<img id ="mainImg" height="441" alt="ACSJubilee_Ni.jpg" hspace="0" src="file://E:/NisiCamAdd/ACSJubilee_Ni.jpg" width="630" border="0" style="BORDER-RIGHT: #ffffff 10px solid; BORDER-TOP: #ffffff 10px solid; LEFT: 15%; BORDER-LEFT: #ffffff 10px solid; BORDER-BOTTOM: #ffffff 10px solid; POSITION: absolute; TOP: 10%">
<object id="myDb" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"><param name="FieldDelim" value=","><param name="TextQualifier" value='"'><param name="CharSet" value="shift_jis"><param name="Language" value="ja"><param name= "Filter"value="Caption=A"><param name="DataURL" value="NisiCam_2.csv">
</object><br><br>
</body>
</html>



  NisiCam_2.csv には、img, Caption, Path の3つのフィールドを作成します。 それぞれが、画像ファイル名、品種名語頭アルファベット、画像格納フォルダー名のデータをセットします。

  画面の上部の検索設定枠の選択文字列を使って
    sS=sS+ 'Caption=' + document.myFORM.fCaption.value + ' & ';
         sS=sS+ 'Path=' + document.myFORM.fPath.value ;
         myDb.Filter = sS;
  のコードで検索を実行し、テーブルに画像の画像ファイル名を表示します。

  テーブルのリストで品種名・画像ファイル名をクリックすると、
    bigImg.src = "file://E:/" + myDb.recordset.fields("Path") + "/" + myDb.recordset.fields("img");
  で画像IMGに該当の画像を表示します。

  このシステムを管理するには、NisiCam_2.csv に相当するCSVファイルデータを作成する必要がありますが、Caption フィールドの表示区分を適切に設定できれば、多くのフォルダーに納めて画像を横断的に検索してリストすることができます。
  CSVファイルはエクセルを使用すれば容易に作成できます。 エクセルのシートにフォルダーのjpg ファイル名を一覧リストとして作成するマクロも簡単に作成できます(下記のListFileName.zipを解凍し、マクロとして使用します)。

                                                                          tabIndex_B.zip をダウンロードする
                                                                                                                   ListFileName.zip をダウンロードする