Upload
yohei-yasukawa
View
234
Download
0
Embed Size (px)
Citation preview
第5章 レイアウトを作成する #Railsチュートリアル
http://railstutorial.jp/
Rails解説セミナー
by ヤスラボ
Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう
Michael Hartl (マイケル・ハートル)
セミナーを 始める前に
講義中に参照したリンクはコメント欄で (質問もお気軽に)
講師のターミナルは下記 URL から閲覧できます :)
http://screenx.tv/yasulab
Slideshare.all.url
http://www.slideshare.net/yasulab/presentations
質問はいつでもお気軽に! 個別相談は休憩や終了後に :)
“話についていけなかったorz” そんなときに安心な動画サポート!
http://railstutorial.jp/screencasts#ch00
Screencast.first.visit?
この2つは特に重要です
Ready?
解説セミナーを 進めていきましょう!
第5章 レイアウトを作成する #Railsチュートリアル
http://railstutorial.jp/
Rails解説セミナー
by ヤスラボ
Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう
Michael Hartl (マイケル・ハートル)
• ヘルパー関数を使ってタイトルを改善:
• Homeでは基本タイトルだけを表示
• Rubyの基本的な文法について学習:
1. 文字列とメソッド
2. データ構造 (配列/Block/Hash/シンボル)
3. クラス (コンストラクタ/継承/組込みクラス)
4. Railsにおけるクラス (Controller / User)
第4章 まとめ
Model-View-Controller (MVC) アーキテクチャの概念図
Router
Controller
View
Model
DatabaseReq.
HTML
第3章
第5章第4章
第5章 まとめ1. Webサイトの基本的なレイアウトを作成− Home/About/Help/Signupページ− Bootstrapを使ったデザイン− Partial機能を使ったリファクタリング
2. Asset Pipeline機能やSassについて紹介
3. Routesやテストを洗練させる− subject { … } , before { … }
4. ユーザー登録のページをTDDで作成
第5章 レイアウトを作成する 5.1 構造を追加する
http://railstutorial.jp/
Railsチュートリアル
by ヤスラボ
Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう
Michael Hartl (マイケル・ハートル)
• 構造を追加したWebサイトのレイアウト
• ログインページへのリンクがあるHomeページ
• Bootstrapを使ったデザインを改善
• Asset PipelineでBootstrapを最適化
• Sass言語を使ってCSSを追加・拡張する
• Partial機能を使ってheader/footerを共通化
構造を追加する
第5章 レイアウトを作成する 5.2 SassとAsset Pipeline
http://railstutorial.jp/
Railsチュートリアル
by ヤスラボ
Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう
Michael Hartl (マイケル・ハートル)
• Asset Pipeline:=> CSS/JavaScript/Imageなどを管理する機能。
1. アセットディレクトリ 静的ファイルを目的別に分類.
2. マニフェストファイル 1つのファイルにまとめる方法をRailsに指示.
3. プリプロセッサエンジン 指示に従ってブラウザに配信できるように結合.
SassとAsset Pipeline
1. アセットディレクトリ
javascripts / stylesheets / images のディレクトリにそれぞれ配置する
2. マニフェストファイル
コンパイル対象のファイルを記述する - require_self: マニフェストファイル内の記述も対象にする - require_tree: 引数のPATH以下のファイルを対象にする
3. プリプロセッサエンジン
コンパイルする順序を拡張子で記述する foobar.js.cofee: Coffee → JS の順に(外側の拡張子から) コンパイル foobar.js.erb.coffee: Coffee → ERb → JS の順にコンパイル
• Asset Pipeline:=> CSS/JavaScript/Imageなどを管理する機能。
1. アセットディレクトリ 静的ファイルを目的別に分類.
2. マニフェストファイル 1つのファイルにまとめる方法をRailsに指示.
3. プリプロセッサエンジン 指示に従ってブラウザに配信できるように結合.
SassとAsset Pipeline
TIPS: なぜアセットパイプライン?
1つのファイルにまとめて 高速に配信できる
画像引用元: Wikimedia Commons http://commons.wikimedia.org/wiki/Main_Page
複数のファイルに分割して 効率的に開発できる
• Sassの特徴
1. ネストスタイルシート内に共通のパターンがある場合は、要素をネストさせることができる。
2. 変数冗長なコードを削除し、より自由な表現を可能にするために、変数が定義できる。
3. ミックスイン (*7.1節で使用) CSSルールのグループをパッケージ化して、複数の要素に適用できる。(e.g. @include )
SassとAsset Pipeline
1. Sassのネスト
ネスト記法により簡潔に
2. Sassの変数
色や値の変更容易性を高める
3. Sassのミックスイン
よく使うスタイルをパッケージ化 (再利用性を高める)
• Sassの特徴
1. ネストスタイルシート内に共通のパターンがある場合は、要素をネストさせることができる。
2. 変数冗長なコードを削除し、より自由な表現を可能にするために、変数が定義できる。
3. ミックスイン (*7.1節で使用) CSSルールのグループをパッケージ化して、複数の要素に適用できる。(e.g. @include )
SassとAsset Pipeline
第5章 レイアウトを作成する 5.3 レイアウトのリンク
http://railstutorial.jp/
Railsチュートリアル
by ヤスラボ
Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう
Michael Hartl (マイケル・ハートル)
• Contactページを題材にテストやアクションを復習
• テスト駆動開発で,右の表のようにURLとルートをマッピングする。
• config/routes.rb の書き方を説明
• テストをより簡潔に洗練させる
レイアウトのリンク
第5章 レイアウトを作成する 5.4 ユーザー登録
http://railstutorial.jp/
Railsチュートリアル
by ヤスラボ
Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう
Michael Hartl (マイケル・ハートル)
• 今までのまとめ・復習
• Usersコントローラの生成 (newアクションを追加)
• Usersページに対するテストを追加・実行 (失敗)
• ユーザー登録ページをルートに追加
• トップからユーザー登録ページへのリンクを追加
• 第5章まとめ
• Masterへmerge / GitHubへのpush / Herokuへのdeploy
ユーザー登録
お疲れ様でした
第5章 まとめ1. Webサイトの基本的なレイアウトを作成− Home/About/Help/Signupページ− Bootstrapを使ったデザイン− Partial機能を使ったリファクタリング
2. Asset Pipeline機能やSassについて紹介
3. Routesやテストを洗練させる− subject { … } , before { … }
4. ユーザー登録のページをTDDで作成
Model-View-Controller (MVC) アーキテクチャの概念図
Router
Controller
View
Model
DatabaseReq.
HTML
第3章
第5章第4章
参考情報
アセットパイプラインhttp://railsguides.jp/asset_pipeline.html
Railsのルーティングhttp://railsguides.jp/routing.html
レイアウトとレンダリングhttp://railsguides.jp/layouts_and_rendering.html
お知らせ
Railsパスポートを開始します!
背景• キャンセル待ちだと予定が立てづらい :(
=> 「”とりあえず申し込み” が多い…?」
• スクリーンキャストを事前に視聴したい! => 「決済がセミナー直前なので難しい」
• 同じ章を何度も参加したい! => 「特に,個別に質問/相談がしたい」
コアな参加者が 学習しやすい
環境に.
参加費のまとめて決済プラン
キャンセル待ちでも参加可能!
動画が事前に視聴できます
フリーパス形式 (再演参加可)
興味があれば Co-Edo まで :)
今後の進め方• 反響がある限り,継続的に実施していきます.
• 今後の解説セミナーのスケジュール → 詳細: http://railstutorial.jp/seminars
• 欠席時はスクリーンキャストで補完できます :) → 詳細: http://railstutorial.jp/screencasts
• アンケートのご回答に協力くださいコメント欄にURLを貼付けます :-) ※ アンケートに回答を送信すると, 特典動画の情報が表示されます.
第5章 レイアウトを作成する #Railsチュートリアル
http://railstutorial.jp/
Rails解説セミナー
by ヤスラボ
Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう
Michael Hartl (マイケル・ハートル)