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