とりあえず、一般的な方法といいますか、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);
というわけで、出来上がり。
Fedora7を入れたので、時々手の空いた時にいじってみているのですが、
# locate json
/etc/php.d/json.ini
/usr/lib/php/modules/json.so
全く見落としてましたがf^^;PHP5.2.0からデフォルトで追加されているようです。
ちなみに、cat /etc/php.d/json.ini の中身は下記の通り
; Enable json extension module
【PHPウォッチ】第31回 パフォーマンス向上など，数々の新機能を搭載したPHP 5.2.0リリース http://itpro.nikkeibp.co.jp/article/COLUMN/20061205/256101/?ST=ittrend&P=2
PHPからJSON作成を扱うhttp://itpro.nikkeibp.co.jp/article/COLUMN/20070307/264116/
http://jp.php.net/results.php?q=json.so&l=ja&p=wholesite http://www.aurore.net/projects/php-json/
GAFがあんまり便利なので、ついやってしまう ? といけないので、再度リンクしておきます。
【Webサービス】ブログツールや広告を貼るときの注意（テストサンプルあり）http://jsgt.org/mt/archives/01/000688.html
要するに、
ということです。つまり、SCRIPT要素で別ドメインのWebサービスを読み込むことは、そのWebサービスの管理者と自分のページのdocumentの管理権限を共有してしまうということなわけです。
つまり、この場合、Googleは、APIの機能を無料で提供する代わりに、APIを張り込まれたページすべてを書き換えることも出来る権限を手に入れます。まぁ、Googleを信頼するとしても、パスワードなどをそのページで入力できるようにするのは、個人情報保護法的にもレッドカードではないかな〜？という気がします。もちろん、これはGAFに限らず、ブログツールや広告など他のものにも当てはまるという基礎的?なお話ですけど。
更に、このAPIの場合は、Googleの先のWebサービス(RSSなど)をJSONで出力するわけですから、そこのWebサービス管理者ともページの管理権限をマッシュアップする(笑)ことになります。
基本的には、信頼できるサイトの、既にパブリックなデータを利用するということになると思いますし、とても便利で有用なサービスですが、どこで、どのように使うかは、セキュリティについても考えつつ利用するのが良いかな？と思います。
Google AJAX Feed API Developer Guidehttp://code.google.com/apis/ajaxfeeds/documentation/
#GoogleがRSS用のプロクシを用意してくれ、それから応答を引き出すためのAPIをリリースしました、ということ？
ちょっと試してみます(下記、AtomフィードリストはGoogle AJAX Feed API経由の読み込みです)。
>
おお。
＝ざっくり和訳＝
APIを使うのには、APIキーの申し込み が必要です。
JavaScriptとXMLHttpRequestは、Same origin policy を使用します (訳注：要するに別ドメインとはアクセスできないというあのルール)。これによって、あるクラスのスクリプト用の攻撃からユーザを保護しますが、多くの開発者はAjaxベースのmashupsにそれらを書くことができません(訳注：ので不便です)。
Google AJAX Feed API はウェブで利用可能な内容の特定のタイプのために簡単な回避策をこれらの制限に提供します。
Google AJAX Feed API が、がどうユーザセキュリティを保持するかに関するその他の詳細に関して以下の security notes を見てください。
Remote JSON - JSONPhttp://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/
Web 2.0で変わるWebプログラミングの常識：http://www.itmedia.co.jp/enterprise/articles/0608/25/news010_2.html
Yahoo! Web Services の Using callback=function:http://developer.yahoo.com/common/json.html#output
追記2006.8.27 JSON with Padding Testhttp://www.geocities.jp/stormriders999/jsontest.html
追記2006.8.27 [json]ブラウザからJSONで呼び出せるサービス一覧http://d.hatena.ne.jp/shinichitomita/20060825/1156504036
JSONP（JSON with Padding）という話がでていたのでメモ。
1.ドメイン超えをするためにXHR+プロクシではなくJavaScriptのロードを使う、
ということと、
2.着信コールバック名を、クライアント側からURLクエリとしてサーバーへ渡し/返してもらう、ことで着信後の動作を自動化する
という仕組みのようです。信頼のできる関係の中で、有益な方法かなと思います。
サーバーからJavaScriptデータの着信コールバックを渡す仕組み自体は、私の関係では、古くは、たとえば10年前のNewGameWeb 用ランキング などもそうですけれど、普通に使われていた手法だと思いますが、この新しい所は、「XHRのクロスドメインを超えて最近普及してきたWebサービスをクライアントがコールバックを指定する形で利用したい」という歴史性?かもしれません。
まだ、ざっとみただけで断言はできないので、勘違いなど指摘いただけると有り難いのですけれど、この場合のリスクには要注意かなと思います。クライアントの指定するスクリプトをサーバーが通過させなければならないからです。まさに、XHRが禁止したクロスサイトの攻撃が解禁されるわけです。
信頼不能な不特定多数のクライアント入力を前提とした(たとえば、掲示板など)では、どんなコールバックを渡されるかわからないので、防御構築には、結構手間が掛かるかもしれません。
このJSONPのページにある事例では、(new Date()).getTime();をuidに使用することで、リクエストとレスポンスの整合をはかっているようですが、クライアントの時間はあまり信用できないことと、getTime()だけでは、経験的には、複数入力時に衝突する可能性も低くないような気がしますし、推測も簡単そうです。(ちなみに、程度の違いで気休めといわれてしまうかもしれませんが、Aja
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
