Sublime Text2 と Emmet LiveStyleをかけあわせて、爆速でCSS開発☆!

小林


Sublime Text2 と Emmet LiveStyleをかけあわせて、爆速でCSS開発☆!

こんばんは。小林です。

今回の記事は、下記を利用して開発されている方には、是非読んでいただきたい。

Sublime Text + Google Chrome( 或いはSafari )

そうでない方にもそこそこ読んでいただきたい。

目的としましては、「CSSの開発をより高速に行える環境を作りましょう!」ということなんです。百聞は一見に如かずということで、まずは、こちらのスーパーにエクサイティングなデモ動画を見ちゃいましょう!

諸般の事情で動画が観れないという方に簡単に説明しますと、Emmet LiveStyle(以下LiveStyleと表記)を使うことで以下のことができます。

  • リアルタイム更新。Sublime Textでただタイピングするだけで、あたかもブラウザのデベロッパーツールのCSSパネルを弄るかのように、リアルタイムでCSSを更新できる。無論いちいちファイルを保存したりする必要はない。
  • ローカルCSSファイルを必要としない。Sublime Textを開いて新しいタブを作って、そのままさくさくCSSを書くだけで良くて、CSSファイルすら必要としない。
  • 異なる画面、端末のCSSを一斉に更新する。レスポンシブデザインをする際にはこの上なく便利な機能である。
  • インストールが超カンタン!コマンドラインとか、マッピングとか一切要らない!

Google Chrome と Sublime Textを普段使いされている方はすぐにでもできちゃいます。(safariでもできますね。)

では、早速やってみましょう。

インストール方法

今のところ、LiveStyleは、Chrome, Safari, Sublime Textのプラグインという役割を果たしていますので、まずはプラグインとしてインストールしましょう。

Sublime Textのプラグイン

まずは、Sublime Textにパッケージコントロールはインストールされておりますでしょうか?まだの方は、こちらからインストールできますよ。

王御大のこちらの記事『”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド!』にわかりやすく書かれています。パッケージの管理がとっても便利になるので是非インストールしておきましょう。

次にパッケージコントロールから、LiveStyleを探してインストールします。

p7

注:インストール時にLiveStyleは自動的にPyV8エクステンションをインストールしてくれるはずですが、もしうまくいかなかったら手動でインストールしてみて下さい。手順はこちらをご参考下さい。お使いの環境にあったものを、パッケージフォルダにさくっと入れてやるだけです。同名のパッケージがあったらささっとリネームとかしておくといいかもしれませんね。

Google Chromeのプラグイン

最後にChromeWebstoreからLiveStyleをインストールしましょう。

これで完了です!Developer Toolsに「LiveStyle」というタブが新たに追加されたことを確認しておきましょう。

p8

※Safariでインストールする場合、WebKit Nightlyが必要です。手順もやや異なってきます。インストール方法はこちらをご参考下さい。

LiveStyleライフを満喫しましょう

無事インストールできたら、Sublime TextとGoogle Chromeを同時に開いている状態で、Chromeのほうで右上のアイコンがSublime Textに変わってたら正しく認識してくれてる証拠です。

後は「Enable Live Style for current page」をチェックすれば、現在開いているページのCSSをSublime Textを介して編集できます。左側がブラウザ側の外部CSS、右側がエディタ側(Sublime Text)で現在開いているファイルです。単純に両方を対応づけた後、Sublime Textのほうで編集すればリアルタイムでCSSが反映されます!

※関連付けるCSSファイルですが、既に保存しているものでなくても、Sublime Textの新しいタブからでも関連付けることが可能です。その場合はタブ名(untitled)が列挙されるはずです。さらっとCSSを弄ってみたい場合には便利です。

s1

また、複数のウィンドウで開いて、それぞれのウィンドウで同じファイルと関連付けておけば、編集したら一斉に変わります。ウィンドウサイズを変えてやれば、レスポンシブデザインが捗ります!

注意点

編集している間はデベロッパーツールをずっと開いたままにする必要があります。LiveStyleのタブがアクティブの状態じゃなくても構わないがデベロッパーツールをキープしなければならないことを覚えておいて下さい。

また、サイトのCSSファイルのサイズが異常に大きい場合、反映するのに少し時間がかかる場合もあります。その時は[Add file]というボタンを押して、ブラウザ側で新しいCSSファイルを作ってやるとかなり軽快になります。

現在、まだベータ版です

そう、まだまだ開発の真っ最中です。sassをサポートすることを予定しているようですので、楽しみですね。

ただ、最終的には有料になります!これだけ便利なツールですから、当然ですよね?有料になったら即購入したいと思ってます〜

感想

正直、すぐに実務で使えるかって言われると困りますが、

可能性を感じることはできました。

そうです。

子供達には無限の可能性があるはずです。

どうか世界中の子供達が愛に包まれますように。

小林
この記事を書いた人
小林

バックエンドエンジニア

関連記事