ブラウザだけで学ぶWebアプリ開発【デザイン編】
自己紹介
自己紹介

• 町田哲平と申します
• 合同会社フィヨルドという会社で
デザイナーをやっています

• Twitter アカウントは @machida
• Facebookは 町田哲平 で検索
• Ruby on Rails で作られた怖い話が...
自己紹介

• 怖い話のサービスだけではなく
企業が使う、メールや Fax や封書
を送るサービス開発のお手伝いも
しています
授業でやること

• 前回の復習
• なんでデザイナーが Webアプリ開発?
• 書籍アプリの HTML を変更
• 書籍アプリの CSS を変更
• 本番環境(Heroku)に送る
前回の復習
1月20日(月)放送「ブラウザだけで学ぶWebアプリ開発【開発編】」
前回のやったこと
前回のやったこと

• Rails のプロジェクトを作成
rails new bookshelf
前回のやったこと

• Rails のプロジェクトを作成
rails new bookshelf

• bookshelf ディレクトリに移動
cd bookshelf
前回のやったこと

• Rails のプロジェクトを作成
rails new bookshelf

• bookshelf ディレクトリに移動
cd bookshelf

• 書籍のタイトルと価格を入力、表示する機能を実装
rails g sc...
前回のやったこと

• Rails のプロジェクトを作成
rails new bookshelf

• bookshelf ディレクトリに移動
cd bookshelf

• 書籍のタイトルと価格を入力、表示する機能を実装
rails g sc...
前回のやったこと

• Rails のプロジェクトを作成
rails new bookshelf

• bookshelf ディレクトリに移動
cd bookshelf

• 書籍のタイトルと価格を入力、表示する機能を実装
rails g sc...
前回のやったこと

• Rails のプロジェクトを作成
rails new bookshelf

• bookshelf ディレクトリに移動
cd bookshelf

• 書籍のタイトルと価格を入力、表示する機能を実装
rails g sc...
今回も Nitrous.IO でサーバを立ちあげます

chrome で https://www.nitrous.io/ を開く

nitrous.io と入力して Enterキー
今回も Nitrous.IO でサーバを立ちあげます

https://www.nitrous.io/
今回も Nitrous.IO でサーバを立ちあげます

メール
パスワード

メールアドレスとパスワードを入力
今回も Nitrous.IO でサーバを立ちあげます

クリック

bookshelf をクリック
今回も Nitrous.IO でサーバを立ちあげます

クリック

Start をクリック
今回も Nitrous.IO でサーバを立ちあげます

クリック

IDE をクリック
今回も Nitrous.IO でサーバを立ちあげます

クリック

Chat は使わないので閉じる
今回も Nitrous.IO でサーバを立ちあげます

コンソールに cd bookshelf と入力し、Enter
bookshelf ディレクトリに移動
今回も Nitrous.IO でサーバを立ちあげます

コンソールに rails s と入力し、Enter
サーバを起動
今回も Nitrous.IO でサーバを立ちあげます

Preview をクリック、Port 3000 を選択
今回も Nitrous.IO でサーバを立ちあげます

xxxxx.nitrousbox.com/books にアクセス
今回も Nitrous.IO でサーバを立ちあげます

Nitrouns.IO

Preview

Chrome のタブは Nitrous.IO と Preview
両方開いたままで作業を進めます
今回も Nitrous.IO でサーバを立ちあげます

Nitrouns.IO

Preview

準備完了!

Chrome のタブは Nitrous.IO と Preview
両方開いたままで作業を進めます
今回も Nitrous.IO でサーバを立ちあげます
お願い
前回作った書籍登録アプリに 書籍を10冊 登録しておいてください

登録するデータは、
Nitrouns.IO Preview

title : あああああああ
price :準備完...
なんでデザイナーが
Webアプリ開発?
よくあるWebアプリ開発での面倒なこと
よくあるWebアプリ開発での面倒なこと

デザインを発注

プログラマー

デザイナー
よくあるWebアプリ開発での面倒なこと

デザインを発注

プログラマー

• ワイヤフレーム
• 仕様書
• (プロトタイプ)
ドキュメント中心

デザイナー
よくあるWebアプリ開発での面倒なこと

デザインを制作

プログラマー

デザイナー
よくあるWebアプリ開発での面倒なこと

デザインを制作

プログラマー
zip

• HTML
• CSS
• Javascript
静的ファイル

デザイナー
よくあるWebアプリ開発での面倒なこと

デザインを制作

zip納品

プログラマー
zip

• HTML
• CSS
• Javascript
静的ファイル

デザイナー
よくあるWebアプリ開発での面倒なこと
プログラマー側から見た zip納品 のデメリット

デザインを制作

プログラマー
zip

• HTML
• CSS
• Javascript

zip納品

デザイナー
よくあるWebアプリ開発での面倒なこと
プログラマー側から見た zip納品 のデメリット

• プログラマーが作ったシステムに、デザイナーが作った静的な
HTML、CSS、Javascript を組み込む手間が発生 デザインを制作

プログラマ...
よくあるWebアプリ開発での面倒なこと
プログラマー側から見た zip納品 のデメリット

• プログラマーが作ったシステムに、デザイナーが作った静的な
HTML、CSS、Javascript を組み込む手間が発生 デザインを制作

• デザイ...
よくあるWebアプリ開発での面倒なこと
プログラマー側から見た zip納品 のデメリット

• プログラマーが作ったシステムに、デザイナーが作った静的な
HTML、CSS、Javascript を組み込む手間が発生 デザインを制作

• デザイ...
よくあるWebアプリ開発での面倒なこと
プログラマー側から見た zip納品 のデメリット

• プログラマーが作ったシステムに、デザイナーが作った静的な
HTML、CSS、Javascript を組み込む手間が発生 デザインを制作

• デザイ...
よくあるWebアプリ開発での面倒なこと
デザイナー側から見た zip納品 のデメリット

デザインを制作

プログラマー
zip

• HTML
• CSS
• Javascript

zip納品

デザイナー
よくあるWebアプリ開発での面倒なこと
デザイナー側から見た zip納品 のデメリット

• 実際に動かしてみたらイメージと違った
(あれ?このボタンって思ったよりよく使う)

プログラマー
zip

• HTML
• CSS
• Javasc...
よくあるWebアプリ開発での面倒なこと
デザイナー側から見た zip納品 のデメリット

• 実際に動かしてみたらイメージと違った
(あれ?このボタンって思ったよりよく使う)

デザインを制作

• 実際のデータが入ったら想定と違った
(え?こ...
よくあるWebアプリ開発での面倒なこと
デザイナー側から見た zip納品 のデメリット

• 実際に動かしてみたらイメージと違った
(あれ?このボタンって思ったよりよく使う)

デザインを制作

• 実際のデータが入ったら想定と違った
(え?こ...
よくあるWebアプリ開発での面倒なこと
デザイナー側から見た zip納品 のデメリット

• 実際に動かしてみたらイメージと違った
(あれ?このボタンって思ったよりよく使う)

デザインを制作

• 実際のデータが入ったら想定と違った
(え?こ...
これらのデメリットを解消するには?
これらのデメリットを解消するには?

デザイナーが直接システムに
デザインを入れればいい
これらのデメリットを解消するには?

デザイナーが直接システムに
デザインを入れればいい
脱zip納品
さきほどの例で挙げた開発

デザイナー

システム開発チーム

デザインを発注

デザイナーはシステム開発チームの外
デザイナーも開発チームの一員に

システム開発チーム

デザイナーもシステム開発チームの中へ
デザイナーが開発チームに入ったら
デザイナーが開発チームに入ったら

会員登録機能できましたー
デザイナーが開発チームに入ったら

会員登録機能できましたー

お疲れ様ですー 見てみます
Facebookアカウントでワンクリック登録できるんですね。便利!
デザイナーが開発チームに入ったら

会員登録機能できましたー

お疲れ様ですー 見てみます
Facebookアカウントでワンクリック登録できるんですね。便利!

うーん… 会員登録ページへ遷移するの面倒っすね、
トップページから登録できるにした...
デザイナーが開発チームに入ったら

会員登録機能できましたー

お疲れ様ですー 見てみます
Facebookアカウントでワンクリック登録できるんですね。便利!

うーん… 会員登録ページへ遷移するの面倒っすね、
トップページから登録できるにした...
デザイナーが開発チームに入ったら

会員登録機能できましたー

お疲れ様ですー 見てみます
Facebookアカウントでワンクリック登録できるんですね。便利!

うーん… 会員登録ページへ遷移するの面倒っすね、
トップページから登録できるにした...
デザイナーが開発チームに入ったら
開発がこのようになる
会員登録機能できましたー

お疲れ様ですー 見てみます

うーん… 会員登録ページへ遷移するの面倒っすね、
トップページから登録できるにしたいですねー

なるほどー、確かに…
では、トップ...
デザイナーが開発チームに入ったら
開発がこのようになる
•

動くものを目の前にしているので必要なドキュメントや
会員登録機能できましたー
打ち合わせが減る
お疲れ様ですー 見てみます
お疲れ様ですー 見てみます
Facebookアカウントでワ...
デザイナーが開発チームに入ったら
開発がこのようになる
•

動くものを目の前にしているので必要なドキュメントや
会員登録機能できましたー
打ち合わせが減る

•

動くものを触りながら作るので、
お疲れ様ですー 見てみます
より実際に使うユー...
デザイナーが開発チームに入ったら
開発がこのようになる
•

動くものを目の前にしているので必要なドキュメントや
会員登録機能できましたー
打ち合わせが減る

•

動くものを触りながら作るので、
お疲れ様ですー 見てみます
より実際に使うユー...
デザイナーが開発チームに入ったら
開発がこのようになる
•

動くものを目の前にしているので必要なドキュメントや
会員登録機能できましたー
打ち合わせが減る

•

動くものを触りながら作るので、
お疲れ様ですー 見てみます
より実際に使うユー...
デザイナーが開発チームに入ったら
開発がこのようになる
•

動くものを目の前にしているので必要なドキュメントや
会員登録機能できましたー
打ち合わせが減る

•

動くものを触りながら作るので、
お疲れ様ですー 見てみます
より実際に使うユー...
開発チームに入るのに必要な3つのスキル
開発チームに入るのに必要な3つのスキル

• 開発環境構築
… 手元でシステムを立ち上げる(黒い画面)
開発チームに入るのに必要な3つのスキル

• 開発環境構築
… 手元でシステムを立ち上げる(黒い画面)

• バージョン管理
… Git、Subversionなど
開発チームに入るのに必要な3つのスキル

• 開発環境構築
… 手元でシステムを立ち上げる(黒い画面)

• バージョン管理
… Git、Subversionなど

• 言語とフレームワーク
… Ruby、Python、PHP、
Ruby on...
開発チームに入るのに必要な3つのスキル
うわ、大変…

• 黒い画面のスキル
… 手元でシステムを立ち上げる

• バージョン管理のスキル
… Git、Subversionなど

• 言語とフレームワークのスキル
… Ruby、Python、P...
開発チームに入るのに必要な3つのスキル
うわ、大変…

• 黒い画面のスキル
…わからないことを教えるほうが
手元でシステムを立ち上げる
zip納品より全然効率的

• バージョン管理のスキル
… Git、Subversionなど

• 言語と...
開発チームに入るのに必要な3つのスキル
うわ、大変…

• 黒い画面のスキル
…わからないことを教えるほうが
手元でシステムを立ち上げる
zip納品より全然効率的

わからないことはチームの
プログラマーに聞けばOK

• バージョン管理のスキ...
開発チームに入るのに必要な3つのスキル
うわ、大変…

• 黒い画面のスキル
…わからないことを教えるほうが
手元でシステムを立ち上げる
zip納品より全然効率的

わからないことはチームの
プログラマーに聞けばOK

• バージョン管理のスキ...
今回の授業のテーマ
今回の授業のテーマ
前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは
どのようにデザインを入れていくかをバーチャル体験してみよう、
という授業を行います
今回の授業のテーマ
前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは
どのようにデザインを入れていくかをバーチャル体験してみよう、
という授業を行います

書籍の一覧、個別の表示、書籍登録、編集、
削除の機能を実装したので...
今回の授業のテーマ
前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは
どのようにデザインを入れていくかをバーチャル体験してみよう、
という授業を行います

書籍の一覧、個別の表示、書籍登録、編集、
削除の機能を実装したので...
今回の授業のテーマ
前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは
どのようにデザインを入れていくかをバーチャル体験してみよう、
という授業を行います

書籍の一覧、個別の表示、書籍登録、編集、
削除の機能を実装したので...
今回の授業のテーマ
3つのスキルなんて、ないんですけど…

前回までの作業をエンジニアが行った仕事として、
それにデザイナーはどのようにデザインを入れていくかを
バーチャル体験してみよう、という授業を行います

本を登録、一覧、編集、削除の
機...
今回の授業のテーマ
3つのスキルなんて、ないんですけど…

• 開発環境構築
前回までの作業をエンジニアが行った仕事として、
それにデザイナーはどのようにデザインを入れていくかを
バーチャル体験してみよう、という授業を行います
バージョン管理
...
今回の授業のテーマ
3つのスキルなんて、ないんですけど…

• 開発環境構築
前回までの作業をエンジニアが行った仕事として、
Nitrous.IO
それにデザイナーはどのようにデザインを入れていくかを
バーチャル体験してみよう、という授業を行い...
今回の授業のテーマ
3つのスキルなんて、ないんですけど…

• 開発環境構築
前回までの作業をエンジニアが行った仕事として、
Nitrous.IO
それにデザイナーはどのようにデザインを入れていくかを
バーチャル体験してみよう、という授業を行い...
今回の授業のテーマ
3つのスキルなんて、ないんですけど…

• 開発環境構築
前回までの作業をエンジニアが行った仕事として、
Nitrous.IO
それにデザイナーはどのようにデザインを入れていくかを
バーチャル体験してみよう、という授業を行い...
今回の授業のテーマ
3つのスキルなんて、ないんですけど…

• 開発環境構築
前回までの作業をエンジニアが行った仕事として、
前回の授業で

Nitrous.IO
それにデザイナーはどのようにデザインを入れていくかを
すでにやってるので
バーチ...
前回つくった画面を見てみよう
前回つくった画面を見てみよう

書籍一覧( /books )
前回つくった画面を見てみよう

書籍個別( /books/1 )
前回つくった画面を見てみよう

書籍編集( /books/1/edit )
前回つくった画面を見てみよう

書籍登録( /books/new )
前回つくった画面を見てみよう

これらのページの HTML と CSS をカスタマイズ

書籍登録( /books/new )
いよいよ実践
前回作ったアプリにデザインを入れていきます。
HTMLを変更する
どのファイルを変更する?

• 書籍一覧
• 書籍個別
• 書籍編集
• 書籍登録
どのファイルを変更する?

• 書籍一覧
app/views/books/index.html.erb

• 書籍個別
app/views/books/show.html.erb

• 書籍編集
app/views/books/edit.htm...
前回つくった画面を見てみよう
該当するファイルの探しかた
まずは app/views ディレクトリへ
• 書籍一覧
app/views/books/index.html.erb
URL [xxx.nitrousbox.com/books/] に...
践

実

書籍一覧のHTMLを
変更してみよう
app/views/books/index.html.erb を編集
践

実

app/views/books/index.html.erb を開く
践

実

このマークアップを変更します
践

実

チームで開発するときはマークアップの
ルールがあると便利

このマークアップを変更します
践

実

チームで開発するときはマークアップの
ルールがあると便利

• ルールがあれば、チームメンバーの誰が書いても同じマークア
ップになる

• 新しくチームに入ったメンバーも、そのルールを理解すれば
同じようにマークアップができるように...
践

実

チームで開発するときはマークアップの
ルールがあると便利

• ルールがあれば、チームメンバーの誰が書いても同じマークア
ップになる

• 新しくチームに入ったメンバーも、そのルールを理解すれば
同じようにマークアップができるように...
マークアップのルールがあると…
マークアップのルールがあると…

書籍登録機能できましたー
マークアップのルールがあると…

書籍登録機能できましたー

ありがとうございますー
では、まずはデザインを入れるためにHTMLの編集から…
マークアップのルールがあると…

書籍登録機能できましたー

ありがとうございますー
では、まずはデザインを入れるためにHTMLの編集から…

あっ、マークアップやっておいてくれたんですね!
自分がこうしようと思ってたマークアップがすでにされて...
マークアップのルールがあると…

書籍登録機能できましたー

ありがとうございますー
では、まずはデザインを入れるためにHTMLの編集から…

あっ、マークアップやっておいてくれたんですね!
自分がこうしようと思ってたマークアップがすでにされて...
マークアップのルールがあると…

書籍登録機能できましたー

ありがとうございますー
では、まずはデザインを入れるためにHTMLの編集から…

あっ、マークアップやっておいてくれたんですね!
自分がこうしようと思ってたマークアップがすでにされて...
マークアップのルールがあると…

書籍登録機能できましたー

ありがとうございますー
では、まずはデザインを入れるためにHTMLの編集から…

あっ、マークアップやっておいてくれたんですね!
自分がこうしようと思ってたマークアップがすでにされて...
今回はルールの例として BEM を紹介
今回はルールの例として BEM を紹介

• B ブロック、E エレメント、M モディファイア の頭文字 を
連結したものを class名にする

class =

B__E--M
今回はルールの例として BEM を紹介

• B ブロック、E エレメント、M モディファイア の頭文字 を
連結したものを class名にする

class =

B__E--M

エレメントの前はアンダースコア2つ

モディファイアの前はハ...
今回はルールの例として BEM を紹介

• B ブロック、E エレメント、M モディファイア の頭文字 を
連結したものを class名にする

class =

B__E--M

エレメントの前はアンダースコア2つ

モディファイアの前はハ...
今回はルールの例として BEM を紹介

/books 書籍一覧
今回はルールの例として BEM を紹介

bookというブロック

class =

book
今回はルールの例として BEM を紹介

book というブロック内の
title という要素

class =

book _ _ title
今回はルールの例として BEM を紹介

book というブロック内の
action という要素の
edit 版

class =

book _ _ action - - edit
今回はルールの例として BEM を紹介

book というブロック内の
action という要素の
edit 版

っていうのが BEM

class =

book _ _ action - - edit
践

実

実際にBEMでマークアップしてみます
践

実

こうなったら正解
書籍編集と書籍登録の
共通部分
app/views/books/edit.html.erb
と
app/views/books/new.html.erb
書籍編集( /books/1/edit )
書籍登録( /books/new )
フォームの部分はほとんど同じ

書籍編集

書籍登録
フォームの部分はほとんど同じ
書籍編集
app/views/books/edit.html.erb

書籍登録
app/views/books/new.html.erb
フォームの部分はほとんど同じ
書籍編集
app/views/books/edit.html.erb

書籍登録
app/views/books/new.html.erb

<%= render form %>
フォームの部分はほとんど同じ
編集と登録の共通部分

• edit.html.erb 、new.html.erb 両方のファイルに
<%= render 'form' %> と書かれている部分がある

• <%= render 'form' %...
践

実

フォームの部分を編集するには

このファイルを編集する
app/views/books/_form.html.erb

このファイルを編集してフォームの部分が
変わったかを確認してみます
サイト全体の共通部分
app/views/layouts/application.html.erb
<%= yield %> に注目

app/views/layouts/application.html.erb
<%= yield %> に注目

index.html.erb

show.html.erb

edit.html.erb

new.html.erb

<%= yield %> の中に表示されている
books/index.html.erb

application.html.erb
books/index.html.erb

application.html.erb

全ページ共通部品は layouts/application.html.erb に書く

• ヘッダー
• フッター
• サイドナビ
践

実

ヘッダを追加してみよう
app/views/layouts/application.html.erb
践

実

ここにヘッダの HTML を書く

app/views/layouts/application.html.erb
践

実

ヘッダの HTML

実際にヘッダを追加してみます
践

実

こうなったら正解
CSSを変更する
Rails の CSS の特長
Rails の CSS の特長

• CSSプリプロセッサの Sass( SCSS記法 - scssファイル )
が採用されている( ファイル名は xxxx.css.scss )
Rails の CSS の特長

• CSSプリプロセッサの Sass( SCSS記法 - scssファイル )
が採用されている( ファイル名は xxxx.css.scss )

Sass って何?

CSSが便利に書けるもの
Rails の CSS の特長
Sass って何?

• CSSプリプロセッサの Sass(SCSS記法)が採用されている
Sass って何?

くわしくは、
便利にCSSが書けるもの
石本光司先生の授業で
http://schoo.jp/cl...
Rails の CSS の特長

• CSSプリプロセッサの Sass( SCSS記法 - scssファイル )
が採用されている( ファイル名は xxxx.css.scss )

• 設定無しで Rails が Sassファイルを CSS に...
Rails の CSS の特長

• CSSプリプロセッサの Sass( SCSS記法 - scssファイル )
が採用されている( ファイル名は xxxx.css.scss )

• 設定無しで Rails が Sassファイルを CSS に...
Rails の CSS の特長

• CSSプリプロセッサの Sass( SCSS記法 - scssファイル )
が採用されている( ファイル名は xxxx.css.scss )

• 設定無しで Rails が Sassファイルを CSS に...
践

実

Railsにデザインを
入れる準備
app/assets/stylesheets/scaffold.css.scss を削除
践

実

scaffolds.css.scss

app/assets/styledheets/scaffolds.css.scss
践

実

scaffolds.css.scss
scaffolds.css.scss

app/assets/styledheets/scaffolds.css.scss
践

実

scaffolds.css.scss
scaffolds.css.scss

• scaffolds.css.scss とは、Rails が自動で生成してくれた最低
限のスタイルが入った scssファイル

app/assets/styl...
践

実

scaffolds.css.scss
scaffolds.css.scss

• scaffolds.css.scss とは、Rails が自動で生成してくれた最低
限のスタイルが入った scssファイル

• 自分でデザインを入れる際、...
践

実

scaffolds.css.scss 削除

app/assets/styledheets/scaffolds.css.scss の上で右クリック
践

実

scaffolds.css.scss 削除

Delete scaffolds.css.scss を選択
践

実

scaffolds.css.scss 削除

こうなったら正解
践

実

ヘッダ用のscssファイル
を追加してみよう
app/assets/stylesheets/ の中にファイルを追加
践

実

ヘッダ用の SCSS を追加

app/assets/styledheets の上で右クリック
践

実

ヘッダ用の SCSS を追加

New File をクリック
践

実

ヘッダ用の SCSS を追加

header.css.scss という名前を入力
践

実

ヘッダ用の SCSS を追加

app/assets/styledheets/header.css.scss を編集
践

実

こうなったら正解
践

実

こうなったら正解

ディレクトリに追加するだけで header.css.scss を反映してくれた
践

実

books用のSCSSを
編集してみよう
すでに用意されてる
app/assets/stylesheets/books.css.scss
を変更
践

実

books用 の scss を用意しました

http://bit.ly/s-0130
chrome のタブを一つ開いてここにアクセス
践

実

http://bit.ly/s-0130
践

実

http://bit.ly/s-0130

全部コピー
践

実

app/assets/stylesheets/books.css.scss

開く
践

実

app/assets/stylesheets/books.css.scss

貼り付け
践

実

こうなったら正解
践

実

こうなったら正解

今回はコピペでしたが、自分で books.css.scss をいじって
デザインに挑戦してみてください
書籍一覧のデザインができた
書籍一覧のデザインができた

書籍一覧ページのデザインができましたので、
今から Heroku に送って見れるようにしますー
書籍一覧のデザインができた

書籍一覧ページのデザインができましたので、
今から Heroku に送って見れるようにしますー

お疲れ様ですー
デザイン超楽しみです!
書籍一覧のデザインができた

書籍一覧ページのデザインができましたので、
今から Heroku に送って見れるようにしますー

お疲れ様ですー
デザイン超楽しみです!

ぬおー プレッシャーかけてきた!!
践

実

ここまで作業したものを
本番環境に送る
ここまで作業したRailsプロジェクトを Heroku に送ります
践

実

コンソールで作業

コンソールをクリック
践

実

コンソールで作業

ここがアクティブになっているのを確認
(白い四角)
践

実

コンソールで作業

ここがアクティブになっているのを確認
(白い四角)

control + c を押してサーバをストップ
践

実

Heroku に送る
上から一行ずつコンソールにコマンドを入力

heroku login

•

メールアドレス

•

パスワード

git add --all
git commit -m“Design”
git push he...
践

実

Heroku に送る
上から一行ずつコンソールにコマンドを入力

heroku login

•

メールアドレス

•

パスワード

git add .
ブラウザで Heroku 上の bookshelf を確認

git co...
以上で終了です

ブラウザだけで学ぶWebアプリ開発【デザイン編】
補足説明
トップページを作りたい
トップページを作りたい

• app/views/ の中に home というディレクトリを作成
• そのディレクトリの中に
index.html.erb というファイルを作成

• app/controllers の中に
home_ contr...
トップページを作りたい

home_controller.rb にこう書く
トップページを作りたい

config/routes.rb の root の部分をこう書き換える
フォームのラベルを日本語にしたい
フォームのラベルを日本語にしたい

• app/views/books/_form.html.erb を開く
フォームのラベルを日本語にしたい

• app/views/books/_form.html.erb をこう編集する
フォームのボタンを日本語にしたい
フォームのボタンを日本語にしたい

• config/locales/ に ja.yaml というファイルを作成し、追加
フォームのボタンを日本語にしたい

• config/locales/ に ja.yaml にこう書く
フォームのボタンを日本語にしたい

• config/application.rb にこう書く

ここまでやったら rails サーバを再起動
リンクの書きかた
リンクの書きかた

• 本の登録ページ(/new)へのリンク
<%= link_to '本の登録', new_book_path %>

• 本個別ページ(/books/4)ヘのリンク ※eachの中でだけ有効
<%= link_to '詳細'...
リンクに id class をつけたい
リンクに id class をつけたい
• こう書く
<%= link_to '本の登録', new_book_path, { :class => "new", :id => "new" } %>

class

id
リンクの中にタグを入れたい
リンクの中にタグを入れたい

• こう書く
<%= link_to root_path do %>
<span>トップページ</span>
<% end %>
画像の追加方法
画像の追加方法

• app/assets/images ディレクトリの上で右クリック

Upload File to images を選択
画像の追加方法

• ここに画像をドラッグ アンド ドロップ
画像の追加方法

• こう書く
<%= image_tag('koshikawa.jpg', :alt => "越川さんの写真") %>

画像へのパス
assets/images/画像ファイル
の場合は、画像名のみ書く
asstes/imag...
画像に class id をつけたい
画像に class id をつけたい

• こう書く
<%= image_tag('k.jpg', :alt => "越川さん", :class => kossy , :id => kossy ) %>

class

id
画像をリンクにしたい
画像をリンクにしたい

• こう書く
<%= link_to image_tag('koshikawa.jpg', :alt => '越川さん'), root_path %>

画像ファイル

alt

リンク先
リンク付き画像のリンク、画像に
id class をつけたい
リンク付き画像のリンク、画像に
id class をつけたい

• こう書く

画像のclass

<%= link_to image_tag('koshikawa.jpg', :alt => '越川さん', :class => "kossy"...
勝手にcssを読み込まれると困るんですけど
勝手にcssを読み込まれると困るんですけど

• assets/stylesheets の中に scssファイルを入れれば、何の設定もせず
に画面に反映されてくれて便利ですが、reset のためのファイルなど、
こちらの意図した順番で scss...
勝手にcssを読み込まれると困るんですけど

• 対策1 : ファイル名で対応する方法
勝手にcssを読み込まれると困るんですけど

• 対策1 : ファイル名で対応する方法
Rails はアルファベット順に scssファイルを読み込みます。
なので、例えば reset.css.scss は一番始めに読み込ませたいのに、
後のほう...
勝手にcssを読み込まれると困るんですけど

• 対策2 : 自分で一つ一つファイルを読み込む設定を書く
勝手にcssを読み込まれると困るんですけど

• 対策2 : 自分で一つ一つファイルを読み込む設定を書く

app/assets/stylesheets/application.css を開く
勝手にcssを読み込まれると困るんですけど

• 対策2 : 自分で一つ一つファイルを読み込む設定を書く

「 *= require_tree . 」 を削除
勝手にcssを読み込まれると困るんですけど

• 対策2 : 自分で一つ一つファイルを読み込む設定を書く

*= require ファイル名 を任意の順番で書く(拡張子は不要)
scss の変数や mixin を別ファイルにしたら
エラーが出たのですが…
scss の変数や mixin を別ファイルにしたら
エラーが出たのですが…

• assets/stylesheets の中に scssファイルを入れれば、
何の設定もせずに画面に反映されてくれて便利ですが、
ある scssファイルが、別の ...
scss の変数や mixin を別ファイルにしたら
エラーが出たのですが…

app/assets/stylesheets/application.css を
application.css.scss にファイル名を変更
scss の変数や mixin を別ファイルにしたら
エラーが出たのですが…

application.css.scss の中身を削除
scssファイルを追加したら自動で画面に反映される機能はなくなります
scss の変数や mixin を別ファイルにしたら
エラーが出たのですが…

application.css.scss に @import ファイル名 (拡張子なし)と、
scssファイルの import の設定を任意の順番で書いていきます。...
compass を使いたい
compass を使いたい

Gemfileに gem 'compass-rails' と書き足します。
書き足したら、コンソールで bundle コマンドを入力。
サーバを再起動。
compass を使いたい

application.css.scss に compass の import の設定を書きます。
(application.css を scss に変更する手順は「scss の変数や mixin を
別ファイルに...
Heroku にアップするための設定
Heroku にアップするための設定

ruby '2.0.0'
group :development, :test do
gem 'sqlite3'
end
group :production do
gem 'pg'
gem 'rails_1...
Heroku にアップするための設定

git config --global user.email xxx@xxx.jp
git config --global user.name name

コンソールに一行ずつ入力
Heroku にアップするための設定

git init
git add --all
git commit -m“作業内容メモ”

コンソールに一行ずつ入力
Heroku にアップするための設定
heroku login

メールアドレスとパスワードを入力

heroku keys:add ~/.ssh/id_rsa.pub
heroku create
git push heroku master
...
Upcoming SlideShare
Loading in …5
×

ブラウザだけで学ぶWebアプリ開発【デザイン編】

1,906 views

Published on

schoo WEB-campus
http://schoo.jp/class/381

Published in: Business
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,906
On SlideShare
0
From Embeds
0
Number of Embeds
409
Actions
Shares
0
Downloads
21
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

ブラウザだけで学ぶWebアプリ開発【デザイン編】

  1. 1. ブラウザだけで学ぶWebアプリ開発【デザイン編】
  2. 2. 自己紹介
  3. 3. 自己紹介 • 町田哲平と申します • 合同会社フィヨルドという会社で デザイナーをやっています • Twitter アカウントは @machida • Facebookは 町田哲平 で検索 • Ruby on Rails で作られた怖い話が読める サービス「怖話」を運営しています
  4. 4. 自己紹介 • 怖い話のサービスだけではなく 企業が使う、メールや Fax や封書 を送るサービス開発のお手伝いも しています
  5. 5. 授業でやること • 前回の復習 • なんでデザイナーが Webアプリ開発? • 書籍アプリの HTML を変更 • 書籍アプリの CSS を変更 • 本番環境(Heroku)に送る
  6. 6. 前回の復習 1月20日(月)放送「ブラウザだけで学ぶWebアプリ開発【開発編】」
  7. 7. 前回のやったこと
  8. 8. 前回のやったこと • Rails のプロジェクトを作成 rails new bookshelf
  9. 9. 前回のやったこと • Rails のプロジェクトを作成 rails new bookshelf • bookshelf ディレクトリに移動 cd bookshelf
  10. 10. 前回のやったこと • Rails のプロジェクトを作成 rails new bookshelf • bookshelf ディレクトリに移動 cd bookshelf • 書籍のタイトルと価格を入力、表示する機能を実装 rails g scaffold book title:string price:integer
  11. 11. 前回のやったこと • Rails のプロジェクトを作成 rails new bookshelf • bookshelf ディレクトリに移動 cd bookshelf • 書籍のタイトルと価格を入力、表示する機能を実装 rails g scaffold book title:string price:integer • データベースのセットアップ rake db:migrate
  12. 12. 前回のやったこと • Rails のプロジェクトを作成 rails new bookshelf • bookshelf ディレクトリに移動 cd bookshelf • 書籍のタイトルと価格を入力、表示する機能を実装 rails g scaffold book title:string price:integer • データベースのセットアップ rake db:migrate • サーバを立ち上げて確認 rails s
  13. 13. 前回のやったこと • Rails のプロジェクトを作成 rails new bookshelf • bookshelf ディレクトリに移動 cd bookshelf • 書籍のタイトルと価格を入力、表示する機能を実装 rails g scaffold book title:string price:integer • データベースのセットアップ rake db:migrate • サーバを立ち上げて確認 rails s • 本番環境(Heroku)に送る
  14. 14. 今回も Nitrous.IO でサーバを立ちあげます chrome で https://www.nitrous.io/ を開く nitrous.io と入力して Enterキー
  15. 15. 今回も Nitrous.IO でサーバを立ちあげます https://www.nitrous.io/
  16. 16. 今回も Nitrous.IO でサーバを立ちあげます メール パスワード メールアドレスとパスワードを入力
  17. 17. 今回も Nitrous.IO でサーバを立ちあげます クリック bookshelf をクリック
  18. 18. 今回も Nitrous.IO でサーバを立ちあげます クリック Start をクリック
  19. 19. 今回も Nitrous.IO でサーバを立ちあげます クリック IDE をクリック
  20. 20. 今回も Nitrous.IO でサーバを立ちあげます クリック Chat は使わないので閉じる
  21. 21. 今回も Nitrous.IO でサーバを立ちあげます コンソールに cd bookshelf と入力し、Enter bookshelf ディレクトリに移動
  22. 22. 今回も Nitrous.IO でサーバを立ちあげます コンソールに rails s と入力し、Enter サーバを起動
  23. 23. 今回も Nitrous.IO でサーバを立ちあげます Preview をクリック、Port 3000 を選択
  24. 24. 今回も Nitrous.IO でサーバを立ちあげます xxxxx.nitrousbox.com/books にアクセス
  25. 25. 今回も Nitrous.IO でサーバを立ちあげます Nitrouns.IO Preview Chrome のタブは Nitrous.IO と Preview 両方開いたままで作業を進めます
  26. 26. 今回も Nitrous.IO でサーバを立ちあげます Nitrouns.IO Preview 準備完了! Chrome のタブは Nitrous.IO と Preview 両方開いたままで作業を進めます
  27. 27. 今回も Nitrous.IO でサーバを立ちあげます お願い 前回作った書籍登録アプリに 書籍を10冊 登録しておいてください 登録するデータは、 Nitrouns.IO Preview title : あああああああ price :準備完了! 100 みたいな感じで適当でOKです Chrome のタブは Nitrous.IO と Preview 両方開いたままで作業を進めます
  28. 28. なんでデザイナーが Webアプリ開発?
  29. 29. よくあるWebアプリ開発での面倒なこと
  30. 30. よくあるWebアプリ開発での面倒なこと デザインを発注 プログラマー デザイナー
  31. 31. よくあるWebアプリ開発での面倒なこと デザインを発注 プログラマー • ワイヤフレーム • 仕様書 • (プロトタイプ) ドキュメント中心 デザイナー
  32. 32. よくあるWebアプリ開発での面倒なこと デザインを制作 プログラマー デザイナー
  33. 33. よくあるWebアプリ開発での面倒なこと デザインを制作 プログラマー zip • HTML • CSS • Javascript 静的ファイル デザイナー
  34. 34. よくあるWebアプリ開発での面倒なこと デザインを制作 zip納品 プログラマー zip • HTML • CSS • Javascript 静的ファイル デザイナー
  35. 35. よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット デザインを制作 プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
  36. 36. よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット • プログラマーが作ったシステムに、デザイナーが作った静的な HTML、CSS、Javascript を組み込む手間が発生 デザインを制作 プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
  37. 37. よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット • プログラマーが作ったシステムに、デザイナーが作った静的な HTML、CSS、Javascript を組み込む手間が発生 デザインを制作 • デザインに変更があった場合、ファイルのどの部分が変わったのか わかりづらい プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
  38. 38. よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット • プログラマーが作ったシステムに、デザイナーが作った静的な HTML、CSS、Javascript を組み込む手間が発生 デザインを制作 • デザインに変更があった場合、ファイルのどの部分が変わったのか わかりづらい • システムと納品された静的な HTML の名前(classなど)が一致し • HTML プログラマー ていないのでわかりづらい • CSS zip • Javascript zip納品 デザイナー
  39. 39. よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット • プログラマーが作ったシステムに、デザイナーが作った静的な HTML、CSS、Javascript を組み込む手間が発生 デザインを制作 • デザインに変更があった場合、ファイルのどの部分が変わったのか わかりづらい • システムと納品された静的な HTML の名前(classなど)が一致し • HTML プログラマー ていないのでわかりづらい • CSS zip デザイナー • Javascript • ドキュメントを用意したり、要望を伝えたり、デザイナーとのやり とりに時間がかかる zip納品
  40. 40. よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット デザインを制作 プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
  41. 41. よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット • 実際に動かしてみたらイメージと違った (あれ?このボタンって思ったよりよく使う) プログラマー zip • HTML • CSS • Javascript zip納品 デザインを制作 デザイナー
  42. 42. よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット • 実際に動かしてみたらイメージと違った (あれ?このボタンって思ったよりよく使う) デザインを制作 • 実際のデータが入ったら想定と違った (え?ここにこんな長い文章が入るの!) プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
  43. 43. よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット • 実際に動かしてみたらイメージと違った (あれ?このボタンって思ったよりよく使う) デザインを制作 • 実際のデータが入ったら想定と違った (え?ここにこんな長い文章が入るの!) • デザイナーが提出したデザインと少し違う • HTML プログラマー • CSS (CSSいじった?勝手なことしないで!) zip • Javascript zip納品 デザイナー
  44. 44. よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット • 実際に動かしてみたらイメージと違った (あれ?このボタンって思ったよりよく使う) デザインを制作 • 実際のデータが入ったら想定と違った (え?ここにこんな長い文章が入るの!) • デザイナーが提出したデザインと少し違う • HTML プログラマー • CSS (CSSいじった?勝手なことしないで!) zip • Javascript • プログラマーとのやりとりに時間がかかる (この仕様書意味わかんない…) zip納品 デザイナー
  45. 45. これらのデメリットを解消するには?
  46. 46. これらのデメリットを解消するには? デザイナーが直接システムに デザインを入れればいい
  47. 47. これらのデメリットを解消するには? デザイナーが直接システムに デザインを入れればいい 脱zip納品
  48. 48. さきほどの例で挙げた開発 デザイナー システム開発チーム デザインを発注 デザイナーはシステム開発チームの外
  49. 49. デザイナーも開発チームの一員に システム開発チーム デザイナーもシステム開発チームの中へ
  50. 50. デザイナーが開発チームに入ったら
  51. 51. デザイナーが開発チームに入ったら 会員登録機能できましたー
  52. 52. デザイナーが開発チームに入ったら 会員登録機能できましたー お疲れ様ですー 見てみます Facebookアカウントでワンクリック登録できるんですね。便利!
  53. 53. デザイナーが開発チームに入ったら 会員登録機能できましたー お疲れ様ですー 見てみます Facebookアカウントでワンクリック登録できるんですね。便利! うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー
  54. 54. デザイナーが開発チームに入ったら 会員登録機能できましたー お疲れ様ですー 見てみます Facebookアカウントでワンクリック登録できるんですね。便利! うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます
  55. 55. デザイナーが開発チームに入ったら 会員登録機能できましたー お疲れ様ですー 見てみます Facebookアカウントでワンクリック登録できるんですね。便利! うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます
  56. 56. デザイナーが開発チームに入ったら 開発がこのようになる 会員登録機能できましたー お疲れ様ですー 見てみます うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます
  57. 57. デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る お疲れ様ですー 見てみます お疲れ様ですー 見てみます Facebookアカウントでワンクリック登録できるんですね。便利! うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます
  58. 58. デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る • 動くものを触りながら作るので、 お疲れ様ですー 見てみます より実際に使うユーザー目線でデザインができる うーん… 会員登録ページへ遷移するの面倒っすね、 うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます
  59. 59. デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る • 動くものを触りながら作るので、 お疲れ様ですー 見てみます より実際に使うユーザー目線でデザインができる • うーん… 会員登録ページへ遷移するの面倒っすね、 デザイナーもチームの一員なので、いい製品にするために トップページから登録できるにしたいですねー 口が出しやすくなる なるほどー、確かに… では、トップページから登録できるようにしておきます トップページから登録できるにしたいですねー ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます
  60. 60. デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る • 動くものを触りながら作るので、 お疲れ様ですー 見てみます より実際に使うユーザー目線でデザインができる • うーん… 会員登録ページへ遷移するの面倒っすね、 デザイナーもチームの一員なので、いい製品にするために トップページから登録できるにしたいですねー 口が出しやすくなる • なるほどー、確かに… では、トップページから登録できるようにしておきます システムとデザインを同時進行で開発できる ありがとうございます!では、先にトップページに会員登録の ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます 見た目を作っておきます
  61. 61. デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る • 動くものを触りながら作るので、 お疲れ様ですー 見てみます より実際に使うユーザー目線でデザインができる さっき挙げたデメリットは解消される • うーん… 会員登録ページへ遷移するの面倒っすね、 デザイナーもチームの一員なので、いい製品にするために トップページから登録できるにしたいですねー 口が出しやすくなる • なるほどー、確かに… では、トップページから登録できるようにしておきます システムとデザインを同時進行で開発できる ありがとうございます!では、先にトップページに会員登録の ありがとうございます!では、先にトップページに会員登録の 見た目を作っておきます 見た目を作っておきます
  62. 62. 開発チームに入るのに必要な3つのスキル
  63. 63. 開発チームに入るのに必要な3つのスキル • 開発環境構築 … 手元でシステムを立ち上げる(黒い画面)
  64. 64. 開発チームに入るのに必要な3つのスキル • 開発環境構築 … 手元でシステムを立ち上げる(黒い画面) • バージョン管理 … Git、Subversionなど
  65. 65. 開発チームに入るのに必要な3つのスキル • 開発環境構築 … 手元でシステムを立ち上げる(黒い画面) • バージョン管理 … Git、Subversionなど • 言語とフレームワーク … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
  66. 66. 開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル … 手元でシステムを立ち上げる • バージョン管理のスキル … Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
  67. 67. 開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル …わからないことを教えるほうが 手元でシステムを立ち上げる zip納品より全然効率的 • バージョン管理のスキル … Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
  68. 68. 開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル …わからないことを教えるほうが 手元でシステムを立ち上げる zip納品より全然効率的 わからないことはチームの プログラマーに聞けばOK • バージョン管理のスキル … Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
  69. 69. 開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル …わからないことを教えるほうが 手元でシステムを立ち上げる zip納品より全然効率的 わからないことはチームの プログラマーに聞けばOK • バージョン管理のスキル … Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど 実際はこんな感じの場合が多いので、 そこまで詳しくならなくてもOK
  70. 70. 今回の授業のテーマ
  71. 71. 今回の授業のテーマ 前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは どのようにデザインを入れていくかをバーチャル体験してみよう、 という授業を行います
  72. 72. 今回の授業のテーマ 前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは どのようにデザインを入れていくかをバーチャル体験してみよう、 という授業を行います 書籍の一覧、個別の表示、書籍登録、編集、 削除の機能を実装したので、デザインお願いしますー!
  73. 73. 今回の授業のテーマ 前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは どのようにデザインを入れていくかをバーチャル体験してみよう、 という授業を行います 書籍の一覧、個別の表示、書籍登録、編集、 削除の機能を実装したので、デザインお願いしますー! ありがとうございます!では、これからデザインを入れる作業を 開始します!
  74. 74. 今回の授業のテーマ 前回までの作業をエンジニアが行った仕事として、開発チームのデザイナーは どのようにデザインを入れていくかをバーチャル体験してみよう、 という授業を行います 書籍の一覧、個別の表示、書籍登録、編集、 削除の機能を実装したので、デザインお願いしますー! ありがとうございます!では、これからデザインを入れる作業を 開始します! デザイナーのターン!
  75. 75. 今回の授業のテーマ 3つのスキルなんて、ないんですけど… 前回までの作業をエンジニアが行った仕事として、 それにデザイナーはどのようにデザインを入れていくかを バーチャル体験してみよう、という授業を行います 本を登録、一覧、編集、削除の 機能を作りましたー では、これにデザインを 入れていきますー
  76. 76. 今回の授業のテーマ 3つのスキルなんて、ないんですけど… • 開発環境構築 前回までの作業をエンジニアが行った仕事として、 それにデザイナーはどのようにデザインを入れていくかを バーチャル体験してみよう、という授業を行います バージョン管理 • • 言語やフレームワーク 本を登録、一覧、編集、削除の 機能を作りましたー では、これにデザインを 入れていきますー
  77. 77. 今回の授業のテーマ 3つのスキルなんて、ないんですけど… • 開発環境構築 前回までの作業をエンジニアが行った仕事として、 Nitrous.IO それにデザイナーはどのようにデザインを入れていくかを バーチャル体験してみよう、という授業を行います バージョン管理 • • 言語やフレームワーク 本を登録、一覧、編集、削除の 機能を作りましたー では、これにデザインを 入れていきますー
  78. 78. 今回の授業のテーマ 3つのスキルなんて、ないんですけど… • 開発環境構築 前回までの作業をエンジニアが行った仕事として、 Nitrous.IO それにデザイナーはどのようにデザインを入れていくかを バーチャル体験してみよう、という授業を行います バージョン管理 • Git • 言語やフレームワーク 本を登録、一覧、編集、削除の 機能を作りましたー では、これにデザインを 入れていきますー
  79. 79. 今回の授業のテーマ 3つのスキルなんて、ないんですけど… • 開発環境構築 前回までの作業をエンジニアが行った仕事として、 Nitrous.IO それにデザイナーはどのようにデザインを入れていくかを バーチャル体験してみよう、という授業を行います バージョン管理 • Git • 言語やフレームワーク 本を登録、一覧、編集、削除の 言語:Ruby 機能を作りましたー では、これにデザインを 入れていきますー フレームワーク:Ruby on Rails
  80. 80. 今回の授業のテーマ 3つのスキルなんて、ないんですけど… • 開発環境構築 前回までの作業をエンジニアが行った仕事として、 前回の授業で Nitrous.IO それにデザイナーはどのようにデザインを入れていくかを すでにやってるので バーチャル体験してみよう、という授業を行います バージョン管理 • ご安心を Git • 言語やフレームワーク 本を登録、一覧、編集、削除の 言語:Ruby 機能を作りましたー では、これにデザインを 入れていきますー フレームワーク:Ruby on Rails
  81. 81. 前回つくった画面を見てみよう
  82. 82. 前回つくった画面を見てみよう 書籍一覧( /books )
  83. 83. 前回つくった画面を見てみよう 書籍個別( /books/1 )
  84. 84. 前回つくった画面を見てみよう 書籍編集( /books/1/edit )
  85. 85. 前回つくった画面を見てみよう 書籍登録( /books/new )
  86. 86. 前回つくった画面を見てみよう これらのページの HTML と CSS をカスタマイズ 書籍登録( /books/new )
  87. 87. いよいよ実践 前回作ったアプリにデザインを入れていきます。
  88. 88. HTMLを変更する
  89. 89. どのファイルを変更する? • 書籍一覧 • 書籍個別 • 書籍編集 • 書籍登録
  90. 90. どのファイルを変更する? • 書籍一覧 app/views/books/index.html.erb • 書籍個別 app/views/books/show.html.erb • 書籍編集 app/views/books/edit.html.erb • 書籍登録 app/views/books/new.html.erb
  91. 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
  92. 92. 践 実 書籍一覧のHTMLを 変更してみよう app/views/books/index.html.erb を編集
  93. 93. 践 実 app/views/books/index.html.erb を開く
  94. 94. 践 実 このマークアップを変更します
  95. 95. 践 実 チームで開発するときはマークアップの ルールがあると便利 このマークアップを変更します
  96. 96. 践 実 チームで開発するときはマークアップの ルールがあると便利 • ルールがあれば、チームメンバーの誰が書いても同じマークア ップになる • 新しくチームに入ったメンバーも、そのルールを理解すれば 同じようにマークアップができるようになる このマークアップを変更します
  97. 97. 践 実 チームで開発するときはマークアップの ルールがあると便利 • ルールがあれば、チームメンバーの誰が書いても同じマークア ップになる • 新しくチームに入ったメンバーも、そのルールを理解すれば 同じようにマークアップができるようになる • ルールを作るだけでなく、チーム内でルールを共有するために ドキュメントを用意しなくてはいけない手間が発生 • すでに誰かが作ったルールを採用すると、すでにドキュメント が用意されてるので、手間が解消されることも このマークアップを変更します
  98. 98. マークアップのルールがあると…
  99. 99. マークアップのルールがあると… 書籍登録機能できましたー
  100. 100. マークアップのルールがあると… 書籍登録機能できましたー ありがとうございますー では、まずはデザインを入れるためにHTMLの編集から…
  101. 101. マークアップのルールがあると… 書籍登録機能できましたー ありがとうございますー では、まずはデザインを入れるためにHTMLの編集から… あっ、マークアップやっておいてくれたんですね! 自分がこうしようと思ってたマークアップがすでにされてる!
  102. 102. マークアップのルールがあると… 書籍登録機能できましたー ありがとうございますー では、まずはデザインを入れるためにHTMLの編集から… あっ、マークアップやっておいてくれたんですね! 自分がこうしようと思ってたマークアップがすでにされてる! はいー、ルール通りにマークアップしておきました
  103. 103. マークアップのルールがあると… 書籍登録機能できましたー ありがとうございますー では、まずはデザインを入れるためにHTMLの編集から… あっ、マークアップやっておいてくれたんですね! 自分がこうしようと思ってたマークアップがすでにされてる! はいー、ルール通りにマークアップしておきました ありがとうございます! マークアップの作業をしなくて済んだ
  104. 104. マークアップのルールがあると… 書籍登録機能できましたー ありがとうございますー では、まずはデザインを入れるためにHTMLの編集から… あっ、マークアップやっておいてくれたんですね! 自分がこうしようと思ってたマークアップがすでにされてる! こういうこともあるので、ルールがあるとお得! はいー、ルール通りにマークアップしておきました ありがとうございます! マークアップの作業をしなくて済んだ
  105. 105. 今回はルールの例として BEM を紹介
  106. 106. 今回はルールの例として BEM を紹介 • B ブロック、E エレメント、M モディファイア の頭文字 を 連結したものを class名にする class = B__E--M
  107. 107. 今回はルールの例として BEM を紹介 • B ブロック、E エレメント、M モディファイア の頭文字 を 連結したものを class名にする class = B__E--M エレメントの前はアンダースコア2つ モディファイアの前はハイフン2つ
  108. 108. 今回はルールの例として BEM を紹介 • B ブロック、E エレメント、M モディファイア の頭文字 を 連結したものを class名にする class = B__E--M エレメントの前はアンダースコア2つ モディファイアの前はハイフン2つ • ブロック → 範囲 • エレメント → その範囲内でのそれが果たす 役割、要素 • モディファイア → そのブロックや要素の 修飾、XXX版
  109. 109. 今回はルールの例として BEM を紹介 /books 書籍一覧
  110. 110. 今回はルールの例として BEM を紹介 bookというブロック class = book
  111. 111. 今回はルールの例として BEM を紹介 book というブロック内の title という要素 class = book _ _ title
  112. 112. 今回はルールの例として BEM を紹介 book というブロック内の action という要素の edit 版 class = book _ _ action - - edit
  113. 113. 今回はルールの例として BEM を紹介 book というブロック内の action という要素の edit 版 っていうのが BEM class = book _ _ action - - edit
  114. 114. 践 実 実際にBEMでマークアップしてみます
  115. 115. 践 実 こうなったら正解
  116. 116. 書籍編集と書籍登録の 共通部分 app/views/books/edit.html.erb と app/views/books/new.html.erb
  117. 117. 書籍編集( /books/1/edit )
  118. 118. 書籍登録( /books/new )
  119. 119. フォームの部分はほとんど同じ 書籍編集 書籍登録
  120. 120. フォームの部分はほとんど同じ 書籍編集 app/views/books/edit.html.erb 書籍登録 app/views/books/new.html.erb
  121. 121. フォームの部分はほとんど同じ 書籍編集 app/views/books/edit.html.erb 書籍登録 app/views/books/new.html.erb <%= render form %>
  122. 122. フォームの部分はほとんど同じ 編集と登録の共通部分 • edit.html.erb 、new.html.erb 両方のファイルに <%= render 'form' %> と書かれている部分がある • <%= render 'form' %> の「 form 」に注目 edit.html.erb 、new.html.erb があるディレクトリに _form.html.erb があり、それがその部分の該当するファイル • フォームの部分を編集するには _form.html.erb を編集する • 共通部分ファイルはファイル名の先頭に 「_(アンダースコア)」が付いている 書籍編集 書籍登録
  123. 123. 践 実 フォームの部分を編集するには このファイルを編集する app/views/books/_form.html.erb このファイルを編集してフォームの部分が 変わったかを確認してみます
  124. 124. サイト全体の共通部分 app/views/layouts/application.html.erb
  125. 125. <%= yield %> に注目 app/views/layouts/application.html.erb
  126. 126. <%= yield %> に注目 index.html.erb show.html.erb edit.html.erb new.html.erb <%= yield %> の中に表示されている
  127. 127. books/index.html.erb application.html.erb
  128. 128. books/index.html.erb application.html.erb 全ページ共通部品は layouts/application.html.erb に書く • ヘッダー • フッター • サイドナビ
  129. 129. 践 実 ヘッダを追加してみよう app/views/layouts/application.html.erb
  130. 130. 践 実 ここにヘッダの HTML を書く app/views/layouts/application.html.erb
  131. 131. 践 実 ヘッダの HTML 実際にヘッダを追加してみます
  132. 132. 践 実 こうなったら正解
  133. 133. CSSを変更する
  134. 134. Rails の CSS の特長
  135. 135. Rails の CSS の特長 • CSSプリプロセッサの Sass( SCSS記法 - scssファイル ) が採用されている( ファイル名は xxxx.css.scss )
  136. 136. Rails の CSS の特長 • CSSプリプロセッサの Sass( SCSS記法 - scssファイル ) が採用されている( ファイル名は xxxx.css.scss ) Sass って何? CSSが便利に書けるもの
  137. 137. Rails の CSS の特長 Sass って何? • CSSプリプロセッサの Sass(SCSS記法)が採用されている Sass って何? くわしくは、 便利にCSSが書けるもの 石本光司先生の授業で http://schoo.jp/class/228
  138. 138. Rails の CSS の特長 • CSSプリプロセッサの Sass( SCSS記法 - scssファイル ) が採用されている( ファイル名は xxxx.css.scss ) • 設定無しで Rails が Sassファイルを CSS に書き出しをしてく れる
  139. 139. Rails の CSS の特長 • CSSプリプロセッサの Sass( SCSS記法 - scssファイル ) が採用されている( ファイル名は xxxx.css.scss ) • 設定無しで Rails が Sassファイルを CSS に書き出しをしてく れる • scssファイルを追加する場合は app/assets/stylesheets の 中に入れる
  140. 140. Rails の CSS の特長 • CSSプリプロセッサの Sass( SCSS記法 - scssファイル ) が採用されている( ファイル名は xxxx.css.scss ) • 設定無しで Rails が Sassファイルを CSS に書き出しをしてく れる • scssファイルを追加する場合は app/assets/stylesheets の 中に入れる • app/assets/stylesheets の中に入れられた scssファイルは 設定なしで画面に反映される
  141. 141. 践 実 Railsにデザインを 入れる準備 app/assets/stylesheets/scaffold.css.scss を削除
  142. 142. 践 実 scaffolds.css.scss app/assets/styledheets/scaffolds.css.scss
  143. 143. 践 実 scaffolds.css.scss scaffolds.css.scss app/assets/styledheets/scaffolds.css.scss
  144. 144. 践 実 scaffolds.css.scss scaffolds.css.scss • scaffolds.css.scss とは、Rails が自動で生成してくれた最低 限のスタイルが入った scssファイル app/assets/styledheets/scaffolds.css.scss
  145. 145. 践 実 scaffolds.css.scss scaffolds.css.scss • scaffolds.css.scss とは、Rails が自動で生成してくれた最低 限のスタイルが入った scssファイル • 自分でデザインを入れる際、 scaffolds.css.scss で設定され たスタイルが邪魔になるので削除 app/assets/styledheets/scaffolds.css.scss
  146. 146. 践 実 scaffolds.css.scss 削除 app/assets/styledheets/scaffolds.css.scss の上で右クリック
  147. 147. 践 実 scaffolds.css.scss 削除 Delete scaffolds.css.scss を選択
  148. 148. 践 実 scaffolds.css.scss 削除 こうなったら正解
  149. 149. 践 実 ヘッダ用のscssファイル を追加してみよう app/assets/stylesheets/ の中にファイルを追加
  150. 150. 践 実 ヘッダ用の SCSS を追加 app/assets/styledheets の上で右クリック
  151. 151. 践 実 ヘッダ用の SCSS を追加 New File をクリック
  152. 152. 践 実 ヘッダ用の SCSS を追加 header.css.scss という名前を入力
  153. 153. 践 実 ヘッダ用の SCSS を追加 app/assets/styledheets/header.css.scss を編集
  154. 154. 践 実 こうなったら正解
  155. 155. 践 実 こうなったら正解 ディレクトリに追加するだけで header.css.scss を反映してくれた
  156. 156. 践 実 books用のSCSSを 編集してみよう すでに用意されてる app/assets/stylesheets/books.css.scss を変更
  157. 157. 践 実 books用 の scss を用意しました http://bit.ly/s-0130 chrome のタブを一つ開いてここにアクセス
  158. 158. 践 実 http://bit.ly/s-0130
  159. 159. 践 実 http://bit.ly/s-0130 全部コピー
  160. 160. 践 実 app/assets/stylesheets/books.css.scss 開く
  161. 161. 践 実 app/assets/stylesheets/books.css.scss 貼り付け
  162. 162. 践 実 こうなったら正解
  163. 163. 践 実 こうなったら正解 今回はコピペでしたが、自分で books.css.scss をいじって デザインに挑戦してみてください
  164. 164. 書籍一覧のデザインができた
  165. 165. 書籍一覧のデザインができた 書籍一覧ページのデザインができましたので、 今から Heroku に送って見れるようにしますー
  166. 166. 書籍一覧のデザインができた 書籍一覧ページのデザインができましたので、 今から Heroku に送って見れるようにしますー お疲れ様ですー デザイン超楽しみです!
  167. 167. 書籍一覧のデザインができた 書籍一覧ページのデザインができましたので、 今から Heroku に送って見れるようにしますー お疲れ様ですー デザイン超楽しみです! ぬおー プレッシャーかけてきた!!
  168. 168. 践 実 ここまで作業したものを 本番環境に送る ここまで作業したRailsプロジェクトを Heroku に送ります
  169. 169. 践 実 コンソールで作業 コンソールをクリック
  170. 170. 践 実 コンソールで作業 ここがアクティブになっているのを確認 (白い四角)
  171. 171. 践 実 コンソールで作業 ここがアクティブになっているのを確認 (白い四角) control + c を押してサーバをストップ
  172. 172. 践 実 Heroku に送る 上から一行ずつコンソールにコマンドを入力 heroku login • メールアドレス • パスワード git add --all git commit -m“Design” git push heroku master heroku info • URLが表示される
  173. 173. 践 実 Heroku に送る 上から一行ずつコンソールにコマンドを入力 heroku login • メールアドレス • パスワード git add . ブラウザで Heroku 上の bookshelf を確認 git commit -m“Design” git push heroku master heroku info • URLが表示される
  174. 174. 以上で終了です ブラウザだけで学ぶWebアプリ開発【デザイン編】
  175. 175. 補足説明
  176. 176. トップページを作りたい
  177. 177. トップページを作りたい • app/views/ の中に home というディレクトリを作成 • そのディレクトリの中に index.html.erb というファイルを作成 • app/controllers の中に home_ controllers.rb というファイルを作成
  178. 178. トップページを作りたい home_controller.rb にこう書く
  179. 179. トップページを作りたい config/routes.rb の root の部分をこう書き換える
  180. 180. フォームのラベルを日本語にしたい
  181. 181. フォームのラベルを日本語にしたい • app/views/books/_form.html.erb を開く
  182. 182. フォームのラベルを日本語にしたい • app/views/books/_form.html.erb をこう編集する
  183. 183. フォームのボタンを日本語にしたい
  184. 184. フォームのボタンを日本語にしたい • config/locales/ に ja.yaml というファイルを作成し、追加
  185. 185. フォームのボタンを日本語にしたい • config/locales/ に ja.yaml にこう書く
  186. 186. フォームのボタンを日本語にしたい • config/application.rb にこう書く ここまでやったら rails サーバを再起動
  187. 187. リンクの書きかた
  188. 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 %>
  189. 189. リンクに id class をつけたい
  190. 190. リンクに id class をつけたい • こう書く <%= link_to '本の登録', new_book_path, { :class => "new", :id => "new" } %> class id
  191. 191. リンクの中にタグを入れたい
  192. 192. リンクの中にタグを入れたい • こう書く <%= link_to root_path do %> <span>トップページ</span> <% end %>
  193. 193. 画像の追加方法
  194. 194. 画像の追加方法 • app/assets/images ディレクトリの上で右クリック Upload File to images を選択
  195. 195. 画像の追加方法 • ここに画像をドラッグ アンド ドロップ
  196. 196. 画像の追加方法 • こう書く <%= image_tag('koshikawa.jpg', :alt => "越川さんの写真") %> 画像へのパス assets/images/画像ファイル の場合は、画像名のみ書く asstes/images/user-photos/画像ファイル の場合は、user-photos/画像ファイル と書く alt タグ
  197. 197. 画像に class id をつけたい
  198. 198. 画像に class id をつけたい • こう書く <%= image_tag('k.jpg', :alt => "越川さん", :class => kossy , :id => kossy ) %> class id
  199. 199. 画像をリンクにしたい
  200. 200. 画像をリンクにしたい • こう書く <%= link_to image_tag('koshikawa.jpg', :alt => '越川さん'), root_path %> 画像ファイル alt リンク先
  201. 201. リンク付き画像のリンク、画像に id class をつけたい
  202. 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
  203. 203. 勝手にcssを読み込まれると困るんですけど
  204. 204. 勝手にcssを読み込まれると困るんですけど • assets/stylesheets の中に scssファイルを入れれば、何の設定もせず に画面に反映されてくれて便利ですが、reset のためのファイルなど、 こちらの意図した順番で scssファイルを読み込んでくれないと困る場合 があります • 順番を指定して scssファイルを読み込ます方法はいくつかあります
  205. 205. 勝手にcssを読み込まれると困るんですけど • 対策1 : ファイル名で対応する方法
  206. 206. 勝手にcssを読み込まれると困るんですけど • 対策1 : ファイル名で対応する方法 Rails はアルファベット順に scssファイルを読み込みます。 なので、例えば reset.css.scss は一番始めに読み込ませたいのに、 後のほうに読み込んでしまいます。 アルファベット順に scssファイルを読み込む、というのを利用し て、 0reset.css.scss と、ファイル名の先頭に数字の「0」を付け ると一番始めに読み込むようになります。
  207. 207. 勝手にcssを読み込まれると困るんですけど • 対策2 : 自分で一つ一つファイルを読み込む設定を書く
  208. 208. 勝手にcssを読み込まれると困るんですけど • 対策2 : 自分で一つ一つファイルを読み込む設定を書く app/assets/stylesheets/application.css を開く
  209. 209. 勝手にcssを読み込まれると困るんですけど • 対策2 : 自分で一つ一つファイルを読み込む設定を書く 「 *= require_tree . 」 を削除
  210. 210. 勝手にcssを読み込まれると困るんですけど • 対策2 : 自分で一つ一つファイルを読み込む設定を書く *= require ファイル名 を任意の順番で書く(拡張子は不要)
  211. 211. scss の変数や mixin を別ファイルにしたら エラーが出たのですが…
  212. 212. scss の変数や mixin を別ファイルにしたら エラーが出たのですが… • assets/stylesheets の中に scssファイルを入れれば、 何の設定もせずに画面に反映されてくれて便利ですが、 ある scssファイルが、別の scssファイルに書かれた変数やmixinを呼び 出すときにエラーが出てしまいます。
  213. 213. scss の変数や mixin を別ファイルにしたら エラーが出たのですが… app/assets/stylesheets/application.css を application.css.scss にファイル名を変更
  214. 214. scss の変数や mixin を別ファイルにしたら エラーが出たのですが… application.css.scss の中身を削除 scssファイルを追加したら自動で画面に反映される機能はなくなります
  215. 215. scss の変数や mixin を別ファイルにしたら エラーが出たのですが… application.css.scss に @import ファイル名 (拡張子なし)と、 scssファイルの import の設定を任意の順番で書いていきます。 変数や mixin が書かれた scssファイルは、それらを呼び出す scssファイル の前に import する必要があります。
  216. 216. compass を使いたい
  217. 217. compass を使いたい Gemfileに gem 'compass-rails' と書き足します。 書き足したら、コンソールで bundle コマンドを入力。 サーバを再起動。
  218. 218. compass を使いたい application.css.scss に compass の import の設定を書きます。 (application.css を scss に変更する手順は「scss の変数や mixin を 別ファイルにしたら エラーが出たのですが…」参照)
  219. 219. Heroku にアップするための設定
  220. 220. Heroku にアップするための設定 ruby '2.0.0' group :development, :test do gem 'sqlite3' end group :production do gem 'pg' gem 'rails_12factor' end Gemfile の 7行目を消して これをコピペ
  221. 221. Heroku にアップするための設定 git config --global user.email xxx@xxx.jp git config --global user.name name コンソールに一行ずつ入力
  222. 222. Heroku にアップするための設定 git init git add --all git commit -m“作業内容メモ” コンソールに一行ずつ入力
  223. 223. Heroku にアップするための設定 heroku login メールアドレスとパスワードを入力 heroku keys:add ~/.ssh/id_rsa.pub heroku create git push heroku master heroku run rake db:migrate コンソールに一行ずつ入力

×