Railsアプリの全体的な色とヘッダーを決める

# 目的

さっきのテンプレートの記事で（ちょっと変えてるけど）すごく楽になった。うれしい。


今回は、アプリの全体的な色とヘッダーを決めようと思います。
絶対に機能のことから考えるべきなんでしょうけど、見た目出来た方がテンション上がるのでやらせてください。
手戻りが大量発生しそうだけど、それで懲りたら次から考えるから...！



# 今回やること

今回の目標は以下の3つ。
* 左上に出てくる時間を消す！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693325/0e09ac1a-db0b-c5c3-c1ff-6171cf665a03.png)
* 全体的な色味を決める
* ヘッダーを設定する


# 環境
* 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)` を追加すると消えた！

```ruby:config\application.rb
config.load_defaults 6.1
<!-- 以下を追加 -->
config.middleware.delete(Rack::MiniProfiler)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693325/6861c206-adf9-adf4-6d50-96a39ffebd86.png)
簡単！これでいいのかは知らない。


## 全体的な色味を決める

これ、大事よね。モチベーションが変わります。
途中でダサいとか思っちゃたら作るのやめそうなので...
配色のサイトを漁ります！

http://colormind.io/

このサイト良いかも！
5色ずつ作ってくれて、気に入った色があれば固定して他の4色を作ってくれる。
全体的には、淡い青色でいきたいので `#60c1d9` を固定して他の4色を選んでもらいます。
僕は配色センスが絶望的にないので、1色だけ固定して他は選んでもらいました。
君に決めた！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693325/020e7312-7e3c-da35-7282-9dc1651d3253.png)
赤はキャンセル系で使いたくなるかなと思って、赤っぽい色がが入っているセットを選びました。


## ヘッダーを設定する
まず何に手を付けていいか分かりませんが、Usersコントローラーを作成することにします。
コマンドプロンプトでアプリのファイルに入り、以下のコマンドを実行します。
```sh:cmd
rails g controller users
```

せっかくなのでBootstrapを使って、ヘッダーを設定してみます。

まずアクションの定義。
app > controllers フォルダに入っているuser_controller.rbを以下のように編集します。
``` ruby:app/controllers/users_controller.rb
class UsersController < ApplicationController
  def index
    
  end
end
```

次にルーティング。
configフォルダにあるroutes.rbファイルを以下のように編集します。

```ruby: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を作って、以下を記述します。

``` html:app\views\users\index.html.erb
Hello World!
```
本題のヘッダーを記述。

https://getbootstrap.jp/docs/5.0/components/navbar/#supported-content

公式の例を `<head> </head>` の中にそのまま貼ってみます。
```html:app\views\layouts\application.html.erb
  <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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693325/f4e79847-8f04-16df-a7b9-b87c7ab6225f.png)

### プルダウンが表示されない
画面は表示されますが、Dropdownが効きませんでした。
これ前もあって、時間かかったのにメモってないからまた調べます...

公式を見返したら書いてありました。（そりゃそう）

Bootstrap5はjQueryに依存していないそうですが、ドロップダウン、ポップオーバ、ツールチップは Popper ってやつに依存しているそうです。

> 以下の \<script> のいずれかを、ページの最後の \</body> タグの直前に記述してください。
> 
> bootstrap.bundle.jsとbootstrap.bundle.min.js` の両方は、ツールチップとポップオーバーのために Popper を含んでいます。
> ```html
> <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>` の前に入れて無事プルダウンが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693325/4f54ace3-086c-da9c-acc0-e46441f242f2.png)

### ヘッダーの背景色
背景を `#d7e0cf` にしたいので、ヘッダーは `#60c1d9` かな？
app > assets > stylesheets > application.scssを編集して色を変えます。
```scss:app\assets\stylesheets\application.scss
$light: #60c1d9; /*これを追加*/

@import "bootstrap";
```
CSSで編集もできるみたいだったけど、こっちの方がかっこ良い気ががする。


### ロゴを追加
左上に表示されるアプリ名にロゴを追加します。
その方が可愛いから。さすがにロゴは後で考えましょう。
とりあえずAwesomeのアイコンを置いておきます。

```sh:gemfile
# 追加
gem "font-awesome-sass"
```

```scss:app\assets\stylesheets\application.scss
$light: #60c1d9;

@import "bootstrap";
@import "font-awesome"; /*これを追加*/
```


```html:app\views\layouts\application.html.erb
<!-- 変更前 -->
<a class="navbar-brand" href="#">Navbar</a>
↓
<!-- 変更後 -->
<a class="navbar-brand" href="#">
  <i class="fa-solid fa-image"></i>
  Bootstrap
</a>
```

### アプリ名のフォント
アプリ名のフォントは `Fredoka One` にしました！
```html:app\views\layouts\application.html.erb
<!-- これを追加 -->
<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' %>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693325/9594a8e3-b7fd-9a2f-eda5-ac855f4437aa.png)
かわいい！

### Sassマップの書き換え
お昼ご飯を食べて思ったんだけど、 `$light: #60c1d9;` みたいに、決まっているやつ全部書き換えようと思った。

https://getbootstrap.jp/docs/5.0/customize/color/#theme-colors

これにある変数を、使うと決めた色に書き換えます。
（決まってない部分が多くてめちゃくちゃだけど...）
```scss:app\assets\stylesheets\application.scss
$secondary: #60c1d9;
$success: #e2c788; /*これを追加*/
$info: #60c1d9; /*これを追加*/
$warning: #60c1d9; /*これを追加*/
$danger: #CC496B; /*これを追加*/
$light: #60c1d9; /*これを追加*/
$dark: #284063; /*これを追加*/

@import "bootstrap";
@import "font-awesome";
```

### 検索ボタンをホバーしたときの色
`$secondary: #60c1d9;` としたので、
検索ボタンをホバーしたときの色が `#e2c788` になった！かわいい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693325/aa57d7af-b9c2-c9ec-7093-df462f65ffeb.png)

### input要素をフォーカスしたときの枠線色

input要素をフォーカスしたとき、枠線色のデフォルト青だったので `#e2c788` にしようと思って `border-color:` を変えたが青が残った...
調べてみたら `box-shadow:` も変えないとダメっぽい。できた。

```scss:app\assets\stylesheets\application.scss
.form-control:focus {
  border-color: $success;
  box-shadow: 0 0 0 0.1rem $success;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693325/744b0d9b-2064-5b4d-244b-4011ad0bfda5.png)


## まとめ
今日かなり作業したのだけれど、調べながら記事書きながらだとこのぐらいしか進まないですか...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693325/f043d896-a1a2-67a6-448d-576773746122.png)
次回は背景設定して、マイページ作ろうかな！


# 余談
ミドルバックのインプットしたくて始めたはずなのに、フロントでうろちょろしてます。
でも楽しいならOKです！
明日もやるよん。