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

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

関連記事

wordpressの記事一覧で個々の記事のcontentテキストの文字数をプラグインで制限する

English 日本語 概要 みんさんこんにちはcandleです。 最近、wordpress案件でしばらくの間フリーのテーマを使う事があったのですが、 フリーのもの多くは記事一覧で個々の記事の内容を全 …

スライド(パワースポイント)でクリエイティブコモンズが「表示」の写真の使い方

概要 みなさんこんにちは、最近サービスを作ろうとして忙しいcandleです。今回はクリエイティブコモンズの「表示」が指定されている画像のパワーポイントでの使い方です。 簡単にクリエイティブコモンズの説 …

Atomでhamlを書く

English 日本語 概要 みなさんこんにちはcandleです。今回はatomでhamlをかきます。 私はほとんどemacsですが、たまにatomで書く時があって、 hamlを開いたら、カラーリング …

redmineにclose button pluginを入れて終了したチケットをボタン1つで閉じる

概要 みなさんこんにちはcandleです。今回はとても便利なチケットを終了させるボタンを、表示できるプラグンの導入の仕方を紹介します。 チケットは一般に以下のコマンドのみチケット詳細で表示されています …

basscssのcssファイルをnpmで作成する

概要 みなさんこんにちは、candleです。今回はv8までバージョンが上がったbasscssの使い方です。 basscssは便利なcssフレームワークなのですが、デフォルトではすぐに使用できるcssが …

  • English
  • 日本語

プロフィール


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

twitter

スポンサードリンク

アーカイブ