プラグイン:Emmet LiveStyle

提供:MeryWiki
ナビゲーションに移動 検索に移動

Emmet LiveStyle プラグイン

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

live-style.png


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

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

機能

  • リアルタイム編集: 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.dllMery.exe のインストール先の Plugins フォルダーにコピーしてください。
  2. Mery を起動すると、[ツール] メニューの [プラグイン] にインストールしたプラグインの項目が追加されます。

アップデート

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

アンインストール

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

使い方

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

live-style-1.png


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

live-style-2.png


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

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

live-style-3.png


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

live-style-4.png


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

live-style-5.png


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

live-style-6.png

注意事項

  • 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 には対応していません。
スポンサーリンク