Reactでロード中indicatorを表示するcomponentをRailsに組み込む
react-spinkitを使ってみます。
以下にデモも用意してくれてます。
classnamesとobject-assignというライブラリを使用しているので、こちらをnpmでインストールしておくのを忘れないように。
$ npm install classnames object-assign --save
ソース中ではclassnamesはcx, object-assignはassignとして使われてるので、どこかでrequireしておきます。
cx = require("classnames"); assign = require("object-assign");
こちらのソースから直接componentをassetsのディレクトリにぶち込みました。
https://github.com/KyleAMathews/react-spinkit/blob/master/src/index.jsx
そして、必要なcssファイルも一通りRailsのasset pipelineに乗るようにしておきます。
https://github.com/KyleAMathews/react-spinkit/tree/master/css
ここまでくれば後は、Viewを呼び出すだけです。hamlから直接このComponentを呼び出すなり、子componentとして呼び出すなり。
私の今回の場合だと、render()メソッドでreturnする内容をstateによって切り替えて、load中ならSpinner componentが挿されるような感じで使いました。
これでloadingのanimationを簡単に実装することができました。便利!
Railsで標準クラスへメソッドを追加してNumericの桁数を求めれるようにする
Numericクラスに、桁数を返すメソッドを追加したいと思ったので、Railsに乗っていて標準クラスをオーバーライドするプラクティスあるのかなーと思って調べてみましたが、特に決まったものはなさそうです。
ruby on rails - Railsで既存クラスへのメソッド追加をする時のファイルの置き場所 - スタック・オーバーフロー
In Ruby on Rails, to extend the String class, where should the code be put in? - Stack Overflow
ruby - adding a method to built-in class in rails app - Stack Overflow
ruby - In Rails, how to add a new method to String class? - Stack Overflow
In Ruby on Rails, to extend the String class, where should the code be put in? - Stack Overflow
ということで lib/core_ext/
以下にどんどんつくっていくような感じにしてみます。
# lib/core_ext/numeric.rb class Numeric def length self.zero? ? 1 : Math.log10(self.abs).to_i + 1 end end
# config/initializers/core_ext.rb Dir[File.join(Rails.root, "lib", "core_ext", "*.rb")].each {|l| require l }
数値の桁数を求めるメソッドはこちらを参考にさせていただきました。
これで桁数を返せるようになりました!わーーーい
pry> 3.length => 1 pry> 10000.length => 5
impressionistでcounter_cacheがうまくupdateされない
PVの測定にimpressionistというgemを使っているのですが、このimpressionistにはRails3くらいに実装されたcounter_cacheの機能を簡単に盛り込めるようにしてくれるオプションをis_impressionable
メソッドにつけてくれてます。
ですがこいつがうまくupdateされなくて困りました。RailsとRubyのversionは以下です。
そして色々原因を探っていて以下のissueにたどり着きました。
https://github.com/charlotte-ruby/impressionist/issues/158
これをもとに
is_impressionable counter_cache: true, unique: :all
としたところ、無事動きました...!!!
これだけのためにかなり時間を使ってしまった、つらい。