初心者向け : Railsログイン機能をつけてQAサイトを作る 2

初心者向け : Railsログイン機能をつけてQAサイトを作る 1 -ログイン機能+質問機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 2 -Bootstrap+UI修正-
初心者向け : Railsログイン機能をつけてQAサイトを作る 3 -回答機能+リアクション機能+ベストアンサー機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 4 -タグ付け機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 5 -管理画面機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 6 -検索機能-

今回は機能を付け加えずに、見た目を綺麗にしていくことに徹します

UIを簡単に作るにはBootstrapというHTML、CSS, Javascriptを
便利な機能でまとめたツールを使うと簡単にできます

テンプレートのダウンロード
Railsへindex.htmlを適用する
RailsにCSSを追加する
ルーティングやヘッダーを修正する
Questionsをリスト表示する
Questionsの詳細を修正する
HomepageのをLP化する
参考記事

テンプレートのダウンロード

今回はこちらのテンプレートを使用します
こちらのリンクの「Free Download」をクリックし、
テンプレートをダウンロードします
https://startbootstrap.com/themes/freelancer/

ダウンロード後はたくさんフォルダとファイルがありますが、
とりあえず必要なファイルはこちらだけです

Railsへindex.htmlを適用する

前回でHomeコントローラーを削除しましたが、
今回は必要となりので作成しましょう
名前はHomepageとします

$ rails g controller homepage index

1	$ rails g controller homepage index

コントローラーが作成できたら次はルートをこのように修正します

Rails.application.routes.draw do
  
  root 'homepage#index'
  get 'questions' => 'questions#index'

  resources :questions
  devise_for :users, controllers: {
      registrations: 'users/registrations',
      sessions: 'users/sessions'
  }
end

Rails.application.routes.draw do

root 'homepage#index'

get 'questions' => 'questions#index'

resources :questions

devise_for :users, controllers: {

registrations: 'users/registrations',

sessions: 'users/sessions'

}

end

それでは先ほどダウンロードしたテンプレートのhtmlを
views/homepage/index.html.erbに貼り付けます

ちなみにrailsではviews/layouts/applicaiton.html.erbがメインのhtmlとなり
<body>の中に入る情報だけを入れればいいので、一部削除した内容を貼り付けます

<!DOCTYPE html>
<html>
<head>
  <title>QaSite</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Page Content -->
<div class="container">

  <!-- Jumbotron Header -->
  <header class="jumbotron my-4">
    <h1 class="display-3">A Warm Welcome!</h1>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.</p>
    <a href="#" class="btn btn-primary btn-lg">Call to action!</a>
  </header>

  <!-- Page Features -->
  <div class="row text-center">

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>

  </div>
  <!-- /.row -->

</div>
<!-- /.container -->

<!-- Footer -->
<footer class="py-5 bg-dark">
  <div class="container">
    <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
  </div>
  <!-- /.container -->
</footer>
</nav>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
<footer class="py-5 bg-dark">
  <div class="container">
    <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
  </div>
</footer>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<!DOCTYPE html>

<html>

<head>

<title>QaSite</title>

<%= csrf_meta_tags %>

<%= csp_meta_tag %>

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

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head>

<body>

<a class="navbar-brand" href="#">Start Bootstrap</a>

</button>

<a class="nav-link" href="#">Home

<span class="sr-only">(current)</span>

</a>

</li>

<a class="nav-link" href="#">About</a>

</li>

<a class="nav-link" href="#">Services</a>

</li>

<a class="nav-link" href="#">Contact</a>

</li>

</ul>

</div>

</nav>

<h1 class="display-3">A Warm Welcome!</h1>

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.</p>

<a href="#" class="btn btn-primary btn-lg">Call to action!</a>

</header>

<h4 class="card-title">Card title</h4>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>

</div>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>

</div>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>

</div>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>

</div>

</div>

</div>

</div>

</footer>

</nav>

<%= yield %>

</div>

</footer>

</body>

</html>

localhost:3000で確認すると
画像やcssがないので見た目も綺麗ではありません

※開発者ツールがわからないという方はこちらから調べてください
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

なので、次はcssを追加していきます

RailsにCSSを追加する

ダウンロードしたテンプレートのフォルダに入っている
vendor/bootstrap/cssの中身全部をvendor/assets/stylesheetsへ
vendor/bootstrap/jsの中身全部をvendor/assets/javascriptへ
ペースとする

このような内容となります
開発環境の違いで表示のされ方が異なるかもしれません

次はダウンロードしたテンプレートのcssを
app/assets/stylesheetsにペースとします

追加が完了したらbootstrapを読み込ませるために
・app/assets/stylesheets/application.css
・app/assets/javascripts/applications.js
をそれぞれこのように修正します

application.css↓

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require bootstrap
 *= require_tree .
 *= require_self
 */

* This is a manifest file that'll be compiled into application.css, which will include all the files

* listed below.

* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's

* vendor/assets/stylesheets directory can be referenced here using a relative path.

* You're free to add application-wide styles to this file and they'll appear at the bottom of the

* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS

* files in this directory. Styles in this file should be added after the last require_* statement.

* It is generally better to create a new file per style scope.

*= require bootstrap

*= require_tree .

*= require_self

application.js↓

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require bootstrap
//= require_tree .

// This is a manifest file that'll be compiled into application.js, which will include all the files

// listed below.

// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's

// vendor/assets/javascripts directory can be referenced here using a relative path.

// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the

// compiled file. JavaScript code in this file should be added after the last require_* statement.

// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details

// about supported directives.

//= require rails-ujs

//= require activestorage

//= require turbolinks

//= require bootstrap

//= require_tree .

その後railsを再起動してlocalhost:3000で確認しましょう

ペーストが完了したらlocalhost:3000で現状を確認しましょう

先ほどよりかはだいぶ前進しました！

ルーティングやヘッダーを修正する

ヘッダーに

ログインしていれば「Questions」のリンクを表示
ログインしていなければ登録フォームに飛ばす

リンクを追加します。

修正後はviews/homepage/index.html.erbはこのようになります

<!-- 上部のNavigationのみ修正しました。それ以外は消さないでください -->
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <% if user_signed_in? %>
      <a class="navbar-brand" href="#">111Start Bootstrap</a>
    <% else %>
      <a class="navbar-brand" href="#">Start Bootstrap</a>
    <% end %>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <% if user_signed_in? %>
            <%= link_to "質問", "/questions", class: "nav-link" %>
          <% end %>
        </li>
        <li class="nav-item">
          <% if user_signed_in? %>
            <a><%= link_to "ログアウト", destroy_user_session_path, class: "nav-link", :method => :delete %></a>
          <% else %>
            <%= link_to "ログイン", "/users/sign_in", class: "nav-link" %>
          <% end %>
        </li>
      </ul>
    </div>
  </div>
</nav>

<% if user_signed_in? %>

<a class="navbar-brand" href="#">111Start Bootstrap</a>

<% else %>

<a class="navbar-brand" href="#">Start Bootstrap</a>

<% end %>

</button>

<% if user_signed_in? %>

<%= link_to "質問", "/questions", class: "nav-link" %>

<% end %>

</li>

<% if user_signed_in? %>

<a><%= link_to "ログアウト", destroy_user_session_path, class: "nav-link", :method => :delete %></a>

<% else %>

<%= link_to "ログイン", "/users/sign_in", class: "nav-link" %>

<% end %>

</li>

</ul>

</div>

</nav>

この状態で、ログインしたりログアウトしてみたりしましょう

現在はviews/home/index.html.erbのみなので、それ以外が適用されていません
なので次はlayout自体にヘッダーを適用していきます
フッターも一緒に移動します

views/layout/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>QaSite</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

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

<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <% if user_signed_in? %>
      <a class="navbar-brand" href="#">111Start Bootstrap</a>
    <% else %>
      <a class="navbar-brand" href="#">Start Bootstrap</a>
    <% end %>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <% if user_signed_in? %>
            <%= link_to "質問", "/questions", class: "nav-link" %>
          <% end %>
        </li>
        <li class="nav-item">
          <% if user_signed_in? %>
            <a><%= link_to "ログアウト", destroy_user_session_path, class: "nav-link", :method => :delete %></a>
          <% else %>
            <%= link_to "ログイン", "/users/sign_in", class: "nav-link" %>
          <% end %>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!--ここから-->
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<!--ここまで-->

<%= yield %>


<footer class="py-5 bg-dark">
  <div class="container">
    <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
  </div>
  <!-- /.container -->
</footer>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>QaSite</title>

<%= csrf_meta_tags %>

<%= csp_meta_tag %>

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

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head>

<body>

<% if user_signed_in? %>

<a class="navbar-brand" href="#">111Start Bootstrap</a>

<% else %>

<a class="navbar-brand" href="#">Start Bootstrap</a>

<% end %>

</button>

<% if user_signed_in? %>

<%= link_to "質問", "/questions", class: "nav-link" %>

<% end %>

</li>

<% if user_signed_in? %>

<a><%= link_to "ログアウト", destroy_user_session_path, class: "nav-link", :method => :delete %></a>

<% else %>

<%= link_to "ログイン", "/users/sign_in", class: "nav-link" %>

<% end %>

</li>

</ul>

</div>

</nav>

<%= yield %>

</div>

</footer>

</body>

</html>

layoutにヘッダーとフッターを移したので、views/home/index.html.erbのヘッダーは消します
消すとこんな感じのhtmlになります

<!-- Page Content -->
<div class="container">

  <!-- Jumbotron Header -->
  <header class="jumbotron my-4">
    <h1 class="display-3">A Warm Welcome!</h1>
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.</p>
    <a href="#" class="btn btn-primary btn-lg">Call to action!</a>
  </header>

  <!-- Page Features -->
  <div class="row text-center">

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary">Find Out More!</a>
        </div>
      </div>
    </div>

  </div>
  <!-- /.row -->

</div>
<!-- /.container -->

<h1 class="display-3">A Warm Welcome!</h1>

<a href="#" class="btn btn-primary btn-lg">Call to action!</a>

</header>

<h4 class="card-title">Card title</h4>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>

</div>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>

</div>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>

</div>

</div>

<h4 class="card-title">Card title</h4>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.</p>

</div>

</div>

</div>

localhost:3000の
homepage ( ログイン前 )

ログイン画面

ログイン後の質問画面

これでどの画面からでもログインしたり、ログアウトしたりすることができます！

Questionsをリスト表示する

今のhomepageのhtmlを使ってQuestionsをリスト化して自動的に
綺麗に表示されるようにしたいと思います。

まずはviews/html/index.html.erbのコードを
/views/questions/index.html.erbの上部へコピペします

localhost:3000/questionsに行くとこのように
上部に追加されています

次は全て適用してこのように修正します

<div class="container">
  <header class="jumbotron my-4">
    <h1 class="display-3">Questions</h1>
    <%= link_to '質問する！', new_question_path, class: 'btn btn-primary btn-lg' %>
  </header>
  <div class="row text-center">
    <% @questions.each do |question| %>
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card h-100">
        <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        <div class="card-body">
          <h4 class="card-title"><%= question.title %></h4>
          <p class="card-text"><%= question.body %></p>
        </div>
        <div class="card-footer">
          <%= link_to '詳細', question %>
        </div>
      </div>
    <% end %>
    </div>
  </div>
</div>

<h1 class="display-3">Questions</h1>

<%= link_to '質問する！', new_question_path, class: 'btn btn-primary btn-lg' %>

</header>

<% @questions.each do |question| %>

</div>

<%= link_to '詳細', question %>

</div>

<% end %>

</div>

適用後はこのような画面になります

Questionsの詳細を修正する

views/questions/show.html.erbをこのように修正します

<div class="container">
  <header class="jumbotron my-4">
    <h2 class="card-title"><%= @question.title %></h2>
  </header>
  <div class="card-body">
    内容：<br>
    <%= @question.body %>
  </div>
  <%= link_to 'Edit', edit_question_path(@question) %> |
  <%= link_to 'Back', questions_path %>
</div>

</header>

内容：<br>

<%= @question.body %>

</div>

<%= link_to 'Edit', edit_question_path(@question) %> |

<%= link_to 'Back', questions_path %>

</div>

見た目はこのようになります

綺麗にしたい方はbootstrapを使いながら綺麗にしてみてください

HomepageのをLP化する

通常Webサービスであれば、homepageは商品紹介や
使い方などが紹介されています。

僕はデザインセンスは皆無なので綺麗に作ることはできませんが、
新規登録のボタン追加と不必要なコードを削除するので、
色々試してみてください

<div class="container">
  <header class="jumbotron my-4">
    <h1 class="display-3">QA Site!</h1>
    <p class="lead">質問したり回答できたりします！</p>
    <%= link_to '質問したり回答できたりします', 'users/sign_up', class: 'btn btn-primary btn-lg'%>
  </header>
</div>