Reactでロード中indicatorを表示するcomponentをRailsに組み込む

react-spinkitを使ってみます。

github.com

以下にデモも用意してくれてます。

React Spinkit

classnamesとobject-assignというライブラリを使用しているので、こちらをnpmでインストールしておくのを忘れないように。

GitHub - JedWatson/classnames: A simple javascript utility for conditionally joining classNames together

$ 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 }

数値の桁数を求めるメソッドはこちらを参考にさせていただきました。

qiita.com

これで桁数を返せるようになりました!わーーーい

pry> 3.length
=> 1
pry> 10000.length
=> 5

impressionistでcounter_cacheがうまくupdateされない

PVの測定にimpressionistというgemを使っているのですが、このimpressionistにはRails3くらいに実装されたcounter_cacheの機能を簡単に盛り込めるようにしてくれるオプションをis_impressionableメソッドにつけてくれてます。

ですがこいつがうまくupdateされなくて困りました。RailsRubyのversionは以下です。

そして色々原因を探っていて以下のissueにたどり着きました。

https://github.com/charlotte-ruby/impressionist/issues/158

これをもとに

is_impressionable counter_cache: true, unique: :all

としたところ、無事動きました...!!!

これだけのためにかなり時間を使ってしまった、つらい。