プラグイン:Emmet LiveStyle

Emmet LiveStyle プラグイン

エディターと Web ブラウザーを同期させ、スタイル シートをリアルタイムかつ双方向で編集できるアプリケーション、Emmet LiveStyle を Mery で利用できるプラグインです。

Emmet LiveStyle プラグイン Ver 2.4.1 (32 ビット版)

• 1,235,119 バイト 2019/08/14
• SHA256: c96633e15d991af09b2cfd810501f5f73dee1ca9f5016723c9cd5a19fbfd5e6e
• 対応 OS: Windows 10, 8, 7, Vista, XP (32 ビット, 64 ビット)
• その他: Mery 2.6.7 以降 / Emmet LiveStyle 1.0.5 以降がインストールされている環境

Emmet LiveStyle プラグイン Ver 2.4.1 (64 ビット版)

• 1,582,015 バイト 2019/08/14
• SHA256: eeffa8797c9debdac1b4b8705af6024bc389d7e56ce282f7595eb742c702b76c
• 対応 OS: Windows 10, 8, 7, Vista, XP (64 ビット)
• その他: Mery 2.6.7 以降 / Emmet LiveStyle 1.0.5 以降がインストールされている環境

機能

• リアルタイム編集: LiveStyle はブラウザのスタイル シートをリアルタイムで更新し、ファイル保存やページ再読み込みなしで変更を確認できます。
• ブラウザからエディターへ: ブラウザのデベロッパー ツールでのレイアウト調整をソースコードに即座に反映可能で、LESS や SCSS にも対応しています。
• 余計なツール不要: 特別なツールやサーバーのインストールが不要で、エディターとブラウザに直接統合されています。
• どんなサイトでも使用可能: 一枚ページから大規模なプロジェクトまで、あらゆるウェブサイトに対応しています。

はじめに

動作環境

• Windows 11、10、8.1、8、7、Vista、XP をサポートしています。
• Mery Ver 2.8.7 以降と Emmet LiveStyle 1.0.5 以降をインストールしている必要があります。

アーカイブに含まれるファイル

• Plugins/LiveStyle.dll: プラグイン本体
• ThirdPartyNotices.txt: サードパーティ製コンポーネントのライセンス
• eula.rtf: ソフトウェア使用許諾書
• CHANGELOG.txt: 変更ログ
• README.txt: 本ドキュメント

インストール

1. アーカイブを展開し、LiveStyle.dll を Mery.exe のインストール先の Plugins フォルダーにコピーしてください。
2. Mery を起動すると、[ツール] メニューの [プラグイン] にインストールしたプラグインの項目が追加されます。

アップデート

• アーカイブを展開し、Plugins フォルダーの内容を Mery の Plugins フォルダーに上書きしてください。

アンインストール

• Mery の Plugins フォルダーからアンインストールしたいプラグイン (*.dll) を削除してください。

使い方

1. 最初に、Chrome の拡張機能をブラウザに追加します。

2. Mery で、[ツール] メニューから [プラグイン] の [Emmet LiveStyle] を選択し、プラグインを有効にします。

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

4. Chrome の LiveStyle で [Enable LiveStyle] のスイッチをオンに切り替えます。

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

6. Chrome の LiveStyle で該当するスタイル シートを選択します。

7. これで、Mery と Chrome を連携して、双方向編集を楽しむことができます。

注意事項

• Mery で開いているファイルを Chrome の LiveStyle に渡すには、以下の条件のいずれかを満たしている必要があります。

1. ファイルの拡張子が css、less、scss のいずれかであること。
2. 編集モードの名称が css、less、scss のいずれかであること。(必要に応じて less や scss の編集モードを作成してください)

• 既存のファイルを使用する場合は条件 (1)、未保存のファイルを LiveStyle に渡す場合は条件 (2) を参照します。

制限事項

• クロスドメインの環境では、CSS の読み込みに関する問題が発生するようですが、ローカル サーバーでは正常に動作しているようです。
• ブラウザのデベロッパー ツールで特定の属性値をドロップダウンで選択すると、エディター側に余分なセミコロンが残ることがあるようです。
• たとえば、overflow-x の値を auto から hidden にドロップダウンで変更する場合などに問題が発生します。LiveStyle 専用のエディタソフト (Sublime Text、Atom) でも同様の問題が報告されており、おそらくは Chrome 拡張機能の側に問題があると考えられます。
• Mery にはプロジェクト機能が提供されていないため、プロジェクトで使用されているグローバルな依存関係を渡すパラメータ globalDependencies には対応していません。