プラグイン:Emmet LiveStyle

このページは執筆中です

Emmet LiveStyle プラグイン (beta)

エディタとブラウザでスタイルシートのリアルタイム・双方向な同時編集を可能にするツール "Emmet LiveStyle" を Mery で使用するためのプラグインです。まだ十分な検証ができていないためベータ版とさせていただきます。

LiveStyle_2.0.0.zip

• 2,225,868 バイト 2016/06/08
• 対応 OS: Windows 10, 8, 7, Vista, XP (32 ビット, 64 ビット)
• SHA256: 0298317526fddcc82a3481846f28d689c4f7fb27590e326320862d381cb90a76

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

注意事項

LiveStyle アプリケーション

• LiveStyle アプリケーションは LiveStyle のサーバとして機能するものです。Remote View 機能を使用する場合に必要になります。アプリケーションを使用しない場合は Mery がサーバとして動作しますが Remote View 機能は使用できません。
• Mery をサーバとして動作させる場合は Windows のファイアウォールの設定の変更が必要になるかもしれません。

LiveStyle Chrome 拡張機能

• LiveStyle アプリケーションを使用せず Chrome ウェブストアから直接入手も可能です。

既知の問題

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

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