その他、諸々

このページには色々なツールを使ってみての感想や、このサイトの運営上の色々な独り言を書きます。使われる用語の細かな説明はしませんので悪しからず。

HAML + SASS +rake [2012/1/22]

退職を機に、このサイトを大改造しています。HTML5+CSS3の実験も兼ねて色々と試してみたいと思ってます。

サイトの各コーナー毎にスタイルの統一をしながら、記事部分だけ差込で簡単に変更できるようにしたいと思ったのですがHTMLだけだとインクルードは出来ないですね。

Javascripを使えば可能ですが、Javascript無しでもそれなりに見る事が出来るページにしたいのでテンプレートに記事部分を組み込んだHTMLを事前にビルドして作ることにしました。

一般的なブログソフトを使えば何も考えなくて良い訳ですが、そこはプログラマのサガってやつで自前でやってみたいのですよね。

そこでHAML+SASSって奴を使って、rubyと組み合わせて生成しちゃおうと、トライしてます。

テンプレートのhamlの中に次の様な行を入れて、そこに別に書いた記事hamlをインクルードします。

= Haml::Engine.new(open($article_file).read).render

HAMLの中のrubyコードとして別のHAMLを読み込んでやるというわけです。

ここで使っている $article_file という変数はHAMLの起動時に -r オプションで設定用の rubyスクリプトを読ませて定義させてやります。

で、全体の管理をrakeを使って管理して、追加・変更した時に必要なものだけビルドし直す様にします。 rakeとはruby版のmakeです。ルールに従って必要な処理だけやってくれます。

古いデータは一度には変える時間が無いので適当に手抜きをして、新しく追加するものからビルドの対象にして行く方針です。

さて、調子良く組み込んでビルドできたぞっと、喜んでいたら pre で :preserve フィルターを使う所が上手く展開されません。後ろの部分まで飲み込んでひとまとまりの pre に成ってしまいます。

これは試しに書き換えてみると、:preserve の次の行に空白行を書くと問題が発生する事が分りましたので、空行無しで書くようにして、詰まって見えるところはCSSで paddingで空けてやる事にしました。

&pre.src
  :preserve
         <--ここが空行だと誤動作し、後ろの p を飲み込んでしまう
    #-
    #-
&p
  なんたら

一難さってまた一難、rubyのコードを例示する場所でエラーが出ます。

良く見てみるとインライン展開の#{...}がエラーに成っています。HAMLの中でもインライン展開が出来るので、混乱してしまうのですね。と言う事でこれは \#{...}とエスケープすることでOKと成りました。

メタ構成の状態なので、色々とかぶると面倒な副作用が出てくるのは仕方が無いですが、まあ、rubyが使えて、かつ、簡単な記述方法のメリットと、記法の罠のデメリットの兼ね合いということで今のところメリットが大きそうなのでしばらくはHAML+SASS+rakeの環境を使ってみる事にします。