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

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

自己紹介

自己紹介

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

•Twitter アカウントは @machida•Facebookは町田哲平で検索•Ruby on Rails で作られた怖い話が読めるサービス「怖話」を運営しています

自己紹介

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

•前回の復習•なんでデザイナーが Webアプリ開発？•書籍アプリの HTML を変更•書籍アプリの CSS を変更•本番環境（Heroku）に送る

授業でやること

前回の復習1月20日(月)放送「ブラウザだけで学ぶWebアプリ開発【開発編】」

前回のやったこと

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




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



•書籍のタイトルと価格を入力、表示する機能を実装rails g scaffold book title:string price:integer





•データベースのセットアップrake db:migrate






•サーバを立ち上げて確認rails s






•サーバを立ち上げて確認rails s

•本番環境（Heroku）に送る


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

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

nitrous.io と入力して Enterキー

https://www.nitrous.io


https://www.nitrous.io/




メールパスワード

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


bookshelf をクリック

クリック


Start をクリック

クリック


IDE をクリック

クリック


Chat は使わないので閉じる

クリック


コンソールに cd bookshelf と入力し、Enterbookshelf ディレクトリに移動


コンソールに rails s と入力し、Enterサーバを起動


Preview をクリック、Port 3000 を選択


xxxxx.nitrousbox.com/books にアクセス


Chrome のタブは Nitrous.IO と Preview両方開いたままで作業を進めます


Nitrouns.IO Preview



Nitrouns.IO Preview

準備完了！



Nitrouns.IO Preview

準備完了！

お願い

title : あああああああprice : 100

前回作った書籍登録アプリに書籍を10冊登録しておいてください

登録するデータは、

みたいな感じで適当でOKです

なんでデザイナーがWebアプリ開発？

よくあるWebアプリ開発での面倒なこと


デザインを発注

プログラマーデザイナー



プログラマーデザイナー• ワイヤフレーム• 仕様書• （プロトタイプ）

ドキュメント中心


デザインを制作

プログラマーデザイナー



プログラマーデザイナー• HTML• CSS• Javascriptzip

静的ファイル




静的ファイル

zip納品




zip納品

プログラマー側から見た zip納品のデメリット




zip納品


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




zip納品



• デザインに変更があった場合、ファイルのどの部分が変わったのかわかりづらい




zip納品




• システムと納品された静的な HTML の名前（classなど）が一致していないのでわかりづらい




zip納品




• システムと納品された静的な HTML の名前（classなど）が一致していないのでわかりづらい

• ドキュメントを用意したり、要望を伝えたり、デザイナーとのやりとりに時間がかかる




zip納品

デザイナー側から見た zip納品のデメリット




zip納品

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





zip納品


• 実際のデータが入ったら想定と違った（え？ここにこんな長い文章が入るの！）





zip納品



• デザイナーが提出したデザインと少し違う（CSSいじった？勝手なことしないで！）





zip納品



• デザイナーが提出したデザインと少し違う（CSSいじった？勝手なことしないで！）

• プログラマーとのやりとりに時間がかかる（この仕様書意味わかんない…）


これらのデメリットを解消するには？


デザイナーが直接システムにデザインを入れればいい


脱zip納品

デザイナーが直接システムにデザインを入れればいい

さきほどの例で挙げた開発

システム開発チームデザイナー


デザイナーはシステム開発チームの外

デザイナーも開発チームの一員に

システム開発チーム

デザイナーもシステム開発チームの中へ

デザイナーが開発チームに入ったら


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



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



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




なるほどー、確かに…では、トップページから登録できるようにしておきます







ありがとうございます！では、先にトップページに会員登録の見た目を作っておきます




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




開発がこのようになる







• 動くものを目の前にしているので必要なドキュメントや打ち合わせが減る










• 動くものを触りながら作るので、より実際に使うユーザー目線でデザインができる


うーん… 会員登録ページへ遷移するの面倒っすね、










• デザイナーもチームの一員なので、いい製品にするために口が出しやすくなる

トップページから登録できるにしたいですねー











• システムとデザインを同時進行で開発できる












• システムとデザインを同時進行で開発できる


さっき挙げたデメリットは解消される

開発チームに入るのに必要な3つのスキル

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



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



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

•言語とフレームワーク… Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど


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

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

•言語とフレームワークのスキル… Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど

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





わからないことを教えるほうがzip納品より全然効率的






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






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

実際はこんな感じの場合が多いので、そこまで詳しくならなくてもOK

今回の授業のテーマ


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



書籍の一覧、個別の表示、書籍登録、編集、削除の機能を実装したので、デザインお願いしますー！



ありがとうございます！では、これからデザインを入れる作業を開始します！



ありがとうございます！では、これからデザインを入れる作業を開始します！

デザイナーのターン！




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

では、これにデザインを入れていきますー

本を登録、一覧、編集、削除の機能を作りましたー

3つのスキルなんて、ないんですけど…





•開発環境構築

•バージョン管理

•言語やフレームワーク









Nitrous.IO









Nitrous.IO

Git









Nitrous.IO

Git

言語：Ruby フレームワーク：Ruby on Rails









Nitrous.IO

Git

言語：Ruby フレームワーク：Ruby on Rails

前回の授業ですでにやってるので

ご安心を


前回つくった画面を見てみよう


書籍一覧（ /books ）


書籍個別（ /books/1 ）


書籍編集（ /books/1/edit ）


書籍登録（ /books/new ）



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

いよいよ実践前回作ったアプリにデザインを入れていきます。

HTMLを変更する

•書籍一覧

•書籍個別

•書籍編集

•書籍登録

どのファイルを変更する？

•書籍一覧

•書籍個別

•書籍編集

•書籍登録

app/views/books/index.html.erb

app/views/books/show.html.erb

app/views/books/edit.html.erb

app/views/books/new.html.erb

どのファイルを変更する？

•書籍一覧

•書籍個別

•書籍編集

•書籍登録


app/views/books/index.html.erb

app/views/books/show.html.erb



該当するファイルの探しかた

•まずは app/views ディレクトリへ•URL [xxx.nitrousbox.com/books/] に注目 URLにある [/books] と同じ名前のディレクトリをapp/views の中から探す

•一覧は index.html.erb•詳細は show.html.erb•編集は edit.html.erb•登録は new.html.erb

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

実践

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

実践

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

実践


実践

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


実践

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

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



実践

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

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

•ルールを作るだけでなく、チーム内でルールを共有するためにドキュメントを用意しなくてはいけない手間が発生

•すでに誰かが作ったルールを採用すると、すでにドキュメントが用意されてるので、手間が解消されることも


マークアップのルールがあると…


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



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




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




はいー、ルール通りにマークアップしておきました






ありがとうございます！マークアップの作業をしなくて済んだ






ありがとうございます！マークアップの作業をしなくて済んだ

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

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

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

class = “ B _ _ E - - M ”



class = “ B _ _ E - - M ”エレメントの前はアンダースコア2つモディファイアの前はハイフン2つ



•ブロック → 範囲•エレメント → その範囲内でのそれが果たす役割、要素•モディファイア → そのブロックや要素の修飾、XXX版

class = “ B _ _ E - - M ”エレメントの前はアンダースコア2つモディファイアの前はハイフン2つ


/books 書籍一覧


bookというブロック

class = “ book ”


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

class = “ book _ _ title ”


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

class = “ book _ _ action - - edit ”


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

class = “ book _ _ action - - edit ”

っていうのが BEM


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

実践

こうなったら正解

実践

書籍編集と書籍登録の共通部分

app/views/books/edit.html.erbと


書籍編集（ /books/1/edit ）


フォームの部分はほとんど同じ

書籍編集書籍登録


書籍編集

書籍登録




書籍編集

書籍登録



<%= render ‘form’ %>


書籍編集書籍登録

編集と登録の共通部分

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

•<%= render 'form' %> の「 form 」に注目edit.html.erb 、new.html.erb があるディレクトリに_form.html.erb があり、それがその部分の該当するファイル

•フォームの部分を編集するには _form.html.erb を編集する•共通部分ファイルはファイル名の先頭に「_（アンダースコア）」が付いている

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

このファイルを編集する

app/views/books/_form.html.erb

実践

このファイルを編集してフォームの部分が変わったかを確認してみます

サイト全体の共通部分app/views/layouts/application.html.erb

<%= yield %> に注目

app/views/layouts/application.html.erb

index.html.erb

show.html.erb

edit.html.erb

new.html.erb

<%= yield %> の中に表示されている

<%= yield %> に注目

application.html.erbbooks/index.html.erb

application.html.erbbooks/index.html.erb

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

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

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

実践

app/views/layouts/application.html.erb

実践

ここにヘッダの HTML を書く

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

実践

ヘッダの HTML


実践

CSSを変更する

Rails の CSS の特長

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




Sass って何？ CSSが便利に書けるもの

•CSSプリプロセッサの Sass（SCSS記法）が採用されている


Sass って何？便利にCSSが書けるもの

Sass って何？

くわしくは、石本光司先生の授業で

http://schoo.jp/class/228


•設定無しで Rails が Sassファイルを CSS に書き出しをしてくれる





•scssファイルを追加する場合は app/assets/stylesheets の中に入れる



•scssファイルを追加する場合は app/assets/stylesheets の中に入れる

•app/assets/stylesheets の中に入れられた scssファイルは設定なしで画面に反映される


Railsにデザインを入れる準備

app/assets/stylesheets/scaffold.css.scss を削除

実践

scaffolds.css.scss

app/assets/styledheets/scaffolds.css.scss

実践

scaffolds.css.scss


実践

scaffolds.css.scss

scaffolds.css.scss


実践

scaffolds.css.scss

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

scaffolds.css.scss


実践

scaffolds.css.scss

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

•自分でデザインを入れる際、 scaffolds.css.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 の上で右クリック

実践


New File をクリック

実践


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-0130chrome のタブを一つ開いてここにアクセス

http://bit.ly/schoo-0130

http://bit.ly/schoo-0130

実践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 に送って見れるようにしますー



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



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

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

ここまで作業したものを本番環境に送る

ここまで作業したRailsプロジェクトを Heroku に送ります

実践

コンソールをクリック

実践コンソールで作業

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

実践コンソールで作業

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

実践

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

コンソールで作業

実践Heroku に送る

heroku login

git add --all

git commit -m“Design”

git push heroku master

heroku info

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

• メールアドレス• パスワード

• URLが表示される

Heroku に送る

heroku login

git add .

git commit -m“Design”


heroku info

• メールアドレス• パスワード

• URLが表示される

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

実践

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

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

以上で終了です

補足説明

トップページを作りたい

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

•app/controllers の中にhome_ controllers.rb というファイルを作成



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 '詳細', book %>

•本編集ページ（/books/4/edit）ヘのリンク ※eachの中でだけ有効<%= link_to '詳細', edit_book_path(book) %>

•トップページ（/）へのリンク<%= link_to 'トップページ', root_path %>

リンクの書きかた

リンクに id class をつけたい

• こう書く<%= link_to '本の登録', new_book_path, { :class => "new", :id => "new" } %>

リンクに id class をつけたい

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/images/user-photos/画像ファイルの場合は、user-photos/画像ファイルと書く

alt タグ

画像に class id をつけたい

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

画像に class id をつけたい

idclass

画像をリンクにしたい

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

画像をリンクにしたい

リンク先画像ファイル alt

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

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

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

リンクのclass画像のid

画像のclass

リンクのid

勝手にcssを読み込まれると困るんですけど

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

•順番を指定して scssファイルを読み込ます方法はいくつかあります


•対策1 : ファイル名で対応する方法


•対策1 : ファイル名で対応する方法


Rails はアルファベット順に scssファイルを読み込みます。なので、例えば reset.css.scss は一番始めに読み込ませたいのに、後のほうに読み込んでしまいます。

アルファベット順に scssファイルを読み込む、というのを利用して、 0reset.css.scss と、ファイル名の先頭に数字の「0」を付けると一番始めに読み込むようになります。

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




app/assets/stylesheets/application.css を開く



「 *= require_tree . 」を削除



*= require ファイル名を任意の順番で書く（拡張子は不要）

scss の変数や mixin を別ファイルにしたらエラーが出たのですが…


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


app/assets/stylesheets/application.css を application.css.scss にファイル名を変更


application.css.scss の中身を削除scssファイルを追加したら自動で画面に反映される機能はなくなります


application.css.scss に @import “ファイル名”（拡張子なし）と、scssファイルの import の設定を任意の順番で書いていきます。変数や mixin が書かれた scssファイルは、それらを呼び出す scssファイルの前に import する必要があります。

compass を使いたい

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



application.css.scss に compass の import の設定を書きます。（application.css を scss に変更する手順は「scss の変数や mixin を別ファイルにしたらエラーが出たのですが…」参照）

Heroku にアップするための設定

ruby '2.0.0'group :development, :test do gem 'sqlite3'end

group :production do gem 'pg' gem 'rails_12factor'end


Gemfile の 7行目を消してこれをコピペ

git config --global user.email [email protected]

git config --global user.name name


コンソールに一行ずつ入力

git init

git add --all

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



heroku login

heroku keys:add ~/.ssh/id_rsa.pub

heroku create


heroku run rake db:migrate



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

Business

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