はじめに

dynatree は下図のようなツリービューを作成できるjQuery用のプラグインです。
業務で使用する機会があったので、今回はローカル環境で使えるようにする方法をまとめておきたいと思います。

ちなみに、今では dynatree ではなく Fancytree というプラグインの使用が推奨されているようなので、
いまから dynatree を導入しようという方は、Fancytreeの方をご参照ください。
（dynatree ではこれ以上、新規機能の追加はないようです：https://github.com/mar10/dynatree）

目次

・dynatreeのダウンロード
・必要なファイル
・フォルダ構成
・dynatreeを使用する

今回はデスクトップの test フォルダとその中の index.html というファイルを使って作業していきます。
index.html は作ったばかりの空のファイルです。
場所もファイル名も自由なので、お好きなフォルダで作業して頂ければと思います。

dynatreeのダウンロード

↓↓ こちらのリンクから dynatree-master.zip をダウンロードします。↓↓
https://github.com/mar10/dynatree

↓↓ 展開するとこんな感じです。↓↓
この中から必要なファイルだけを test フォルダにコピペします。

必要なファイル

dynatree の使用に必要なファイルは以下の通りです。
これらのファイル（またはフォルダ）を test フォルダにコピペします。

jquery.dynatree.js（jquery.dynatree.min.jsでも可）
jquery.js（jquery.min.jsでも可）
jquery-ui.custom.js（jquery-ui.custom.min.jsでも可）
ui.dynatree.css（& 同フォルダ内のgifファイル群）→ skinフォルダ、skin-vistaフォルダごとコピペすればOKです。
jquery.cookie.js （cookieを利用しない場合は不要）

jquery.js (version 1.10.2)、jquery.cookie.js (version 1.4.1)は jQuery プラグインのファイル、
jquery-ui.custom.js (version 1.9.2)、は jQuery UI プラグインのファイルなので、
より新しいバージョンのファイルをすでに持っている方は、そちらを使っていただいても大丈夫です。
（今後jQueryのバージョンが進むとdynatreeに対応しなくなる可能性もあるので、その場合は dynatree 付属の方をご利用ください）

.min.jsとなっているのはこれらのファイルの縮小版です。
中身は改行などのムダが省かれて解読困難になっていますが、内容自体は .js のものと同じです。
どちらを使っても問題なく動くので、今回は中身を理解しやすい .js ファイルを使います。
（参考：ミニフィ (minify)とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典）

フォルダ構成

フォルダ構成は自由で構いません。
ただし、ui.dynatree.css だけは、付属のgifファイルが同じフォルダ内になければうまく動かないので、
skinフォルダ や skin-vistaフォルダ はフォルダごと test 内にコピペします。

今回は test フォルダの直下に css フォルダと js フォルダを作成し、下図のようにファイルとフォルダをコピペします。
これで準備は完了です。

最終的なtestフォルダの構成はこんな感じです

[test]
|   index.html
|   
+---[css]
|   +---[skin]
|   |       icons-rtl.gif
|   |       icons.gif
|   |       loading.gif
|   |       ui.dynatree.css
|   |       vline-rtl.gif
|   |       vline.gif
|   |       
|   \---[skin-vista]
|           icons.gif
|           loading.gif
|           ui.dynatree.css
|           
\---[js]
        jquery-ui.custom.js
        jquery.cookie.js
        jquery.dynatree.js
        jquery.js

dynatreeを使用する

ここまで準備ができたら、index.html の中で dynatree を使っていきます。
dynatreeを使うには、上で準備した一連のファイルを index.html の中で読み込めばOKです。
読み込むためには、ファイル名を index.html からの相対パスで指定します。
今回は cookie を利用しないので、 jquery.cookie.js は不要です。

ソースコードはこちらから拝借しました。

index.html

<html><head>
<meta charset="utf-8">

<!-- ★  ui.dynatree.css を読み込む -->
<link href="css/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">

<style type="text/css">
<!--body {width: 400px;}-->
</style>
</head>
<body>

    <h5>Dynatreeのサンプルです。</h5>
 
    <div id="tree">
        <ul id="treeData" style="display: none;">
            <li id="id1" title="ファイル">ファイル
            <li id="id2" class="folder">フォルダ
                <ul>
                    <li id="id2.1">ファイル
                    <ul>
                        <li id="id2.1.1">子ファイル1
                        <li id="id2.1.2">子ファイル2
                    </ul>
                </ul>
            </li>
        </ul>
    </div>

    <!-- ★ .jsファイルを読み込む -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.custom.js"></script>
    <script type="text/javascript" src="js/jquery.dynatree.js"></script>
 
    <!-- ★ dynatreeを使用 -->
    <script>
        var tree = $("#tree").dynatree();
    </script>
	
</body></html>

なお、今回は skin-vista の ui.dynatree.css を使いましたが、skin の方を使うとツリービューのレイアウトが変わります。

以上が、dynatreeを使うまでの手順です。お疲れ様でした。