joppot

コピペで絶対動く。説明を妥協しない

middlemanでlivereloadを使用する

   

Pocket

topthumb

概要

みなさんこんにちはcandleです。今回はmiddlemanでlivereloadを使ってみたいと思います。
livereloadとはhtml、css、jsなどを書いて保存したタイミングでブラウザを自動リロードする機能です。

livereloadを使用するときはmiddlemanだけでなく、ブラザ側でもアドオンを入れる必要があります。
筆者が確認しているのはsafari、firefox、chromeです。
この記事では上の3つのブラウザで試してみます。

前提

middlemanが扱える環境がある
safari、firefox、chromeのどれかがある。

SPONSORED LINK


livereload gemをmiddlemanにインストールする

middlemanのinitで既にlivereloadをインストールしている人がいるかもしれません。
いずれにしてもGemfileを開きます。

checkhellogemfile

gem 'middleman-livereload'

があるか確認します。なければ、追加します。

writelivereloadgem

そしたら、インストールします。

bundle install

サーバーを起動します。

middleman server

http://localhost:4567

にアクセスでmiddlemanにアクセスできます。

ブラウザでlivereloadを使用する

冒頭にも記述したように、livereloadはブラウザ側にもプラグインを入れる必要があります。
それぞれのブラウザにインストールしましょう。

safariにlivereload extensionをインストールする

まずはsafariです。
もちろん、safariを使用していない方は飛ばしてください。

extensionのページに移動します。

http://livereload.com/extensions/

livereloadextension

Safari extension 2.1.0をクリックしてダウンロードします。

ダウンロードが終わったら、extensionファイルをダブルクリックします。

エクステンションを信頼するかどうか聞かれるので、信頼します。

okextensionlivereload

livereloadが有効になりました。

activatelivereloadextension

ブラウザの上の方にlivereloadのボタンが表示されているか確認します。

livereloadbuttononsafari

ちなみに、livereloadのオン、 オフはわかりづらいです。
下の画像のように、中心が多少灰色になれば、livereload機能がオンになっています。白い時はオフです。

livereloadon

livereloadoff

firefoxにlivereload addonをインストールする

今度はfirefoxを見ていきます。

以下のページに移動します。

https://addons.mozilla.org/ja/firefox/addon/livereload/

「+ Firefoxへ追加」のボタンをおします。
firefoxlivereloadpage-1

アドオンを信用するか聞いてくるので、許可します。

acceptfirefoxliveload

インストールが終わったら、firefoxを再起動してください。

livereloadodon

初期設定ではブラウザにlivereloadのボタンが表示されていないので、右上のハンバーガーアイコンをクリック、一番したの「カスタマイズ」をクリックします。

customizefirefoxwindow

LRと書かれたアイコンをドラッグして右上のメニューバーに移動させます。

movetomenubar

firefoxのlivereloadはたまにバグります。そういう時はサーバとfirefoxを再起動しましょう。

ちなみに、firefoxのlivereloadのオンとオフは赤い線が引かれるかで判断しますが、
たまに赤い線がなくても機能することもあるので臨機応変にいきましょう。

firefoxlivereloadon

firefoxlivereloadoff

chromeにlivereload をインストールする

chromeも同じように、拡張機能をインストールします。

以下のURLに移動して、一番上の、LiveReload「+ CHROMEに追加」を押します。

https://chrome.google.com/webstore/search/liveReload?hl=ja

chromelive-1

エクステンションを信用するか聞かれるので「拡張期のを追加」を押します。

okchromelivereload

windowの右上にボタンが追加されます。

addlivereloadbutton

他と同様、livereloadのオン、オフはわかりづらいものになっています。真ん中が灰色なら、オンで白色なら、オフです。

choromelivereloadon

chromelivereloadoff

実際の使い方

ライブリロードはファイルが変更された時にブラウザが自動でリロードされます。
なので、試しにindex.html.erbなどをいじって見てください。するとブラウザが自動的にリロードされると思います。


まとめ

どうでしょうか、うまくいきましたか?これがあるとwebデザインする時にとても高速にできるので便利ですね。

 - ソフトウェア