2008/11/20

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、できるだけ隠す工夫をした方がイイですよ!

でもって、8行目の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…。。。。次回。注意:悪かぁないよ

1 件のコメント:

よっこらしょ さんのコメント...

はじめまして。こちらで"jQuery File Tree"の記事を拝見して、もしよろしければ質問させていただけないかと思い、コメントいたしました。

わたしも"jQuery File Tree"をレンタルサーバーで実装してみたのですが、まったく動作してくれません。
画面自体は表示されるのですが、ツリー部分が表示されませんでした。
サンプルを見て配置や設定などしたのですが・・・。

もしjqueryFileTree.zipを解凍してできたフォルダをサーバーにそのままコピーし、そのフォルダと同じディレクトリにhtmlファイルを設置した場合、表示先のフォルダや、queryFileTree.phpファイルはどのように配置されたでしょうか?

お手数ですが教えていただけると助かります。