More Related Content Similar to ブラウザだけで学ぶWebアプリ開発【デザイン編】
Similar to ブラウザだけで学ぶWebアプリ開発【デザイン編】 (20) More from schoowebcampus (20) ブラウザだけで学ぶWebアプリ開発【デザイン編】11. 前回のやったこと
• Rails のプロジェクトを作成
rails new bookshelf
• bookshelf ディレクトリに移動
cd bookshelf
• 書籍のタイトルと価格を入力、表示する機能を実装
rails g scaffold book title:string price:integer
• データベースのセットアップ
rake db:migrate
12. 前回のやったこと
• Rails のプロジェクトを作成
rails new bookshelf
• bookshelf ディレクトリに移動
cd bookshelf
• 書籍のタイトルと価格を入力、表示する機能を実装
rails g scaffold book title:string price:integer
• データベースのセットアップ
rake db:migrate
• サーバを立ち上げて確認
rails s
13. 前回のやったこと
• Rails のプロジェクトを作成
rails new bookshelf
• bookshelf ディレクトリに移動
cd bookshelf
• 書籍のタイトルと価格を入力、表示する機能を実装
rails g scaffold book title:string price:integer
• データベースのセットアップ
rake db:migrate
• サーバを立ち上げて確認
rails s
• 本番環境(Heroku)に送る
38. よくあるWebアプリ開発での面倒なこと
プログラマー側から見た zip納品 のデメリット
• プログラマーが作ったシステムに、デザイナーが作った静的な
HTML、CSS、Javascript を組み込む手間が発生 デザインを制作
• デザインに変更があった場合、ファイルのどの部分が変わったのか
わかりづらい
• システムと納品された静的な HTML の名前(classなど)が一致し
• HTML
プログラマー
ていないのでわかりづらい • CSS
zip
• Javascript
zip納品
デザイナー
39. よくあるWebアプリ開発での面倒なこと
プログラマー側から見た zip納品 のデメリット
• プログラマーが作ったシステムに、デザイナーが作った静的な
HTML、CSS、Javascript を組み込む手間が発生 デザインを制作
• デザインに変更があった場合、ファイルのどの部分が変わったのか
わかりづらい
• システムと納品された静的な HTML の名前(classなど)が一致し
• HTML
プログラマー
ていないのでわかりづらい • CSS
zip
デザイナー
• Javascript
• ドキュメントを用意したり、要望を伝えたり、デザイナーとのやり
とりに時間がかかる
zip納品
43. よくあるWebアプリ開発での面倒なこと
デザイナー側から見た zip納品 のデメリット
• 実際に動かしてみたらイメージと違った
(あれ?このボタンって思ったよりよく使う)
デザインを制作
• 実際のデータが入ったら想定と違った
(え?ここにこんな長い文章が入るの!)
• デザイナーが提出したデザインと少し違う
• HTML
プログラマー
• CSS
(CSSいじった?勝手なことしないで!)
zip
• Javascript
zip納品
デザイナー
44. よくあるWebアプリ開発での面倒なこと
デザイナー側から見た zip納品 のデメリット
• 実際に動かしてみたらイメージと違った
(あれ?このボタンって思ったよりよく使う)
デザインを制作
• 実際のデータが入ったら想定と違った
(え?ここにこんな長い文章が入るの!)
• デザイナーが提出したデザインと少し違う
• HTML
プログラマー
• CSS
(CSSいじった?勝手なことしないで!)
zip
• Javascript
• プログラマーとのやりとりに時間がかかる
(この仕様書意味わかんない…)
zip納品
デザイナー
91. 前回つくった画面を見てみよう
該当するファイルの探しかた
まずは app/views ディレクトリへ
• 書籍一覧
app/views/books/index.html.erb
URL [xxx.nitrousbox.com/books/] に注目
•
URLにある [/books] と同じ名前のディレクトリを
• 書籍個別 の中から探す
app/views
app/views/books/show.html.erb
• 一覧は index.html.erb
• 書籍編集 show.html.erb
• 詳細は
app/views/books/edit.html.erb
• 編集は edit.html.erb
• 書籍登録 new.html.erb
• 登録は
app/views/books/new.html.erb
107. 今回はルールの例として BEM を紹介
• B ブロック、E エレメント、M モディファイア の頭文字 を
連結したものを class名にする
class =
B__E--M
エレメントの前はアンダースコア2つ
モディファイアの前はハイフン2つ
108. 今回はルールの例として BEM を紹介
• B ブロック、E エレメント、M モディファイア の頭文字 を
連結したものを class名にする
class =
B__E--M
エレメントの前はアンダースコア2つ
モディファイアの前はハイフン2つ
• ブロック → 範囲
• エレメント → その範囲内でのそれが果たす 役割、要素
• モディファイア → そのブロックや要素の 修飾、XXX版
122. フォームの部分はほとんど同じ
編集と登録の共通部分
• edit.html.erb 、new.html.erb 両方のファイルに
<%= render 'form' %> と書かれている部分がある
• <%= render 'form' %> の「 form 」に注目
edit.html.erb 、new.html.erb があるディレクトリに
_form.html.erb があり、それがその部分の該当するファイル
• フォームの部分を編集するには _form.html.erb を編集する
• 共通部分ファイルはファイル名の先頭に
「_(アンダースコア)」が付いている
書籍編集
書籍登録
125. <%= yield %> に注目
app/views/layouts/application.html.erb
126. <%= yield %> に注目
index.html.erb
show.html.erb
edit.html.erb
new.html.erb
<%= yield %> の中に表示されている
135. Rails の CSS の特長
• CSSプリプロセッサの Sass( SCSS記法 - scssファイル )
が採用されている( ファイル名は xxxx.css.scss )
136. Rails の CSS の特長
• CSSプリプロセッサの Sass( SCSS記法 - scssファイル )
が採用されている( ファイル名は xxxx.css.scss )
Sass って何?
CSSが便利に書けるもの
137. Rails の CSS の特長
Sass って何?
• CSSプリプロセッサの Sass(SCSS記法)が採用されている
Sass って何?
くわしくは、
便利にCSSが書けるもの
石本光司先生の授業で
http://schoo.jp/class/228
138. Rails の CSS の特長
• CSSプリプロセッサの Sass( SCSS記法 - scssファイル )
が採用されている( ファイル名は xxxx.css.scss )
• 設定無しで Rails が Sassファイルを CSS に書き出しをしてく
れる
139. Rails の CSS の特長
• CSSプリプロセッサの Sass( SCSS記法 - scssファイル )
が採用されている( ファイル名は xxxx.css.scss )
• 設定無しで Rails が Sassファイルを CSS に書き出しをしてく
れる
• scssファイルを追加する場合は app/assets/stylesheets の
中に入れる
140. Rails の CSS の特長
• CSSプリプロセッサの Sass( SCSS記法 - scssファイル )
が採用されている( ファイル名は xxxx.css.scss )
• 設定無しで Rails が Sassファイルを CSS に書き出しをしてく
れる
• scssファイルを追加する場合は app/assets/stylesheets の
中に入れる
• app/assets/stylesheets の中に入れられた scssファイルは
設定なしで画面に反映される
177. トップページを作りたい
• app/views/ の中に home というディレクトリを作成
• そのディレクトリの中に
index.html.erb というファイルを作成
• app/controllers の中に
home_ controllers.rb というファイルを作成
188. リンクの書きかた
• 本の登録ページ(/new)へのリンク
<%= link_to '本の登録', new_book_path %>
• 本個別ページ(/books/4)ヘのリンク ※eachの中でだけ有効
<%= link_to '詳細', book %>
• 本編集ページ(/books/4/edit)ヘのリンク ※eachの中でだけ有効
<%= link_to '詳細', edit_book_path(book) %>
• トップページ(/)へのリンク
<%= link_to 'トップページ', root_path %>
190. リンクに id class をつけたい
• こう書く
<%= link_to '本の登録', new_book_path, { :class => "new", :id => "new" } %>
class
id
198. 画像に class id をつけたい
• こう書く
<%= image_tag('k.jpg', :alt => "越川さん", :class => kossy , :id => kossy ) %>
class
id
202. リンク付き画像のリンク、画像に
id class をつけたい
• こう書く
画像のclass
<%= link_to image_tag('koshikawa.jpg', :alt => '越川さん', :class => "kossy", :id
=> "kossy"), root_path, :class => "kossy-link", :id => "kossy-link" %>
画像のid
リンクのclass
リンクのid
206. 勝手にcssを読み込まれると困るんですけど
• 対策1 : ファイル名で対応する方法
Rails はアルファベット順に scssファイルを読み込みます。
なので、例えば reset.css.scss は一番始めに読み込ませたいのに、
後のほうに読み込んでしまいます。
アルファベット順に scssファイルを読み込む、というのを利用し
て、 0reset.css.scss と、ファイル名の先頭に数字の「0」を付け
ると一番始めに読み込むようになります。
212. scss の変数や mixin を別ファイルにしたら
エラーが出たのですが…
• assets/stylesheets の中に scssファイルを入れれば、
何の設定もせずに画面に反映されてくれて便利ですが、
ある scssファイルが、別の scssファイルに書かれた変数やmixinを呼び
出すときにエラーが出てしまいます。
213. scss の変数や mixin を別ファイルにしたら
エラーが出たのですが…
app/assets/stylesheets/application.css を
application.css.scss にファイル名を変更
214. scss の変数や mixin を別ファイルにしたら
エラーが出たのですが…
application.css.scss の中身を削除
scssファイルを追加したら自動で画面に反映される機能はなくなります
215. scss の変数や mixin を別ファイルにしたら
エラーが出たのですが…
application.css.scss に @import ファイル名 (拡張子なし)と、
scssファイルの import の設定を任意の順番で書いていきます。
変数や mixin が書かれた scssファイルは、それらを呼び出す scssファイル
の前に import する必要があります。