【初心者向け】jQuery dynatreeをローカルで使えるようにする

# はじめに
**dynatree** は下図のようなツリービューを作成できるjQuery用のプラグインです。
業務で使用する機会があったので、今回はローカル環境で使えるようにする方法をまとめておきたいと思います。
![dynatree_sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650537/a4a01839-d220-f058-ad16-f12280f55e16.png)
ちなみに、今では **dynatree** ではなく **Fancytree** というプラグインの使用が推奨されているようなので、
いまから **dynatree** を導入しようという方は、[Fancytree](https://github.com/mar10/fancytree/)の方をご参照ください。
（**dynatree** ではこれ以上、新規機能の追加はないようです：[https://github.com/mar10/dynatree](https://github.com/mar10/dynatree)）

# 目次
・[dynatreeのダウンロード](#dynatreeのダウンロード)
・[必要なファイル](#必要なファイル)
・[フォルダ構成](#フォルダ構成)
・[dynatreeを使用する](#dynatreeを使用する)


今回はデスクトップの **test** フォルダとその中の **index.html** というファイルを使って作業していきます。
**index.html** は作ったばかりの空のファイルです。
場所もファイル名も自由なので、お好きなフォルダで作業して頂ければと思います。
![dynatree1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650537/4c1cc6d9-d504-ac83-b648-cb6482d5e843.png)

# dynatreeのダウンロード
↓↓ こちらのリンクから **dynatree-master.zip** をダウンロードします。↓↓
https://github.com/mar10/dynatree
![dynatree4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650537/bb365cb9-565b-47ae-f777-a7353d7edf75.png)
↓↓ 展開するとこんな感じです。↓↓
この中から必要なファイルだけを **test** フォルダにコピペします。
![dynatree5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650537/c4ca962a-5259-2db1-f7f2-6eee6b59eb18.png)

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

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

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

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

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

今回は **test** フォルダの直下に **css** フォルダと **js** フォルダを作成し、下図のようにファイルとフォルダをコピペします。
これで準備は完了です。
![dynatree7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650537/d2d186ef-180f-71ea-1999-d5a7831226e2.png)

```:最終的な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** からの相対パスで指定します。
<font color="silver">今回は cookie を利用しないので、 **jquery.cookie.js** は不要です。</font>

ソースコードは[こちら](https://www.hos.co.jp/blog/20130430/)から拝借しました。

```html: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** の方を使うとツリービューのレイアウトが変わります。
![dynatree8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650537/030f8d0c-67f8-1b1f-b156-4391310dfe6e.png)

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