ITエンジニア/デザイナ向けにオープンソースを毎日紹介

TmpltrはHTML/JSON/CSSを組み合わせたJavaScriptのテンプレートエンジンです。

Webアプリケーションを作る際にテンプレートエンジンとしてチェックしたいのがTmpltrです。HTMLだけでなく、スタイルシートにも考慮されているのが特徴です。


左上がJSON、中央がHTMLテンプレート、下がCSSになります。それらを組み合わせた結果が右側の表示になります。


フッターです。{{#fotter}}〜{{/footer}}といった区切りを設けています。


スタイルや構造を変更すればリアルタイムに右側のコンテンツが変更されます。


スタイルの内容はheaderタグの中にstyleとして出力されています。

Tmpltrは単純な文字列出力の他、配列やハッシュでの表示にも対応しています。元データの内容が書き変わると同時にレンダリング結果がリアルタイムに修正されるのが特徴です。

TmpltrはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

JavaScript製のテンプレートエンジンが徐々に増えてきました。Tmpltrはシンプルで使いやすそうなのですがテンプレート側で条件が使えないのが難点です。View側で多少の判断式が使えればJavaScriptは単純にデータとビューをミックスするだけで良くなります。

とはいえ、もっとシンプルな表示であれば十分耐えられる仕様と言えます。JavaScriptのレンダリングエンジンではSEOに対して弱いのが難点で、メディアサイトでは利用が難しいと思われますがWebアプリケーションやログイン必須のサイトでは使える場面が多そうです。

via Tmpltr: Realtime JSON Templating Similar to jsFiddle | Web Resources | WebAppers

デモ:tmpltr

rocktronica/tmpltr - GitHub

 

MOONGIFTの関連記事

  • DevRel
  • Com2