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デザインする時にとても高速にできるので便利ですね。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-ソフトウェア
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Aptana Studio 3インデントのタブをスペース4つから2つに変更する

概要 Aptana使いのcandleです。統合開発環境って便利です。sublime textが出現して、大半のプログラマーがsublime textに移動して、残った人もvim使って、本当にAptan …

wordpressでタグをボタンで挿入できる種類を増やす-AddQuicktag

概要 みなさんこんにちはcandleです。wordpressの記事を書いている時、 タグの挿入がもっと楽になれば便利なのにと思いました。私は記事の見出しはh3タグを使用しているのですが、h3タグのボタ …

Mac OS Mavericksのテキスト音声入力を試す

概要 どうもみなさんこんにちわcandleです。今回は文字やテキストをキーボードから打ち込むのではなく、マイクから入力する方法を試したいと思います。 条件 OSがMavericksであること 音声拡張 …

Mac 標準terminal、iterm2のEmacsでpowerlineが文字化けするのを修正する

概要 みなさんこんにちはcandleです。 今回はemacsのpowerlineが文字化けしてしまうのを修正する方法を紹介します。 こちらのサイトを参考にさせていただいています。 https://gr …

MarathonoはMacのGUIで簡単にlinuxコマンドを実行するソフト

概要 みなさんこんはcandleです。今回はmarathonoというGUIツールの使い方です。 このソフトの目的は大まかに2つです。 1つは任意のLinuxサービスを実行すること 2つ目はファイルの変 …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

twitter

スポンサードリンク

アーカイブ