Rails4 / turbolinksのローディングをnprogressで簡単に

最近趣味的にRails4も色々触ってみているんですが，turbolinksは面白い反面，制御が難しいです． turbolinksの解説は，ぐぐるとたくさん出るので，そっちを参照しましょう． 簡単に言うと，pushStateの機能を使ってJavaScript経由でリンクを取得することで，jsやcssやメタデータの読み込みを省いて高速化させるための機能です． ページの読み込みをAjaxを使って行うので，色々できることがあるのですが，今回はYoutubeのようにページ遷移に読み込み中を表すプログレスバーを表示させる方法を紹介します． この機能を実装するために，NProgress.jsというライブラリを使います．

• [Demo] http://ricostacruz.com/nprogress/
• [Github] https://github.com/rstacruz/nprogress

上のリンクから，デモが見れます． 画面上部全体にプログレスバーが表示されているのがわかると思います． このプログレスバーの実装が，nprogress-railsというgemを使うと簡単にできます．

• [Gem] https://rubygems.org/gems/nprogress-rails
• [Github] https://github.com/caarlos0/nprogress-rails

環境

• Rails4 (turbolinks: on)

使い方

Githubそのまんまですが，使い方は以下のようになります．

Gemfileに以下の内容を記述します．

gem 'nprogress-rails'

そして，bundle install

まず，Javascriptの読み込みの設定を行います．application.js.coffeeに次の内容を記述します．(もちろん，application.jsでも大丈夫です．その場合は，#=ではなく//=)

#= 'nprogress'
#= 'nprogress-turbolinks'

turbolinks以外にも，pjaxや直接使う方法もあるみたいです．

次に，cssの読み込みの設定を行います．application.css.scssに次の内容を記述します．(こちらも，application.cssで大丈夫です．)

*= require nprogress
*= require nprogress-rails

これだけです．これで，ページ遷移時に画面上部にプログレスバーが表示されていると思います．