jQueryとPHPとその他色々を使ってディレクトリ構造をツリー表示とか内容表示みたいな〜

私事で作りました。
サンプルはこちら→W7工廠分室|トップページバージョン2になりました


ディレクトリ内のファイルのソース閲覧・ブラウザ表示(指定のもの)・ダウンロードができます。
まあブラウザだけでできる事なのですが・・・


応募(←何のことかな?(笑))の際に、「サイト見てください」とメールするのですが、
プログラム内容まで見ずにトップページだけで去る企業が多くてなかなかPRできません。
そこでサイトマップを兼ねて簡単にソースを見れるものを作ろうと思ったわけです。
もうここにソースを掲載しなくてもいいし。


■見た目

■機能
1. ul-li構造のディレクトリツリーを生成(PHP)
2. 「jQueryのTreeViewプラグイン」でツリー構造表示
3. ファイルを拡張子で判別(javascript)してアイコン別に可能な処理を表示
  ←ファイル内容表示可能(テキスト・ソースなど)クリックすると内容表示
  ←ブラウザで表示可能(画像・HTMLなど)クリックすると別ウインドウで表示
  ←ダウンロード(PHP)可能(たぶん全部w)クリックするとダウンロード開始
4. 内容表示の場合はファイルオープン(PHP)して「google-code-prettify」で行番号・シンタックスハイライト表示
5. 上記をウインドウ表示して「jQueryUI」を使ってドラッグ・リサイズ可能
■もし使いたい場合は・・・
1. サンプルサイトにzipで用意してあります。(ダウンロード後ウイルスチェックして下さい)
2. jQueryその他は自前でダウンロードしてlibフォルダに設置してください
 jQuery UI(UI Core,Draggable,Resizableを使っています)
 Google Code Archive - Long-term storage for Google Code Project Hosting.
 bassistance.de » jQuery plugin: Treeview
3. treeviewtools2.phpのdefine部分(CURRENT,URL)を設定←同一場所になるように注意

■注意事項
・ウイルスチェックしてください。
・最近のブラウザ以外は動作チェックしていません。
・指定箇所以下のディレクトリ構造が丸見えになるのでよく考えて設置してください。
・download.phputf-8だと画像をダウンロードした際に開きません。
(理由はhttp://hrgs.xrea.jp/2006/07/18/php_script_written_in_utf8



■バージョン2.0(2012-03-21)
追加・修正点
・設置位置と表示位置は自由(1階層上からでなくてもよい)
・最大・最小化ボタンを追加、closeボタンを×ボタンに
・クラスっぽく改良
・偶数・奇数番の色のバグ修正
今後の未定な予定
・ボタンや見た目をかっこよくする
・ウインドウ内スクロールバー
・jqueryUIなしでドラッグ・リサイズ

■バージョン1.0(2011-11-19)
ほぼ完成w(2011-11-20 3:25)→修正(2011-11-20 4:20)
偶数・奇数番の色が(笑)
仕様
・設置した階層の1つ上からが対象となります。
設置したい場合
・上のほうのmetaとか下のほうの「GoogleAnalytics」のコードを抜いて下さい。
その他
・なんか調べている最中に同じ事してる人を発見!
 jQueryを使ってディレクトリツリーを表示させるPHP、配布します! | ITキヲスク
 でも参考にせず、車輪の再発明をしました。なのでソースを見ればわかるように「我流」です。
・何かあっても責任はとりません。
後悔
・ソースを見るのも新しいウインドウのほうが楽でよかった
・それならsintaxhighlighterを使えるし・・・
(これ・・・適用後に要素が置き換わるので扱いづらくて却下)