はじめに
前回の続きです。 dojo界の次世代gridでありながら、標準ではまだ使えないdgridの設定方法についてです。dgridはこちらで開発が進められています。
READMEを読むと、インストール方法については、CPMというパッケージマネージャを使う方法と手動で設定する方法が書かれています。
CPMを使うのが簡単なのでしょうが(自分は試してないですが)、今回は手動で設定してみましょう。 というのは、次のように設定したいからです。
こう設定したい
dojoの設定はCDNを使うと楽ちんですよね。
本当はdgridも同じようにホスティングしてもらえればいいのですが、 まてどくらせどそんな気配はないので、
- dojoはCDNを使う
- dgridと仲間たちは自分で設定したのを使う
という方針ですすみます。
もったいつけましたが
手順は簡単です。
- ”仲間たち”というのは、put-selectorとxstyleのことで、これらとdgridの3つのモジュールを適当な場所に配置します。
- dojoを読み込むときに、モジュールとしてdgridと仲間たちの事を教えてあげます。
やってみましょう
ダウンロード:
以下のURLからダウンロードします。
配置:
上の3つを解凍し、適当なディレクトリに同列に配置します。例えば、mydgridというディレクトリを作ったら次のようになります。
├── mydgrid │ ├── dgrid │ ├── xstyle │ └── put-selector
dojo本体はCDNからなので、ここには入れません。
パスの設定:
もしもdgird等と同じディレクトリにdojoを配置すれば(上の例だとmygrid配下にdojoがあれば)パスの設定は必要なく、dojoを読みこめば、dgirdもそのまま使うことができます。dgridの下にある、
dgrid / test / index.htmlでは、
<script src="../../dojo/dojo.js" data-dojo-config="async: true">
とやってやるだけですが、これでOKなのです。
今回は、dojo読み込み時に、dgirdと仲間たちがどこに配置されているかを教えてやらなければなりません。これは、dojoConfig に設定します。index.htmlを例にすると、そこからはdgridのパッケージがある位置は
../../dgrid
になります。パッケージ名とその場所を
{ name: 'dgrid', location: location.pathname.replace(/\/[^/]+$/, '') + '/../../dgrid' }
といった感じで指定してやります。
その指定が3つと、dojoの読み込みはCDNから。これらをまとめると、先ほどのindex.htmlのdojo読み込みの書き方は
となります。これで動かせます。
どうでしょう
意外と簡単ですよね! でもやっぱりCDNでdgridもあればいいと思うし、さっさとdojo本体に取り込まれればいいなと思うのでした。