LoginSignup
1
0

More than 1 year has passed since last update.

@masatom86650860

アプリを作る　その２

Last updated at Posted at 2022-01-22

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

####ヘルパーを作成
app/helpers/application_helper.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

<!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

<!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

<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

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

####ホーム画面のレイアウト
app/views/layouts/application.html.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

<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

<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（デザイン）

@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

@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

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

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コンローラーを生成

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

class UsersController < ApplicationController
  def new
  end
end

###new.html.erbを見る

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

###そのテストを見る

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

<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は大きさを指定-->

プレビュー確認

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0