NOTO

htmlをhamlに書き換えてみて思ったこと

hamlを書いてみたかったので、一番手軽なところで普通のhtmlで書いていたものを手書きでhamlに書き換えてみた。
いくつかメモしておきたかったのでメモします。

まずhtmlをhamlにするにはこれがある

やっぱり便利なものを作ってるかたはいるもので、感謝。WEBのフォームで変換できます。
http://html2haml.heroku.com">html2haml

コンソールからもできるっぽいです。

hamlだけでなくhtml2hamlというのがあるんですね。

$ sudo gem install html2haml
インストール後に
$ html2haml index.html index.haml

とかです。

sublimeな人たちへ

hamlを保存時にビルドをしてくれる設定を入れておくと捗ります。以下のURLがとても参考になります。
http://dev.classmethod.jp/tool/haml-with-sublime-text-2/

引っかかった集

Invalid US-ASCII character “xE3” って出る

以下のエラーがsublimetextでのビルドだけ出てまして、コンソールで ‘haml index.haml index.html’ した時はでないという謎な感じで。

Haml error on line XX: Invalid US-ASCII character "xE3"
Use --trace for backtrace.

でこれについては、hamlファイルの先頭行に

- # encoding: utf-8

と入れると大丈夫になりました。文字コード。

htmlの-(ハイフン)が入ってる属性値は工夫がいる
例えば

の http-equiv=’X-UA-Compatible の部分なのですが、最初特に何も考えずにrubyのハッシュ的な感じで

%meta{:content => "IE=edge,chrome=1", :http-equiv => "X-UA-Compatible"}

と書いたらエラーでした。そうだ、ハイフンだめだーと思ってどうしようかと思ってとりあえず

%meta{:content => "IE=edge,chrome=1", 'http-equiv' => "X-UA-Compatible"}

という場当たり的なニュアンスでとりあえず通りましたが、他にも

%meta{ http:{ :equiv =>"X-UA-Compatible"}, :content => "IE=edge,chrome=1" }
や、ニュアンス違いで
%meta{content: "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}

こういう書き方もできるようで、統一する上でどうしたものかと現在悩んでいるところです。

Googleアナリティクスとかjsどうしようかなっと

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

こういうやつなのですが、これはこれでまたインデントが内のjavascriptにもあるので、インデントをもとにしているhamlでどうするんだろうーっておもってましたが、さすが、

:javascript

をjavascript部の先頭に書けば一発でした。cssとかも同様のようです。

最後に

一応手書きで書いてなんとなくニュアンスを触れたので、html2hamlでコードを自動変換してみた。
それをみながら「こーかくのねー」などと勉強しているところです。

やっぱり、静的なHTMLでHAMるっていうよりかは、Railsとかで動的に生成するようなときにかなり熱い感じなのだろうなーと触ってみて実感しました(Railsだとbuildいらないですし)
まだRubyの文法でプログラム的に記述をしていないのでそちらも試してみたいです。
hamlのおかげでhtmlの構造が見やすくなったので、その流れでCSSをSass化してみるをやりたいと思います。