アプリを作る　その２

###ヘルパーとは
新しく作ったメソッドはカスタムヘルパー と呼ばれます。


####ヘルパーを作成
app/helpers/application_helper.rb

```rb
module ApplicationHelper
  def full_title(page_title = '')                     # ページタイトルを作成する デフォルトの引数は空
    base_title = "自作アプリ" 
    if page_title.empty?                              # 論理値テスト
      base_title                                      # 暗黙の戻り値
    else
      page_title + " | " + base_title                 # 文字列の結合
    end
  end
end
```

####full_titleメソッドを使いhtmlを作成
app/views/layouts/application.html.erb

```erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <!--新しくタイトルを作成することができる-->
    <!--ページタイトルを設定-->
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
    <!--home.html.erbの内容を代入させる-->
  </body>
</html>
```

この後プッシュ、herokuにデプロイ

###ホーム画面をレイアウト
####ブランチ作成
ブランチを作成した時に名前を変更した。
調べると

```
git branch -m <古いブランチ名> <新しいブランチ名>
```
と入力するとできた。

```
ubuntu:~/environment/my_app (master) $ git checkout -b home-page2
Switched to a new branch 'home-page2'
ubuntu:~/environment/my_app (home-page2) $ git branch -m home-page2 home-page-layout
ubuntu:~/environment/my_app (home-page-layout) $
```
####ホーム画面のhtml レイアウト
app/views/layouts/application.html.erb

```erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <!--新しくタイトルを作成することができる-->
    <!--ページタイトルを設定-->
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <%= link_to "自作アプリ", '#', id: "logo" %>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Home",   '#' %></li>
            <li><%= link_to "Log in", '#' %></li>
            <!--リンクをつける-->
          </ul>
        </nav>
      </div>
    </header>
    <div class="container">
      <%= yield %>
      <!--home.html.erbの内容を代入させる-->
    </div>
  </body>
</html>
```

####yieldに代入するhtml(ホーム画面）
app/views/static_pages/home.html.erb

```erb
<div class="center jumbotron">
  <h1>ようこそ自作アプリへ</h1>

  <h2>
    出来事を書き込もう。
  </h2>

  <%= link_to "ログインしよう。", '#', class: "btn btn-lg btn-primary" %>
</div>

<%= image_tag "jisaku.jpg", size: '300x150' %>
<!--画像を添付することができる sizeは大きさを指定-->
```
####gemを登録したから
app/assets/stylesheets/custom.scss

```scss
@import "bootstrap-sprockets";
@import "bootstrap";
````

####ホーム画面のレイアウト
app/views/layouts/application.html.erb

```erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <!--新しくタイトルを作成することができる-->
    <!--ページタイトルを設定-->
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/shim' %>
  </head>

  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      <!--home.html.erbの内容を代入させる-->
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>
```

####ホーム画面(ヘッダー）のパーシャル
app/views/layouts/_header.html.erb

```html
<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "自作アプリ", '#', id: "logo" %>
      <nav>
        <ul class="nav navbar-nav navbar-right">
          <li><%= link_to "Home",   '#' %></li>
          <li><%= link_to "Log in", '#' %></li>
          <!--リンクをつける-->
        </ul>
      </nav>
  </div>
</header>
```
####ホーム画面(フッター）のパーシャル
app/views/layouts/_footer.html.erb

```erb
<footer class="footer">
  <small>
    The <a href="#">自作アプリ</a>
    by <a href="#">ただいま制作中</a>
  </small>
  <nav>
    <ul>
      <li><%= link_to "About",   '#' %></li>
      <li><%= link_to "Contact", '#' %></li>
      <li><a href="#">News</a></li>
    </ul>
  </nav>
</footer>
```

####ホーム画面のscss（デザイン）

```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;
}

/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 { /*タグで指定できる*/
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: #777;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

/* header */

#logo { /*idでも指定できる*/
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #0f0;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a {
  color: #555;
}

footer a:hover {
  color: #222;
}

footer small {
  float: left;
}

footer ul {
  float: right;
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 15px;
}
```
####スタイルシートは分かりやすいようにする
app/assets/stylesheets/custom.scss

```scss
@import "bootstrap-sprockets";
@import "bootstrap";

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

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

/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: #777;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #0f0;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: #008000;
    text-decoration: none;
  }
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
  a {
    color: #555;
    &a:hover {
      color: #222;
    }
  }
  small {
    float: left;
  }

  ul {
    float: right;
    list-style: none;
     li {
       float: left;
       margin-left: 15px;
     }
  }
}
```

####static_controllerを整える
config/routes.rb

```rb
Rails.application.routes.draw do
  get root_path
  # root_path 名前付きルートで要求
  #ホーム画面だけ
  #get  '/help',    to: 'static_pages#help'
  #これからこういう書き方にしなければならない。
end
```
####static_controllerのテスト
test/controllers/static_pages_controller_test.rb

```rb
require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  
  test "should get root" do
    get root_url
    assert_response :success
    assert_select "title", "自作アプリ"
    # titileタグはこれであっているか確認
  end

  # test "should get home" do
  #   get static_pages_home_url
  #   # static_pages/homeをurlに入力してhomeページに行くことを要求する
  #   assert_response :success
  #   #その要求が成功しましたか？
  #   assert_select "title", "自作アプリ"
  #   # ページのタイトルがこれであっているか？
  # end
end
```

##ユーザー登録
###Userコンローラーを生成

```rb
ubuntu:~/environment/my_app (home-page-layout) $ rails generate controller Users new
Running via Spring preloader in process 12581
      create  app/controllers/users_controller.rb
      # Usersコントローラを生成
       route  get 'users/new'
      # userコントローラのnewアクションを生成
      invoke  erb
      create    app/views/users
      create    app/views/users/new.html.erb
      # newアクションでnew.html.erbに行くようにする
      invoke  test_unit
      create    test/controllers/users_controller_test.rb
      # userコントローラのテスト
      invoke  helper
      create    app/helpers/users_helper.rb
      # そのヘルパー　
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/users.scss
```

###userコントローラを見てみる
create  app/controllers/users_controller.rb

```rb
class UsersController < ApplicationController
  def new
  end
end
```

###new.html.erbを見る

```erb
<h1>Users#new</h1>
<p>Find me in app/views/users/new.html.erb</p>
```

###そのテストを見る

```rb
require 'test_helper'

class UsersControllerTest < ActionDispatch::IntegrationTest
  test "should get new" do
    get users_new_url
    # users/uswでgetリクエスト
    assert_response :success
    # リクエストを受けることができましたか？
  end

end
```

###ホーム画面にサインインのリンクにルートを取り付ける
app/views/static_pages/home.html.erb

```erb
<div class="center jumbotron">
  <h1>ようこそ自作アプリへ</h1>

  <h2>
    出来事を書き込もう。
  </h2>

  <%= link_to "ログインしよう。", signup_path , class: "btn btn-lg btn-primary" %>
</div>

<%= image_tag "jisaku.jpg", size: '300x150' %>
<!--画像を添付することができる sizeは大きさを指定-->
```

プレビュー確認