クライアントビューの開発を効率化するテンプレートエディタ v1.2の紹介
JavaScriptのテンプレートエンジンが多数出ていますが、そうしたテンプレートエンジンは一般的にJSONデータと組み合わせてHTMLを描画します。その時のJSONデータはAjaxで取得することが多いかと思います。
そんな中でのJSONデータとテンプレートを組み合わせて描画結果を確認するというのはとても面倒です。hifiveではejsをテンプレートエンジンに使っていますが、そのejsとJSONとを組み合わせた描画結果を手軽に確認できる仕組みがテンプレートエディタになります。
テンプレートエディタの使い方
テンプレートエディタは次のような画面構成となっています。
上がテンプレートになるejs、下が結果のプレビューです。テンプレートの修正はリアルタイムに反映されます。
リロードがかかる訳ではないので、ページ半ばでのテンプレート修正もスクロールが行われることなく、その場で修正が反映されます。
ページ中央にあるハンドルはドラッグして表示領域の変更が可能です。
テンプレートの他に、データタブがあります。こちらはJSONデータが表示されています。このJSONデータを修正して、プレビューの表示結果を変更できます。
JSONデータはGETやPOSTを使って外部データの取得を行うことも可能です。実際に使っているWebシステムのURLを指定すると、稼働しているシステムのUI設定がとても楽になるでしょう。
デフォルトのライブラリはBootstrap 3.0となっていますが、jQuery Mobileに切り替えることも可能です。
例えばjQuery Mobileにするとボタンの形状が変わります。
テンプレートエディタを使うとWebシステム開発時のデザイン確認が容易になります。これまでのWebではデータをHTMLに直接描画していましたが、Ajaxを使うようになったことで表示確認が複雑になっています。hifiveはデータはJSON、テンプレートエンジンはejsとなっていますので、テンプレートエディタの結果をそのまま組み込んで利用が可能です。さらにテンプレートエディタはダウンロードして使えますので、自社システムのWebサーバ上に配置も可能です。
テンプレートエディタはIE8以上で動作します。テンプレートエディタ – hifiveにて詳しい説明、使い方を紹介しています。また、こちらではサンプルデータを使った試用も可能なのでぜひお試しください。
hifive開発者ブログ 
コメントは受け付けていません。