2011年1月27日木曜日

hamlとsassつづき

前の続き、ちょっと長くなります。
なぜ長くなるか?
それは猿でもわかるように書いたからで、でも猿の集中力はこれを読み終わるまでもたないから、これは誰にもよんでもらえないカアイソウな記事・・。

すこし試したい
公式のドキュメント(hamlsass)がわかりやすくっていいです。
シンプルで見やすい。
英語読まなくてもわかるってすごい。

試し書きしてhtmlに書き出せたりするのがブラウザで簡単にできるので(hamlsass)そこで触ってみるのもいいかもしれません。

わたしはちゃんと試したい
わたしはルビーしたことないのでちょっとやってみたい。
ので、haml・sassインストールして試してみることにします。

ruby、gemがインストール済であることが前提条件です。
わたしはMacなのでなにもしなくてもはいってます、portアップデートくらいしたかも。
$ ruby -v
ruby 1.8.7 (2009-06-12 patchlevel 174) [universal-darwin10.0]

$ rails -v
Rails 2.3.5

$ gem -v
1.3.5

1. haml/sassをインストールします。
gemというのはなんでしょうか?
Rubyのパッケージ管理システム「RubyGems」のコマンド名だそうです。
つまり、hamlもRubyGemsのパッケージになっているんですね!
$ sudo gem install haml
Successfully installed haml-3.0.25
1 gem installed
Installing ri documentation for haml-3.0.25...
Installing RDoc documentation for haml-3.0.25...
2. hamlっていうrailsアプリにしよう
さっそくrailsアプリをつくりましょう、
railsはRubyのウェブアプリフレームワークです。
ちょちょいとウェブアプリ作れるんですね。
今回はhamlを試すのでhamlという名前で作ります。
$ rails haml
create
create app/controllers
   ・・・
create log/test.log
3. hamlのなにかがあるのを確認
hamlのインストールがうまくいってるのを確認します。
$ cd haml
$ ls -l vendor/plugins/haml/init.rb
4. コントローラをジェネってサーバ起動
sampleってゆう名前のコントローラをつくりましょう。
サーバを起動して、http://0.0.0.0:3000/にアクセスすると見れる。
$ script/generate controller sample
exists app/controllers/
   ・・・
create test/unit/helpers/sample_helper_test.rb

$ script/server
=> Booting Mongrel
=> Rails 2.3.5 application starting on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server
railsアプリできたー。
ここまででぐったりですが、まだ準備が終わったばかりです。
「結婚はゴールではなく、スタートである」

実際にhaml/sassを書いてみよう
では書きましょう。
とはいっても記法がまったくわからない
ので、とりあえずサンプルをコピりましょう。

まずhamlから。
$ mkdir app/views/sample
$ vim app/views/sample/sample.html.haml

!!! XML
!!!
%html{html_attrs}
%head
%title Hello, Haml!
%body
%h1 Hello, Haml!
sassは以下。
$ mkdir public/stylesheets/sass
$ vim public/stylesheets/sass/sample.sass

h1
 color: red

こんな感じでいいのです、簡潔に見えますね。
あと美しい感もある。
でもまだこのコード量では恩恵ある感はないです。

次は記法を細かく確認してみたいと思ってはいます。
続くといっていいでしょう!

2011年1月26日水曜日

hamlとsass

hamlとsassについてまとめますね。

hamlとは
マークアップ言語。
元々はRubyのViewとして利用されることが目的でできたが、
hamlがそれ自体がドキュメントとなりえるくらいかっこいいらしい。
hamlは以下の主原則に基づいて開発されている。
Markup should be beautiful : マークアップは美しくあるべき
Markup should be DRY : マークアップはDRYであるべき(記述が反復されないとうこと)
Markup should be well-indented : マークアップは正しくインデントされるべき
HTML structure should be clear : HTML構造が完結でわかりやすくあるべき

sassとは
cssを記述するためのメタ言語。
簡潔でわかりやすい記法で書くことができて、「Sass makes CSS fun again.」とか言ってる。

コレらはつまり
開発者Hamptonさんによって作成されている。
rubyつかってるひとには便利なのかな・・?

英語が読めないので雰囲気から想像するに、
「htmlとかcssとかマジだりーわ!あんなの管理してる暇NEEEEEEEEEEYO!」
「読み返しても意味がわからん・・なんだこれは・・」
「闇!闇!闇!」
「とりあえず見やすくインデントちゃんとしようぜ」
「なんか < > { } とか書くのだりーし省略しようぜ」
「じゃあこうすりゃええんやろ」
「こうすりゃええんやろ」
「こうして」
「こうして」
「こうすりゃええんやろ」
という経緯でできたんじゃないのかなと思っています。
ERBとかeRubyというPHPに似た埋め込みスクリプトとか、結構煩わしいこと書かなきゃいけない。
それがだるくて原則立ててヤってんだろなきっと。

たぶんですけど、hamlとsassて必ずしもセットで使わなくていいんじゃないかなと思いますね。
sassだけとかアリっぽい。hamlだけってことはないのかな?hamlつかうならsassも使うのかも。

と、雰囲気はなんとなく把握したのでそれでは実際にやってみましょう。
続きます。