Rails tutorial 第５章
レイアウトを作成する
- apurike-syonnnibootstrapフレームワークを組み込み、カスタムスタイルを追加する。
- home, aboutへのリンクをレイアウトに追加。
- パーシャル、 railsのルーティング、Asset pipelineについて学ぶ。+ Sass。ユーザーログインへの第一歩も。
1.構造を追加する
- webアプリケーション ＝ ユーザインターフェース
- モックアップをスケッチ。
- この時点でブランチを作成。
ナビゲーション
-
サイトのレイアウトがいるに HTMLを追加。
-
internetExplorerのHTML５サポート不備を回避するJavaScriptのHTML5shimというコード。
-
header
-
navbar、navbar-fixed-top、navbar-inverse
-
classラベルは何度も使える。
-
idラベルは一度しか使えない。
-
container
-
link_to
-
オプションハッシュ#
-
navタグには「その内側がナビゲーションリンクである」という意図を明示的に伝える役割
-
yieldメソッドはWebサイトのレイアウトにページごとの内容を挿入する。
-
link_to の image_tag
-
app/assets/images/ディレクトリの中から
-
alt属性は、画像がない場合に代わりに表示される文字列
BootstrapとカスタムCSS
Bootstrapを使うことでアプリケーションをレスポンシブデザイン (Responsive Design) にできる
-
どの端末でアプリケーションを閲覧しても、ある程度見栄えをよくすることができ
-
Gemfileにbootstrap-sassを追加する
-
bundle installを実行
-
カスタムCSSを動かすための最初の一歩は、カスタムCSSファイルを作ること
-
Sassは5.2.2まで登場しませんが、bootstrap-sass gemが動作するためのおまじないとして必要
-
Webサーバを再起動させると、アプリケーションに反映させる
-
Ctrl-Cを押してWebサーバを停止させた後、rails serverコマンドを打ってWebサーバを起動してください
-
navbar-fixed-top
-
navbar-inverse
-
text-align: center
-
color: #fff
パーシャル partial
一箇所にまとめた方が便利
- Railsではパーシャル (partial) という機能でこのような課題を解決できる
- renderと呼ばれるRailsヘルパー
2.Sassとアセットパイプライン
- 最近のRailsに追加された機能の中で最も特筆すべき機能の１つは、CSS、JavaScript、画像などの静的コンテンツの生産性と管理を大幅に強化する「アセットパイプライン (Asset Pipeline)」
アセットパイプライン
アセットディレクトリ
- ３種 app, lib , vendor
マニフェストファイル
- ニフェストファイルを使って、アセットをどのように1つのファイルにまとめるのかをRailsに指示する
プリプロセッサエンジン
- プリプロセッサエンジンは、繋げて実行する (chain) ことができます
Sass-素晴らしい構文を備えたスタイルシート
-
ネスト ＝ ルールを継承
-
:hoverなど
-
bootstrap-sassというgemを使えば、SCSSでも同様に$gray-lightという変数が使える
3.レイアウトのリンク
Contactページ
'test "should get contact" do rails test`
- Contact用ページのルートとアクション,ビューを追加する。
- 全てのテストがグリーンであることを確認。
railsのルートURL
- 一般的な規約に従い、基本的には_path書式を使い、リダイレクトの場合のみ_url書式を使うようにします
名前付きルート
- link_toメソッドの2番目の引数で、適切な名前付きルートを使ってみましょう
リンクのテスト
- これらのリンクが正しく動いているかどうかチェックするテストを書いてみましょう
- 「統合テスト (Integration Test)」を使って一連の作業を自動化
4.ユーザー登録：最初のステップ
- ユーザーのモデリングは第６章、ユーザ登録の完成は第７章。
Usersコントローラ
- Usersコントローラを作成
$ rails generate controller Users new
ユーザー登録用URL
- ユーザー登録URL用にget '/signup'のルートを追加
5.最後に
- 以後サンプルアプリケーションを肉付けすることに専念します。最初に、ユーザー登録、サインイン、サインアウトできるユーザーを追加します。次に、マイクロポストを追加します。最後に、他のユーザーをフォローできるようにします。
- Gitを使っている方は、この時点でmasterブランチに変更をマージしてください。
本章のまとめ
- HTML5を使ってheaderやfooter、logoやbodyといったコンテンツのレイアウトを定義
- Railsのパーシャルは効率化のために使われ、別ファイルにマークアップを切り出すことができます
- CSSは、CSSクラスとidを使ってレイアウトやデザインを調整します
- Bootstrapフレームワークを使うと、いい感じのデザインを素早く実装できる
- SassとAsset Pipelineは、(開発効率のために切り分けられた) CSSの冗長な部分を圧縮し、本番環境に最適化した結果を出力する
- Railsのルーティングでは自由にルールを定義することができ、また、その際に名前付きルートも使えるようになる
- 統合テストは、ブラウザによるページ間の遷移を効率的にシミュレートする