JavaScript++かも日記

【MT】MTのテンプレートタグからYUIのtree用JSONを自動出力

とりあえず、一般的な方法といいますか、MTのテンプレートタグを使って、YUI tree 用のJSONデータを生成し、自動的にツリーメニューが出力されるようにしてみます。

このレベルは、普通のMobable Type(2.x ＾＾；；) ユーザーなら、コピペで使える方法になるかな？と思います。ただし、Ajaxサクサクな方法はNext Stepからです。

手順は、たぶん今夜、家に帰ってから書きます。



ただいま。

で、まず、MTで「新しいテンプレート・モジュール」をひとつつくります。テンプレートの名前は、なんでもよいんですが、treeJSONとでもします。中身は、とりあえず、

//MTのテンプレートタグからYUIのtree用JSONを自動出力テスト

みたいな、JavaScriptのコメントにしておきます(ここへあとでJSONを記述する予定です)。 次に、Main Indexや、Category Archive、Date-Based Archive 、Individual Entry Archive などのYUIツリーを出力する予定のページの各テンプレートのhead部分へ次のように書き、各ページのhead内でtreeJSONのスクリプトが自動展開されるように準備しておきます。

<script type="text/javascript">
<!--
<$MTInclude module="treeJSON"$>
//-->
</script>

これで、試しにブログを再構築し、ページのソースを開いてみて、、、

<script type="text/javascript">
<!--
//MTのテンプレートタグからYUIのtree用JSONを自動出力テスト
//-->
</script>

このように展開されていれば、ここまでは成功です。
で、ちょっと、柏へ行く用事が出来たので、とりあえず休憩。

ただいま帰りましたっ。

この解説はMT2.xでしか試していないので、3.xや4.xでどうなのかはまったく不明です。どちらももう削除してしまったので私は確かめることもできません。

次に、いよいよ、JSONデータの生成です。最初に作ったtreeJSONテンプレートへ下記を記述します。

//Tree Data(ここへTrreeメニューのデータをJSONで書きます)
// ["_open"] はメニュートグルを開きます。
var treeData=[
  ["<b>かも日記</b>" ,
    [
      ["_open"],
      ["エントリー " , 
        [
          ["_close"],
<MTArchiveList  lastn="9">
          ["<$MTArchiveTitle$>" , "<$MTArchiveLink$>"],
</MTArchiveList><MTArchiveList  offset="9"  lastn="1">
       //   ["<$MTArchiveTitle$>" , "<$MTArchiveLink$>"]
</MTArchiveList>["about:","http://jsgt.org/mt/archives/01/001705.html"]
        ]
      ]
    ]
  ]
]

["エントリータイトル","エントリーのURL"],の形式でとりあえず最新の9件(lastn="9")出力しています。配列の最後は「,」があるといけないので、その行だけ別建てにします。 offset="9" lastn="1"　で最後の10行目だけを取り出せるか？と思ったのですが、私の勘違いなのか、バグなのか、うまくいかないので、今日はあきらめて、["about","...."]というリンクでお茶お濁しました(^^;。

これで、ブログを再構築すると、各ページのhead内のスクリプトに下記のようなJSONが生成されます(オブジェクトではなく配列なのは順序が保証されるからです)。

//Header Script
//Tree Data(ここへTrreeメニューのデータをJSONで書きます)
// ["_open"] はメニュートグルを開きます。
var treeData=[
  ["<b>かも日記</b>" ,
    [
      ["_open"],
      ["エントリー " , 
        [
          ["_close"],
          ["【MT】MTのテンプレートタグからYUIのtree用JSONを自動出力" , "http://jsgt.org/mt/archives/01/001706.html"],
          ["【Movable Type】Treeのテスト" , "http://jsgt.org/mt/archives/01/001705.html"],
          ["【Webサービス】ブログに求人情報を掲載する" , "http://jsgt.org/mt/archives/01/001704.html"],
          ["Allabout更新 YUIコネクション＋ランチャーパネル" , "http://jsgt.org/mt/archives/01/001703.html"],
          ["【JavaScript】自動セミコロン挿入と改行エスケープ" , "http://jsgt.org/mt/archives/01/001702.html"],
          ["【JavaScript】自動セミコロン挿入とドット演算子など" , "http://jsgt.org/mt/archives/01/001701.html"],
          ["【雑談】お月見" , "http://jsgt.org/mt/archives/01/001699.html"],
          ["【雑談】薄い人？" , "http://jsgt.org/mt/archives/01/001698.html"],
          ["【Movable Type】MT(2x)改造計画" , "http://jsgt.org/mt/archives/01/001694.html"],
       //   ["【MT】MTのテンプレートタグからYUIのtree用JSONを自動出力" , "http://jsgt.org/mt/archives/01/001706.html"]
["Testです","http://jsgt.org/mt/archives/01/001705.html"]
        ]
      ]
    ]
  ]
]

このJSON配列が、treeData　という名前の変数に代入されたことを覚えておいてください。Treeメニューを作る時にこの名前を使います。

データが準備できたところで、そろそろ、いよいよ各エントリーへの記述です。

まず、YUIを読み込みます。Yahoo!UIからダウンロードしてきて設置してもよいですが、YUIは最近(2007.8から)、Web上でもダイレクトにリンクして使用することを認めていますので、それを使います。

*Serving YUI Files from Yahoo! Serversへ行くと各コンポーネントのURLがわかります。

で、今回の結論（v2.3.1なら）はこれです。

<link rel="stylesheet" type="text/css" 
  href="http://jsgt.org/yui/2.3.0/yui/examples/treeview/assets/css/folders/tree.css">
<script type="text/javascript" 
  src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>  
<script type="text/javascript" 
  src="http://yui.yahooapis.com/2.3.1/build/animation/animation-min.js"></script>  
<script type="text/javascript" 
  src="http://yui.yahooapis.com/2.3.1/build/treeview/treeview-min.js"></script>  
<script type="text/javascript" 
  src="http://yui.yahooapis.com/2.3.1/build/connection/connection-min.js"></script>  

でも、JSONとYUIだけではtreeメニューは自動生成されません。下記のコードを追加します。テスト後は、js外部ファイルにしておくと、キャッシュが効くので良いかもしれません。また、YUIの読み込みと下記コードも、エントリー毎に書くのではなくテンプレートにた方がコード量を減らせます。

//(namespaceは使わなくても動作します)
YAHOO.namespace('tato');//カスタマイズした関数など用に名前空間を用意しておきます

YAHOO.tato.tree = function(id) {
  this.tree = new YAHOO.widget.TreeView(id); //treeDiv1は表示するDIVのID名です
  
  //Tree描画  by Array
  this.mkTreeByArray = function (treeData,treeNode){
    if(!treeNode)treeNode = this.tree.getRoot(); 
    for(var i in treeData){
      if(!(treeData[i][0]=="_open"||treeData[i][0]=="_close")){
        var tmpNode = new YAHOO.widget.TextNode("" + treeData[i][0],treeNode, false);
        if(typeof treeData[i][1] == "string"){ 
          tmpNode.target= "sampleFrame"; 
          tmpNode.href= treeData[i][1];
        }
        if(typeof treeData[i][1] == "object"){
          if(treeData[i][1][0]=="_open")tmpNode.expand();
          this.mkTreeByArray(treeData[i][1],tmpNode); 
        }
      }
    }
    this.tree.draw();
  }
}

そして、最後に、このツリーを起動させるおまじないです。 YAHOO.util.Event.addListener(window, "load", YAHOO.tato.treeIni);でページ構築後に起動したYAHOO.tato.treeIni内の test1706.mkTreeByArray(treeData)でJSONデータを渡して自動構築します。

var fswt=fd=true;  //フェイド無し

//初期化
YAHOO.tato.treeIni = function(){
  test1706 = new YAHOO.tato.tree("menudiv1706");
  //test1706.tree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN); //フェイド処理用
  //test1706.tree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT); //フェイド処理用
  test1706.mkTreeByArray(treeData);//ここでTreeデータを渡します
}

//ページ読み込み後にカスタマイズ関数YAHOO.tato.treeIni()を起動します
YAHOO.util.Event.addListener(window, "load", YAHOO.tato.treeIni);

というわけで、出来上がり。

---

すずやん ( 2009年02月02日 21:49 )

拝見させていただいています。
先日某ページで、こちらのソースに似たYUIのコードを講義していらっしゃるのを拝見して、使用させていただきました。
http://allabout.co.jp/internet/javascript/closeup/CU20060530A/

こちらのソースで、動的読み込み部分を複数にしますと、どちらか片方（主にしたの方）のみがロードされるようです。
回避方法を探りましたが、なかなか進みません。

実際にはDBに入っている階層情報を動的読み込み部分のリンク先で取得し、テーブルを返したりして使ってますが、上記の現象はサンプルの動的ロード部分をコピペで複数にしても起きるようです。

よろしければ御教授いただけると助かります。

---

【コメント】(←clickで入力欄open)