初心者向け : Railsログイン機能をつけてQAサイトを作る 2 -Bootstrap+UI修正-

初心者向け : Railsログイン機能をつけてQAサイトを作る 2 -Bootstrap+UI修正-

初心者向け : 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とします

 

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

 

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

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

 

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↓

 

application.js↓

 

 

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

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

 

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

 

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

ヘッダーに

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

リンクを追加します。

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

 

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

 

 

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

views/layout/application.html.erb

 

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

 

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

 

ログイン画面

ログイン後の質問画面

 

 

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

Questionsをリスト表示する

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

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

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

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

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

Questionsの詳細を修正する

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

 

 

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

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

 

HomepageのをLP化する

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

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

シンプルにするとこんな感じです

ご自身でUIを色々と作り変えてみてください

 

参考記事

RailsでBootstrapを使うには?実際にボタンを作って学べる!

Railsカテゴリの最新記事