みなさんは、上の画像みたいにパラメータをいじれるGUIを見たことがあるでしょうか？
いろいろネットを検索していると、たまに見かけたりするのですが、だいたい3D系のサンプルデモや物理演算のシミュレーションなどによく使われているようです。
実際に触ってみると意外に便利なライブラリで、プログラムの好きな箇所をGUIで表示させて、誰でも気軽にいじれるようにできるのは面白いと思います。
そこで今回は、この「dat.gui」の簡単な使い方などをまとめておきたいと思います。
使い方！
まず、簡単なサンプルデモを作りながら、基本的な使い方を見ていくことにします。
今回は、「div要素」で四角のボックスを作り、これにCSSをGUIからコントロールしてみようと思います。
サンプルデモはこんな感じ！(スマホ対応してないので、できればPCブラウザ推奨です…)
See the Pen http://codepen.io/webhacck/pen/mVQJVj/'>dat.gui css sample by webhacck (http://codepen.io/webhacck'>@webhacck) on http://codepen.io'>CodePen.
上のサンプルにあるパラメータを、いろいろ触ってみて下さい。
リアルタイムに、ボックスへCSSが適用されているのが分かるかと思います。
さて、この中身ですが、まずはGUIのパラメータとなる初期値を用意する「クラス」のようなモノを準備するところから始めましょう！
これは、あらかじめプログラム内の好きな箇所をいじれるようにするパラメータを決めておき、設定していくのがポイントです。
今回は、「div要素」のいくつかのCSSをパラメータとして設定してみました。
//GUIパラメータの準備
var sampleSquare = function() {
this.color = "#ff0000";
this.width = 100;
this.height = 100;
this.border = false;
this.shadow = false;
this.addBox = function() {
//関数も作れる！
}
};
これで、「sampleSquare」に初期値がセットされました。中身のパラメータが、先ほどのサンプルにあったGUIの表示名になります。
そして、この「sampleSquare」と「dat.gui」のインスタンスを生成し、それぞれを「gui.add()」で紐付ければOKです！
window.onload = function() {
square = new sampleSquare();
var gui = new dat.GUI();
// 初期値のインスタンスを紐付ける
gui.add(square, 'border').onChange(ここに更新処理を書く);
};
上記は、「border」のパラメータと紐付けた場合です。他のパラメータも同様に紐付ける必要がありますが、少しコツがあります。
例えば、カラー要素の場合は「gui.add()」ではなく、「gui.addColor()」を使います。
gui.addColor(square, 'color').onChange(ここに更新処理を書く);
これだけで、カラーを選択する際のパレットが自動で表示されるようになるのです。
また、パラメータの最小値と最大値も設定できます。
gui.add(square, 'width', 50, 300).onChange(ここに更新処理を書く);
このように記述すると、50〜300までの数値しかスライダーが動かなくなるので便利です。
更新処理を作ろう！
ここまでの作業で、プログラム内の設定したい箇所をGUIで表示することが出来るようになりました。あとは、パラメータをいじった時に、リアルタイムに反映されるように処理を作れば完成です！
と言っても簡単で、先ほどのコードに出てきた「onChange()」の中に処理を記述すれば実現できます。
ただ、複数のパラメータが存在しているので、実際には関数を作ることになるでしょう。
// サンプル事例
gui.add(square, 'width', 50, 300).onChange(setValue);
function setValue() {
//ここに更新処理を書いていく
}
今回は「setValue()」を作り、これをすべての「onChange()」に適用させていきます。
そして、肝心の「パラメータ」の反映方法ですが、これは非常にシンプルです。GUIのパラメータをいじると、新規のパラメータがインスタンスに格納されているので、これをそのまま利用すれば実現できます。
// カラーと幅の事例
function setValue() {
box.style.backgroundColor = square.color;
box.style.width = square.width+"px";
}
すべての新規パラメータは「square」に入っているので、対応するパラメータをCSSに適用させているだけです。
これで、GUIからパラメータを変更すると、リアルタイムに「div要素」が更新されるようになるわけです。
基本的な使用例の紹介だけですが、これだけでもさまざまな活用方法が見つけられるのではないでしょうか。
自作のライブラリを作った時の「API」をGUIでいじれるようにしたり、HTMLやCSSの勉強教材なども「dat.gui」で作れそうな気がします。
もう5年以上も前からあるライブラリなんですが、まだまだ使いみちがありそうなので、もしご興味湧いた方は一度トライしてみてください！