目的
さっきのテンプレートの記事で（ちょっと変えてるけど）すごく楽になった。うれしい。
今回は、アプリの全体的な色とヘッダーを決めようと思います。
絶対に機能のことから考えるべきなんでしょうけど、見た目出来た方がテンション上がるのでやらせてください。
手戻りが大量発生しそうだけど、それで懲りたら次から考えるから...！
今回やること
今回の目標は以下の3つ。
- 左上に出てくる時間を消す！
- 全体的な色味を決める
- ヘッダーを設定する
環境
- windows 10
- ruby 3.0.4
- rails 6
- Bootstrap 5.0.2
いざ出陣
左上の時間を消す
まず、この時間が何なのかというと「rack-mini-profiler」というgemによる機能らしい。
なら普通にgemfileからコメントアウトすれば良いじゃん、と思った僕。
ただ、他の機能でも使うらしい...
てことで、「rack-mini-profiler」はインストールしたまま消す。
config > application.rb で、 config.load_defaults 6.1 の下にconfig.middleware.delete(Rack::MiniProfiler) を追加すると消えた！
config.load_defaults 6.1
<!-- 以下を追加 -->
config.middleware.delete(Rack::MiniProfiler)
簡単！これでいいのかは知らない。
全体的な色味を決める
これ、大事よね。モチベーションが変わります。
途中でダサいとか思っちゃたら作るのやめそうなので...
配色のサイトを漁ります！
このサイト良いかも！
5色ずつ作ってくれて、気に入った色があれば固定して他の4色を作ってくれる。
全体的には、淡い青色でいきたいので #60c1d9 を固定して他の4色を選んでもらいます。
僕は配色センスが絶望的にないので、1色だけ固定して他は選んでもらいました。
君に決めた！
赤はキャンセル系で使いたくなるかなと思って、赤っぽい色がが入っているセットを選びました。
ヘッダーを設定する
まず何に手を付けていいか分かりませんが、Usersコントローラーを作成することにします。
コマンドプロンプトでアプリのファイルに入り、以下のコマンドを実行します。
rails g controller users
せっかくなのでBootstrapを使って、ヘッダーを設定してみます。
まずアクションの定義。
app > controllers フォルダに入っているuser_controller.rbを以下のように編集します。
class UsersController < ApplicationController
def index
end
end
次にルーティング。
configフォルダにあるroutes.rbファイルを以下のように編集します。
Rails.application.routes.draw do
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
resources :users
root 'users#index'
end
ヘッダーとは関係ないですが、ビューも作っておきます。
app > views > users フォルダにindex.html.erbを作って、以下を記述します。
Hello World!
本題のヘッダーを記述。
公式の例を <head> </head> の中にそのまま貼ってみます。
<head>
<title>Whereabouts</title>
<!-- 略 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<!-- 略 -->
</div>
</nav>
</head>
プルダウンが表示されない
画面は表示されますが、Dropdownが効きませんでした。
これ前もあって、時間かかったのにメモってないからまた調べます...
公式を見返したら書いてありました。（そりゃそう）
Bootstrap5はjQueryに依存していないそうですが、ドロップダウン、ポップオーバ、ツールチップは Popper ってやつに依存しているそうです。
以下の <script> のいずれかを、ページの最後の </body> タグの直前に記述してください。
bootstrap.bundle.jsとbootstrap.bundle.min.js` の両方は、ツールチップとポップオーバーのために Popper を含んでいます。
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
これを無視していたからですね。
</head> の前に入れて無事プルダウンが表示されました。
ヘッダーの背景色
背景を #d7e0cf にしたいので、ヘッダーは #60c1d9 かな？
app > assets > stylesheets > application.scssを編集して色を変えます。
$light: #60c1d9; /*これを追加*/
@import "bootstrap";
CSSで編集もできるみたいだったけど、こっちの方がかっこ良い気ががする。
ロゴを追加
左上に表示されるアプリ名にロゴを追加します。
その方が可愛いから。さすがにロゴは後で考えましょう。
とりあえずAwesomeのアイコンを置いておきます。
# 追加
gem "font-awesome-sass"
$light: #60c1d9;
@import "bootstrap";
@import "font-awesome"; /*これを追加*/
<!-- 変更前 -->
<a class="navbar-brand" href="#">Navbar</a>
↓
<!-- 変更後 -->
<a class="navbar-brand" href="#">
<i class="fa-solid fa-image"></i>
Bootstrap
</a>
アプリ名のフォント
アプリ名のフォントは Fredoka One にしました！
<!-- これを追加 -->
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
かわいい！
Sassマップの書き換え
お昼ご飯を食べて思ったんだけど、 $light: #60c1d9; みたいに、決まっているやつ全部書き換えようと思った。
これにある変数を、使うと決めた色に書き換えます。
（決まってない部分が多くてめちゃくちゃだけど...）
$secondary: #60c1d9;
$success: #e2c788; /*これを追加*/
$info: #60c1d9; /*これを追加*/
$warning: #60c1d9; /*これを追加*/
$danger: #CC496B; /*これを追加*/
$light: #60c1d9; /*これを追加*/
$dark: #284063; /*これを追加*/
@import "bootstrap";
@import "font-awesome";
検索ボタンをホバーしたときの色
$secondary: #60c1d9; としたので、
検索ボタンをホバーしたときの色が #e2c788 になった！かわいい。
input要素をフォーカスしたときの枠線色
input要素をフォーカスしたとき、枠線色のデフォルト青だったので #e2c788 にしようと思って border-color: を変えたが青が残った...
調べてみたら box-shadow: も変えないとダメっぽい。できた。
.form-control:focus {
border-color: $success;
box-shadow: 0 0 0 0.1rem $success;
}
まとめ
今日かなり作業したのだけれど、調べながら記事書きながらだとこのぐらいしか進まないですか...
次回は背景設定して、マイページ作ろうかな！
余談
ミドルバックのインプットしたくて始めたはずなのに、フロントでうろちょろしてます。
でも楽しいならOKです！
明日もやるよん。