[JS]JavaScriptで簡単にWindowsエクスプローラー風のツリーを作れるDTree

DTree

DTreeは、Windowsでは身近なエクスプローラのような階層構造を簡単にブラウザ上に表示できるJavaScriptです。

スクリプト自体の最終更新日をみると、2003年となっていますのでだいぶ前からあったみたいですが全然知らなかった・・・。

これを紹介しているサイトも比較的最近のものが多いので、急に脚光を浴びだしたのでしょうかね・・・？

DTreeで出来る事は、サンプルページを見てみれば一目瞭然です。

DTree Example

DTreeの使い方

さて、この使い方ですがかなり簡単に書く事が出来ます。

サンプルページの、「Show source」にチェックを入れてみてみると、各サンプルの実行ソースが表示されるので、そこからも簡単に書けることが十分に分かると思います。

まず、DTreeのソースをダウンロードして、サーバーにアップロードしておきます。

その後、展開して適当なディレクトリ内に移動させておきます。

ダウンロードしたソースには、サンプル用のHTMLファイルが含まれますが、実際に必要なのは「dtree.js」、「dtree.css」、「img」フォルダにある全ての画像ファイルになります。

ここでは、ドキュメントルート直下にある「js」ディレクトリに展開したとします。

なので、サーバー上では

/js
 ├ dtree.js
 ├ dtree.css
 └ img/

と言うような構造になります。

次に、DTreeを利用するHTMLファイル（もしくはPHPなどの動的なプログラムファイル）を用意します。

DTreeの組み込み方法は、まずJavaScriptファイル（dtree.js）とCSSファイル（dtree.css）をそのHTMLファイル

（headタグ内）から読み込みます。

<head>
<link rel='StyleSheet' href='/js/dtree.css' type='text/css' />
<script type='text/javascript' src='/js/dtree.js'></script>
</head>

これで、DTreeをそのHTMLファイル内で利用できますので、次にDTreeを使って階層を作っていきます。

<body>
<div class='dtree'>
<p><a href='javascript: d.openAll();'>open all</a> | <a href='javascript: d.closeAll();'>close all</a></p>
<script type='text/javascript'>
<!--
d = new dTree('d');
d.add(0,-1,'My Tree');
d.add(1, 0, "Folder1", "link1.html", 'これはFolder1です');
d.add(2, 0, "Folder2", "link2.html", 'これはFolder2です');
d.add(10, 1, "File1", "link3.html", 'これは、Folder1に所属するファイルです', '_blank');
document.write(d);
//-->
</script>
</div>
</body>

書き方は、上記のようにbodyタグの中に、DTree表示用のdivタグと、その中にJavaScriptを記述します。

d = new dTree('d');

で、DTree用のオブジェクトを生成し、

d.add(1, 0, "Folder1", "link1.html", '', '_blank');

で、ツリー構造を決めていきます。

add関数の引数は、合計9つありそれぞれ

d.add("DTree管理番号", "親の管理番号", "表示名", "リンク先", "タイトル", "リンク先のターゲット名", "通常時に表示するアイコン画像のパス", "階層展開時に表示するアイコン画像のパス", "階層を展開するか否かのフラグ");

の意味を持ちます。

DTreeの管理番号は、そのオブジェクト内でユニークな番号であればなんでも良いです。

番号が飛んでもかまいません。

※ 「-1」は特別な管理番号で、ルート（階層のトップ）を表します。

親の管理番号は、階層構造を持たせる際に、親の管理番号を指定します。

「-1」を指定すると、ルート直下にぶら下がるノードになりますし、「5」を指定すると管理番号「5」の下にぶら下がるノードになります。

正しい、親番号が指定されていない場合は、DTreeが正常に表示されません。

表示名は、そのノードを出力する際の表示名です。

リンク先は、そのノードがクリックされたときにリンクするファイル名を指定します。

省略した場合は、そのノードはリンク形式になりません。

タイトルは、HTMLのalt要素と同様の扱いになるようです。

そのノードにマウスを持って行くと、そこに書かれた文字列が表示されます。

上記のように、「File1」のノードにマウスを持って行くと、指定した文字が表示されます。

リンク先のターゲット名は、リンク先が指定されていた場合に、そのリンク先を表示させるウィンドウ名です。

指定しない場合は、そのブラウザ内で画面遷移が行われます。

新しくブラウザを開きたい場合は、「_blank」を指定すれば常に新しいウィンドウでリンク先に遷移します。

通常時に表示するアイコンの画像パスは、階層構造を展開していない状態で表示する画像アイコンのパスです。

指定しない場合は、DTreeによって自動的にアイコンが割り振られます。

（その階層より下にノードが存在する場合はフォルダのアイコンに、何もない場合はファイルのアイコンが表示されます）

※ ルートの画像は指定しても変えられないようです。

階層展開時に表示するアイコン画像のパスは、階層を展開した場合に切り替える画像です。

指定しない場合は、DTreeによって自動的にアイコンが割り当てられます。

先ほどの通常時の画像と同様、DTreeには予め幾つかのアイコンがimgフォルダ内に用意されていますのでその用途に見合ったアイコンを指定してあげればよいでしょう。

最後に階層を展開するかどうかのフラグですが、これはそのノードをデフォルトで展開するかどうかを指定する為にtrue又はfalseを指定します。

デフォルトで開く必要が無い場合は、特に指定しなくて良いです。

document.write(d);

一番最後に、定義した階層構造の書き出しを行います。

これでブラウザ上に下位層が表示されるようになります。

DTreeのJavaScriptを定義する、divタグ内に書いた

<p><a href='javascript: d.openAll();'>open all</a> | <a href='javascript: d.closeAll();'>close all</a></p>

の部分では、openAll()によって全ての階層を一度に開き、closeAll()によって全ての階層を一度に閉じる事ができます。

必須ではないので、必要なければ削除する事もできます。

各アイコン画像が上手く表示されない場合は、dtree.jsファイルのdTree関数内に定義されている

this.icon = {
root        : 'img/base.gif',
folder      : 'img/folder.gif',
folderOpen  : 'img/folderopen.gif',
node        : 'img/page.gif',
empty       : 'img/empty.gif',
line        : 'img/line.gif',
join        : 'img/join.gif',
joinBottom  : 'img/joinbottom.gif',
plus        : 'img/plus.gif',
plusBottom  : 'img/plusbottom.gif',
minus       : 'img/minus.gif',
minusBottom : 'img/minusbottom.gif',
nlPlus      : 'img/nolines_plus.gif',
nlMinus     : 'img/nolines_minus.gif'
};

の画像パスを、環境に合わせて書き換えてみてください。

ダウンロードしたソースに含まれるサンプルページのように、元々はDTreeのJavaScriptやCSSファイルと同じ階層に、呼び出しもとのHTMLファイルを置いておくことを想定しているようですので。

あまり要件としては無いのかもしれませんが、ルートを複数に分けることも出来ます。