51
5レイアウトを作成する #Railsチュートリアル http://railstutorial.jp/ Rails解説セミナー by ヤスラボ Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう Michael Hartl (マイケル・ハートル)

Rails解説セミナー 第5章

Embed Size (px)

Citation preview

Page 1: Rails解説セミナー 第5章

第5章 レイアウトを作成する #Railsチュートリアル

http://railstutorial.jp/

Rails解説セミナー

by ヤスラボ

Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう

Michael Hartl (マイケル・ハートル)

Page 2: Rails解説セミナー 第5章

セミナーを 始める前に

Page 3: Rails解説セミナー 第5章

講義中に参照したリンクはコメント欄で (質問もお気軽に)

講師のターミナルは下記 URL から閲覧できます :)

http://screenx.tv/yasulab

Page 4: Rails解説セミナー 第5章

Slideshare.all.url

http://www.slideshare.net/yasulab/presentations

Page 5: Rails解説セミナー 第5章

質問はいつでもお気軽に! 個別相談は休憩や終了後に :)

Page 6: Rails解説セミナー 第5章

“話についていけなかったorz” そんなときに安心な動画サポート!

Page 7: Rails解説セミナー 第5章

http://railstutorial.jp/screencasts#ch00

Screencast.first.visit?

この2つは特に重要です

Page 8: Rails解説セミナー 第5章

Chapter.code.valid?

https://github.com/yasslab/sample_apps

Page 9: Rails解説セミナー 第5章

Ready?

Page 10: Rails解説セミナー 第5章

解説セミナーを 進めていきましょう!

Page 11: Rails解説セミナー 第5章

第5章 レイアウトを作成する #Railsチュートリアル

http://railstutorial.jp/

Rails解説セミナー

by ヤスラボ

Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう

Michael Hartl (マイケル・ハートル)

Page 12: Rails解説セミナー 第5章

• ヘルパー関数を使ってタイトルを改善:

• Homeでは基本タイトルだけを表示

• Rubyの基本的な文法について学習:

1. 文字列とメソッド

2. データ構造 (配列/Block/Hash/シンボル)

3. クラス (コンストラクタ/継承/組込みクラス)

4. Railsにおけるクラス (Controller / User)

第4章 まとめ

Page 13: Rails解説セミナー 第5章

Model-View-Controller (MVC) アーキテクチャの概念図

Router

Controller

View

Model

DatabaseReq.

HTML

第3章

第5章第4章

Page 14: Rails解説セミナー 第5章

第5章 まとめ1. Webサイトの基本的なレイアウトを作成− Home/About/Help/Signupページ− Bootstrapを使ったデザイン− Partial機能を使ったリファクタリング

2. Asset Pipeline機能やSassについて紹介

3. Routesやテストを洗練させる− subject { … } , before { … }

4. ユーザー登録のページをTDDで作成

Page 15: Rails解説セミナー 第5章

第5章 レイアウトを作成する 5.1 構造を追加する

http://railstutorial.jp/

Railsチュートリアル

by ヤスラボ

Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう

Michael Hartl (マイケル・ハートル)

Page 16: Rails解説セミナー 第5章

• 構造を追加したWebサイトのレイアウト

• ログインページへのリンクがあるHomeページ

• Bootstrapを使ったデザインを改善

• Asset PipelineでBootstrapを最適化

• Sass言語を使ってCSSを追加・拡張する

• Partial機能を使ってheader/footerを共通化

構造を追加する

Page 17: Rails解説セミナー 第5章

第5章 レイアウトを作成する 5.2 SassとAsset Pipeline

http://railstutorial.jp/

Railsチュートリアル

by ヤスラボ

Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう

Michael Hartl (マイケル・ハートル)

Page 18: Rails解説セミナー 第5章

• Asset Pipeline:=> CSS/JavaScript/Imageなどを管理する機能。

1. アセットディレクトリ 静的ファイルを目的別に分類.

2. マニフェストファイル 1つのファイルにまとめる方法をRailsに指示.

3. プリプロセッサエンジン 指示に従ってブラウザに配信できるように結合.

SassとAsset Pipeline

Page 19: Rails解説セミナー 第5章

1. アセットディレクトリ

javascripts / stylesheets / images のディレクトリにそれぞれ配置する

Page 20: Rails解説セミナー 第5章

2. マニフェストファイル

コンパイル対象のファイルを記述する - require_self: マニフェストファイル内の記述も対象にする - require_tree: 引数のPATH以下のファイルを対象にする

Page 21: Rails解説セミナー 第5章

3. プリプロセッサエンジン

コンパイルする順序を拡張子で記述する foobar.js.cofee: Coffee → JS の順に(外側の拡張子から) コンパイル foobar.js.erb.coffee: Coffee → ERb → JS の順にコンパイル

Page 22: Rails解説セミナー 第5章

• Asset Pipeline:=> CSS/JavaScript/Imageなどを管理する機能。

1. アセットディレクトリ 静的ファイルを目的別に分類.

2. マニフェストファイル 1つのファイルにまとめる方法をRailsに指示.

3. プリプロセッサエンジン 指示に従ってブラウザに配信できるように結合.

SassとAsset Pipeline

Page 23: Rails解説セミナー 第5章

TIPS: なぜアセットパイプライン?

1つのファイルにまとめて 高速に配信できる

画像引用元: Wikimedia Commons http://commons.wikimedia.org/wiki/Main_Page

複数のファイルに分割して 効率的に開発できる

Page 24: Rails解説セミナー 第5章

• Sassの特徴

1. ネストスタイルシート内に共通のパターンがある場合は、要素をネストさせることができる。

2. 変数冗長なコードを削除し、より自由な表現を可能にするために、変数が定義できる。

3. ミックスイン (*7.1節で使用) CSSルールのグループをパッケージ化して、複数の要素に適用できる。(e.g. @include )

SassとAsset Pipeline

Page 25: Rails解説セミナー 第5章

1. Sassのネスト

ネスト記法により簡潔に

Page 26: Rails解説セミナー 第5章

2. Sassの変数

色や値の変更容易性を高める

Page 27: Rails解説セミナー 第5章

3. Sassのミックスイン

よく使うスタイルをパッケージ化 (再利用性を高める)

Page 28: Rails解説セミナー 第5章

• Sassの特徴

1. ネストスタイルシート内に共通のパターンがある場合は、要素をネストさせることができる。

2. 変数冗長なコードを削除し、より自由な表現を可能にするために、変数が定義できる。

3. ミックスイン (*7.1節で使用) CSSルールのグループをパッケージ化して、複数の要素に適用できる。(e.g. @include )

SassとAsset Pipeline

Page 29: Rails解説セミナー 第5章

第5章 レイアウトを作成する 5.3 レイアウトのリンク

http://railstutorial.jp/

Railsチュートリアル

by ヤスラボ

Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう

Michael Hartl (マイケル・ハートル)

Page 30: Rails解説セミナー 第5章

• Contactページを題材にテストやアクションを復習

• テスト駆動開発で,右の表のようにURLとルートをマッピングする。

• config/routes.rb の書き方を説明

• テストをより簡潔に洗練させる

レイアウトのリンク

Page 31: Rails解説セミナー 第5章

第5章 レイアウトを作成する 5.4 ユーザー登録

http://railstutorial.jp/

Railsチュートリアル

by ヤスラボ

Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう

Michael Hartl (マイケル・ハートル)

Page 32: Rails解説セミナー 第5章

• 今までのまとめ・復習

• Usersコントローラの生成 (newアクションを追加)

• Usersページに対するテストを追加・実行 (失敗)

• ユーザー登録ページをルートに追加

• トップからユーザー登録ページへのリンクを追加

• 第5章まとめ

• Masterへmerge / GitHubへのpush / Herokuへのdeploy

ユーザー登録

Page 33: Rails解説セミナー 第5章

お疲れ様でした

Page 34: Rails解説セミナー 第5章

第5章 まとめ1. Webサイトの基本的なレイアウトを作成− Home/About/Help/Signupページ− Bootstrapを使ったデザイン− Partial機能を使ったリファクタリング

2. Asset Pipeline機能やSassについて紹介

3. Routesやテストを洗練させる− subject { … } , before { … }

4. ユーザー登録のページをTDDで作成

Page 35: Rails解説セミナー 第5章

Model-View-Controller (MVC) アーキテクチャの概念図

Router

Controller

View

Model

DatabaseReq.

HTML

第3章

第5章第4章

Page 36: Rails解説セミナー 第5章

参考情報

Page 37: Rails解説セミナー 第5章

アセットパイプラインhttp://railsguides.jp/asset_pipeline.html

Page 38: Rails解説セミナー 第5章

Railsのルーティングhttp://railsguides.jp/routing.html

Page 39: Rails解説セミナー 第5章

レイアウトとレンダリングhttp://railsguides.jp/layouts_and_rendering.html

Page 40: Rails解説セミナー 第5章

お知らせ

Page 41: Rails解説セミナー 第5章

Railsパスポートを開始します!

Page 42: Rails解説セミナー 第5章

背景• キャンセル待ちだと予定が立てづらい :(

=> 「”とりあえず申し込み” が多い…?」

• スクリーンキャストを事前に視聴したい! => 「決済がセミナー直前なので難しい」

• 同じ章を何度も参加したい! => 「特に,個別に質問/相談がしたい」

Page 43: Rails解説セミナー 第5章

コアな参加者が 学習しやすい

環境に.

Page 44: Rails解説セミナー 第5章

参加費のまとめて決済プラン

Page 45: Rails解説セミナー 第5章

キャンセル待ちでも参加可能!

Page 46: Rails解説セミナー 第5章

動画が事前に視聴できます

Page 47: Rails解説セミナー 第5章

フリーパス形式 (再演参加可)

Page 48: Rails解説セミナー 第5章
Page 49: Rails解説セミナー 第5章

興味があれば Co-Edo まで :)

Page 50: Rails解説セミナー 第5章

今後の進め方• 反響がある限り,継続的に実施していきます.

• 今後の解説セミナーのスケジュール → 詳細: http://railstutorial.jp/seminars

• 欠席時はスクリーンキャストで補完できます :) → 詳細: http://railstutorial.jp/screencasts

• アンケートのご回答に協力くださいコメント欄にURLを貼付けます :-) ※ アンケートに回答を送信すると, 特典動画の情報が表示されます.

Page 51: Rails解説セミナー 第5章

第5章 レイアウトを作成する #Railsチュートリアル

http://railstutorial.jp/

Rails解説セミナー

by ヤスラボ

Ruby on Rails チュートリアル 実例を使ってRailsを学ぼう

Michael Hartl (マイケル・ハートル)