HTMLの組み立てかた (Shakespeare Hamlet)

(2017.4) 新規公開.

HTMLテンプレート Hamlet について.

Text.Htmlモジュール

HTMLを組み立てる方法としては, Text.Html モジュール ('html' パッケージ) がある。しかし、これは筋が悪すぎる。

  • タグ名が大文字で出力される. この時点で駄目。
  • タグの数だけ関数がある。新たに標準化されていくタグに対応できない。

これじゃない感が満載。

Hamlet

HTMLテンプレートの Hamlet を使おう。HTMLに特化したテンプレートで、字下げでHTML要素の入れ子関係を表す。

インストール

同名の 'hamlet' パッケージは非推奨 (deprecated)。'shakespeare' パッケージをダウンロードすること。 

# cabal update
# cabal install --global --dry-run shakespeare

ただのHTML

まずは, 単なる文字列を作ってみる。Text.Hamlet モジュール.

準クォートとして, shamlet または hamlet を使う。単にテンプレートデータからHTMLを生成する場合は shamlet を使う。

Haskell
[RAW]
  1. {-# LANGUAGE QuasiQuotes #-}
  3. import Data.Text.Lazy.IO as DTLI
  4. import Text.Blaze.Html.Renderer.Text -- Text バージョン. ByteString版もある.
  5. import Text.Hamlet
  7. main :: IO ()
  8. main = do
  9. DTLI.putStrLn $ renderHtml $ [shamlet|
  10. <ul>
  11. <li>はろー<em>わー</em>るど!!
  12. <a href="#x">リンク
  13. <li>fuga
  14. |]

実行結果:: 

$ ./hamlet-1
<ul><li>はろー<em>わー</em>るど!!<a href="#x">リンク</a>
</li>
<li>fuga</li>
</ul>

次に注目.

  1. 終了タグが補われている。
  2. 字下げで入れ子構造を表す
  3. 行の途中に挿入したタグはそのまま出力される。上の例ではemタグ

終了タグを補ってくれるのは善し悪しで、既存のHTMLデータを流用するときに逆に終了タグを消してやらないといけないし、このテンプレートデータはHTMLエディタで編集しづらい。

式の埋め込み

Hamlet はテンプレート内に式を埋め込める。

単に式を埋め込む場合は準クォート shamletを使い、それに加えて URL を式展開する場合は準クォート hamletを使う。

shamlet

まずは shamletの例.

  • #{...} 式の値を埋め込む。文字列中の <などはエスケープされる。値の型は Text, Intなど. 正確には ToMarkup型クラスを実装するデータ型。
  • ^{...} 別のテンプレートの結果を埋め込む。再エスケープされない。値の型は Html でなければならない。つまり単に Text はエラーになる。
Haskell
[RAW]
  1. {-# LANGUAGE QuasiQuotes #-}
  2. {-# LANGUAGE OverloadedStrings #-}
  4. import Data.Text
  5. import Data.Text.Lazy.IO as DTLI
  6. import Text.Blaze.Html.Renderer.Text -- renderHtml :: Html -> Text
  7. import Text.Hamlet
  9. footer :: Html
  10. footer = [shamlet|
  11. <footer>
  12. <a href="/">Home
  13. |]
  15. -- #{...} はHTMLエスケープされる. エスケープしないときは ^{...}
  16. -- タグ内の #name は id属性に, .name はclass属性に変換される
  17. main :: IO ()
  18. main = do
  19. let var = "<わーるど>"::Text
  20. DTLI.putStr $ renderHtml $ [shamlet|
  21. <body>
  22. <div #block>hello #{var}
  23. <a href="/pages" .link .btn>ページの一覧
  24. <div>
  25. <a href="/pages/hoge/1">link to page
  26. ^{footer}
  27. |]

実行結果:

HTML/XML
[RAW]
  1. <body><div id="block">hello &lt;わーるど&gt;<a class="link btn" href="/pages">ページの一覧</a>
  2. </div>
  3. <div> <a href="/pages/hoge/1">link to page</a>
  4. </div>
  5. <footer><a href="/">Home</a>
  6. </footer>
  7. </body>

タグ内の #idname は id 属性に, .classname は class 属性になる。複数指定した場合も、きちんと空白区切りにまとめられる. good.

Type-safe URLs

さらに, URL展開については, 次の記号を使う。この場合, 準クォートは shamlet ではなく hamlet となる。

  • @{...} 列挙型を与える
  • @?{...} 列挙型に [(Text, Text)] 型の引数を与える.

hamlet準クォートは, テンプレートデータに加えて, URL文字列化関数を与える。

Haskell
[RAW]
  1. {-# LANGUAGE QuasiQuotes #-}
  2. {-# LANGUAGE OverloadedStrings #-}
  4. import Data.Text
  5. import Data.Text.Lazy.IO as DTLI
  6. import Text.Blaze.Html.Renderer.Text -- renderHtml :: Html -> Text
  7. import Text.Hamlet
  9. -- URLのrouteは列挙型のデータ型で作る。
  10. -- 引数を取ったり取らなかったりできる。
  11. data MyRoute = MyHomeUrl | MyPageUrl Text
  13. -- URLの文字列を作る
  14. -- Render型は次のようになっている;
  15. -- type Render url = url -> [(Text, Text)] -> Text
  16. -- なので, 次でも同じ;
  17. -- myUrlRender :: MyRoute -> [(Text, Text)] -> Text
  18. myUrlRender :: Render MyRoute
  20. -- 第2引数は, テンプレート内で @?{...} で書いたときに与えることができる.
  21. -- Hamlet は URL文字列の空白や記号の %エンコードは行わない。
  22. myUrlRender MyHomeUrl _ = "/home?x=1&y=2 <\"<"
  23. myUrlRender (MyPageUrl x) [] = Data.Text.concat ["/pages/", x]
  24. myUrlRender (MyPageUrl x) (item:_) =
  25. Data.Text.concat ["/pages/", x, "/", snd item]
  27. -- URLの展開は @{...}. HTMLエスケープされる.
  28. -- type HtmlUrl url = Render url -> Html
  29. -- hamlet 準クォートから呼び出されたときは, 呼び出されたほうも引数を一つ取る.
  30. footer :: HtmlUrl MyRoute
  31. footer = [hamlet|
  32. <footer>
  33. <a href=@{MyHomeUrl}>Home
  34. |]
  36. -- hamlet 準クォートは, テンプレートと URL文字列化関数を取る.
  37. -- #{...} はHTMLエスケープされる. エスケープしないときは ^{...}
  38. -- URL展開は @{...} か @?{...}
  39. main :: IO ()
  40. main = do
  41. let var = "<わーるど>"::Text
  42. DTLI.putStr $ renderHtml $ [hamlet|
  43. <body>
  44. <div>hello #{var}
  45. <a href=@{MyPageUrl "hoge"}>hoge
  46. <div>
  47. <a href=@?{(MyPageUrl "hoge", [("page", "1")])}>link to page
  48. ^{footer}
  49. |] myUrlRender

実行結果:

HTML/XML
[RAW]
  1. <body><div>hello &lt;わーるど&gt;<a href="/pages/hoge">hoge</a>
  2. </div>
  3. <div> <a href="/pages/hoge/1">link to page</a>
  4. </div>
  5. <footer><a href="/home?x=1&amp;y=2 &lt;&quot;&lt;">Home</a>
  6. </footer>
  7. </body>

@{...} 内では, 文字列ではなく, 列挙型の値を指定する。これで、打ち間違いはコンパイルエラーになる。また、関数で, 複雑なURL文字列を構築できる。

コメントにも書いているが, URLの% エンコードは, Hamletの範囲外。URL文字列を構築する際に, 次のいずれかでエスケープすること。(後者の方が新しい.)

  • HTTPパッケージ, Network.HTTP モジュールの urlEncode :: String -> String
  • http-types パッケージ, Network.HTTP.Types モジュールの urlEncode :: Bool -> ByteString -> ByteString

制御構造

さらに, Hamlet テンプレートには制御構造を埋め込める。

テンプレートシステムは、次のいずれか;

  1. テンプレートに特別なタグや属性を埋め込んでおき, テンプレートの外からハッシュなどを与えて, 置換やループを行う方法。 => HTMLエディタがそのまま使える。値を与えるのにハッシュなどを作るのが間怠っこしい。
  2. テンプレート内に特別な構文を埋め込む => 外側のプログラムと書き方が違う。できることを増やすとどんどん黒魔術になる。
  3. 単にプログラムを埋め込めるようにする. RubyのERBや, 埋め込みではないがPHP. => ついビューの中でロジックを書いてしまい、見通しが悪くなりやすい。

Hamlet は, 2. と 3. の間ぐらい。制御構造の構文は独自のものを埋め込むが、判定式としてHaskellの式がそのまま書ける。

  • $if 〜 $elseif 〜 $else
  • $maybe, $nothing
  • $forall
  • $case 〜 $of

字下げは $... の位置で決まる.

Haskell
[RAW]
  1. {-# LANGUAGE QuasiQuotes #-}
  2. {-# LANGUAGE OverloadedStrings #-}
  4. import Data.Text
  5. import Data.Text.Lazy.IO as DTLI
  6. import Text.Blaze.Html.Renderer.Text
  7. import Text.Hamlet
  9. isAdmin :: Text -> Bool
  10. isAdmin name = if name == "admin" then True else False
  12. isLoggedIn :: Bool
  13. isLoggedIn = True
  15. mylist :: [(Text, Text)]
  16. mylist = [("foo", "ふー"), ("bar", "ばー")]
  18. data Person = Person { personName :: Text }
  19. people :: [Person]
  20. people = [Person "n1", Person "n2", Person "n3"]
  21. -- people = []
  23. foo :: Either Text Text
  24. foo = Left "barrrrr"
  26. -- $... も字下げしないと, 前のHTML要素が終わってしまう.
  27. -- $... の字下げでどの要素の子になるか決まる.
  28. -- 例えば $case foo のところの<p>は, <ul>の子ではなく, <body>の子になる。
  29. main :: IO ()
  30. main = do
  31. DTLI.putStr $ renderHtml $ [shamlet|
  32. <body>
  33. $if isAdmin "username"
  34. <p>Welcome to the admin section.
  35. $elseif isLoggedIn
  36. <p>一般ユーザ
  37. $else
  38. <p>Please log in.
  40. $maybe name <- lookup "foo" mylist
  41. <p>Your name is #{name}
  42. $nothing
  43. <p>ゲスト
  45. $if Prelude.null people
  46. <p>No people.
  47. $else
  48. <ul>
  49. $forall person <- people
  50. <li>#{personName person}
  52. $case foo
  53. $of Left bar
  54. <p>It was left: #{bar}
  55. $of Right baz
  56. <p>It was right: #{baz}
  57. |]

実行結果:

HTML/XML
[RAW]
  1. <body><p>一般ユーザ</p>
  2. <p>Your name is ふー</p>
  3. <ul><li>n1</li>
  4. <li>n2</li>
  5. <li>n3</li>
  6. </ul>
  7. <p>It was left: barrrrr</p>
  8. </body>