話題の記事

【便利ツール】Emmet LiveStyle(Beta)で、ブラウザ・エディタ間のリアルタイム・スタイル反映を試す。

2013.08.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

以前、ブログでEmmetをご紹介いたしましたが、またまたEmmetが良さげなツールを開発中です。
現在はまだベータ版ですが公開されていたので一連の流れを試してみました。

アジェンダ

  • Emmet LiveStyleとは?
  • 環境設定
  • 動作確認
  • SCSS(Sass)・LESS等のメタ言語の対応は?

Emmet LiveStyleとは?

ブラウザとエディタ間のスタイルをリアルタイム確認・編集ができるツールみたいです。現在公式サイトでデモ用の動画を確認できます。

img-emmet- live-style

環境設定

Emmet LiveStyle を確認するには、設定が必要なので動作確認ができるまでの設定をご紹介します。

今回の動作検証環境

  • Windows7
  • chrome
  • Sublime Text 2

Sublime Text の設定

Sublime Text 側でパッケージのインストール

Sublime Textを開き、[Ctrl] + [Shift] + [p]から[pakage control : Install Pakege]を選択

img-emmet- live-style-000

パッケージ一覧からLive Styleを選択しインストールします。

img-emmet- live-style-001

パッケージPyV8の更新

こちらのサイトからご自分の環境にあったPyV8をダウンロードしておきます。

img-emmet- live-style-002

次にsublime textを起動しメニューの[Preferences]> [Browse Packages...]をクリックしエクスプローラーが立ち上げます。
中身はSublime Text内にインストールされているパッケージ一覧が表示されています。

img-emmet- live-style-003

一覧からpyv8フォルダを探し、一旦バックアップを取っておきます

img-emmet- live-style-005

先ほどPyV8 Binariesからダウンロードしていた、ファイル一式をpyv8フォルダに格納します。

  • _PyV8.pyd
  • PyV8.py

img-emmet- live-style-004

ここまできたら、Sublime Textを再起動します。

Chromeエクステンション Emmet LiveStyle をインストール

Chrome ウェブストアのEmmet LiveStyleページからchromeへインストールします。

img-emmet- live-style-006

ここまでで一旦環境設定は完了です。

動作確認

まずSublime TextとChromeを起動し、Chromeデベロッパーツールを開くと[LiveStyle]タブが表示されています。

img-emmet- live-style-007

[LiveStyle]タブを開くと現在表示している画面に反映されているCSS一覧が表示されています。

img-emmet- live-style-008

画面反映用CSSの準備

デモ用に適当なところにsample.cssを作成し、sublime textで開いておきます。

次に、Chrome開発ツールの[LiveStyle]内に先ほど作成したsample.cssを反映するよう設定をします。

LiveStyleでcssの読み込み指定をするには、Sublime Textで対象のcssファイルを開いている必要があります。

img-emmet- live-style-009

エディタ側からブラウザへ反映させる。

以下のように、Sublime Text と Chromeを表示しています。

img-emmet-live-style-010

実際にsample.cssにヘッダーを消すスタイルを記載すると、リアルタイムにブラウザ側へスタイルを反映してくれました。

img-emmet-live-style-011

SCSS(Sass)・LESS等のメタ言語の対応は?

私も皆さんも気になっている、Sass、Scss等への対応はどうなっているの?と思う方もいるかと思います。

以下、公式サイトから引用

Will it work with SASS/SCSS/LESS?
Although I’ve demonstrated live SCSS edit in video above, it’s just an experiment and it’s not ready for use.

It’s pretty easy to resolve SCSS nesting to plain CSS since it’s one-to-one mapping mostly. But when it comes to dynamic features like mixins, math, variables etc., things getting much harder. Of course I can do some basic transforms to create patch for CSS from preprocessor, but it’s very hard to transform CSS changes back to preprocessor.

But I’m not saying it’s impossible. If LiveStyle gets enough attention and funding, I’ll do a research on how to make it possible.

何やらデモ映像では、scss等の中間メタ言語でもデモは可能だけど、まだ実装しないみたいです。ですが今後開発予算がつけば対応するかも?とのことです。

まだベータ版ですが、今後に期待ですね。

ちなみに。。。

scssでコンパイルした、cssを指定しておけばできるのでは?と思いためしてみましたが、scssファイルにフォーカスしたままではリアルタイムで反映してくれず、 コンパイルされたcssにフォーカスした段階で反映しれくれました。。。現状では反映まで1段階の操作をはさめば可能みたいです。。。

参考にさせていただいたサイト