New-Village

月間ブログ。だいたい1カ月に1回は更新しているようです。

Ruby on Rails チュートリアル on Cloud9 の学習録(第五章)

 Kindleで『エンダーのゲーム』を買って、勉強そっちのけで、ここ二日間読んでました。10歳の少年の話であるとは全然思えませんが、人間関係やチームワーク、人間心理を深く洞察して書いていたので、面白く読めました。

 

さて、今日もRuby on Railsの勉強を。 

なお、第四章は、途中からチンプンカンプンになってしまったので飛ばしました。基礎知識を付けてから後でやろうと思います。

 

第5章 レイアウトを作成する

 5.1.3パーシャル (partial)

ひたすら標準化するのがRailsの特徴らしい。

第三章までは、一つのHTML画面を生成するのに、Body部分を書くための"/views/home.html.erb"と、Body以外の部分を書くための"/views/layouts/application.html.erb"が存在していた。

第五章では、さらに、"/views/layouts/application.html.erb"で記載した、HTMLのヘッダーとフッター、それにIE対応の為のshimを、"<%= rander 'layouts/header' %>"と言ったがたちで変数化して、別途"/views/layouts/_header.html.erb"というファイルを用意して外だしした。

5.2SassとAsset Pipeline

画像やCSS, Javascriptは、目的別に以下のディレクトリに格納される。

  • app/assets: 現在のアプリケーション固有のアセット
  • lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
  • vendor/assets: サードパーティのアセット

で、色々なところに散在する、JavascriptCSSをどのように組み合わせて使うのかを定義するのが、マニフェストファイル?ということらしい。

プリプロセッサエンジン

Railsのファイルには複数の拡張子が付いているので、不思議に思っていたが、書いてある拡張子の右から順番にエンジンに掛けられて処理される仕組みになっているとのこと。

  • home.html.erb → 埋め込みルビーとして解釈された後にHTMLとして解釈される。
  • foobar.js.erb.coffee → coffeeとして解釈された後、埋め込みルビーとして解釈され、HTMLとして解釈される。

5.2.2素晴らしい構文を備えたスタイルシート

SASSは、CSSの強化版で、ネストしたCSSを書けるようになっている。

#logo {

  float: left;

  margin-right: 10px;

  font-size: 1.7em;

  color: #fff;

  text-transform: uppercase;

  letter-spacing: -1px;

  padding-top: 9px;

  font-weight: bold;

  line-height: 1;

  &:hover {

    color: #fff;

    text-decoration: none;

  }

}

 また、同じ設定を何度もしないで済むように、変数が使える。

$lightGray: #999;

5.3.4RSpecを洗練させる

繰り返し利用されるチェック項目については、"spec/support/utilities.rb"を作成して外だしすることができる。

5.4ユーザー登録: 最初のステップ

まずは、コントローラーを作る

$ rails generate controller Users new --no-test-framework

次にテストを作る

rails generate integration_test user_pages

テストの内容を修正する(/spec/requests/user_pages_spec.rb)

ルートを設定する。デフォルトでも作られているけど。(/config/routes.rb)

作成したファイルに関係するViewを修正する。

5.5 最後に

checkoutすると、masterのファイルに全部戻る。で、mergeすると、先ほど作ったファイルが元に戻る。Cloud9のIDEがガクガク動いた(ファイルが減ったり増えたりするので)のには少しびっくりした。

$ git add .

$ git commit -m "Finish layout and routes"

$ git checkout master

$ git merge filling-in-layout