2007-08-01

1.れあブ
れあはてブビューアー”れあブ”のリニューアルに伴うインターフェイス改善に、Yahoo UI Library(以下YUI)のTree View を使用したというのは、先日に書いたけれど、実際にどのようにしたかというのをまとめてみる、可能な限り。

2.れあブの仕組み
まずは、れあブの仕組みを先に

指定ユーザーのブックマークを読み込む
読み込んだブックマークからブクマ数5以下のブックマークを絞り込む
その絞り込まれたブックマークをコンテンツ表示部分へまず出力する
次に、上記で絞り込んだブックマークをブックマークしているユーザーを読み込む
このユーザーがれあマッチユーザーとして、ツリーのルートのノードとして表示される。
それぞれの子ノードユーザーをクリックすると、上記の1〜5の動作が繰り返される

3.れあマッチユーザーツリー
このれあマッチユーザーとして、順次ツリーを展開していくところと、ノードクリック時にコンテンツ表示内容を変更するところで、YUIを使用している。
こちらの動作しかけは、

初期状態は、指定ユーザーのコンテンツ読み込みと、ノード読み込み、展開が実施された状態とする。（以下のコードサンプルでは、最初のかたまりの部分）
ノードクリック時は、コンテンツ内容を変更するとともに、ノード内容を展開する。(以下のコードサンプルでは、function resshow() にて実行)
＋クリック時は、ノードの展開のみを行う。(以下のコードサンプルでは、function loadDataForNode() にて実行)

初期状態で、全てを用意するのではなくて、クリック時に順次読み込みが実行されるという動作にしているので、prototype.js を利用して、AJAX読みこみを入れている。
で、その実現を一応以下のコードをベースに実行するようにしている。

<script type="text/javascript">
  //<![CDATA[
   var tree;  //ツリーを定義
   var nodecheck=true;  //ノードが既に用意されているかどうかのチェック用
   function treeInit() {  //ツリー初期状態の設定
    //HTML タグにツリーを割り当て
    tree = new YAHOO.widget.TreeView("rarebu_matchtree");
    //子ノードの読み込みをダイナミック読み込み（クリック時に読み込み）に設定するための定義
    tree.setDynamicLoad(loadDataForNode);
    //ツリールートの取得
    var root = tree.getRoot();
    //ノードの準備
    var rootobj = { label: "id:" + HID,
                  id   : HID,
				  href:"javascript:dummy()"
                } ;
    //ノードをツリーに割り当て（ルートユーザー）
    var rootNode = new YAHOO.widget.TextNode(rootobj, root, false);
    // れあマッチユーザーを配列に割り当て
    var resset=array();
    // 次の階層ノードを定義
    nodeadd(resset,rootNode);
    //ノードクリック時ノードユーザーのれあブを読み込むようにするための設定
    tree.subscribe("labelClick", function(node) {
                   javascript:resshow(node);
                  });
    tree.draw();  //ツリーを書き出す
    //最初のノードツリーをオープンし、ルートユーザーのれあマッチユーザーを表示する。
    rootNode.expand();
   }
   YAHOO.util.Event.addListener(window, "load", treeInit);  //ツリーを実行

//子ノードをダイナミックに読み込む時の関数
function loadDataForNode(node, onCompleteCallback) {
 //既に子ノードが読み込まれているかをチェックし、
 //既にあれば読み込みは実行せずに、すぐにノードを開く
 if(nodecheck==true){
  //コールバック関数によって、ノードオープンを実行
  onCompleteCallback();
 }else{
  //子ノードがまだ準備されていない場合には、読み込みを実行
  var id=node.data.id;
  //prototype.js のAJAX関数によって、AJAXにより子ノードを読み込む
  new Ajax.Request('子ノード読み込みを行うAJAX読み込み先URL'+id,
      {onSuccess:function(oj){
                  //AJAXレスポンスを読み込み
                  var res = oj.responseText;
                  //レスポンスをれあマッチユーザーに分離して配列に読み込み
                  var resset=res.split();
                  var myobj;
                  var tmpNode;
	          // 次の階層ノードを定義（AJAXで読み込んだものを元に）
                  nodeadd(resset,node);
                  //コールバック関数によって、ノードオープンを実行
                  onCompleteCallback();
                 }
      });
 }
 //子ノードチェックをデフォルト値に戻す
 nodecheck=false;
}
 
//ノードクリック時にコンテンツをダイナミックに読み込む関数
function resshow(node){
 id=node.data.id;
 //コンテンツ読み込みと同時にノード内容も取得するため、子ノードチェックの設定値を変更
 nodecheck=true;
 //読み込み中のloading表示を書き出す
 document.getElementById('rarebu_resultview').innerHTML='<img class="loading" src="http://www.dlinkbring.com/picture/ajax-loader.gif" alt="Now Loading!!" />';
 //コンテンツ表示部のタイトルを変更
 document.getElementById('rarebu_resultview_title').innerHTML='id:'+id+'さんのれあブ・はてな情報';
 //prototype.js のAJAX関数によって、AJAXにより子ノードを読み込む
 new Ajax.Request('子ノード読み込みを行うAJAX読み込み先URL'+id,
      {onSuccess:function(oj){
                  //AJAXレスポンスを読み込み
                  var res = oj.responseText;
                  //レスポンスをれあマッチユーザーに分離して配列に読み込み
                  var restemp=res.split();
                  //読み込んだ結果のうち、
                  //コンテンツ表示内容の部分をコンテンツ表示部へ表示させる
                  document.getElementById('rarebu_resultview').innerHTML=restemp[0];
                  //以下は、子ノードの設定用
                  var resset=restemp[1].split();
	          // 次の階層ノードを定義（AJAXで読み込んだものを元に）
                  nodeadd(resset,node);
                  //コールバック関数によって、ノードオープンを実行
                  onCompleteCallback();
                  //ノードを既に読み込んでいるため、ノードオープンを実行
                  node.expand();
                 }
      });
}

//ノード追加用関数
function nodeadd(resset,node){
 var myobj;
 var tmpNode;
 for(i=0; i<resset.length; i++){
  myobj = {label: "label名を適当に設定(resset[i])",
          id   : "id名を適当に設定(resset[i])",
         //何も実行しないダミー関数を定義して、クリック時の動作を抑制
          href : "javascript:dummy()"
         }; 
  tmpNode = new YAHOO.widget.TextNode(myobj, rootNode, false); 
 }
}

function dummy(){
}

  //]]>
 </script>

関連リンク：
Yahoo! UI Library: TreeView
dLINKbRING.Labo.れあブ
Powered BY AmazoRogi

Rogi073.Diary 2.0

Yahoo UI Library Tree View を使ってみた