プラグイン:Emmet LiveStyle

Emmet LiveStyle プラグイン

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

動作検証にご協力いただける場合、Emmet LiveStyle 公式対応のエディタ「Sublime Text 3」の動作と比較の上で仕様かどうかの判断をしていただけると検証にかかる手間が省けるので助かります。

LiveStyle_2.3.1.zip 1,036,282 バイト 2017/05/28

HTMLファイルamazon.htmlが見つかりません

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

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

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

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

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

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

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

http://livestyle.io/

(Remote View 機能が不要な場合は LiveStyle アプリケーションなしで Chrome 拡張機能のみでも動作します)

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 で驚きの双方向編集をお楽しみください！

LiveStyle アプリケーションは LiveStyle のサーバとして機能するものです。LiveStyle アプリケーションを使用しない場合は Mery が代わりにサーバとして動作します。この場合は RemoteView 機能が使用できません。
Mery をサーバとして動作させる場合は必要に応じて Windows のファイアウォールの設定を行ってください。

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

Mery にはプロジェクト機能がないため、プロジェクトで定義しているグローバルな依存関係を渡すパラメータ "globalDependencies" には対応していません。