夏も終わりですね。一番好きなかき氷はカルピスです。
今回はPlay!Framework2.1で、テンプレートエンジンMustacheを使ってみた感想を書きます。
え?
Play!Frameworkにはテンプレートエンジン同梱されてない?
はい、されてます。
ただ、Play!FrameworkにはテンプレートエンジンはScalaベースなため、
Scalaを知らない人には敷居が高いように感じます。
Viewとロジックを分離し、作業を分担したいけど、技術者以外にScalaを理解してもらうのはちょっと・・・と思っている方などは試しに使ってみるといいかもしれません。
というわけで、Playで使用するためにScalateというScala実装のテンプレートエンジンを利用しつつ、Mustacheを使って、動的にHTMLフォームを作成してみたいと思います。
Mustacheについて
Mustacheはさまざまな言語で開発されているテンプレートエンジンです。
テンプレートタグに使われている「{」が口ひげに似ていることが由来だとか!?
テンプレートタグに使われている「{」が口ひげに似ていることが由来だとか!?
使ってみて思ったことは
それは、書き方がすごくシンプル!!だということです。
それは、書き方がすごくシンプル!!だということです。
以下の3つのことだけ覚えておけば、だいたいすぐ使えるようになります!
(むずかしいことしなければ。。)
{{と}}で囲います。
HTMLエスケープされてしまうので、されたくない場合は「{}」を増やすか「&」を使いましょう。
{{#data}}{{/data}}で囲い、dataがtrueのときだけ囲った内部が処理されます。
書き方は基本的に条件分岐と同じです。
dataが配列の場合、配列の数分、{{#data}}{{/data}}に囲まれた部分が処理されます。
はい。もう覚えちゃいましたね?もっと知りたい人はこちらへ。
では、早速使ってみましょう。
Play2.1+Scalaで使う方法
1.依存性の解決
val appDependencies = Seq( "org.fusesource.scalate" %% "scalate-core" % "1.6.1" )
2.インスタンスの生成、ワークディレクトリの設定をして、layoutメソッドにテンプレートとバインドするオブジェクトを渡す。
(わかりやすいように、controllerでインスタンスを生成していますが、実際は別クラスやライブラリ化した方がいいと思います。)
def index = Action { implicit request => val engine = new TemplateEngine engine.resourceLoader = new FileResourceLoader(Some(Play.getFile("/app/views"))) engine.classpath = Play.getFile("/tmp/classes").getAbsolutePath engine.workingDirectory = Play.getFile("tmp") engine.combinedClassPath = true engine.classLoader = Play.classloader Ok(engine.layout("/layouts/default.mustache", data)).as(HTML) }
テンプレート(/layouts/default.mustache)はこんな感じ。
(一部抜粋です。bootstrap使ってます。こんな細かく定義しなくてもよかったと後悔。。)
(一部抜粋です。bootstrap使ってます。こんな細かく定義しなくてもよかったと後悔。。)
オブジェクトはこんな感じ。
val data = Map("items" -> List( Map( "div" -> Map( "id" -> "email_field", "lavel" -> Map("for" -> "email", "text" -> "E-mailアドレス"), "input" -> Map( "text" -> Map("id" -> "email", "name" -> "email") ) ) ), Map( "div" -> Map( "id" -> "name_field", "lavel" -> Map("for" -> "name", "text" -> "お名前"), "input" -> Map( "text" -> Map("id" -> "name", "name" -> "name") ) ) ), Map( "div" -> Map( "id" -> "memo_field", "lavel" -> Map("for" -> "memo", "text" -> "メモ"), "input" -> Map( "textarea" -> Map("id" -> "memo", "name" -> "memo") ) ) ) ))
で、以下のようなドキュメントが作成されます。
(渡すデータによって、動的にフォームの入力項目を変更できます )
感想
Mustache使いやすいです。Playにも簡単に導入できたので、気になっていた方は試しに使ってみてください。
社内の勉強会で発表したとき、Viewとロジックの分離という意味では、javascript版の方がその効力を発揮できそうという話がありました。
なので次は、javascript版のMustache使ってみようかなあと思っています。
ふぅ。ブログ書くのに長いこと時間かかってしまいました。。
なので次は、javascript版のMustache使ってみようかなあと思っています。
ふぅ。ブログ書くのに長いこと時間かかってしまいました。。