初心者向け : 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を
便利な機能でまとめたツールを使うと簡単にできます
目次
テンプレートのダウンロード
今回はこちらのテンプレートを使用します
こちらのリンクの「Free Download」をクリックし、
テンプレートをダウンロードします
https://startbootstrap.com/themes/freelancer/
ダウンロード後はたくさんフォルダとファイルがありますが、
とりあえず必要なファイルはこちらだけです
Railsへindex.htmlを適用する
前回でHomeコントローラーを削除しましたが、
今回は必要となりので作成しましょう
名前はHomepageとします
|
1 |
$ rails g controller homepage index |
コントローラーが作成できたら次はルートをこのように修正します
|
1 2 3 4 5 6 7 8 9 10 11 |
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>の中に入る情報だけを入れればいいので、一部削除した内容を貼り付けます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <!-- 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 © 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 © Your Website 2019</p> </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↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* * 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↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 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はこのようになります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!-- 上部の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> |
この状態で、ログインしたりログアウトしてみたりしましょう
現在はviews/home/index.html.erbのみなので、それ以外が適用されていません
なので次はlayout自体にヘッダーを適用していきます
フッターも一緒に移動します
views/layout/application.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!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 © Your Website 2019</p> </div> <!-- /.container --> </footer> </body> </html> |
layoutにヘッダーとフッターを移したので、views/home/index.html.erbのヘッダーは消します
消すとこんな感じのhtmlになります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!-- 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 --> |
localhost:3000の
homepage ( ログイン前 )
ログイン画面
ログイン後の質問画面
これでどの画面からでもログインしたり、ログアウトしたりすることができます！
Questionsをリスト表示する
今のhomepageのhtmlを使ってQuestionsをリスト化して自動的に
綺麗に表示されるようにしたいと思います。
まずはviews/html/index.html.erbのコードを
/views/questions/index.html.erbの上部へコピペします
localhost:3000/questionsに行くとこのように
上部に追加されています
次は全て適用してこのように修正します
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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> |
適用後はこのような画面になります
Questionsの詳細を修正する
views/questions/show.html.erbをこのように修正します
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
見た目はこのようになります
綺麗にしたい方はbootstrapを使いながら綺麗にしてみてください
HomepageのをLP化する
通常Webサービスであれば、homepageは商品紹介や
使い方などが紹介されています。
僕はデザインセンスは皆無なので綺麗に作ることはできませんが、
新規登録のボタン追加と不必要なコードを削除するので、
色々試してみてください
|
1 2 3 4 5 6 7 |
<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> |
シンプルにするとこんな感じです
ご自身でUIを色々と作り変えてみてください
