読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

Railsの開発効率を上げる - guard-livereloadを使ってRailsでブラウザのオートリロードをさせる

Rails gem 開発を効率化する

f:id:nipe880324:20141016010205p:plain:w320

Guardとは

Guardとはファイルの変更を検知して、自動的にさまざまな処理を実行してくれるRubyのGemです。
これ単体で使うよりも、他のツールと連携し、自動的に処理を行い開発効率を上げるために使います。
メジャーどころとしては、次の3つだと思います。

本記事では、Railsへguard-livereloadの導入方法を記載します。



動作確認

  • Mac OSX 10.9
  • Ruby 2.0
  • Rails 4.1
  • guard 2.6.1
  • guard-livereload 2.3.0

目次

  1. Railsプロジェクトの作成
  2. guard-livereloadの導入


1. Railsプロジェクトの作成

まず、Guardを実行させるベースとなるRailsのプロジェクトを作成します。

rails new guard_test

次に、簡単なProductのScaffoldを作成します。

cd guard_test
rails g scaffold Product name:string price:integer discontinued:boolean

マイグレートします。

rake db:migrate

2. guard-livereloadの導入

Gemfiledevelopemnt group内にguard-livereloadを追加します。

# Gemfile
group :development do
  gem 'guard-livereload', require: false
end

Bundlerを実行して、インストールします。

bundle install

Guard定義が記載されたGuardfile(Guardの設定ファイル)を作成します。

bundle exec guard init livereload

作成されたGuardfileの中身を確認してみます。

これは、guardで監視するファイルが変更された場合に実行するプラグイン(livereload, rspec, rubocopなど)を記載します。
そして、guardブロック内にwatchを記載し、監視するファイルを記載します。

基本的にbundle exec guard init [Guardのプラグイン名を実行することにより、基本的な設定を自動でGuardfileに追加してくれます。

既にViewやHelperなどの変更に対する監視が記載されているので、今回は特に編集しません。
監視対象を増やしたい、減らしたい場合は必要に応じて追加してください。

# A sample Guardfile
# More info at https://github.com/guard/guard#readme

guard 'livereload' do
  watch(%r{app/views/.+\.(erb|haml|slim)$})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{public/.+\.(css|js|html)})
  watch(%r{config/locales/.+\.yml})
  # Rails Assets Pipeline
  watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html|png|jpg))).*}) { |m| "/assets/#{m[3]}" }
end

次にブラウザにLiveReloadのエクステンションを追加します。
次のサイトにSafari, Chrome, FireFoxのエクステンションへのリンクがあります。
http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

エクステンションを入れたら、Guardを実行します。

bundle exec guard
00:52:35 - INFO - Guard is using TerminalTitle to send notifications.
00:52:36 - INFO - LiveReload is waiting for a browser to connect.
00:52:36 - INFO - Guard is now watching at '/Users/nipe0324/guard_test'

※Railsプロジェクトの配置パスに日本語が入っていると、「E, [2014-10-16T00:43:38.055423 #28197] ERROR -- : run() in thread failed: inspected result must be ASCII only or use the same encoding with default external:/Users/nipe0324/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/listen-2.7.9/lib/listen/listener.rb:329:in `inspect'」のようなエラーが発生するのでご注意ください。

そして、別コンソールでサーバーを起動します。

rails s

http://localhost:3000/productsにアクセスし、ブラウザのLiveReladを有効にしてください。
Guardのコンソールに次のように「Browser connected.」と表示されたら、ブラウザとGuardが接続された証拠です。

[1] guard(main)> 00:52:42 - INFO - Browser connected.

f:id:nipe880324:20141016010240p:plain:w480

この状態で、index.htmlを更新し、保存します。

<h1>Listing products</h1>

<!-- 追加箇所 開始 -->
<h2 style="color:red;">Guardで自動的に追加される文字列</h2>
<!-- 追加箇所 終了 -->

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th>Discontinued</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  ...

保存をすると、GuardがViewファイルの変更を検知し、ブラウザを自動的にリロードしてくれます。

f:id:nipe880324:20141016010257p:plain:w480

これで、毎回ファイルを更新してブラウザをロードするということがなくなりとっても便利です。


もし、VagrantなどでMacなどに仮想マシンを起動させている場合は、そのための設定方法が記載されています。

Vagrant環境にLive Reloadを設定する - 麹町で働くWebエンジニアのメモ帳

参考文献


以上です。分からない箇所や間違いなどありましたらコメントください。