テンプレートエディタ
Last modified by fukudayasuo on 2015/03/23, 11:00
概要
テンプレートエディタは、テンプレートの適用結果の可視化を行う支援ツールです。
テンプレート・データ(json形式に対応)・ライブラリの適用結果を視覚的に確かめることができます。
主な特長は以下の通りです。
- テンプレートとデータを記述すると、プレビュー画面に適用結果がリアルタイムに反映されます。
- データを必要としないDOMを記述することも可能です。
- クエリパラメータを指定すると、用意したテンプレートとデータをロードできます。
- ロードしたテンプレート・データをツール上で編集できます。
- ライブラリを選択し、反映結果を表示できます。
動作環境
テンプレートエディタは、以下のブラウザで動作します。
- Chrome
- FireFox
- IE8以上
ダウンロードと利用準備
こちらからファイルをダウンロードしてください。
⇒ hifiveテンプレートエディタのダウンロード
準備
ダウンロードしたら、ZIPファイルを解凍します。
解凍してできたフォルダ・ファイルすべてを適当なWebサーバでホストしてください。
/template-editor/ でアクセスできるようにした場合、
http://localhost/template-editor/index.html のようにアクセスすればエディタが起動します。
※注：エクスプローラでindex.htmlをダブルクリックした場合は正しく動作しません。
（file:/~/ のようなパスになっている場合正しく動作しません。）
お試し利用
こちらのページでお試し利用できます。
（サンプルのJSONデータとHTMLが自動的に読み込まれます。）
画面構成
- タブ：選択することでエディタのコンテンツが切り替わります。プレビューは変わりません。
- 上画面：エディタ
- データの編集などはこちらで行います。
- 下画面：プレビュー
- データの編集結果がリアルタイムで表示されます。ライブラリが選択されている場合は反映されます。
基本的な使い方
テンプレートを編集する
- テンプレートはEJSの書式に従って記述します。
- データタブにJSON文字列を入力しておくと、テンプレートにそのデータを適用した結果がプレビュー領域に表示されます。
- ※データの編集機能は後述
- 変更はリアルタイムに反映されます。
テンプレートをURLから読み込む
- テンプレート(ejsファイル)のURLを入力してボタンをクリックします
- 読み込んだテンプレートの一番最初に記述されているテンプレートが読み込まれます
- ファイル中の他のテンプレートIDを選択することができます。
テンプレートをファイルから読み込む
- 「ejsファイルを選択」ボタンをクリックします
- ローカルにあるテンプレート(ejsファイル)を選択して、開きます
- 読み込んだテンプレートの一番最初に記述されているテンプレートが読み込まれます
- テンプレートをURLから読み込んだ時と同様、ファイル中の他のテンプレートIDを選択することができます。
データを編集する
- JSON形式に従って記述できます。
- フォーマットボタンをクリックすると、文字列がフォーマットされます。
- JSON文字列の形式になっていない場合、エラーメッセージを表示します。
- 送信方法の選択ができます（デフォルトはGET）。
- リアルタイムに反映されます。
- URLをテキストボックスに入力しロードボタンをクリックすると、データをURLから取得してテキストエリアに表示します。
- URLが見つからない、データがJSON形式ではない場合はエラーメッセージを表示します。
- URLが見つからない、データがJSON形式ではない場合はエラーメッセージを表示します。
- パラメータボタンをクリックすると、パラメータ入力UIが表示されます。
ライブラリをロード・アンロードする
- 読み込みたいライブラリのチェックボックスにチェックします（初期はBootstrap3が選択され、プレビューに反映されています）。
- チェックを外した場合は、プレビューに反映されなくなります。全て未チェックの場合はライブラリは適用されません。
- 設定ボタンをクリックするとプレビューに反映されます。リアルタイムでは反映されません。
プレビューで表示するページをロードする
- プレビューのテキストボックスにURLを入力してロードボタンをクリックすると、URLのページをプレビュー画面に表示します
- 外部ページを読み込むこともできます。
- URLが見つからなかった場合、エラーメッセージを表示します
- 読み込んだページにテンプレート記述がある場合は、そのテンプレートを読み込むかどうかを尋ねるダイアログが表示されます
- OKをクリックするとテンプレートが読み込まれます
- 現在編集中のテンプレートは破棄されます。新しいテンプレートを読み込んでほしくない場合はキャンセルをクリックしてください
- テンプレートファイル読み込み時と同様に、ページに複数テンプレートが記述されていた場合は他のテンプレートIDを選択することができます。
- なお、初期はブランクページを表示しています
- ブランクページを再度ロードしたい場合はブランクページボタン(URL入力欄の左隣)をクリックしてください
プレビューで表示されている要素を選択してテンプレートを適用する
- プレビューにロードしたページに対して、編集したテンプレートをリアルタイムで反映できます
- ブランクページの場合はページ全体に反映されます。セレクタの指定は無効です。
- テンプレートを適用させる要素を選択するセレクタを指定します。
- 指定したセレクタで要素が見つからない場合はエラーです
- テンプレートの編集内容がリアルタイムに選択した要素に反映されます
- 指定したセレクタで複数の要素が見つかった場合は複数の要素に反映されます
用意したテンプレート・データを起動時にロードする
以下のようにリクエストパラメータを付与すると、起動時に自動的にテンプレートやJSONファイルを読み込みます。
template=(テンプレートのパス)&data=(JSONファイルのパス)
例： template=sample/sample.ejs&data=sample/sample.json
バグ報告・改善要望など（開発リポジトリ）
テンプレートエディタは、githubにて開発・公開しています。
バグ報告・改善要望などがございましたら以下よりIssueを作成してご連絡ください。