Haml/Scssの準備

Hamlを使う
Rails3ではeRuby実装のerubisというテンプレートエンジンが利用されているが、Hamlを調べてみたい。

Haml公式サイトをみる
http://haml-lang.com/

チュートリアルを読む

・「%タグ名 文字列」とすると文字列がタグで囲まれる

・タグにidやclass属性をつける場合は2通りあり
「%タグ{:class => "xxx", :id => "yyy"} テキスト」
のようにハッシュで渡すか、
「%タグ.クラス名#id名」
の様にcssを定義する時のようにも記述できる

・ネストするタグはソースコードのインデントで調整する(yamlみたいに)

・「%タグ名」が省略された場合はデフォルトでdivタグが使われる。

・タグの後ろに= をつけるとRubyを評価。
ただし、タグの中でRubyを評価する場合は#{Rubyのコード}を使う

さっそくRails3でテスト



まずはプロジェクトを作成。gemは前回同様fwifferを使う。
scaffoldを作成まで進める

$ cd Desktop/
$ rvm use 1.9.2@fwiffer
$ rails new haml_test
$ cd haml_test/
$ script/rails generate scaffold user name:string password:string
$ rake db:migrate
rake aborted!
undefined method `task' for #

これはRakeのバージョンによるエラー
Rakefileを少し修正すれば良いけどGemfileで対応できるのではと思いやってみる。

$ vi Gemfile gem 'rake', '0.8.7'

を追加

$ rake db:migrate You have requested:   rake = 0.8.7
The bundle currently has rake locked at 0.9.0. Try running `bundle update rake`

bundle update rakeをしろと。

$ bundle update rake

出力では
Using rake (0.8.7)
と既に0.8.7はインストールされていたのでUsingになるのかな。
それ以外も色々出ている。erubis (2.6.6)という表記も。

再びmigration

$ rake db:migrate rake aborted! You have already activated rake 0.9.0, but your Gemfile requires rake 0.8.7. Consider using bundle exec.

今度は0.9.0が有効になっているから、0.8.7の時は、bundle execをつかえといわれる。

$ bundle exec rake db:migrate

うまく行った。Rakefileを書き直すのとどっちが楽だろうか。
bundle execは今回以外でも利用した事はあるのだけれど、
普通に実行する時とどう違うのか後で調べよう。

サーバを起動して2、3人ユーザを登録しておく。

$ rails server

hamlのインストールはGetting Startedに書いてある
http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html#plugin

Gemfileで管理しよう

$ vi Gemfile gem 'haml'
$ bundle update . . Installing haml (3.1.2) .

インストールできた。
メッセージの一番下にある、
bundle show [gemname]とはなんだろう？

$ bundle show haml /home/k10i/.rvm/gems/ruby-1.9.2-p180@fwiffer/gems/haml-3.1.2

どこにインストールされたかが分かるのか。

この状態でアクセスしたらどうなるのだろう？
試してみる。

$ rails server

なにも変わらない。

拡張子が.erbだからかな。
app/views/users/index.html.erbの拡張子を.html.hamlに変更。

$ mv app/views/users/index.html.erb app/views/users/index.html.haml $ rails server

アクセスするとエラーが出る。

Haml::SyntaxError in Users#index Illegal nesting: nesting within plain text is illegal.

これはhamlで評価したのだけれど、書き方が悪いエラーなんだろうな。
erb記述のままだし。

index.html.hamlを編集。（念のためバックアップは取っておく)

...チュートリアルには書いてなかったけれど、erbのeachとか<% %>で定義されていた箇所はどのように記述するのだろう？

Running Ruby: -
に書いてあった。
「-」を先頭につける。
画面で確認。

You don't need to use "- end" in Haml. Un-indent to close a block:

eachブロックの閉じのendは使わないで、インデントで調整するのか。
修正して確認。

表示できたけど、うまくできてない。
-@user.eachをインデントしていなかった。%tableよりもインデントを下げる必要があるのかな？...あったみたい。

最終的なindex.html.hamlは、下記になった。

%h1 Listing users
%table
  %tr
    %th Name
    %th Password
    %th
    %th
    %th
  - @users.each do |user|
    %tr
      %td= user.name
      %td= user.password
      %td= link_to 'Show', user
      %td= link_to 'Edit', edit_user_path(user)
      %td= link_to 'Destroy', user, :confirm => 'Are you sure?', :method => :delet
%br
= link_to 'New User', new_user_path

全部のファイルをhamlで書く必要はなくて、erbと混在できそう。

次は、partialを呼び出してみる。
@usersがコレクションになっているから、
:partial => "user_list", :collection => @users, :as => userで表示させるようにしてみる。

_user_list.html.hamlを作成して、tr部分をコピー。
あれ？ctrl+spaceでemacsでマークできないで、IMEの切り替えになってしまう。パネルのIMEのアイコンから設定でctrol+spaceを削除する。alt+`で切り替えテイルから問題ない。

コピーが完了したら、index.html.hamlを編集。
インデントは- @users.eachの時と同じにして、partialを指定。

ファイルは下記になる。
index.html.haml

%h1 Listing users
%table
  %tr
    %th Name
    %th Password
    %th
    %th
    %th
  = render :partial => "user_list", :collection => @users, :as => :user
%br 
= link_to 'New User', new_user_path

_user_list.html.haml

%tr
  %td= user.name
  %td= user.password
  %td= link_to 'Show', user
  %td= link_to 'Edit', edit_user_path(user)
  %td= link_to 'Destroy', user, :confirm => 'Are you sure?', :method => :delet

hamlはHTMLで書くよりも短く、そして階層構造がわかりやすくかけそう。

hamlファイルを編集するときに、emacsで良いモードはあるのかな？
haml-modeとかあれば良いのだけれど。探してみる。

hamlのソースの中に含まれている。
https://github.com/nex3/haml/tree/da9ed66cd49d8c9fc63420378d159997934ac7ea/extra
ということはローカルに既にあるはず。

sass-mode.elというのもある。
これはCSS版hamlかな。気になっていたけれど、hamlに入っているのか。
次に試してみよう。

$ bundle show haml /home/k10i/.rvm/gems/ruby-1.9.2-p180@fwiffer/gems/haml-3.1.2 $ ls /home/k10i/.rvm/gems/ruby-1.9.2-p180@fwiffer/gems/haml-3.1.2/extra update_watch.rb

あれ。無いのか。

$ find ~/.rvm/ -name haml-mode.el

を実行しても見つからない。

gitでダウンロードしてくる。
最新のhamlレポジトリのextraの中には無いのか。
Tagを見ていくと、3.1.0で削除されている。
3.0.25をダウンロードして.emacs.d以下にコピーする。

emacsでの設定はload-pathに追加して、requireするだけ。
hamlファイルを開くと、
色が変わっているのと、
改行してtabを押したときに、
インデントが次の階層の位置まで作られる。
他にも機能があると思うけど、これだけで便利。

hamlは以上。

Sassを使う
公式サイトを見る。
http://sass-lang.com/

CSSに対応している拡張子が.scssと、CSS3に対応しているか分からない古いシンタックスのインデントスタイルの拡張子が.sassの2種類が使える。

scssが新しくて、sassが古いって事かな。
こうみるとsassの方がインデントスタイルですっきりしている様に思うのだけれど、どうして古いスタイルなのだろう？

・変数
$xxxで変数を作って再利用できる。

・ネスト
ネスト構造で記述することで子要素を簡潔にかける。

・ミックスイン
rubyのmixinの様に@mixin 名前で「かたまり」を設定して、@includeでマージできる。

・セレクター継承
cssの継承ができる。

とても便利そう。
どうして、scssの方はインデントスタイルじゃないのだろう？
sassはcss3が書けるか書けないか分からない。そもそもcss3が今までのcssとどう違うかが分からない。勉強しないと。

次にチュートリアルを読む。

gemでインストールする必要があるのかな。hamlに入っている訳じゃないのかな？
GitHubにレポジトリがあった。
https://github.com/nex3/sass

hamlの下にvendorディレクトリがあって、その中にsassディレクトリがある。
hamlを使っている場合は、sassは使えそうな気がする。

コンパイルコマンドがあるのか。Railsから呼び出されるときは自動でコンパイルしてくれそうな予感。

ページ最下部にhow to use it as Rails/Rack plugin
というリンクがあるので見てみる。

ここでもgemでsassを呼び出すようにしている。
Gemfileに追加。

gem 'sass'

追加後にupdate

$ bundle update

sassがインストールされた。
これだけで良いのかな？

試しにファイルを作ってみる。
public/stylesheets/sass/main.scss

h1 {
  color: #ffff00;
}

サイトにアクセス
...得に変わらない。
public/stylesheets/
を見てもファイルはできていない。

調べる。

http://el.jibun.atmarkit.co.jp/rails/2011/04/csssass31-ff05.html
解決はしないけど、良い記事を見つけた。
hamlとsassはつい最近、gemが分離されたのか。
Rails3.1ではscssが標準で入るのか。これは勉強しておかないと。

http://hail2u.net/documents/sass-and-sassy-css.html
なるほど。hamlの様なインデントのsassはなれない場合は難易度が高いのか。確かに、魅力的な機能（変数や継承）を使いたいのに、オフサイドルールも覚えないといけないのは喜ばしくない事なんだろうな。

...sassディレクトリを作ったつもりがscssディレクトリを作ってしまっていた。
下記のサイトを見て気がつきました。
http://stackoverflow.com/questions/3798826/sass-with-rails-3

アクセスすると無事に読み込まれている。
次は変数を使ってみる。
public/stylesheets/sass/main.scss

$color: #ff0000;
h1 {
  color: $color;
}

アクセスすると変わっている。うまくいった。
ネストや継承は実際に使うときにやってみよう。