LoginSignup
47
37

More than 5 years have passed since last update.

HtmlからHamlを作り、またHTMLにする

Last updated at Posted at 2013-02-27

何を言っているのかわからないかもしれないタイトルでごめんなさい。

以前ならWikiとか今ならMarkdownとかreSTとかでしか物を書かなくなってきて、レジュメもなんでもMarkdownでいいじゃないかと思っていたのですが、思わぬ所で「生HTMLを書いて」と言われたので、必死に抗ってみました。

Hamlって?

HTML/XHTMLを生成するためのマークアップ言語、ということです。ちなみに、CSSにおいてはSassというマークアップ言語が親戚のようです。

タグ閉じたくないよね、面倒だよねという人にうってつけです。

input.haml
!!!
%html
  %head
    %title Haml haml haml!
  %body
    #header
      %h1 Haml!
    #content
      %p I love Haml

と書くと、

input.html
<!DOCTYPE html>
<html>
  <head>
    <title>Haml haml haml!</title>
  </head>
  <body>
    <div id='header'>
      <h1>Haml!</h1>
    </div>
    <div id='content'>
      <p>I love Haml</p>
    </div>
  </body>
</html>

というHTMLに変換されます。

助けて!エディターさん!

Pythonよろしくインデントが肝なので、エディターに助けてもらいましょう。

Emacsの人はhaml-modeがあります。

Sublime text2のHamlモードはインデントが納得いかないです。なんかフラット。。。

Vimは全くわかりませんが、プラグインもあるみたいです。
https://github.com/tpope/vim-haml

Haml→HTML変換

昔はRubyからrequire 'haml'とかやっていたのですが、今は

$ gem install haml

で大丈夫です。

$ haml input.haml

とかやればHTMLをはいてくれます。

HTML→Haml変換

過去のHTMLをベースにしたいという人は、

$ gem install html2haml

でhtml2hamlを入れればOK。

$ html2haml input.html output.haml

で処理してくれます。便利な時代だ。

注意事項

html2haml→hamlで生成したHTMLは、元のHTMLと完全に一致しない場合があるので注意。

条件付きコメント

例えば、条件付きコメントとかは、hamlにはなってもhtmlに戻すときに多分死にます。特に間にIE用のスクリプトとかある場合に死にました。

test.html
<!--[if IE 6]>
 some code for IE
<![endif]-->

一応公式にはサポートしていることにはなっているし、そうじゃなければ、surround helper使えって話になっているみたいですが、ことごとく死にました。

結局Hamlに:plain記述を使ってそのまま生かすこと。。。ダサい。。。

zannen.haml
:plain
  <!--[if IE 6]>
   some code for IE
  <![endif]-->

タグの要素をunescapeしたい場合

ごくまれに、

<div id="<!var!>">

みたいに、タグの要素をunescapeしなければならない場合があったとします。なんというか、実は別のPerlなテンプレートエンジンが次に走るとかいう場合とかあるんですよ。。

こういう場合も苦しみます。先人は、先にRubyのパラメータ展開をすればいいじゃない。それか、Hamlやめれば?とボコボコに言われています。

そうは言っても、生HTML書きたくないし、、、というわけで、結局また:plain先生にお世話になりましたとさ。

まとめ

Haml便利!と言いたかったのですが、Markdownの方がHTMLと混在にできて楽だよね、ということに気づきました。

Hamlの最大の弱点は、グーグル先生が自動的に"html"というクエリに修正してくれるところです。困ったら、"haml"とクエリをクォートしましょう。

KobitoみたいなリアルタイムでプレビューできるHaml,Sass,Markdownエディターが欲しい今日このごろであります。

47
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47
37