paranitips

Never stop learning! がモットーのゆるふわエンジニアブログ

autoprefixerを使って快適にコーディングする

開発

SASSを導入してからコーディングがかなり楽ちんになったのですが、CSSでベンダープレフィックスをつけるとき、「このプロパティってプレフィックスいるんだっけ？」「Safariでこれってまだ必要だっけ？」みたいな問題によく遭遇します。

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;

いちいちCan I Useで対象ブラウザを確認するのも手間がかかるし、どうにかならんものかと悩んでいたら、知り合いのコーダーにautoprefixerを教えてもらいました。

autoprefixerってなに？

Can I Useの情報を元に、自動でベンダープレフィックスを付与してくれるツールです。 対象のブラウザの条件を細かく設定できたり、不要なベンダープレフィックスがあれば削除も行ってくれます。

さっそく入れてみる

Gemfileに追記してbundle installでおわり。

# Gemfile
gem "autoprefixer-rails"

適用するためにキャッシュをクリアします。

$ rake tmp:clear

これでもううまいことやってくれます。 例えば、

# これが
:fullscreen a
  display: flex

# こうなります
:-webkit-full-screen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

便利すぎますね。。

ブラウザバージョンを指定する

browsersで対応ブラウザの条件を指定することもできます。

細かい書き方はai/browserslistを見てください。

# config/autoprefixer.yml
browsers:
    - "> 1%" # 使用率が1%以上
    - "last 2 versions" # 直近2つ前のバージョン
    - "IE >= 8" # IEは8以上

以上です。 これでコーディングが捗りますね〜＼(^o^)／

参考

railsを起動しようとしたらlibmysqlclient.18.dylib (LoadError)っていわれた

開発

railsサーバを起動しようとしたらmysqlまわりのエラーが出て起動できず。。

$ rails s
/Library/Ruby/Gems/2.0.0/gems/mysql2-0.3.16/lib/mysql2.rb:8:in `require': dlopen(/Library/Ruby/Gems/2.0.0/gems/mysql2-0.3.16/lib/mysql2/mysql2.bundle, 9): Library not loaded: /usr/local/lib/libmysqlclient.18.dylib (LoadError)
  Referenced from: /Library/Ruby/Gems/2.0.0/gems/mysql2-0.3.16/lib/mysql2/mysql2.bundle
  Reason: image not found - /Library/Ruby/Gems/2.0.0/gems/mysql2-0.3.16/lib/mysql2/mysql2.bundle
    from /Library/Ruby/Gems/2.0.0/gems/mysql2-0.3.16/lib/mysql2.rb:8:in `<top (required)>'
    from /Library/Ruby/Gems/2.0.0/gems/bundler-1.9.4/lib/bundler/runtime.rb:76:in `require'
    from /Library/Ruby/Gems/2.0.0/gems/bundler-1.9.4/lib/bundler/runtime.rb:76:in `block (2 levels) in require'
    from /Library/Ruby/Gems/2.0.0/gems/bundler-1.9.4/lib/bundler/runtime.rb:72:in `each'
...

なんかrubyのgemで変なとこ向いてて読み込みミスってるので、シンボリックリンクを張って対応します。

まず、インストールしているmysqlのlibmysqlclient.18.dylibを探します。

私のMacのmysqlはHomebrewでインストールしたので、詳細を確認します。

$ brew info mysql
mysql: stable 5.7.9 (bottled)
Open source relational database management system
https://dev.mysql.com/doc/refman/5.7/en/
Conflicts with: mariadb, mysql-cluster, mysql-connector-c, percona-server
/usr/local/Cellar/mysql/5.6.23 (9686 files, 339M)
  Poured from bottle
...

ディレクトリがわかったので、エラーになってる箇所にシンボリックリンクを張ります。

$ sudo ln -s /usr/local/Cellar/mysql/5.6.23/lib/libmysqlclient.18.dylib /usr/lib/libmysqlclient.18.dylib

以上でOKです。

参考

大量のデータ挿入・更新にバルクインサート・バックアップデートを利用する

開発

例えば以下の場合にSQLが1000回発行されます。

1000.times do
    Hoge.create(...)
end
# INSERT INTO hoge (...)
# INSERT INTO hoge (...)
# INSERT INTO hoge (...)
# ...

かなり非効率なのでbulk insertでSQLを１つにまとめて軽量化します。

Railsでbulk insertを実行するためにactiverecord-importというgemを利用します。

# Gemfile
gem 'activerecord-import'

すると、先ほどの処理は以下のように書けます。

hoge_list = []
1000.times do
    hoge_list << Hoge.new(...)
end
Hoge.import hoge_list
# INSERT INTO hoge (...), (...), (...), ...

すでにレコードが存在する場合は更新したい

レコードの存在をチェックして、存在する場合は更新、存在しない場合は挿入、ってことをRails側でやろうとするとSQLが大量に発行されて重い処理になってしまいます。

# こんな感じ
hoge_ids.each do |hoge_id|
    hoge = Hoge.find_by(id: hoge_id)
    if hoge.present?
        hoge.update(...)
    else
        hoge = Hoge.create(...)
    end
end

この場合は、on_duplicate_key_updateオプションを指定することで、MYSQL側で重複を検知して更新するようにします。

hoge_list = []
1000.times do
    hoge_list << Hoge.new(...)
end
# すでにレコードが存在する場合はname, contentカラムを更新するようにする
Hoge.import hoge_list, on_duplicate_key_update: [:name, :content]
# INSERT INTO hoge (...), (...), (...), ...

バルクインサート、バックアップデートでカンタン軽量化！お試しあれ＼(^o^)／

参考