ブラウザだけで学ぶWebアプリ開発【デザイン編】
•
15 likes•2,348 views
schoo WEB-campus http://schoo.jp/class/381
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (14)
Similar to ブラウザだけで学ぶWebアプリ開発【デザイン編】
Similar to ブラウザだけで学ぶWebアプリ開発【デザイン編】 (20)
More from schoowebcampus
More from schoowebcampus (20)
Recently uploaded
Recently uploaded (12)
ブラウザだけで学ぶWebアプリ開発【デザイン編】
- 2. 自己紹介
- 3. 自己紹介 • 町田哲平と申します • 合同会社フィヨルドという会社で デザイナーをやっています • Twitter アカウントは @machida • Facebookは 町田哲平 で検索 • Ruby on Rails で作られた怖い話が読める サービス「怖話」を運営しています
- 4. 自己紹介 • 怖い話のサービスだけではなく 企業が使う、メールや Fax や封書 を送るサービス開発のお手伝いも しています
- 5. 授業でやること • 前回の復習 • なんでデザイナーが Webアプリ開発？ • 書籍アプリの HTML を変更 • 書籍アプリの CSS を変更 • 本番環境（Heroku）に送る
- 7. 前回のやったこと
- 8. 前回のやったこと • Rails のプロジェクトを作成 rails new bookshelf
- 9. 前回のやったこと • Rails のプロジェクトを作成 rails new bookshelf • bookshelf ディレクトリに移動 cd bookshelf
- 10. 前回のやったこと • Rails のプロジェクトを作成 rails new bookshelf • bookshelf ディレクトリに移動 cd bookshelf • 書籍のタイトルと価格を入力、表示する機能を実装 rails g scaffold book title:string price:integer
- 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）に送る
- 14. 今回も Nitrous.IO でサーバを立ちあげます chrome で https://www.nitrous.io/ を開く nitrous.io と入力して Enterキー
- 18. 今回も Nitrous.IO でサーバを立ちあげます クリック Start をクリック
- 19. 今回も Nitrous.IO でサーバを立ちあげます クリック IDE をクリック
- 20. 今回も Nitrous.IO でサーバを立ちあげます クリック Chat は使わないので閉じる
- 21. 今回も Nitrous.IO でサーバを立ちあげます コンソールに cd bookshelf と入力し、Enter bookshelf ディレクトリに移動
- 22. 今回も Nitrous.IO でサーバを立ちあげます コンソールに rails s と入力し、Enter サーバを起動
- 23. 今回も Nitrous.IO でサーバを立ちあげます Preview をクリック、Port 3000 を選択
- 25. 今回も Nitrous.IO でサーバを立ちあげます Nitrouns.IO Preview Chrome のタブは Nitrous.IO と Preview 両方開いたままで作業を進めます
- 26. 今回も Nitrous.IO でサーバを立ちあげます Nitrouns.IO Preview 準備完了！ Chrome のタブは Nitrous.IO と Preview 両方開いたままで作業を進めます
- 27. 今回も Nitrous.IO でサーバを立ちあげます お願い 前回作った書籍登録アプリに 書籍を10冊 登録しておいてください 登録するデータは、 Nitrouns.IO Preview title : あああああああ price :準備完了！ 100 みたいな感じで適当でOKです Chrome のタブは Nitrous.IO と Preview 両方開いたままで作業を進めます
- 31. よくあるWebアプリ開発での面倒なこと デザインを発注 プログラマー • ワイヤフレーム • 仕様書 • （プロトタイプ） ドキュメント中心 デザイナー
- 33. よくあるWebアプリ開発での面倒なこと デザインを制作 プログラマー zip • HTML • CSS • Javascript 静的ファイル デザイナー
- 34. よくあるWebアプリ開発での面倒なこと デザインを制作 zip納品 プログラマー zip • HTML • CSS • Javascript 静的ファイル デザイナー
- 35. よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット デザインを制作 プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
- 36. よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット • プログラマーが作ったシステムに、デザイナーが作った静的な HTML、CSS、Javascript を組み込む手間が発生 デザインを制作 プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
- 37. よくあるWebアプリ開発での面倒なこと プログラマー側から見た zip納品 のデメリット • プログラマーが作ったシステムに、デザイナーが作った静的な HTML、CSS、Javascript を組み込む手間が発生 デザインを制作 • デザインに変更があった場合、ファイルのどの部分が変わったのか わかりづらい プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
- 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納品
- 40. よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット デザインを制作 プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
- 41. よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット • 実際に動かしてみたらイメージと違った （あれ？このボタンって思ったよりよく使う） プログラマー zip • HTML • CSS • Javascript zip納品 デザインを制作 デザイナー
- 42. よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット • 実際に動かしてみたらイメージと違った （あれ？このボタンって思ったよりよく使う） デザインを制作 • 実際のデータが入ったら想定と違った （え？ここにこんな長い文章が入るの！） プログラマー zip • HTML • CSS • Javascript zip納品 デザイナー
- 43. よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット • 実際に動かしてみたらイメージと違った （あれ？このボタンって思ったよりよく使う） デザインを制作 • 実際のデータが入ったら想定と違った （え？ここにこんな長い文章が入るの！） • デザイナーが提出したデザインと少し違う • HTML プログラマー • CSS （CSSいじった？勝手なことしないで！） zip • Javascript zip納品 デザイナー
- 44. よくあるWebアプリ開発での面倒なこと デザイナー側から見た zip納品 のデメリット • 実際に動かしてみたらイメージと違った （あれ？このボタンって思ったよりよく使う） デザインを制作 • 実際のデータが入ったら想定と違った （え？ここにこんな長い文章が入るの！） • デザイナーが提出したデザインと少し違う • HTML プログラマー • CSS （CSSいじった？勝手なことしないで！） zip • Javascript • プログラマーとのやりとりに時間がかかる （この仕様書意味わかんない…） zip納品 デザイナー
- 50. デザイナーが開発チームに入ったら
- 57. デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る お疲れ様ですー 見てみます お疲れ様ですー 見てみます Facebookアカウントでワンクリック登録できるんですね。便利！ うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます ありがとうございます！では、先にトップページに会員登録の 見た目を作っておきます
- 58. デザイナーが開発チームに入ったら 開発がこのようになる • 動くものを目の前にしているので必要なドキュメントや 会員登録機能できましたー 打ち合わせが減る • 動くものを触りながら作るので、 お疲れ様ですー 見てみます より実際に使うユーザー目線でデザインができる うーん… 会員登録ページへ遷移するの面倒っすね、 うーん… 会員登録ページへ遷移するの面倒っすね、 トップページから登録できるにしたいですねー なるほどー、確かに… では、トップページから登録できるようにしておきます ありがとうございます！では、先にトップページに会員登録の 見た目を作っておきます
- 64. 開発チームに入るのに必要な3つのスキル • 開発環境構築 … 手元でシステムを立ち上げる（黒い画面） • バージョン管理 … Git、Subversionなど
- 65. 開発チームに入るのに必要な3つのスキル • 開発環境構築 … 手元でシステムを立ち上げる（黒い画面） • バージョン管理 … Git、Subversionなど • 言語とフレームワーク … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
- 66. 開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル … 手元でシステムを立ち上げる • バージョン管理のスキル … Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
- 67. 開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル …わからないことを教えるほうが 手元でシステムを立ち上げる zip納品より全然効率的 • バージョン管理のスキル … Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
- 68. 開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル …わからないことを教えるほうが 手元でシステムを立ち上げる zip納品より全然効率的 わからないことはチームの プログラマーに聞けばOK • バージョン管理のスキル … Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど
- 69. 開発チームに入るのに必要な3つのスキル うわ、大変… • 黒い画面のスキル …わからないことを教えるほうが 手元でシステムを立ち上げる zip納品より全然効率的 わからないことはチームの プログラマーに聞けばOK • バージョン管理のスキル … Git、Subversionなど • 言語とフレームワークのスキル … Ruby、Python、PHP、 Ruby on Rails、Django、CakePHPなど 実際はこんな感じの場合が多いので、 そこまで詳しくならなくてもOK
- 70. 今回の授業のテーマ
- 81. 前回つくった画面を見てみよう
- 86. 前回つくった画面を見てみよう これらのページの HTML と CSS をカスタマイズ 書籍登録（ /books/new ）
- 88. HTMLを変更する
- 89. どのファイルを変更する？ • 書籍一覧 • 書籍個別 • 書籍編集 • 書籍登録
- 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. 前回つくった画面を見てみよう 該当するファイルの探しかた まずは 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
- 97. 践 実 チームで開発するときはマークアップの ルールがあると便利 • ルールがあれば、チームメンバーの誰が書いても同じマークア ップになる • 新しくチームに入ったメンバーも、そのルールを理解すれば 同じようにマークアップができるようになる • ルールを作るだけでなく、チーム内でルールを共有するために ドキュメントを用意しなくてはいけない手間が発生 • すでに誰かが作ったルールを採用すると、すでにドキュメント が用意されてるので、手間が解消されることも このマークアップを変更します
- 98. マークアップのルールがあると…
- 105. 今回はルールの例として BEM を紹介
- 106. 今回はルールの例として BEM を紹介 • B ブロック、E エレメント、M モディファイア の頭文字 を 連結したものを class名にする class = B__E--M
- 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版
- 109. 今回はルールの例として BEM を紹介 /books 書籍一覧
- 110. 今回はルールの例として BEM を紹介 bookというブロック class = book
- 111. 今回はルールの例として BEM を紹介 book というブロック内の title という要素 class = book _ _ title
- 112. 今回はルールの例として BEM を紹介 book というブロック内の action という要素の edit 版 class = book _ _ action - - edit
- 113. 今回はルールの例として BEM を紹介 book というブロック内の action という要素の edit 版 っていうのが BEM class = book _ _ action - - edit
- 115. 践 実 こうなったら正解
- 118. 書籍登録（ /books/new ）
- 121. フォームの部分はほとんど同じ 書籍編集 app/views/books/edit.html.erb 書籍登録 app/views/books/new.html.erb <%= render form %>
- 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. 践 実 フォームの部分を編集するには このファイルを編集する app/views/books/_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 %> の中に表示されている
- 128. books/index.html.erb application.html.erb 全ページ共通部品は layouts/application.html.erb に書く • ヘッダー • フッター • サイドナビ
- 132. 践 実 こうなったら正解
- 133. CSSを変更する
- 134. Rails の CSS の特長
- 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ファイルは 設定なしで画面に反映される
- 144. 践 実 scaffolds.css.scss scaffolds.css.scss • scaffolds.css.scss とは、Rails が自動で生成してくれた最低 限のスタイルが入った scssファイル app/assets/styledheets/scaffolds.css.scss
- 145. 践 実 scaffolds.css.scss scaffolds.css.scss • scaffolds.css.scss とは、Rails が自動で生成してくれた最低 限のスタイルが入った scssファイル • 自分でデザインを入れる際、 scaffolds.css.scss で設定され たスタイルが邪魔になるので削除 app/assets/styledheets/scaffolds.css.scss
- 150. 践 実 ヘッダ用の SCSS を追加 app/assets/styledheets の上で右クリック
- 151. 践 実 ヘッダ用の SCSS を追加 New File をクリック
- 152. 践 実 ヘッダ用の SCSS を追加 header.css.scss という名前を入力
- 154. 践 実 こうなったら正解
- 157. 践 実 books用 の scss を用意しました http://bit.ly/s-0130 chrome のタブを一つ開いてここにアクセス
- 162. 践 実 こうなったら正解
- 164. 書籍一覧のデザインができた
- 167. 書籍一覧のデザインができた 書籍一覧ページのデザインができましたので、 今から Heroku に送って見れるようにしますー お疲れ様ですー デザイン超楽しみです！ ぬおー プレッシャーかけてきた！！
- 171. 践 実 コンソールで作業 ここがアクティブになっているのを確認 （白い四角） control + c を押してサーバをストップ
- 172. 践 実 Heroku に送る 上から一行ずつコンソールにコマンドを入力 heroku login • メールアドレス • パスワード git add --all git commit -m“Design” git push heroku master heroku info • URLが表示される
- 173. 践 実 Heroku に送る 上から一行ずつコンソールにコマンドを入力 heroku login • メールアドレス • パスワード git add . ブラウザで Heroku 上の bookshelf を確認 git commit -m“Design” git push heroku master heroku info • URLが表示される
- 175. 補足説明
- 176. トップページを作りたい
- 177. トップページを作りたい • app/views/ の中に home というディレクトリを作成 • そのディレクトリの中に index.html.erb というファイルを作成 • app/controllers の中に home_ controllers.rb というファイルを作成
- 179. トップページを作りたい config/routes.rb の root の部分をこう書き換える
- 180. フォームのラベルを日本語にしたい
- 183. フォームのボタンを日本語にしたい
- 184. フォームのボタンを日本語にしたい • config/locales/ に ja.yaml というファイルを作成し、追加
- 185. フォームのボタンを日本語にしたい • config/locales/ に ja.yaml にこう書く
- 186. フォームのボタンを日本語にしたい • config/application.rb にこう書く ここまでやったら rails サーバを再起動
- 187. リンクの書きかた
- 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. リンクに id class をつけたい
- 190. リンクに id class をつけたい • こう書く <%= link_to '本の登録', new_book_path, { :class => "new", :id => "new" } %> class id
- 191. リンクの中にタグを入れたい
- 192. リンクの中にタグを入れたい • こう書く <%= link_to root_path do %> <span>トップページ</span> <% end %>
- 193. 画像の追加方法
- 194. 画像の追加方法 • app/assets/images ディレクトリの上で右クリック Upload File to images を選択
- 195. 画像の追加方法 • ここに画像をドラッグ アンド ドロップ
- 196. 画像の追加方法 • こう書く <%= image_tag('koshikawa.jpg', :alt => "越川さんの写真") %> 画像へのパス assets/images/画像ファイル の場合は、画像名のみ書く asstes/images/user-photos/画像ファイル の場合は、user-photos/画像ファイル と書く alt タグ
- 197. 画像に class id をつけたい
- 198. 画像に class id をつけたい • こう書く <%= image_tag('k.jpg', :alt => "越川さん", :class => kossy , :id => kossy ) %> class id
- 199. 画像をリンクにしたい
- 200. 画像をリンクにしたい • こう書く <%= link_to image_tag('koshikawa.jpg', :alt => '越川さん'), root_path %> 画像ファイル alt リンク先
- 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
- 204. 勝手にcssを読み込まれると困るんですけど • assets/stylesheets の中に scssファイルを入れれば、何の設定もせず に画面に反映されてくれて便利ですが、reset のためのファイルなど、 こちらの意図した順番で scssファイルを読み込んでくれないと困る場合 があります • 順番を指定して scssファイルを読み込ます方法はいくつかあります
- 205. 勝手にcssを読み込まれると困るんですけど • 対策1 : ファイル名で対応する方法
- 206. 勝手にcssを読み込まれると困るんですけど • 対策1 : ファイル名で対応する方法 Rails はアルファベット順に scssファイルを読み込みます。 なので、例えば reset.css.scss は一番始めに読み込ませたいのに、 後のほうに読み込んでしまいます。 アルファベット順に scssファイルを読み込む、というのを利用し て、 0reset.css.scss と、ファイル名の先頭に数字の「0」を付け ると一番始めに読み込むようになります。
- 207. 勝手にcssを読み込まれると困るんですけど • 対策2 : 自分で一つ一つファイルを読み込む設定を書く
- 208. 勝手にcssを読み込まれると困るんですけど • 対策2 : 自分で一つ一つファイルを読み込む設定を書く app/assets/stylesheets/application.css を開く
- 209. 勝手にcssを読み込まれると困るんですけど • 対策2 : 自分で一つ一つファイルを読み込む設定を書く 「 *= require_tree . 」 を削除
- 210. 勝手にcssを読み込まれると困るんですけど • 対策2 : 自分で一つ一つファイルを読み込む設定を書く *= require ファイル名 を任意の順番で書く（拡張子は不要）
- 211. scss の変数や mixin を別ファイルにしたら エラーが出たのですが…
- 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 する必要があります。
- 216. compass を使いたい
- 217. compass を使いたい Gemfileに gem 'compass-rails' と書き足します。 書き足したら、コンソールで bundle コマンドを入力。 サーバを再起動。
- 218. compass を使いたい application.css.scss に compass の import の設定を書きます。 （application.css を scss に変更する手順は「scss の変数や mixin を 別ファイルにしたら エラーが出たのですが…」参照）
- 219. Heroku にアップするための設定
- 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. Heroku にアップするための設定 git config --global user.email xxx@xxx.jp git config --global user.name name コンソールに一行ずつ入力
- 222. Heroku にアップするための設定 git init git add --all git commit -m“作業内容メモ” コンソールに一行ずつ入力
- 223. Heroku にアップするための設定 heroku login メールアドレスとパスワードを入力 heroku keys:add ~/.ssh/id_rsa.pub heroku create git push heroku master heroku run rake db:migrate コンソールに一行ずつ入力