Phoenix で haml テンプレートを利用する

概要

• Phoenix は eex というテンプレートエンジンを使っていますが、正直使い勝手があまりよくないです。
• Haml を使って開発することで、テンプレート側の開発速度が上がります。
• 今回は Haml テンプレートエンジンへの切り替え方を紹介します。

phoenix_haml のインストール

phoenix_haml | Github を使います。

mix.exs

  defp deps do
    [
      {:phoenix, "~> 1.3.0-rc"},
      {:phoenix_pubsub, "~> 1.0"},
      {:phoenix_ecto, "~> 3.2"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 2.10"},
      {:phoenix_live_reload, "~> 1.0", only: :dev},
      {:gettext, "~> 0.11"},
      {:cowboy, "~> 1.0"},
+     {:phoenix_haml, "~> 0.2"}
    ]
  end

$ mix deps.get

テンプレートエンジンの変更

config/config.exs

+ config :phoenix, :template_engines, haml: PhoenixHaml.Engine

live reload　させるために、 config/dev.exs を編集します。

config/dev.exs

config :haml, Haml.Endpoint,
  live_reload: [
    patterns: [
      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
      ~r{priv/gettext/.*(po)$},
      ~r{web/views/.*(ex)$},
-     ~r{web/templates/.*(eex)$}
+     ~r{web/templates/.*(eex|haml)$}
    ]
  ]

以上を設定すれば動きます。

サンプル

web/controllers/page_controller.ex

defmodule Haml.PageController do
  use Haml.Web, :controller

  def index(conn, _params) do
-  render conn, "index.html"
+  render conn, "index.html", name: "テスト"
  end
end

web/templates/page/index.html.haml

%h1
  = @name

以下のように表示されていれば成功です。