22/06/2019 Railsチュートリアル Ruby on Rails 学習メモ

らくだ🐫にもできるRailsチュートリアル｜5.1

5章でやる事

Bootstrap
Sass
静的ページをレイアウトに追加
ログイン機能のはじめの一歩

HTML/CSSについては分かってる部分はあまり深堀しない感じで

5.1 構造を追加する

サイトロゴ、ナビゲーションヘッダー、サイトフッターを含む静的ページを開発していく
モックアップ（＝ワイヤーフレーム)を参照しながらviewを整えていく
作業ブランチの作成　→$ git checkout -b filling-in-layout
レイアウトファイルの更新（クラスの多くはBootstrap特有の物・本文5.1.2に詳細アリ）

5.1.1 ナビゲーション

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>  #full_titleメソッド
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application',
                               'data-turbolinks-track': 'reload' %>
    #IEのバージョンが9より小さい時にスクリプトを実行する設定の条件付きコメント
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <%= link_to "sample app", '#', id: "logo" %>　　#link_toメソッド（第3引数はidを追加するオプション）
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Home",   '#' %></li>  #link_toメソッド
            <li><%= link_to "Help",   '#' %></li>  #link_toメソッド
            <li><%= link_to "Log in", '#' %></li>  #link_toメソッド
          </ul>
        </nav>
      </div>
    </header>
    <div class="container">  #メインコンテンツ用のdiv
      <%= yield %>           #yieldメソッド（ページごとの内容が挿入される）
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title><%= full_title(yield(:title)) %></title> #full_titleメソッド

<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'application', media: 'all',

'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'application',

'data-turbolinks-track': 'reload' %>

#IEのバージョンが9より小さい時にスクリプトを実行する設定の条件付きコメント

<!--[if lt IE 9]>

</script>

<![endif]-->

</head>

<body>

<%= link_to "sample app", '#', id: "logo" %>　　#link_toメソッド（第3引数はidを追加するオプション）

<nav>

<li><%= link_to "Home", '#' %></li> #link_toメソッド

<li><%= link_to "Help", '#' %></li> #link_toメソッド

<li><%= link_to "Log in", '#' %></li> #link_toメソッド

</ul>

</nav>

</div>

</header>

<div class="container"> #メインコンテンツ用のdiv

<%= yield %> #yieldメソッド（ページごとの内容が挿入される）

</div>

</body>

</html>

サインアップページへのリンクなどを含めたhome.html.erb

<div class="center jumbotron">
  <h1>Welcome to the Sample App</h1>

  <h2>
    This is the home page for the
    <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
    sample application.
  </h2>

  <%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
</div>　　#サインアップページへのダミーリンク

<%= link_to image_tag("rails.png", alt: "Rails logo"),　　#link_toメソッドの第一引数をimage_tagで画像にしている
            'http://rubyonrails.org/' %>

<h1>Welcome to the Sample App</h1>

<h2>

This is the home page for the

<a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>

sample application.

</h2>

<%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>

</div>　　#サインアップページへのダミーリンク

<%= link_to image_tag("rails.png", alt: "Rails logo"),　　#link_toメソッドの第一引数をimage_tagで画像にしている

'http://rubyonrails.org/' %>

link_toヘルパーとは何ぞ（2019.06.25追記）

リンクを生成するヘルパーメソッド
link_to(文字列, パス [, オプション, HTMLオプション])
→文字列の部分をimage_tagヘルパーにすることで画像のリンクを生成できる

image_tagヘルパーとは何ぞ

Imageタグを生成するヘルパーメソッド
→image_tag(画像ファイルへのパス, [, (オプション or HTMLオプション)])
ロゴの画像ファイルをapp/assets/images/に設置

#cURL（client for URL）→URLで示される場所からデータを送受信できるコマンド（ざっくり）
#DLしたデータをファイルとして保存→保存先　URLの内容をそのままファイルとしてDL（リダイレクトされてたら追う）→DL元
curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png

#cURL（client for URL）→URLで示される場所からデータを送受信できるコマンド（ざっくり）

#DLしたデータをファイルとして保存→保存先　URLの内容をそのままファイルとしてDL（リダイレクトされてたら追う）→DL元

curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png　

<%= link_to image_tag("rails.png", alt: "Rails logo"),  #画像ファイルへのパス　alt属性
            'http://rubyonrails.org/' %>
↑これがHTMLに出力されるとこうなる↓
<img alt="Rails logo" src="/assets/rails-c094bc3a4bf50e5bb477109e5cb0d213af27ad75b481c4df249f50974dbeefe6.png">
#謎の文字列
#→データが更新されると文字列も変わる
#→文字列を元にキャッシュを読み込むかデータを読み込むか判断する
#imagesディレクトリが省略されている？
#→/assets/imagesと/assetsが紐づけられている為呼び出せる（高速化のための仕組み）（ざっくり）

<%= link_to image_tag("rails.png", alt: "Rails logo"), #画像ファイルへのパス　alt属性

'http://rubyonrails.org/' %>

↑これがHTMLに出力されるとこうなる↓

#謎の文字列

#→データが更新されると文字列も変わる

#→文字列を元にキャッシュを読み込むかデータを読み込むか判断する

#imagesディレクトリが省略されている？

#→/assets/imagesと/assetsが紐づけられている為呼び出せる（高速化のための仕組み）（ざっくり）

演習

Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。リスト 5.4のコマンドを使って、図 5.3のネコ画像をダウンロードしてきましょう。

mvコマンドを使って、ダウンロードしたkitten.jpgファイルを適切なアセットディレクトリに移動してください (参考: 5.2.1)。

image_tagを使って、kitten.jpg画像を表示してみてください (図 5.4)。

#1.
$ curl -OL cdn.learnenough.com/kitten.jpg
#保存先を指定していないのでルート直下に元のファイル名で保存される
#2.
$ mv kitten.jpg app/assets/images/kitten.jpg
#移動　移動するデータのパス　移動先のデータのパス

#1.

$ curl -OL cdn.learnenough.com/kitten.jpg

#保存先を指定していないのでルート直下に元のファイル名で保存される

#2.

$ mv kitten.jpg app/assets/images/kitten.jpg

#移動　移動するデータのパス　移動先のデータのパス

・
・
・
#3.
<%= link_to image_tag("rails.png", alt: "Rails logo"),
            'http://rubyonrails.org/' %>
<%= image_tag("kitten.jpg", alt: "Kitten Photo" ) %>

・

#3.

<%= link_to image_tag("rails.png", alt: "Rails logo"),

'http://rubyonrails.org/' %>

<%= image_tag("kitten.jpg", alt: "Kitten Photo" ) %>

※この演習での内容は後で使いますが、5.1.2で本文と表示が違って落ち着かないのでコメントアウトで

5.1.2 BootstrapとカスタムCSS

Bootstrapを使えるようにする
　→Gemfileを編集し、bundle install

source 'https://rubygems.org'

gem 'rails',          '5.1.6'
gem 'bootstrap-sass', '3.3.7'　　#←追加
・
・
・

source 'https://rubygems.org'

gem 'rails', '5.1.6'

gem 'bootstrap-sass', '3.3.7'　　#←追加

・

$ bundle install

#controllerごとのCSSファイルが自動生成されているが、全てのスタイルをまとめて管理した方が分かりやすい！
#なので共通のCSSのファイルを作る↓
$ touch app/assets/stylesheets/custom.scss

$ bundle install

#controllerごとのCSSファイルが自動生成されているが、全てのスタイルをまとめて管理した方が分かりやすい！

#なので共通のCSSのファイルを作る↓

$ touch app/assets/stylesheets/custom.scss

#Bootstrap (とSprockets)を読み込む
#これによってクラスにBootstrapで使用されているクラス名を使用した部分にスタイルが適用される
@import "bootstrap-sprockets";
@import "bootstrap";

#Bootstrap (とSprockets)を読み込む

#これによってクラスにBootstrapで使用されているクラス名を使用した部分にスタイルが適用される

@import "bootstrap-sprockets";

@import "bootstrap";

↑これが
　こうなる↓

更にcustom.scssを編集し、すべてのページに適用される共通のスタイルを追加する

@import "bootstrap-sprockets";
@import "bootstrap";

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

@import "bootstrap-sprockets";

@import "bootstrap";

/* universal */

body {

padding-top: 60px;

}

section {

overflow: auto;

}

textarea {

resize: vertical;

}

.center {

text-align: center;

}

.center h1 {

margin-bottom: 10px;

}

↓こうなる

以下本文通まま
CSSの解説やスタイルの追加

演習

動作確認のみなので省略ー
1は5.1.1の演習直後にコメントアウトしているので
2の方は確認後削除で

5.1.3 パーシャル (partial)

同じようなコードをまとめる事が出来る
ファイル名はアンダースコアから始める（_shim.html.erbなど）
レンダーメソッドで呼びだす

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application',
                               'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/shim' %>   #IE用の条件付きコメント部分のパーシャル
  </head>
  <body>
    <%= render 'layouts/header' %>  #header部分のパーシャル13-13)
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'application', media: 'all',

'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'application',

'data-turbolinks-track': 'reload' %>

<%= render 'layouts/shim' %> #IE用の条件付きコメント部分のパーシャル

</head>

<body>

<%= render 'layouts/header' %> #header部分のパーシャル13-13)

<%= yield %>

</div>

</body>

</html>

renderメソッドで呼び出したいファイルを指定
「<%= render 'layouts/shim' %>」であれば
「app/views/layouts/_shim.html.erb」を探して、その内容をビューに挿入する

呼び出されるファイルはそれぞれこちら

#app/views/layouts/に_shim.html.erbと_header.html.erbを作る
$ touch app/views/layouts/_shim.html.erb
$ touch app/views/layouts/_header.html.erb

#app/views/layouts/に_shim.html.erbと_header.html.erbを作る

$ touch app/views/layouts/_shim.html.erb

$ touch app/views/layouts/_header.html.erb

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->

<!--[if lt IE 9]>

</script>

<![endif]-->

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "sample app", '#', id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",   '#' %></li>
        <li><%= link_to "Help",   '#' %></li>
        <li><%= link_to "Log in", '#' %></li>
      </ul>
    </nav>
  </div>
</header>

<%= link_to "sample app", '#', id: "logo" %>

<nav>

</ul>

</nav>

</div>

</header>

多分説明のために「呼び出し元のファイルを編集→パーシャルのファイルを作る」になってるけど
実際の作業では「パーシャルのファイルを作る→（コードを移す→）レンダーメソッドを挿入」ですよね。

って事でfooterのパーシャルを作成
（ファイルは自動生成しない。好みの方法で手動で作る)

><footer class="footer">
  <small>
    The <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
  </small>
  <nav>
    <ul>
      <li><%= link_to "About",   '#' %></li>
      <li><%= link_to "Contact", '#' %></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>

><footer class="footer">

<small>

The <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>

by <a href="http://www.michaelhartl.com/">Michael Hartl</a>

</small>

<nav>

<ul>

</ul>

</nav>

</footer>

#レイアウトにfooterのレンダーメソッドを追加
    <div class="container">
      <%= yield %>
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>

#レイアウトにfooterのレンダーメソッドを追加

<%= yield %>

<%= render 'layouts/footer' %>

</div>

</body>

</html>

本文に従ってCSSも追加

演習

Railsがデフォルトで生成するheadタグの部分を、リスト 5.18のようにrenderに置き換えてみてください。ヒント: 単純に削除してしまうと後でパーシャルを１から書き直す必要が出てくるので、削除する前にどこかに退避しておきましょう。

リスト 5.18のようなパーシャルはまだ作っていないので、現時点ではテストは redになっているはずです。実際にテストを実行して確認してみましょう。

layoutsディレクトリにheadタグ用のパーシャルを作成し、先ほど退避しておいたコードを書き込み、最後にテストが green に戻ることを確認しましょう。

#1.
退避用にファイルを作っておく（後でファイル名を変えてパーシャルにする）
$ touch app/views/layouts/head

#1.

退避用にファイルを作っておく（後でファイル名を変えてパーシャルにする）

$ touch app/views/layouts/head

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application',
                               'data-turbolinks-track': 'reload' %>
    #↑これを切り取ってheadファイルにペースト
    #↓こちらを追加
    <%= render 'layouts/rails_default' %>
    <%= render 'layouts/shim' %>
  </head>

<!DOCTYPE html>

<html>

<head>

<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'application', media: 'all',

'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'application',

'data-turbolinks-track': 'reload' %>

#↑これを切り取ってheadファイルにペースト

#↓こちらを追加

<%= render 'layouts/rails_default' %>

<%= render 'layouts/shim' %>

</head>

・
・
・
ERROR["test_should_get_root", StaticPagesControllerTest, 5.178689764999945]
 test_should_get_root#StaticPagesControllerTest (5.18s)
ActionView::Template::Error:         ActionView::Template::Error: Missing partial layouts/_rails_default with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :coffee, :jbuilder]}. Searched in:
          * "/home/ec2-user/environment/sample_app/app/views"
        
            app/views/layouts/application.html.erb:5:in`_app_views_layouts_application_html_erb__4125667178896645475_25573720'
            test/controllers/static_pages_controller_test.rb:10:in `block in <class:StaticPagesControllerTest>'
・
・
・
#テンプレートのエラー　パーシャルが見つからないなど書いてある
#正に<%= render 'layouts/rails_default' %の行がおかしいと書いてある

・

ERROR["test_should_get_root", StaticPagesControllerTest, 5.178689764999945]

test_should_get_root#StaticPagesControllerTest (5.18s)

ActionView::Template::Error: ActionView::Template::Error: Missing partial layouts/_rails_default with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :coffee, :jbuilder]}. Searched in:

* "/home/ec2-user/environment/sample_app/app/views"

app/views/layouts/application.html.erb:5:in`_app_views_layouts_application_html_erb__4125667178896645475_25573720'

test/controllers/static_pages_controller_test.rb:10:in `block in <class:StaticPagesControllerTest>'

・

#テンプレートのエラー　パーシャルが見つからないなど書いてある

#正に<%= render 'layouts/rails_default' %の行がおかしいと書いてある

#ファイル名を変更
$ mv app/views/layouts/head app/views/layouts/_rails_default.html.erb
#テストがGREENになって表示もOK

#ファイル名を変更

$ mv app/views/layouts/head app/views/layouts/_rails_default.html.erb

#テストがGREENになって表示もOK

まとめとか感想

やっぱり動いてるものを作るのは楽しいですね✨
パーシャルはリファクタリングをしていく上で重要なものになっていくと思うのでしっかり身に付けたい
っつーかなんでもしっかり身に付けたい訳なんですが。はい。

らくだ🐫にもできるRailsチュートリアルとは

「ド」が付く素人のらくだ🐫が勉強するRailsチュートリアルの学習記録です。
自分用に記録していますが、お役に立つことがあれば幸いです。

調べたとはいえらくだ🐫なりの解釈や説明が含まれます。間違っている部分もあるかと思います。そんな所は教えて頂けますと幸いなのですが、このブログにはコメント機能がありません💧お手数おかけしますがTwitterなどでご連絡いただければ幸いです