ユーザ入力によるダイナミックな表示変更を実現「Tangle」
TangleはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
Webページ上の文字をJavaScriptによって動的に変更する表現が使われるようになってきました。しかしユーザの入力によって動的に複数の箇所をダイナミックに変更するのは手間がかかります。そこで使ってみたいのがTangleです。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-09 11.10.47.1373422631.png)
デモです。クッキーの数と、そのカロリーをJavaScriptで表示しています。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-09 11.12.41.1373422636.png)
こちらはさらにダイナミックなデモ。グラフはマウス操作で変更できます。
ドラッグ中。グラフが表示されたり、計算式のパラメータが変化します。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-09 11.12.49.1373422644.png)
グラフを変更すると、計算結果が表示されます。こうした入力値による様々な表示変更を一手に行えます。
一つ一つの表示変更であれば大した手間ではありませんが、十数あるような項目を全て連動して表示変更しようと思うと大変です。それらをTangleを使えばメンテナンスしやすい形で管理できるのが便利ではないでしょうか。
MOONGIFTはこう見る
JavaScriptで作る場合、一つ一つの操作は大した負荷でないためについつい場当たり的な対応をしてしまいがちです。しかしその結果、追加された仕様によって以前のスクリプトが動作しなくなったり、徐々にメンテナンスコストが増えていったりします。
そうならないためにも予め仕組みを盛り込んでおくのが大事です。そうした良くあるケースに対する解決策を決めておけば、他での使い回しも効くようになります。ちょっとした修正だからと適当にやることのないよう注意したいですね。