初心者向け : 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を
便利な機能でまとめたツールを使うと簡単にできます

Railsへindex.htmlを適用する

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

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

views/homepage/index.html.erbにこちらを貼り付けます

※ 今回はこちらのテンプレートを使用しますが、一部のみなので興味があればダウンロードして中身を確認してみてください
https://startbootstrap.com/themes/freelancer/

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

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

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

RailsにBootstrap/jQueryを追加する

bootstrapやjqueryを追加するために下記のコマンドを入れます

次はapp/config/webpack/environment.jsをこちらに書き換えます

次はapp/javascriptにstylesheets/application.scss を追加します

次はapp/javascript/packs/application.jsにこちらを追加

最後にapp/views/layouts/application.html.erbの一部を修正

ペーストが完了したら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を使うには?実際にボタンを作って学べる!

※ rails6に対応させました!