ヒゲ好き女子必見!?Mustache~Play2.1+Scalaで使ってみました~

このエントリーをはてなブックマークに追加
こんにちわ。ishikawaです。
夏も終わりですね。一番好きなかき氷はカルピスです。

今回はPlay!Framework2.1で、テンプレートエンジンMustacheを使ってみた感想を書きます。



え?

Play!Frameworkにはテンプレートエンジン同梱されてない?

はい、されてます。

ただ、Play!FrameworkにはテンプレートエンジンはScalaベースなため、
Scalaを知らない人には敷居が高いように感じます。

Viewとロジックを分離し、作業を分担したいけど、技術者以外にScalaを理解してもらうのはちょっと・・・と思っている方などは試しに使ってみるといいかもしれません。

というわけで、Playで使用するためにScalateというScala実装のテンプレートエンジンを利用しつつ、Mustacheを使って、動的にHTMLフォームを作成してみたいと思います。


Mustacheについて


Mustacheはさまざまな言語で開発されているテンプレートエンジンです。
テンプレートタグに使われている「{」が口ひげに似ていることが由来だとか!?
使ってみて思ったことは
それは、書き方がすごくシンプル!!だということです。

以下の3つのことだけ覚えておけば、だいたいすぐ使えるようになります!
(むずかしいことしなければ。。)

1.変数出力
{{と}}で囲います。
HTMLエスケープされてしまうので、されたくない場合は「{}」を増やすか「&」を使いましょう。
2.条件分岐
{{#data}}{{/data}}で囲い、dataがtrueのときだけ囲った内部が処理されます。
3.ループ処理
書き方は基本的に条件分岐と同じです。
dataが配列の場合、配列の数分、{{#data}}{{/data}}に囲まれた部分が処理されます。


はい。もう覚えちゃいましたね?もっと知りたい人はこちらへ
では、早速使ってみましょう。


Play2.1+Scalaで使う方法


1.依存性の解決
Playコマンドでプロジェクトを作った後、Build.scalaというビルドファイルにライブラリの依存関係を解決するようScalateの記述を追加します。

  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使ってます。こんな細かく定義しなくてもよかったと後悔。。)

フォーム

{{#items}} {{#div}}
{{#lavel}} {{/lavel}} {{#input}}
{{#text}} {{/text}} {{#textarea}} {{/textarea}}
{{/input}}
{{/div}} {{/items}}
オブジェクトはこんな感じ。

  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使ってみようかなあと思っています。


ふぅ。ブログ書くのに長いこと時間かかってしまいました。。





次の記事
« Prev Post
前の記事
Next Post »
Related Posts Plugin for WordPress, Blogger...