プラグイン:Emmet LiveStyle

このページは執筆中です

Emmet LiveStyle プラグイン (beta)

エディタとブラウザでスタイルシートのリアルタイム・双方向な編集を可能にするツール "Emmet LiveStyle" を Mery で使用するためのプラグインです。

LiveStyle_2.0.0.zip

Emmet LiveStyle って？

リアルタイム編集

文字の入力と同時に LiveStyle がブラウザのスタイルシートを更新します。ファイルの保存やページの再読み込みをしなくても Web ページに反映された状態をすぐに確認することができます。

ブラウザからエディタへ

ブラウザのデベロッパーツールでレイアウトを微調整し、これらの変更をソースコードに反映させたいなんて思ったことはありませんか？LiveStyle はこれができる唯一のツールです！おまけに LESS と SCSS にも対応しています。

余計なツールが不要

LiveStyle は特別なビルドツールや Web サーバをインストールする必要がありません。エディタとブラウザに直接組み込まれますので環境を汚しません。

どんなサイトでも使用可能

LiveStyle はぺらんぺらんの一枚ページから Facebook のような巨大なサイトまでどんな規模のプロジェクトでも動作するように設計されています。

クロスブラウザのテストも簡単

Rimote View 機能を使えばインターネットに接続している任意のブラウザやデバイスで簡単にローカルのサイトをプレビューすることができます。もちろんエディタとブラウザのデベロッパーツールからリアルタイムで更新されます。(Remote View 機能はそのうち有料になるようです)

詳細な機能・チュートリアルは Emmet LiveStyle の公式サイト (http://livestyle.io/) でご確認ください。

使用方法

1. はじめに LiveStyle のアプリケーションを下記からインストールしてください。

http://livestyle.io/

2. LiveStyle のアプリケーションを起動したら「Install Chrome Extension」から Chrome の拡張機能をインストールします。

3. Mery の「ツール > プラグイン > Emmet LiveStyle」でプラグインを有効にします。

4. Chrome のメニューバーのアイコンから LiveStyle を起動します。

5. "Enable LiveStyle" のスイッチを ON にします。

6. Mery でスタイルシートのファイル (css, less, scss) を読み込むか、新規作成して編集モードを「css」に設定します。

7. Chrome 側の LiveStyle でスタイルシートを選択します。

8. おめでとうございます！Mery と Chrome で驚きの双方向編集をお楽しみください！

既知の問題

Emmet LiveStyle (Chrome 拡張機能) の不具合

ブラウザのデベロッパーツールで特定の属性値をドロップダウンで選択した場合にエディタ側にセミコロンが残ることがある。例えば overflow-x の値を auto から hidden にドロップダウンで選択して変更した場合など。LiveStyle 専用のエディタ群でも同様の問題を確認。恐らく Chrome 拡張機能側の問題だと思われるのであちら側の修正待ち。