【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」使うといいですよと教えていただきました。
・・・・！！！
ちなみに、こんなのになります・・・。(早く知りたかった・・・。)
【jQuery】ページトップへ戻る機能を実装してみる。
JavaScriptはカリキュラムで習いましたが、jQueryは触りだけでしたので
自分なりに勉強したことを備忘録として残しておくことにしました。
今回、jQueryを使って目指す実装はこの様な物です。
目次
1.事前準備
1-1.HTMLとCSSの記述
先ずはページトップボタンを作成します。
HTMLは下記をファイルの一番下に記述しました。
<div id="pagetop">
<a>ページトップ</a>
</div>
divタグで囲んでid名はまんま「pagetop」としてみました。
お次にCSS
#pagetop{
position: fixed;
right: 50px;
bottom: 50px;
cursor:pointer;
color: #fff;
background-color: #ccc;
font-size: 14px;
width: auto;
padding: 0 30px;
line-height: 50px;
letter-spacing: 1px;
border: none;
text-decoration: none;
}
ポイントとしては
- 「position: fixed;」スクロールしても位置が固定された状態する。
- 「right: 50px;」画面右端から50px分左にずらして配置。
- 「bottom: 50px;」画面下端から50px分上にずらして配置。
- 「cursor: pointer;」画像の上にマウスを乗せた時に、マウスカーソルが指マークに変わるようにする。
あとは、ボタンっぽく見える様にごちゃごちゃ記述を増やしました。
ちなみに、「right: ;」や「bottom: ;」の数値はマイナスの指定もできる様です。
今回は文字にしましたが、画像を使った実装の時に効果を発揮しそうです。
1-2.WebpackerでjQueryを管理
お次はjQueryを導入です。
ターミナルで「yarn add jquery」コマンドを実行します。
「jquery-rails」というGemを利用することもできるそうなのですが、
まだ勉強していませんので、こちらは後ほど勉強したら追記します。
1-3.設定ファイルの書き換え
config/webpack/environmet.js へ下記の様に記述を追加します。
1-4.jQueryを呼び出し
app/javascript/packs/application.jsへ下記の様に記述を追加します。
// that code so it'll be compiled.
require("turbolinks").start()
require("channels")
//下記一行を追加
// Uncomment to copy all static images under ../images to the output folder and reference
1-5.pagetop.jsファイルを作成・参照ができる様にする。
app/javascriptディレクトリに、pagetop.jsファイルを作成します。
とりあえず記述は後回しにして、pagetop.jsファイルが参照できる様に
app/javascript/packs/application.jsに再度下記の様に記述を追加します。
// that code so it'll be compiled.
require("turbolinks").start()
require("channels")
//下記一行を追加
require('../pagetop')
// Uncomment to copy all static images under ../images to the output folder and reference
これで準備完了！
2.ページトップへ移動の設定。
ページトップに戻るようにpagetop.jsファイルにJavaScriptを書いていくのですが、
その前に、jQueryの基本の書き方を勉強しましたので
こちらもおさらいとして残しておくことにします。
※jQueryの基本の書き方
jQueryには、記述の型があり以下のようになります。
先ず、「$(document).ready」の部分です、
「$(ダラー)」って実は「jQuery」の省略された書き方なのだそうです。
「jQuery(document).ready」と書いても同じとのこと。
つまりこれは、jQueryを呼び出す記述になります。
「これからjQuery書きますよ」意味ですね。
「document」は、HTMLの読み込みのことです。
「ready」はそのまま「準備」って意味です。
「function」の中身の記述されたものが処理されていきます。
つまり、上記は「HTMLの読み込みが準備できたら処理しまっせ」って意味になります。
そして、さらに略して書くことが一般的な様で以下のように書きます
2-1.クリックイベントの設定
いよいよ本題ですね。
「クリックされたら、ページトップにスクロールして移動するよ」
っていう命令を書いていきます。
$(function(){
$('#pagetop').on('click',(function () {
//id名#pagetopがクリックされたら、実行される処理を記述
}));
});
「$(function(){ ～ });」の中に、書いてきます。
「$(‘#pagetop’).on('click'( ～ ));」は、
「id名#pagetopがクリックされたら実行」っていう意味で、
id名#pagetopがクリックされたら、処理を実行します。
2-2. ページトップへ移動の設定
$(function(){
$('#pagetop').on('click',(function () {
//id名#pagetopがクリックされたら、以下の処理を実行
$("html,body").animate({scrollTop:0},"200");
}));
});
2行目の「$(‘#page’).on('click'( ～ ));」の中身を説明しますと、
先ず、「$(“html,body”)」はページ全体を選択しています。
htmlとbodyを同時に選択していますが、
複数でセレクタを選択する時はカンマ「,」で区切ります。
htmlとbodyを同時に選択する訳は、
WEBブラウザによっては、bodyに効くけどhtmlだと効かない、
逆にhtmlに効くけどbodyだと効かないみたいなことがあるらしいです。
WebKit系ブラウザでは、bodyに効き、
それ以外のブラウザではhtmlに効きくのだそうです(受け売り)。
4行目の「animate」は、
指定したセレクタの属性を個別にアニメーションすることできます。
アニメーションを調べてみたところ、
選択したセレクタの位置や幅を変えたり、その変化のスピードを変えたりと
汎用性の高いことが色々できちゃうそうです。
今回の場合だと、
animate({属性:属性の変化の値},”速度設定”)って感じですね。
属性の「scrollTop」は、
ウィンドウの一番上からのスクロール位置を指定することができます。
ページトップに移動させたいので、ウィンドウの一番上に指定してます。
つまり「0(ゼロ)」ですね。
速度設定は、’slow’、’normal’、’fast’、の文字列や、
ミリ秒単位の数値を入れることができます。
いろいろいじってみた結果、今回は200に設定してみました。
3.スクロール途中にボタンを出現させる。
ページトップにいるのにページトップボタンがあるのは
個人的にモヤっとするので、 スクロール途中で出てくる様な実装を行っていきます。
記述内容は下記の通りです。
$(function(){
$('#pagetop').hide();
$(window).on('scroll',(function () {
if($(window).scrollTop() > 0) {
$('#pagetop').slideDown(200);
} else {
$('#pagetop').slideUp(200);
}
}));
});
2行目の「hide()」は、非表示にする命令で、これを使って最初はボタンを非表示にします。
3行目の「$(window).scroll( ~ );」は、ウィンドウがスクロールされたら処理という意味です。
※if文の記述説明
次のifですが、下記の記述にあるように(条件)に合致すると、処理1が実行され
合致しなかったら処理2が実行されます。
if(条件){
処理1
}else{
処理2
}
rubyとの一番の違いは「end」で絞めないところでしょうか。
「scrollTop()」でスクロールの位置の値を取得しています。
ここのif文は、スクロールの位置が上から0以上の時は処理1が実行されて、
それ以外の時は処理2が実行されるってことになります。
- 処理1である「slideDown」は、隠れているボタンを縦方向にスライドしながら表示させていきます。
- 処理2である「slideUp」は、slideDownとは逆に画像を縦方向にスライドしながら非表示させていきます。
カッコの中の数値を変更することで表示、非表示のスピードを設定することができます。
遅くすると、ヌル〜って出てきてそれはそれで面白いですよ〜。
4.マウスオーバー時の設定
最後に画像の上にマウスが乗ったとき、つまりマウスオーバーした時の、
変化を作っていきたいと思います。以下のコードを書き足します。
$(function(){
$('#pagetop').on("mouseover", function () {
}).on("mouseout", function () {
});
});
- 「mouseover」マウスのポインタが乗った時の処理
- 「mouseout」マウスのポインタが外れた時の処理
をそれぞれ記述していきます。
上記だとマウスのポインタが乗った時はボタンの色がグレーになり、
マウスが外れている時は元の色に戻るという感じにしています。
5.まとめたコード
以下、今までのをまとめたコードです。
$(function(){
//ページトップへのスクロール
$('#pagetop').on('click',(function () {
//id名#pagetopがクリックされたら、以下の処理を実行
$("html,body").animate({scrollTop:0},"200");
}));
$('#pagetop').hide();
//ページトップの出現
$(window).on('scroll',(function () {
if($(window).scrollTop() > 0) {
$('#pagetop').slideDown(200);
} else {
$('#pagetop').slideUp(200);
}
}));
//マウスオーバー時の色変化
$('#pagetop').on("mouseover", function () {
}).on("mouseout", function () {
});
});
6.感想とおまけ
お疲れ様でした〜。
CSSやJavaScript(jQuery)ってRubyと違って、
微調整が難しいけどそれが楽しくて時間かけちゃいますね。
おまけは
マウスオーバー実装中に動作確認していた時のものです。
下記はそのコードですね。
$(function(){
//ページトップへのスクロール
$('#pagetop').on('click',(function () {
//id名#pagetopがクリックされたら、以下の処理を実行
$("html,body").animate({scrollTop:0},"200");
}));
$('#pagetop').hide();
//ページトップの出現
$(window).on('scroll',(function () {
if($(window).scrollTop() > 0) {
$('#pagetop').slideDown(200);
} else {
$('#pagetop').slideUp(200);
}
}));
//マウスオーバー時に避ける
$("#pagetop").on('mouseover',(function(){
}));
$("#pagetop").on('mouseout',(function(){
}));
});
どうなるかというと・・・。
フィっと避けやがります
個人的にツボに入っちゃったので乗っけておきました。
7.参考にさせていただいたサイト様
ブログ始めてみました。
初めまして
おはようございます。
こんにちは。
こんばんは。
rihu_doと申します。
ドリフが大好きです。
いかりや長介さん推しです。
自己紹介
現在、４４歳になりましたね。
レンタル店や本屋の店次長・店長を経験後、退職。
一念発起して、未経験からエンジニアになるためにスクールに通っております。
8月中旬から始めて一ヶ月経ちました。
日々学んでいることを少しづつでもアウトプットしていけたらと思います。
よろしくお願いいたします。
なぜエンジニア？
私が務めていた会社で、15年くらい前かな
社員になる前の「地域社員」と呼ばれていた頃
研修で各店を廻っていた時に、あるお店の上司(と言っても年下の方でしたが)が
エクセルのマクロを作っておられたんですね。
その勤めていたお店は、レンタルと本の販売を行っているお店で
本の発注のために商品の売上がわかるようなマクロを作っておられたんです。
ボタン一つで「ダー」ってセルが動いていくのを見て
カッコええ〜。
って、思っちゃったのです。
研修でしたから、一ヶ月程度でそのお店は離れてしまったのですが
その後の本勤務するお店も、本の取り扱いがあるお店でした。
自分でも作れるかやってみよう
先ずは本を買って読んでみたのですが、全くわからない。
先述の上司にお願いしてマクロのデータをもらい
そのデータを仕事の後や休日にいじくりながら
三ヶ月ぐらいかけてお客さんの注文を管理するマクロを作りました。
お店のスタッフさんに見せたところ、とても喜んでもらえたのです。
「管理が楽になった。」
「入荷漏れが防げる。」
「他のことに時間を当てられる」
もう、嬉しくて嬉しくて。
その後も、スタッフさんの意見を機能に取り入れながら
少しずつ改良を重ねて行って、
半年ぐらい経った頃、他のお店の社員さんから
「そのマクロもらえない？」
と、聞かれたのです。
二つ返事でお渡ししましたね。
幸い、他のお店でも好評で
今でも本を扱っているお店では
そのマクロを使ってくれています。
それが、「プログラム」に興味を持ったきっかけですね。
それからも、休日や仕事の後にちょこちょことマクロを作り続けてきたのですが
やっぱり限界もあるし、何より知識がない。
ネットで何を探せばいいかもわからない。
エクセル(PC)だけじゃなくて、
アプリも作れたら、もっと可能性が広がるんじゃないか？
そんなモヤモヤをずっと感じながらお仕事をしていました。
そして見ちゃったんですね。youtubeで広告を。
ず〜っと、ず〜っと悩んでました。
そして、家族に打ち明けました。
家族は反対しませんでした。
そして、会社を辞めて、今、勉強をしています。
目標
仕事での目標は
「ありがとう」「居てくれて助かった」
って言ってもらえることかな。
私も、誰かに、
「ありがとう」「居てくれて助かった」
って言いたいです。
そのために勉強を続けたいですね。
私的な目標は
先ずは九州を車で一周したいですね。
はよコロナ静まれ！！
そして、最終的にはスペイン・バルセロナへ行きたいですね。
ガウディの建築と寺院の完成(生きてる間にするのかな？)過程を見ていたい。
ご飯も美味しいらしいから、楽しみ。
そんなところですね。
ここまで読んでいただき
ありがとうございました。
