uilang - UI操作を記述するWeb用DSL
最近はUIだけではなく、アクションによって起こるアニメーション技術にも注目が集まっています。Googleの提唱するMaterial Designでも単にタップするだけでなく、その後のアニメーションまで含めてデザインしています。 そんなアニメーションを含めたデザインを行うためのDSLとしてuilangが登場しました。全く新しい言語としてとても面白そうですよ。
uilangの使い方
<code>
clicking on ".hide" adds class "hidden" on "#notification"
</code>
こちらが肝です。ボタンをクリックするとhiddenを追加するというのを文章として定義できます。
この場合は以下のようになります。
<div id=switch>
<div id=circle></div>
</div>
<code>
clicking on "#switch" toggles class "active" on "#switch"
</code>
togglesという定義でクラスの付け替えが出来ます。
uilangは実際のアニメーションを行う訳ではなく、CSSを変化させることでCSS3によるアニメーションを実現させます。JavaScriptで書いていたアニメーション周りの記述をuilangで置き換えてみるのは面白そうです。
uilangはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。