目的

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

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

今回やること

今回の目標は以下の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\application.rb

config.load_defaults 6.1
<!-- 以下を追加 -->
config.middleware.delete(Rack::MiniProfiler)

簡単！これでいいのかは知らない。

全体的な色味を決める

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

このサイト良いかも！
5色ずつ作ってくれて、気に入った色があれば固定して他の4色を作ってくれる。
全体的には、淡い青色でいきたいので #60c1d9 を固定して他の4色を選んでもらいます。
僕は配色センスが絶望的にないので、1色だけ固定して他は選んでもらいました。
君に決めた！

赤はキャンセル系で使いたくなるかなと思って、赤っぽい色がが入っているセットを選びました。

ヘッダーを設定する

まず何に手を付けていいか分かりませんが、Usersコントローラーを作成することにします。
コマンドプロンプトでアプリのファイルに入り、以下のコマンドを実行します。

cmd

rails g controller users

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

まずアクションの定義。
app > controllers フォルダに入っているuser_controller.rbを以下のように編集します。

app/controllers/users_controller.rb

class UsersController < ApplicationController
  def index
    
  end
end

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

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

app\views\users\index.html.erb

Hello World!

本題のヘッダーを記述。

公式の例を <head> </head> の中にそのまま貼ってみます。

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>

プルダウンが表示されない

画面は表示されますが、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を編集して色を変えます。

app\assets\stylesheets\application.scss

$light: #60c1d9; /*これを追加*/

@import "bootstrap";

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

ロゴを追加

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

gemfile

# 追加
gem "font-awesome-sass"

app\assets\stylesheets\application.scss

$light: #60c1d9;

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

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 にしました！

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' %>

かわいい！

Sassマップの書き換え

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

これにある変数を、使うと決めた色に書き換えます。
（決まってない部分が多くてめちゃくちゃだけど...）

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 になった！かわいい。

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

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

app\assets\stylesheets\application.scss

.form-control:focus {
  border-color: $success;
  box-shadow: 0 0 0 0.1rem $success;
}

まとめ

今日かなり作業したのだけれど、調べながら記事書きながらだとこのぐらいしか進まないですか...

次回は背景設定して、マイページ作ろうかな！

余談

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