3月 7 2015

HTMLのファイルを保存したらブラウザに自動で反映させる設定をSublime Text 2で行う

主にコーダー向けの記事です。
HTMLを書いているとき、ブラウザでちゃんと正しい表示がされているか確認しますよね。
そんなとき、何度もブラウザとエディタを行き来してリロードするのはめんどくさいと思います。

そんな思いを感じている方にオススメのSublime Text 2の設定です。

今回オススメするのは「Browser Refresh」というPackageです。
これは、ショートカットを設定するとブラウザをリロードしてくれるものです。
端的に言えば、このショートカットキーを、保存するキーと一緒にすればいいだけです。

以下、詳しく説明していきます(Mac向けです)。

インストール

まず、command + shift + pで、メニューを開きます。
そして、installと打って、「Package Control: install package」を選択します。
(Package Controlが入っていない人は、こちらを見て、インストールしておいてください)

その後に、BrowserRefreshと打つと、一覧に表示されると思います。(「BrowserR」まで打てば出てくると思います)
これを選択して、enterを押してください。インストールされます。

しばらくすると、こんな画面が出てくると思います。
この画面が出てくるとインストール完了です！

設定

デフォルトのままの設定では使いにくいので、設定を変更します。
「Sublime Text 2」→「Package Settings」→「Browser Refresh」→「Key Bindings - Default」を選択します。

デフォルトの設定は以下のようになっています。

[
    {
        "keys": ["super+shift+r"], "command": "browser_refresh", "args": {
            "auto_save": true,
            "delay": 0.0,
            "activate_browser": true,
            "browser_name" : "all"
        }
    }
]

結論から言うと、「HTMLを保存したらGoogle Chromeに反映させたいとき」は以下のようになります。

[
    {
        "keys": ["command+s"], "command": "browser_refresh", "args": {
            "auto_save": true,
            "delay": 0,
            "activate_browser": false,
            "browser_name" : "Google Chrome"
        }
    }
]

これで保存するとGoogle Chromeに反映されるようになります。

各設定の説明

Chrome以外にもカスタマイズしたいよ！！って方は以下をご覧ください。

この設定ファイルはJSON形式で記述されています。(RubyでいうHashみたいな)
JSON形式は、キー:バリューの形式になっていて、キーには設定項目、バリューにはその値のような設定の仕方になります。
いろいろな説明はこちらがわかりやすいです。

では、各設定を説明します

“keys”

ここにはショートカットキーを登録します。
デフォルトでは、"keys": ["super+shift+r"]となっています。
ここに、コンマ区切りで追加すると、順番にキーを押さないと実行されなくなります。
例えば、"keys": ["control+r","control+e"]とすると、「control+r」→「control+e」で反映するようになります

“command”

これは、キーを押した後のコマンドです。
ここを変えてしまうと全く動かなくなるのでいじらないほうがいいです。

“args”

以下4つの設定の親設定みたいなものなので、割愛します。

“auto_save”

trueもしくはfalseで設定します。
これをfalseにしてしまうと、ファイルが保存されなくなりますｗ
デフォルトのままでいいと思います。

“delay”

これは、反映されるまでの間隔です。単位は秒。
保存してから1秒経ったら反映させたい！とかなら、

1	"delay": 1,

とするのがいいと思います。

“activate_browser”

trueもしくはfalseで設定します。
trueに設定すると、saveした時にアプリケーションの選択がブラウザに切り替わります。
私はデュアルディスプレイで作業をしているので、いちいち変わるのはめんどくさいです。
ひとつのディスプレイで作業しているとかなら

1	"activate_browser": true,

でもいいのかもしれません。これはお好みで

“browser_name”

ここには、反映させたいブラウザを記述します。
デフォルトはallになっていて、全てのブラウザになっています(これはちょっと使いにくい)
私は基本的に「Google Chrome」しか使わないので、

1	"browser_name" : "Google Chrome"

としました。
[]を使うと、複数のブラウザに反映されるかな？とか思ったのですが、Safariで動かなかったので、原因不明です(´・ω・｀)

以下、対応しているブラウザ一覧です。
参考URLから持ってきたものなので、本家をみていただくのが良いかと思います。

Google Chrome (Mac, Win, Linux)
Google Chrome Canary (Mac, Win - see note above)
Firefox (Mac, Win, Linux)
Safari (Mac, Win)
Opera (Mac, Win)
WebKit (Mac)
Yandex (Mac)
Internet Explorer (Win)
SRWare Iron (Win)

以上です。
あなたのお役に立てたら嬉しいです。

task blog

Engineer blog