Rubyの条件分岐

case文

条件分岐を表現するための文法。複数の条件を指定する時に、if文のelsifを重ねるよりもシンプルにコードを書くことができる

sample

case 対象のオブジェクトや式
when 値1
 # 値1に一致する場合に実行する処理
when 値2
 # 値2に一致する場合に実行する処理
when 値3
 # 値3に一致する場合に実行する処理
else
 # どれにも一致しない場合に実行する処理
end

while文

繰り返し処理を行うためのRubyの構文。指定した条件が真である間、処理を繰り返す

sample

number = 0

while number <= 10
 puts number
 number += 1
end

# ターミナル出力結果
# 0
# 1
# 2
# 3
# 4
# 5
# 6
# 7
# 8
# 9
# 10

無限ループ

処理が永遠に繰り返されること

sample

number = 0

while true
 puts number
 number += 1
end

# ターミナル出力結果
# 0
# 1
# 2
# 3
# 4
# 5
# 6
# 7
# 8
# 9
# 10
# .
# .
# .

上記のコードは条件式の部分にはじめからtrueと書くことによって意図的に無限ループを発生させている

break

eachメソッドやwhile文などのループから脱出するために使われる

sample

number = 0

while number <= 10
 if number == 5
   break
 end
 puts number
 number += 1
end

# ターミナル出力結果
# 0
# 1
# 2
# 3
# 4

このようにif文などの条件分岐とbreakを使うと、特定の条件のときにループを脱出することができる

現場からは以上です！

どうも7noteです。aタグのカーソルやイベントを無効にする系のCSSまとめ記事です。

aタグは基本的にはどこか他のページにリンクさせるために使いますが、都合上aタグの標準の効果が邪魔だったり無効化させたい時ってあると思います。

主にクリックイベントを無効化させたり、カーソルを別の物に変えたりすることができるのですが、
私自身もいつも書き方を忘れて調べてはコピペしてるので、よく使うものをまとめました。

目次
・ 下線を消す
・マウスカーソルを指(?)以外の形にする
・クリックイベントを無効にする（ページリンクを無効化）
・おまけ：タブ移動でフォーカスが当たるのを無効にする

aタグの効果を無効化させるのによく使うCSS

下線を消す

a {
  text-decoration: none; /* 下線を無効化 */
}

無効化した下線を出すときはunderlineを書きましょう。

a {
  text-decoration: none; /* 下線を無効化 */
}

a:hover {
  text-decoration: underline; /* マウスホバー時だけ下線を出す */
}

マウスカーソルを指(?)以外の形にする

a:hover {
  cursor: default; /* マウスホバー時、通常時の矢印(➚)の形にする */
}

ブラウザのデフォルトに合わせるならauto。
逆に指の形にする時は、pointerを指定します。

他のカーソルの形は以下のサイトを参考にしてください。
https://developer.mozilla.org/ja/docs/Web/CSS/cursor

※次で説明するpointer-events: none;を指定しても、指(?)の形ではなくすることができます。

クリックイベントを無効にする（ページリンクを無効化）

a {
  pointer-events: none; /* 押してもリンクさせない */
}

たとえば特定のチェックボックスにチェックが入っていなければ、次のページには行けないようにしたり、
aタグにjavascriptの処理を入れてしまっていて、ページリンクさせたくない時などに使えます。

標準に戻すときは、autoを指定してください。

おまけ：タブ移動でフォーカスが当たるのを無効にする

<a tabindex="-1">リンク</a>

参考：http://freeladay.com/?p=2273

まとめ

大きめの開発の際に、たまに出てくるか出てこないかくらいで忘れがちな事が多いので自分の備忘録的な役割も込めて記事にまとめました。
下線の無効化などは、colorの指定と一緒にreset.css（全ページ共通のCSS）などで予め定義されている場合が多いので大丈夫ですが、pointer-eventsやcursorはたまにしか出てこないのでスペルミスで余計な時間を使うくらいであれば、どこかにストックかお気に入りしておいてすぐにコピペで使えると効率アップに繋がるかもしれませんね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

動機

button要素はクリックした時にfocusがあたった状態になるので、
デザインの再現の際に、不都合があることがあります。

button:focus {
    outline: none;
}

上記のようにfocus時のスタイルを消してしまえば、いったんは良いのですが、
キーボードでアクセスした時に、そのbuttonがfocusされているのか視覚的に分からないため、アクセシビリティ的には良くありません。

ですので、マウスでクリックした時はfocus時のスタイルを消し、キーボードアクセスでfocusされた時は、スタイルを残せるようにJavaScriptで判定したいと思います。

実装例

const button = document.querySelector('button');

const onClickButton = (event) => {
    if (event.detail !== 0) {
        event.currentTarget.style.outline = 'none';
    }
}

const onFocusButton = (event) => {
    event.currentTarget.style.outline = '';
}

button.addEventListener('click', onClickButton, false);
button.addEventListener('focus', onFocusButton, false);

解説

onClickButtonの箇所

clickイベントの時、引数eventにはMouseEventオブジェクトが入ります。
MouseEventには（自分が確認した限り）、keydown時のevent.keyのように押下されたキーを判定できるプロパティが無かったため、event.detail !== 0で、マウスのクリックなのか、Enterキーなのかを判定しました。

event.detailが何かと言うと、クリック数を読み取り専用で返してくれるプロパティのようです。

UIEvent.detail - Web API | MDN

ですので、今回はクリック数がゼロかどうかで、MouseかEnterかを判定しています。
つまり、

event.detail !== 0は、クリック数が0以外の時なので、
Mouseでクリックされた時の挙動を記述します。

Mouseでクリックされた時はevent.currentTarget.style.outline = 'none';でfocus時のスタイルを消します。もっと詳細にスタイルを指定したい場合は、classList.add('className')でクラス制御でスタイルを変更しても良いかもしれません。

onFocusButtonの箇所

onFocusButtonでは、focusが当たった時に、onClickButtonで消したスタイルを元に戻す記述をしています。

event.currentTarget.style.outline = '';で空文字を代入しているのは、既存のスタイル（ブラウザのデフォルトスタイルや、CSSで指定したスタイル）が再度適用できるようにです。

まとめ

以上、clickイベント時にMouseかEnterキーかを判定して、
focus時のスタイルをコントロールする方法を紹介しました。
より良い方法がありましたら、是非コメントを頂けたら幸いです。

メモとして残します。

先日z-indexが原因でボタンが押下できる判定が小さくなったという、事象を解決するのに時間がかかったため、こんなことにならないようにz-indexを考慮したページ全体を立体的に確認することができるプラグインないかなーと思ったら、chromeの標準機能でありました。

やり方

F12でchromeの開発者ツール出して
Ctrl＋Shift＋Pでlayerメニュー出して、
「show layer」を選択すると立体的にz-indexを考慮したページレイヤーが見れます。

グラブルwebバージョンで確認してみるとこんな感じ

グラブルはレイヤー綺麗ですね。。。

以上。

js/cssをブラウザでキャッシュさせない方法

Cahche Bustingって言うらしい。。。

その方法は、以下の通り

対策前のコード↓

sample.html

<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="script.js" type="text/javascript" ></script>
<!-- 画像 -->
<img src="sample.jpg" alt="Sample">

対策後コード↓

sample.html

<!-- CSS -->
<link href="style.css?ver=1.0.0" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="script.js?ver=1.0.0" type="text/javascript" ></script>
<!-- 画像 -->
<img src="sample.jpg?ver=1.0.0" alt="Sample">

「?」の後に任意の文字列を付与すると、ブラウザは対策前のURLとは違うものだと認識する。
(これをクエリ文字列という)

クエリ文字列はほかにも
・更新日時 (例：src=”style.css?date=20201027053000″)
・バージョン (例：src=”style.css?ver=1.2.3″)
・ランダム数

jsやcss側での加工はと言うと、必要ない。

これでjs/cssを更新しても、ブラウザでキャッシュされなくなる。
しかし、htmlがキャッシュされたら元も子もないので、htmlには以下のmetaを記述する。

sample.html

<head>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">

３つともキャッシュしちゃダメよ！ということらしい。

以上。

Herokuへデプロイする手順

ターミナル

brew tap heroku/brew && brew install heroku

ターミナル

heroku --version

ターミナル

# Herokuへログインするためのコマンド
% heroku login --interactive
  => Enter your Heroku credentials.
# メールアドレスを入力し、エンターキーを押す
  => Email:
# パスワードを入力して、エンターキーを押す
  => Password:

Gemfile

# ファイルの一番下の行に追記する
group :production do
  gem 'rails_12factor'
end

ターミナル

# Gemをインストール
% bundle install

ターミナル

% git add .
% git commit -m "gem rails_12factorの追加"

ターミナル

% heroku create アプリケーション名

ターミナル

% git config --list | grep heroku

ターミナル

% heroku addons:add cleardb
Creating cleardb on ⬢ アプリケーション名... free
Created cleardb-vertical-00000 as CLEARDB_DATABASE_URL
Use heroku addons:docs cleardb to view documentation

ターミナル

% heroku_cleardb=`heroku config:get CLEARDB_DATABASE_URL`

ターミナル

% heroku config:set DATABASE_URL=mysql2${heroku_cleardb:5}

# 以下、コマンドの実行結果
Setting DATABASE_URL and restarting ⬢ アプリケーション名... done, v◯◯
DATABASE_URL: mysql2://000000000000:0aa0000@us-cdbr-east-02.cleardb.com/heroku_aaa00000000?reconnect=true

ターミナル

% EDITOR="vi" bin/rails credentials:edit

ターミナル

% heroku config:set RAILS_MASTER_KEY=`cat config/master.key`

ターミナル

% heroku config

ターミナル

% git push heroku master

ターミナル

% heroku run rails db:migrate

公開を確認

ターミナル

% heroku apps:info

===ajax-app-123456
Addons:         cleardb:ignite
Auto Cert Mgmt: false
Dynos:          web: 1
Git URL:        https://git.heroku.com/アプリケーション名.git
Owner:          sample@sample.com
Region:         us
Repo Size:      165 KB
Slug Size:      56 MB
Stack:          heroku-18
Web URL:        https:/アプリケーション名.herokuapp.com/

現場からは以上です！