Skip to content

クライアントビューの開発を効率化するテンプレートエディタ v1.2の紹介

by : 2015/05/26

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 – HTML5企業Webシステムのための開発プラットフォーム – hifive

From → hifive, HTML5

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。