![EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利_06_20140817_150919-2.png EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利 06 20140817 150919 2](https://takaslife.com/wordpress/wp-content/uploads/2014/08/d397033f4739f6ad128b26e608da8e8d.png)
ブログテーマのカスタマイズのエディタとしてSublime Text3を使っています。すごく機能がたくさんあって使いやすいエディタなのですが、1つ不満点を上げると「リアルタイムプレビュー」機能がないことです。
その不満を解消してくれるのが今回ご紹介する、EmmetLiveStyleです。
EmmetLiveStyleを導入すると、Sublime Text3変更したスタイルをリアルアイムでブラウザーに反映してくれます。また、その反対にChromeのデベロッパーツールで編集した内容がSublime Text3側にもリアルタイムで反映されるようになります。
EmmetLiveStyleを導入準備
EmmetLiveStyleを導入するためには、Sublime Text3とブラウザはGoogleのChromeが必要です。
Sublime Text2でも良いようなのですが、私の環境では上手く動かなかったのでSublime Text3を使用しています。
ちなみにSublime Text3は執筆時βバーションです。
Sublime Text3側の準備
まず、Sublime Text3にパッケージをインストールしましょう。パッケージをインストールするためのPackage Controlは導入しておいてください。
Sublime Text2でコーディング!インストールしてみたよ | Taka’s Life
![EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利_03_20140817_150923.png EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利 03 20140817 150923](https://takaslife.com/wordpress/wp-content/uploads/2014/08/7d6803201ed3d749832faa2286c79188.png)
Sublime Text3を起動し、[command]+[shift]+[p]を押し、[pakage control : Install Pakege]を選択します。
![EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利_01_20140817_150919.png EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利 01 20140817 150919](https://takaslife.com/wordpress/wp-content/uploads/2014/08/bd728c06cb65b79e22ee4cd3bf7828f2.png)
次に「LiveStyle」を選択します。これでインストールされます。インストールされるとこのようなメッセージが表示されます。
これで、Sublime Text3側の準備は終了です。
GoogleChrome側の準備
GoogleChromeに拡張機能を導入します。
![EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利_06_20140817_150919.png EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利 06 20140817 150919](https://takaslife.com/wordpress/wp-content/uploads/2014/08/3cc3e9b4d782762e7b7b13bd1143b907.png)
こちらからインストールして拡張機能を「有効」にしましょう。
これでChrome側の準備も終了です。
動作確認してみよう
まず始めに、Sublime TextとChromeを再起動しましょう。再起動しないと上手く認識されないことがあるようです。
![EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利_02_20140817_150922.png EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利 02 20140817 150922](https://takaslife.com/wordpress/wp-content/uploads/2014/08/b883af62bc9f84768eab22ad36cedd61.png)
Chromeでカスタマイズしたいページを開きます。開いたら[command]+[option]+[i]でデベロッパーツールを開きます。
デベロッパーツールを開くと「LiveStyle」というタブがあります。そこを選択すると「Enable LiveStyle for current page」と表示されるのでチェックします。
![EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利_05_20140817_150921.png EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利 05 20140817 150921](https://takaslife.com/wordpress/wp-content/uploads/2014/08/f2c2ea5603585d0ed2d3207cc20edd3e.png)
チェックすると、この様に読み込まれているCSSファイルの一覧が表示されます。
そこで、カスタマイズしたいCSSファイルをまずはSublime Textで開いておきます。
今回、simplicity-childというテーマのstyle.cssをカスタマイズしたいのでSublime TextでCSSファイルを開いたら、Chromeの「simplicity-child/style.css 」 をクリックし、「style.css 」を選びます。
![EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利_04_20140817_150917.png EmmetLiveStyleでSublime Text3でリアルタイムプレビューが出来て超便利 04 20140817 150917](https://takaslife.com/wordpress/wp-content/uploads/2014/08/305b3e3e8f4f60c5622a50a586a43435.png)
これで、Sublime Text側で変更すると、リアルタイムでChrome側に反映されます。また、凄いのがChrome側のデベロッパーツールでCSSを弄ってもSublime Text側の値が、これもリアルタイムで変更されます。
まとめ
今まで、Chromeのデベロッパーツールで色々値を変えて検討>Sublime Textへ入力し直し>ブラウザー再読み込みと行っていた手間が全く無くなりました。
もうね、ホント便利。Sublime Textを使われている方はEmmetLiveStyleを導入してリアルタムプレビュー環境を構築すれば作業が捗ること間違いなしですよ!
コメント