jQuery File Tree

このところジョウビタキ（通称ウチのヤツ）とjQueryだらけになっているこのごろ、またしてもjQueryプラグインのお話。

アップロードとダウンロード＆ディレクトリ管理を考えて、表示にはjQuery File Tree、アップロードにはjqUploaderを試しました。


まずはFile Tree。
これ、良くできてます。
・Linux GNOME風のファイルツリー表示がファンシー
・フォルダやファイルアイコンの変更が容易
・拡張子への対応もスタイルシートをちょちょいといじるだけでOK
・ページへの組み込みが簡単（jQueryプラグイン全体に言える事ですが）

欠点は、
・最終選択ファイルの情報しか吐き出さない

個人的にはディレクトリ管理も視野に入れていたので、「フォルダ選択時にフォルダの情報も吐き出してくれたらなぁ」なんて思ったりもしました。※もしかすると吐き出させる方法があるかもしれません。


jQuery File TreeにしてもjqUploaderにしても、phpと組んでサーバ内部とやりとりしています。jqUploaderの場合はFlashを使ってローカルとの橋渡しまでしていて、構成は結構複雑だったりします。


jQuery File Treeの基本的なところを押さえておきます。

$(document).ready( function() {

    $('#container_id').fileTree({

      root: '/some/folder/',

      script: 'jqueryFileTree.asp',

      expandSpeed: 1000,

      collapseSpeed: 1000,

      multiFolder: false

    }, function(file) {

        alert(file);

    });

});

この「.fileTree({」以下のJSON形式で指定されている部分が設定値ですね。
以下のようなオプションがあります。

root : 最初に表示されるディレクトリ : デフォ＝/(root)
script : サーバサイドのAjaxファイルのパス : デフォ＝jqueryFileTree.php
folderEvent : フォルダの開閉のトリガー : デフォ＝click（シングルクリック）
expandSpeed : フォルダを開くときの速度 : デフォ＝500(ms) ※-1でアニメーションなし
collapseSpeed : フォルダを閉じるときの速度 : デフォ＝500(ms) ※-1でアニメーションなし
expandEasing : フォルダを開くときのイージング : デフォ＝None
collapseEasing : フォルダを閉じるときのイージング : デフォ＝None
multiFolder : フォルダを複数開かせるか : デフォ＝true（開かせる）
loadMessage : ツリーをロード中に表示するメッセージ : デフォ＝Loading...


注意点はroot。
phpの設定かどうかは調べていませんが、デフォのままだとwwwルートではなくサーバのルートから表示してしまいます。
正しいパスを絶対パスで設定しなきゃならなりません。
でも、絶対パスがバレてしまいます。
見えるところに置かれかねないJavaScript、できるだけ隠す工夫をした方がイイですよ！

でもって、８行目のfunction(file)。file変数に選択したファイルのパスが代入されます。※もちろんfileという名前じゃなくてOK
その先は関数に振るのも良し、その中で処理して完結させるのも良し。


アイコンを変更する、あるいはFile Treeが認識しないファイル（拡張子）については、「jqueryFileTree.css」のココ↓

/* File Extensions*/
.jqueryFileTree LI.ext_3gp { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_afp { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_afpa { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_asp { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_aspx { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_avi { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_bat { background: url(images/application.png) left top no-repeat; }
.jqueryFileTree LI.ext_bmp { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_c { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_cfm { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_cgi { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_com { background: url(images/application.png) left top no-repeat; }
.jqueryFileTree LI.ext_cpp { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_css { background: url(images/css.png) left top no-repeat; }
.jqueryFileTree LI.ext_doc { background: url(images/doc.png) left top no-repeat; }
.jqueryFileTree LI.ext_exe { background: url(images/application.png) left top no-repeat; }
.jqueryFileTree LI.ext_gif { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_fla { background: url(images/flash.png) left top no-repeat; }
.jqueryFileTree LI.ext_h { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_htm { background: url(images/html.png) left top no-repeat; }
.jqueryFileTree LI.ext_html { background: url(images/html.png) left top no-repeat; }
.jqueryFileTree LI.ext_jar { background: url(images/java.png) left top no-repeat; }
.jqueryFileTree LI.ext_jpg { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_jpeg { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_js { background: url(images/script.png) left top no-repeat; }
.jqueryFileTree LI.ext_lasso { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_log { background: url(images/txt.png) left top no-repeat; }
.jqueryFileTree LI.ext_m4p { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_mov { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_mp3 { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_mp4 { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_mpg { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_mpeg { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_ogg { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_pcx { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_pdf { background: url(images/pdf.png) left top no-repeat; }
.jqueryFileTree LI.ext_php { background: url(images/php.png) left top no-repeat; }
.jqueryFileTree LI.ext_png { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_ppt { background: url(images/ppt.png) left top no-repeat; }
.jqueryFileTree LI.ext_psd { background: url(images/psd.png) left top no-repeat; }
.jqueryFileTree LI.ext_pl { background: url(images/script.png) left top no-repeat; }
.jqueryFileTree LI.ext_py { background: url(images/script.png) left top no-repeat; }
.jqueryFileTree LI.ext_rb { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_rbx { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_rhtml { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_rpm { background: url(images/linux.png) left top no-repeat; }
.jqueryFileTree LI.ext_ruby { background: url(images/ruby.png) left top no-repeat; }
.jqueryFileTree LI.ext_sql { background: url(images/db.png) left top no-repeat; }
.jqueryFileTree LI.ext_swf { background: url(images/flash.png) left top no-repeat; }
.jqueryFileTree LI.ext_tif { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_tiff { background: url(images/picture.png) left top no-repeat; }
.jqueryFileTree LI.ext_txt { background: url(images/txt.png) left top no-repeat; }
.jqueryFileTree LI.ext_vb { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_wav { background: url(images/music.png) left top no-repeat; }
.jqueryFileTree LI.ext_wmv { background: url(images/film.png) left top no-repeat; }
.jqueryFileTree LI.ext_xls { background: url(images/xls.png) left top no-repeat; }
.jqueryFileTree LI.ext_xml { background: url(images/code.png) left top no-repeat; }
.jqueryFileTree LI.ext_zip { background: url(images/zip.png) left top no-r

拡張子を追加したいなら、例えば.JPGという拡張子のjpeg、
.jqueryFileTree LI.ext_JPG { background: url(images/picture.png) left top no-repeat; }
という行を追加します。コピペで追加して、ちょちょいと変えればOK。
アイコンを変更したいなら、
.jqueryFileTree LI.ext_zip { background: url(images/zip.png) left top no-r
を変更するか、その画像ファイル自体を上書きすればOKです。


このように開発者＆ユーザーフレンドリーなjQuery File Treeですが、データベース連動型レコード（当然Ajax流の非同期）に適用するにはどうしたら？？

そう、とてもエレガントなプラグインでありながら、JavaScript系で悩んでしまうのはこの辺だったりします。

headタグに書き込むにしても、ページを読み込んで実行した段階で該当要素がないと、全く知らんぷり。
この辺はスタイルシートとは全く異なります。

じゃぁ、動的に書き出されたhtmlのbody内にscriptタグを組み込む？？
ひとまず解決なんですが、ソースが何だか汚らしい。


そこで結論。
元々File Treeの要素をDisplay:noneで隠しておいて、ボタン等で表示させる関数に上記スクリプトを組み込むわけです。
こうすれば全て解決＆エレガント。
ボタンをクリックするたびにディレクトリ内容が参照され、更新されるという素敵な副産物もあります！


何にしてもjQuery File Treeは優しい＆易しいプラグインです。
このブログがちょっとでも役に立てば幸いです。


むしろちっとばかし問題なのはjqUploader…。。。。次回。注意：悪かぁないよ

ウチのヤツ

いわゆる「ウチのヤツ」あるいは「冬の野良鳥」、ジョウビタキ♂。
よ〜く家の中をのぞいてます。
ちなみに私、数日前に寝室と仕事部屋の場所が全てバレました。


この前、日中居間でちょっとした事務作業をしてた際に、居間の前のテラスにヤツがやってきました。
ま、これはいつもの事です。

中をのぞいて人間観察するだけかと思ったら、「ヒー、ヒー、ヒー」、さえずりはじめてしまいました。
これは私にも問題があって、いつも口笛でそのさえずりをマネしたり、「カッカッ」っていう鳴き方も舌を使ってマネしてたので…。

しょーがないのでこちらも部屋の中から口笛で応戦。
ちゃんと間合いを感じて鳴いてくれていて、ペースを落とすと彼も落とします。


っつぅか、あのさえずりの意味は何？？
テリトリー誇示のものと思っていたんですが。

これでウチに来なくなったらテリトリーに関係するのかも、と思って心配したんですが、クルマのサイドミラーは相変わらず糞とクチバシ油で汚れてるし…orz。



その辺の事はまた後日報告します！
あのヒト、花粉の季節あたりまで滞在するんで、時間はまだまだあります。

jQueryへの移行

アップローダーやファイルブラウザ等々、Java Scriptで本来難しいと言われる機能を探すと、ほとんどjQueryのプラグインに突き当たるのです。

しかしながらどのプラグインもprototypeと共存するのは非常に困難、というか面倒臭いのが事実でして…。

振り返ってみると、prototypeに頼り切ってた部分はAjaxの部分。フォームからの値取得、要素への書き出し、cgiやphpなどサーバーサイドとのやりとりでした。
まとめてみると３〜４程度の機能です。


jQueryにも全ての機能があるので、それに慣れれば「脱・prototype！！」。


●$()
・prototype
基本的にidタグがターゲット。
取っ付きやすいが、柔軟性がない。また、html側をprototype仕様にする必要あり。
・jQuery
DOM準拠。スタイルシートと同じ要領でターゲットを指定できる。
スタイルシートをマスターしている人は強烈に使いやすいはず。

●サーバーサイドとのやりとり
・prototype
Ajax.RequestとAjax.Updaterが代表的。
特にUpdaterは用途が定まっていて、JavaScriptの記載がシンプルで良い。
逆にRequestは処理内容によって分かりづらい記載になることがある。
・jQuery
汎用性の高い$.ajaxが代表？
prototypeのUpdaterに比べると記載が煩雑。
しかし自由度がかなり高い。


jQueryに移行しはじめて感じたのは、jQueryの方が透明性が高いということでしょうか。
スタイルシートを構成しているようにJavaScriptが組めるので、何と言うか、、、htmlの常識的、「あたりまえ」な感触。
prototypeは便利で分かりやすいソースで記載できる反面、ちっとばかしブラックボックスな感覚があるんですよね。


というわけでjQuery万歳！の巻でした。。。