ノンカフェインであなたにやさしい

Ruby,Rails,HTML,CSS,Reactなど

Windows WSLのUbuntuにGoogleChromeをインストールする

Railsで開発をしていてChromeDriverでのテストを利用しているためChromeが必要だった

sudo apt-get update
# 必要なライブラリのインストール
sudo apt-get install libappindicator1 libappindicator3-1 fonts-liberation

# 最新安定版のDL、インストール
curl -O https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb

# ここでパッケージの依存関係で怒られたので依存関係の解消
sudo apt --fix-broken install

# 再度インストールを試した
sudo dpkg -i google-chrome-stable_current_amd64.deb

# インストールされていることの確認
google-chrome --version

参考

WSL Ubuntu 18.04 に Headless Chrome を入れて Ruby で操作する | Lonely Mobiler

WindowsとWSLでHeadless Chromeを使ってみよう! - Qiita

Rails migrationでdefaultに作成時の現在時刻を入れる

default: -> { "now()" } という指定ができる。

  create_table "hoge" do |t|
    t.datetime "hoge_created_at", default: -> { "now()" }, null: false
  end
hoge = Hoge.create
hoge.hoge_created_at
=> nil
# DBで時間を入れるため作成直後はnilになってしまう

hoge.reload.hoge_created_at
=> 2020-07-29 10:33:25 +0900
# reloadすればちゃんと入っている

reloadしないといけないので使用方法には注意が必要 before_create などでデフォルト値設定したほうがRails側的には使いやすいかも

Ruby eachの引数で配列を展開する

# idと名前の2次元配列、CSVの配列などを使う時に便利
arr =[
  [1, 'hoge'],
  [2, 'moge'],
]

arr.each do |id, name|
  puts id, name
end

# 出力
# 1
# hoge
# 2
# moge

以下と同等のことが出来ます

arr.each do |values|
  id, name = values
  puts id, name
end

each_with_indexでも可能

# ()でくくる必要があります
arr.each_with_index do |(id, name), index|
  puts id, name
end

iOS UIWebViewでjQueryのclickイベントが重複して発火する

※UIWebViewは2020/12移行更新できなくなりますのでWKWebViewへのアップデートが必要です
https://developer.apple.com/news/?id=12232019b

UIWebViewで以下のjQueryのページを動かすとクリックイベントが2回発火してしまう場合がありました。 ※1回しか発火しないときもある

$('#btn').on('click', () => {
  console.log('fire!');
});

対応

touchend でも発火させ伝播を止める。
stopPropagation, preventDefault だけだと発火してしまうときがあった

$('#btn').on('touchend, click', (e) => {
  # デフォルトアクション、伝播の中断
  e.stopPropagation();
  e.preventDefault();
  console.log('fire!');
});

そもそも WKWebView に書き換えることで回避することができます。

iOS Safariでz-indexの親に -webkit-overflow-scrolling: touch; overflow: auto; が設定されているとz-indexが正しく効かないバグ

モーダルやチュートリアルなどを実装していてiOS Safariだけ z-index が正しく効いていない状況があった。

簡単なサンプル codepen.io

z-index の大きい要素の親に以下が設定されていると z-index が前面に来てくれないよう。

-webkit-overflow-scrolling: touch;
overflow: auto;

現状どちらかのプロパティを消すor別の値にするの2つで解消できた。