【Rails】曜日によって色を変えてみる。
今回はスクールで習ったことの復習も兼ねて
曜日によって色を変える機能を実装していきます。
完成形はこんな感じです。
目次
前提
calendarモデルを作成し、「dateタイプ」のカラム名「day」を作り
作成した日付(day)と、作成日(crate_at)をそれぞれ表記します。
マイグレーションファイルは下記です。
def change
create_table :calendars do |t|
t.date :day, null: false
t.timestamps
end
end
end
ルーティングと
コントローラーは
class CalendarsController < ApplicationController
def index
@calendars = Calendar.all.order('day DESC')
end
def new
@calendar = Calendar.new
end
def create
@calendar = Calendar.new(calendar_params)
if @calendar.save
redirect_to root_path
else
render :new
end
end
private
def calendar_params
params.require(:calendar).permit(:day)
end
end
こんな感じ。
1.事前準備
1-1.日本語の言語設定を行う。
先ずは日本語に表記を変更したいです！
config/application.rbファイルの中に下記を追記します。
config.load_defaults 6.0
#下記一行を追加（日本語表記設定です。）
# Settings in config/environments/* take precedence over those specified here.
1-2. Gemfileを編集
お次は、日本語に対応する"rails-i18n"というGemを導入していきます。
曜日の表記もこちらの中に入っているので一石二鳥。
Gemfileファイルの一番下に記述します。
1-3.日本語化用のファイルを作成する。
config/locales/ja.ymlファイルを作成して下記の様に記述します。
ja:
time:
formats:
default: "%Y年%m月%d日 (%a) %H:%M"
3行目の「%Y年%m月%d日 (%a) %H:%M」は、
「%Y年%m月%d日 (%a) %H:%M:%S」まで記述すると作成時の秒まで記載できますが、
必要性を感じないので「%M」までに留めています。
「%H時%M分%S秒」の表記で迷いましたが
今回は「:」で区切って見ました。状況に合わせてっところでしょうか。
1-4.Vewファイルを編集
日本語化の準備はできましたので、あとはVewファイルを編集します。
今回はapp/views/calendars/index.html.erbファイルの記述を変更。
<div>
<%= link_to edit_calendar_path(calendar) do %>
<div>
<%= calendar.day%>
</div>
<div>
<%= calendar.created_at%>
</div>
<% end %>
</div>
こちらが
<div>
<%= link_to edit_calendar_path(calendar) do %>
<div>
<%# ここの一行を編集 %>
<%= l calendar.day, format: :long %>
</div>
<div>
<%# ここの一行を編集 %>
<%= l calendar.created_at %>
</div>
<% end %>
</div>
こんな感じです。
ここは自分なりの解釈になっちゃいますが・・・、
3行目の「<%= l calendar.day, format: :long %>」は、
「<%= I18n.l calendar.day, format: :long %>」の短縮版ってところで
「format: :long」は分類：日付に対してのformat属性、属性値は「long」で表示してね
と言う意味。
- 日付や時刻の場合は、long/middle/shortでロケールに応じた形式(ja.ymlに記述した内容)で表示してくれる。
- 数値の場合は、「currency」で通貨表記「percent」で％表記、オプションで「useseparator」を設定すると数値の整数部で3桁ごとにカンマを入れたりと変更してくれる。
と、理解しています。
あってるのかな？また折を見て復習し、間違えていたら編集します。
1-5.HTMLとCSSの記述
上記を踏まえてHTMLは
<h1>入荷日一覧</h1>
<div>
<%= link_to "入荷日登録", new_calendar_path %>
</div>
<%# 入荷日の一覧を表示 %>
<div>
<% @calendars.each do |calendar| %>
<div class='btn'>
<div>
<%= link_to edit_calendar_path(calendar) do %>
<div>
<%= l calendar.day, format: :long%>
</div>
<div>
<%= l calendar.created_at%>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
CSSはこんな感じ
.btn{
margin: 10px;
padding: 5px;
width: 500px;
transition : 0.3s;
align-items: center;
background-color: gray;
}
.btn a{
margin: 0 5px 0;
text-decoration: none;
color: white;
}
.btn:hover {
margin-top: 20px;
padding: 5px 0 5px 20px;
transform:scale(1.03,1.03);
box-shadow : 0 0 5px #000;
background-color: #2F3E51;
}
.btn:hover a{
text-decoration: none;
color: #e0dc62;
}
ポイントとしては
「:hover」を使ってボタンにマウスが乗った時
- 「transform: ;」元の形状からの変化を指定
- 「box-shadow: ;」影を付ける(浮き上がったっぽく見えないかなと期待)
- 「background-color: ;」ボタンの色
各変化を指定したことでしょうか。
現状の挙動はこんな感じです。
2.曜日ごとでクラスを管理する
2-1.if文を作成する。
下地が出来たところで
お次は曜日によってCSS用のクラス名を変える方法を考えていきます。
コントローラーでcalendarの作成データはindexに全てきているので
今回の場合はcarendar.dayの曜日を使ってif文を作ります。
具体的には下の様な感じです。
if calendar.day.wday == 0
return 'btn_red'
elsif calendar.day.wday == 6
return 'btn_blue'
else
return 'btn_gray'
end
「calendar.day.wday」の「wady」は曜日に関する内容で数値を返します。
「日:0」、「月:1」、「火:2」〜「土:6」って感じです。
なので、
0(日曜日)の時は、'「btn_red」ボタンが赤いCSSのクラス名'
6(土曜日)の時は、'「btn_blue」ボタンが青いCSSのクラス名'
それ以外はの時は、'「btn_gray」ボタンが灰色なCSSのクラス名'
と言う上記の様な条件分岐if文で作ります。
2-2.ヘルパーメソッドを作って呼び出す
上記のif文、問題はどこに書くかってことなのですが
書きたいのはここなんですよね・・・。
<div class='calendar'>
<% @calendars.each do |calendar| %>
<div class=ここにif分を書きたい>
<div>
<%= link_to edit_calendar_path(calendar) do %>
<div>
<%= l calendar.day, format: :long%>
</div>
<div>
<%= l calendar.created_at%>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
いや、書けるよ？書けるけど
・・・邪魔じゃね？
と言うことで、ヘルパーメソッドを作って呼び出すことにしました。
先ずは、app/helpers/calendars_helper.rbファイルに下記の様に記述します。
module CalendarsHelper
# ここから追記
def wday_color(calendar)
if calendar.day.wday == 0
return 'btn_red'
elsif calendar.day.wday == 6
return 'btn_blue'
else
return 'btn_gray'
end
end
# ここまで
end
先ほどのif文に「wady_color(calendar)」と言う名前を付けてあげます。
後は、ビューをいじるだけですね。
<div>
<% @calendars.each do |calendar| %>
<div class='<%= wday_color(calendar) %>'>
<div>
<%= link_to edit_calendar_path(calendar) do %>
<div>
<%= l calendar.day, format: :long%>
</div>
<div>
<%= l calendar.created_at%>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
う〜ん、すっきり出来ました。
残るはCSSの記述を残すのみです。
3.CSSの記述方法を考える
3-1.長い記述は読みにくい。
最後の砦、CSSですね。毎回ここで時間がかります。
パッと考えついたのは「赤」、「青」、「灰色」のクラスは設定済みなので
それぞれの記述をしていく・・・と、
長いわ！！
コピペばっかりだし、ブログの文字稼ぎかって感じ。
でも、コピペばっかりと言うのがミソでした。
(※流石に長かったのでコードは割愛しました。)
3-2.共通部分を切り出す。
そもそも、各ボタンの大きさは一緒なのです。違うのは色だけ。
そこで、HTMLの記述をひと工夫しました。
<div class='calendar'>
<% @calendars.each do |calendar| %>
<%# 下記一行の記述を変更 %>
<div class='btn <%= wday_color(calendar) %>'>
<div>
<%= link_to edit_calendar_path(calendar) do %>
<div>
<%= l calendar.day, format: :long%>
</div>
<div>
<%= l calendar.created_at%>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
classを「btn」と「<%= wday_color(calendar) %>」に分けてみました。
ポイントは「btn」と「<%= wday_color(calendar) %>」の間を
ヒトマス(enter一つ分)開ける(繋げていない)ところで、これにより
- 「btn」はボタンの形状や、マウスオーバー時の挙動
- 「<%= wday_color(calendar) %>」は色のみの指定。
と、棲み分けてみます。
CSSの記述もそれに合わせます。
.btn{
margin: 10px;
padding: 5px;
width: 500px;
transition : 0.3s;
justify-content: space-between;
align-items: center;
}
.btn a{
margin: 0 5px 0;
text-decoration: none;
color: white;
}
.btn_gray{
background-color: gray;
}
.btn_red{
background-color: #cc528b;
}
.btn_blue{
background-color: #65ace4;
}
.btn:hover {
margin-top: 20px;
padding: 5px 0 5px 20px;
transform:scale(1.03,1.03);
box-shadow : 0 0 5px #000;
}
.btn_gray:hover {
background-color: #2F3E51;
}
.btn_red:hover {
background-color: #c93a40;
}
.btn_blue:hover {
background-color: #0074bf;
}
.btn:hover a{
text-decoration: none;
color: #e0dc62;
}
いかがでしょうか。
上記通り、基準の形状と挙動を別に決めておいて
通常時とマウスオーバー時の各色を設定しただけで済みました。
書くと簡単なのですが、ここまで来るのに何度家の中を転げ回ったか。
粘着テープでも貼ってたら、ホコリぐらいは取れて家族に優しかったかもしれない。
4.参考にさせていただいたサイト様
いつもお世話になっております。解らないことだらけで調べまくっております。ありがとうございます！
カラー配色で迷わない！シーン別配色見本32パターン | Web制作会社スタイル
色を決めるって大変ですね。テーマ別にされていて本当に参考になりました！ありがとうございます！
5.お礼。
HTMLやCSSの微調整って大変ですよね。楽しいですけど。
RubyやRailsの記述って大変ですよね。赤い画面が来るのが怖い。
世のエンジニアの方々、いつもありがとうございます。
色んなサイトに行っていますが、どうやって記述しているのだろうと
ぐりぐりマウスを動かして検証して挙動を確認させていただいてます！
6.おまけ
今回、calendarモデルへの入力の際、手打ちでペチペチしていたのですよ。
試しで入力するだけだし、3〜4個入力するだけだし。
そしたら、「date_field」使うといいですよと教えていただきました。
・・・・！！！
ちなみに、こんなのになります・・・。(早く知りたかった・・・。)
