EJSをWeb上で試せるテンプレートエディタをβリリースしました！

hifiveではテンプレートエンジンとしてEJSを採用しています。EJSは次のような構文で記述します。

<table>
  <tbody>
    [% for(var i = 0, l=list.length; i <l ; i++) {
      var row=list[i];%]
      <tr id="[%= name %]_[%= row.userId %]">
        <td>[%= row.userName %]</td>
        <td>[%= row.marks %]</td>
      </tr>
    [% } %]
  </tbody>
</table>

そしてデータはJSON形式で次のようになります。

{
  "name":"test_data",
  "list":[
    {
      "marks":"11",
      "userName":"Test user",
      "userId":"2"
    },
    :
  ],
  :
}

テンプレート側で list と指定している箇所がそのままEJSの list という変数で定義されている形になります。JSONフォーマットがそのまま使えていると考えられると思います。

そのJSONデータとEJSを組み合わせてHTMLを生成するのですが、JSONデータを変更するたび、EJSを変更するたびに再読み込みしているのでは開発効率が悪いはずです。そこで今回、EJSのテンプレートエディタを提供開始しました。GitHubで公開されていますが、オンラインでもお試しいただけます。

テンプレートエディタはテンプレート（EJS）とデータ（JSON）を使って、リアルタイムにHTMLへ変換してプレビューできるソフトウェアになります。詳しい説明はこちらで確認いただけますが、主な特徴は次のようになります。

• EJSとJSONを使ってその場でHTMLプレビュー
• テンプレート、データはWeb上で編集できます
• テンプレート、データの編集はリアルタイムに反映
• Bootstrap/jQueryなどのライブラリを選択して利用可能

となっています。対応ブラウザはChrome/FirefoxそしてIE8以上となっています。ぜひ一度お試しください！

テンプレートエディタ – hifive

EJS Template Editor

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive