Safx: DerbyでjQueryやjQuery UIを利用可能にする

この記事では、Derby.jsでjQueryやjQuery UIを利用可能にする方法を紹介します。

その方法はいくつか考えられますが、今回はテンプレートビューにCDNへのリンクを追加するだけの方法と、パブリックディレクトリを有効にして、そこにJSファイルを配置する方法について紹介します。

パブリックディレクトリの有効化

この記事を書いたときのDerbyのバージョン0.5.0ではパブリックディレクトリの機能がデフォルトでは無効になっていますので、有効にする必要があります。

それにはまず、lib/server/index.jsにある次のような行のコメントアウトを外します。

  // Serve static files from the public directory
  .use(express.static(__dirname + '/../../public')) // ← コメントアウトを外す

そして、ディレクトリpublicを作成し、そこにjqueryを入れておきます。

> mkdir public & cd public
> wget -O jquery.js http://code.jquery.com/jquery-2.0.2.min.js

Derbyの公式ドキュメントより、

静的ファイルはパブリックディレクトリに置かれ、パブリックなディレクトリ内のコンテンツはルートURLにマップされる。つまり、public/img/logo.pngに置かれた画像はURLの/img/logo.pngで取得できるようになることに注意。

というわけなので、public/jquery.jsはhttp://localhost:3000/jquery.jsみたいにアクセスできるようになります。

続いて、これをアプリケーションから利用できるようにするために、Derbyのテンプレートビュー機能を利用します。

views/app/index.htmlに次のような行を追加します。

<Scripts:>
  <script src="/jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

サンプルとして、jQueryはバブリックディレクトリを利用し、jQuery UIにはCDNを利用してみました。

Script:タグはDerbyの公式ドキュメントの説明では次のようになっています。

Scripts: クライアントスクリプト読み込み前にロードされる外部スクリプトのための補助ロケーション。このテンプレートは単なるページ内の位置としての役割のみで、<script>タグでラップしたりする役割はないことに注意。

なお、デフォルトではDerbyで自動生成したときにはExpressのキャッシュ期間を1年に設定しているので、リロードでは変更されないことがあることに注意。

最後に、アプリケーションがreadyになったときにjQuery UIでてきとうなオブジェクトをドラッグ可能にしてみます。

lib/app/index.jsに次のように記述します。

app.ready(function(model){
    $('h4').draggable();
    $('p').draggable();
});

これで、サンプルアプリトップページのH4やP要素がドラッグ可能になっているはずです。

自動ロードされると効かないようですので、その場合はブラウザのリロードをしてみてください。

DerbyでjQueryやjQuery UIを利用する方法を紹介しました。