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

__NOTOC__
= Emmet LiveStyle プラグイン =

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

[[ファイル:LiveStyle.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>

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

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

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

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

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


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

==使用方法==
'''1. はじめに LiveStyle のアプリケーションを下記からインストールしてください。'''
:[http://livestyle.io/ http://livestyle.io/]
:(Remote View 機能が不要な場合は LiveStyle アプリケーションなしで Chrome 拡張機能のみでも動作します)
:[[ファイル:LiveStyle2.png|border]]


'''2. LiveStyle のアプリケーションを起動したら「Install Chrome Extension」から Chrome の拡張機能をインストールします。'''
:[[ファイル:LiveStyle3.png|border]]


'''3. Mery の「ツール > プラグイン > Emmet LiveStyle」でプラグインを有効にします。'''
:[[ファイル:LiveStyle4.png|border]]


'''4. Chrome のメニューバーのアイコンから LiveStyle を起動します。'''


'''5. "Enable LiveStyle" のスイッチを ON にします。'''
:[[ファイル:LiveStyle5.png|border]]


'''6. Mery でスタイルシートのファイル (css, less, scss) を読み込むか、新規作成して編集モードを「css」に設定します。'''
:[[ファイル:LiveStyle6.png|border]]


'''7. Chrome 側の LiveStyle でスタイルシートを選択します。'''
:[[ファイル:LiveStyle7.png|border]]


'''8. おめでとうございます！Mery と Chrome で驚きの双方向編集をお楽しみください！'''

==注意事項==
===LiveStyle アプリケーション===
*LiveStyle アプリケーションは LiveStyle のサーバとして機能するものです。LiveStyle アプリケーションを使用しない場合は Mery が代わりにサーバとして動作します。この場合は RemoteView 機能が使用できません。
*Mery をサーバとして動作させる場合は必要に応じて Windows のファイアウォールの設定を行ってください。
:[[ファイル:LiveStyle8.png|border]]
*初期設定ではポート番号 54000 を使用します。

===LiveStyle Chrome 拡張機能===
*LiveStyle アプリケーションを使用せず [https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg Chrome ウェブストア]から直接入手も可能です。

==既知の問題==
===Emmet LiveStyle (Chrome 拡張機能) の不具合===
*クロスドメイン間で CSS の読み込みエラーが発生するようで、ローカルサーバーでは正常に動作するようです。(2018/06/07)
*ブラウザのデベロッパーツールで特定の属性値をドロップダウンで選択した場合にエディタ側にセミコロンが残ることがあります。例えば overflow-x の値を auto から hidden にドロップダウンで選択して変更した場合など。LiveStyle 専用のエディタ群 (Sublime Text, Atom) でも同様の問題を確認しましたので恐らく Chrome 拡張機能側の問題だと思います。

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