プラグイン:Emmet LiveStyleのソースを表示

= Emmet LiveStyle プラグイン =

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

[[ファイル:live-style.png|border]]


<span class="plainlinks button">[https://www.haijin-boys.com/download/LiveStyle-2.4.1.zip Emmet LiveStyle プラグイン Ver 2.4.1 (32 ビット版)]</span>
<div class="smalltext">
*1,235,119 バイト 2019/08/14
*SHA256: [https://www.virustotal.com/#/file/c96633e15d991af09b2cfd810501f5f73dee1ca9f5016723c9cd5a19fbfd5e6e c96633e15d991af09b2cfd810501f5f73dee1ca9f5016723c9cd5a19fbfd5e6e]
*対応 OS: Windows 10, 8, 7, Vista, XP (32 ビット, 64 ビット)
*その他: Mery 2.6.7 以降 / Emmet LiveStyle 1.0.5 以降がインストールされている環境
</div>
<span class="plainlinks button">[https://www.haijin-boys.com/download/LiveStyle-x64-2.4.1.zip Emmet LiveStyle プラグイン Ver 2.4.1 (64 ビット版)]</span>
<div class="smalltext">
*1,582,015 バイト 2019/08/14
*SHA256: [https://www.virustotal.com/#/file/eeffa8797c9debdac1b4b8705af6024bc389d7e56ce282f7595eb742c702b76c eeffa8797c9debdac1b4b8705af6024bc389d7e56ce282f7595eb742c702b76c]
*対応 OS: Windows 10, 8, 7, Vista, XP (64 ビット)
*その他: Mery 2.6.7 以降 / Emmet LiveStyle 1.0.5 以降がインストールされている環境
</div>

== 機能 ==

* リアルタイム編集: 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: 本ドキュメント

== インストール ==

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

== アップデート ==

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

== アンインストール ==

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

== 使い方 ==

1. 最初に、[https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg Chrome の拡張機能]をブラウザに追加します。
: [[ファイル:live-style-1.png|border]]


2. Mery で、[ツール] メニューから [プラグイン] の [Emmet LiveStyle] を選択し、プラグインを有効にします。
: [[ファイル:live-style-2.png|border]]


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

4. Chrome の LiveStyle で [Enable LiveStyle] のスイッチをオンに切り替えます。
: [[ファイル:live-style-3.png|border]]


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


6. Chrome の LiveStyle で該当するスタイル シートを選択します。
: [[ファイル:live-style-5.png|border]]


7. これで、Mery と Chrome を連携して、双方向編集を楽しむことができます。
: [[ファイル:live-style-6.png|border]]

'''注意事項'''
* Mery で開いているファイルを Chrome の LiveStyle に渡すには、以下の条件のいずれかを満たしている必要があります。
# ファイルの拡張子が css、less、scss のいずれかであること。 
# 編集モードの名称が css、less、scss のいずれかであること。(必要に応じて less や scss の編集モードを作成してください)
* 既存のファイルを使用する場合は条件 (1)、未保存のファイルを LiveStyle に渡す場合は条件 (2) を参照します。

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