Hatena::ブログ(Diary)

C++でゲームプログラミング

2014-07-10

[][]HTML から Slim に変換する

HTML から Slim に変換したい場合は html2slim が利用できます。


[インストール]

$ gem install html2slim
$ html2slim --version
html2slim 0.1.0

[使い方]

$ html2slim index.html index.slim

[index.html]

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body class="test">
    <div class="container">
      <h1>
        Hello, Slim world.
      </h1>
    </div>
  </body>
</html>

[index.slim]

doctype html
html
  head
    title
      | Test
  body.test
    .container
      h1
        |  Hello, Slim world. 

上記の場合は、index.html Slim に変換して、index.slim に出力します。

html2haml みたいに結果をファイルじゃなくて、コンソールに出力したいんだけど、そういうことってできないのかな。

2014-07-07

[][]HTML を生成するテンプレートエンジンの Slim を使ってみた

いま、HTML を書くときは Haml を使用して生成しているんですが、同様のテンプレートエンジンに Slim というのがあるので試してみました。


[インストール]

$ gem install slim
$ slimrb --version
Slim 2.0.3

Slim の実行コマンドは slim ではなくて slimrb なので注意。


[index.slim]

doctype html
html
  head
    title Test Slim
  body
    .container
      h1 Hello, Slim world.

基本的な書き方は Haml に似ています。


[HTML を生成]

$ slimrb -p index.slim
<!DOCTYPE html>
<html>
  <head>
    <title>Test Slim</title>
  </head>
  <body>
    <div class="container">
      <h1>
        Hello, Slim world.
      </h1>
    </div>
  </body>
</html>

こんな感じで HTML が出力されます。

HTML をファイルに出力したい場合は、

$ slimrb -p index.slim > index.html

とします。


[所感]

ざっと試してみただけなんですが、Haml より Slim の方が簡潔に書けるみたいですね。

特に Haml で属性を書く場合、

%a{ "ng-hoge" => "hoge" }

と書く必要があるのに対して、Slim だと

a{ ng-hoge = "hoge" }

みたいに書くことができるのが便利そう。

ただ、最近は Haml を書くのに慣れてきたのでそのまま Slim に乗り換えるのか、と言われるとうーん…。

もう少し Slim 試してみるかなぁ。


[参照]

http://qiita.com/yterajima/items/53fd0387279510ff082a

http://app2641.hatenablog.com/entry/2013/06/21/123913