サンプルのプログラムコード解説

(H) クラウドBigtable登録エンティティの参照

ここではgaedirectを使用して、クラウド上のBigtableに登録されているチャット書込みデータを参照し、ブラウザ画面上に表示していますが、画面表示ではDOMノード操作でタグの生成を行っています。

リスト5 多機能チャットプログラム-3 （channelHtl5.htm）

//(H)　開始：クラウドBigtableを参照　
function rev_remote(){
  var pnode = document.getElementById("splist");
  for (var i =pnode.childNodes.length-1; i>=0; i--) {
    pnode.removeChild(pnode.childNodes[i]);									//（1）
  } 
  listno = 0;
  var id = "uname,uemail,umsg,lat,lon,utime"; 
  var query = {};
  query = qinit(kind, id);
  query["SORT"] = "utime:DESCENDING";										//（2）
  query["LIMIT"] = "10";													//（3）
  $.get(gae(), query, function(res){								        //（4）
    var entity = res.split("<e>");
    for(var i = 0; i < entity.length ; i++){ 
        var prop = entity[i].split("<p>");
        splist(listno++, prop[1], prop[2], prop[4], prop[5], setutime2(prop[6]), prop[3]); 														             //（5）
    } 
  });
} 
function splist(listno, uname, uemail, lat, lon, utime, umsg){				//（6）
  var tr1;
  if(listno < 0 ){														   //（7）
    tr1= document.getElementById("splist").insertRow(0);
  }else{
    tr1= document.getElementById("splist").insertRow(listno*2);
  }
  var td1_1 = tr1.insertCell(0);										    //（8）
  td1_1.width = '10';                                                       //（9） 
  td1_1.innerHTML = "<input type='checkbox' name='upcloud' id='"+listno+"'>"; 
  var td1_2 = tr1.insertCell(1);
  td1_2.width = '20';
  
  var td1_3 = tr1.insertCell(2);
  td1_3.width = '140';
  td1_3.id = 'uname'+listno; 												//（10）

  var td1_4 = tr1.insertCell(3);
  td1_4.width = '140';
  td1_4.id = 'uemail'+listno;                                               //（11）
  
  var td1_5 = tr1.insertCell(4); 
  td1_5.width = '140';
  td1_5.id = 'lat'+listno;                                                  //（12）
  
  var td1_6 = tr1.insertCell(5);
  td1_6.width = '140';
  td1_6.id = 'lon'+listno;                                                  //（13）
  
  var td1_7 = tr1.insertCell(6);
  td1_7.width = '200';
  td1_7.id = 'utime'+listno;                                                //（14）
  td1_2.appendChild(document.createTextNode(listno));						//（15）
  td1_3.appendChild(document.createTextNode(uname));
  td1_4.appendChild(document.createTextNode(uemail));
  td1_5.appendChild(document.createTextNode("緯度:"+lat));
  td1_6.appendChild(document.createTextNode("経度:"+lon));
  td1_7.appendChild(document.createTextNode("時間:"+utime));	              //（16）
  var tr2;																	//（17）
  if(listno < 0 ){                                                          //（18）
    tr2 = document.getElementById("splist").insertRow(1);
  }else{
    tr2 = document.getElementById("splist").insertRow(listno*2+1);
  }
  var td2_1 = tr2.insertCell(0);
  td2_1.width = '20';
  var td2_2 = tr2.insertCell(1);
  td2_2.width = '720';
  td2_2.colSpan = 6;                                                        //（19）
  td2_2.id = 'umsg'+listno;
  td2_2.appendChild(document.createTextNode(umsg)); 
  //終了：２行目のTRタグとTDタグ生成
}
//(H)　終了：クラウドBigtableを参照

[Bigtable登録エンティティの参照処理]

gaedirectでの参照アクセス

リスト5のrev_remote関数は、Bigtableへの書き込みデータ参照を行っています。（1）のremoveChildで現在の一覧表示データをすべて消去した後、gaedirectでの条件参照を行っていますが、NoSQLのBigtableでも基本的な条件参照処理を行うことができます。

参照では（2）で書き込み時間での降順ソートを、（3）で先頭の10件まで検索することを指定して、（4）のgaedirectにより条件参照を実行しています。この条件指定から書き込みの新しい方から10件迄が画面表示されます。

参照データの表示

参照データを使用したブラウザ画面への表示は（5）から呼び出される（6）のsplist関数で行われていますが、この関数内の処理はDOMノード操作を使用して行われています。

・DOMノード操作でのテーブルタグ生成

（7）ではlistnoの値で処理を切り分けています。Listnoがマイナス値の場合は画面ロード時に表示されているリストの先頭に、新規に書き込まれたメッセージを追加する場合で、マイナス値でない場合は、リスト一覧の最後に追加します。

ここで使用されているinsertRowはTABLEまたはTBODYに新しい行（TR）を追加するメソッドで、TABLEにinsertRowを適用した場合には、自動的にTBODYが追加されてその下に、TR行を追加することになります。

ここでは、ID値”splist”のTBODYタグにTRタグ（tr1）を追加しています。

<tbody id="splist" width="760"><tr></tr></tbody>

（8）では生成したTRタグ（tr1）にinsertCellを適用しています。insertCellは行（TR）にセル(TDタグ)を追加/挿入します。引数で指定される値は、挿入するセルの場所を指定しており、先頭が0から始まるインデックス番号になっています。引数を指定しない場合は"-1"で、新しいTDタグをcellsコレクション（それまでに追加されているTDタグ）の直前に追加します。

<tbody id="splist" width="760"><tr><td></td></tr></tbody>

（9）では追加したTDタグのセル幅を指定していますが、これはTABLEタグを生成するときの省略形で、基本的なDOMノード操作書式では次のように指定します。　td1_1.setAttribute("width", "10");

<tbody id="splist" width="760"><tr><td width=”10”></td></tr></tbody>

次の行でTDタグにinnerHTMLを適用していますが、innerHTMLは、指定されたタグ（TD）の子ノードになる全てのタグをすべて消去し、そのあと、右辺で指定されているタグ記述を子ノード接続します。ここでは INPUTタグが指定されているので、TDタグの子ノードとしてINPUTタグが追加されて、タグ記述としては次のようになります。

<tbody id="splist" width="760">
  <tr><td width=”100”><input type='checkbox' name='upcloud' id='"+listno+"' /></td></tr>
</tbody>

その後同様の処理記述を繰り返してTDタグを追加していきますが、（10）～（14）では、それぞれのTDタグにID属性とその値を指定しています。これはTABLEの表形式になっている、各TDタグを一意に特定できるようにするための処理で、例えば（10）の’uname’　はBigtable登録時のプロパティ名で表示列を一意に特定し、その後に追加されているlistnoで表示行を一意に特定しています。したがって、この2つを連結して、例えば　'uname'+listno　とすれば、テーブル表示上でのセル位置を一意に特定できることになります。

テキストノードのタグ生成と接続

（15）～（16）では同じ書式の処理を繰り返していますが、ここではテキストノードを生成して、それをTDタグの下に追加しています。

操作では、　document.createTextNodeで引数に指定される内容で、テキストを生成し、それをappendChildでtd_2～td_7の各TDタグの子ノードとして追加しています。

登録メッセージの表示では１つのメッセージを２行で表示しており、（17）以下は2行目のタグ生成を行っています。（18）のif文は1行目と同様に、一覧の最初にTR行を追加するか、最後に追加するかの判定を行っており、1行目と同様の操作でタグ生成を行っています。2行目ではメッセージ内容の表示を行うため生成されるTDタグは2つだけで、そのため（19）ではCOLSPANで６を指定しています。