「プラグイン:Emmet LiveStyle」の版間の差分

← 古い編集新しい編集 →

2016年9月26日 (月) 12:05時点における版

Emmet LiveStyle プラグイン

エディタとブラウザを同期させてスタイルシートのリアルタイム・双方向な編集を可能にするアプリケーション "Emmet LiveStyle" を Mery で使用するためのプラグインです。

動作検証にご協力いただける場合、Emmet LiveStyle 公式対応のエディタ「Sublime Text 3」の動作と比較の上で仕様かどうかの判断をしていただけると検証にかかる手間が省けるので助かります。

LiveStyle_2.0.1.zip 1,032,956 バイト 2016/08/13

SHA256: ca70c02bf7f126bc93009c1ce0fe30d8498f4b7018b776d394ba6a3927e88258
対応 OS: Windows 10, 8, 7 (32 ビット, 64 ビット)
その他: Mery 2.2.0 以降 / Emmet LiveStyle 1.0.5 がインストールされている環境

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/

(Remote View 機能が不要な場合は LiveStyle アプリケーションなしで Chrome 拡張機能のみでも動作します)

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 のサーバとして機能するものです。LiveStyle アプリケーションを使用しない場合は Mery が代わりにサーバとして動作します。この場合は RemoteView 機能が使用できません。
Mery をサーバとして動作させる場合は必要に応じて Windows のファイアウォールの設定を行ってください。

初期設定ではポート番号 54000 を使用します。

LiveStyle Chrome 拡張機能

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

既知の問題

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

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

仕様上の制限

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

@@ 8行目: / 8行目: @@
 [[ファイル:Download.png|link=http://www.haijin-boys.com/uploads/LiveStyle_2.0.1.zip]]
-[http://www.haijin-boys.com/uploads/LiveStyle_2.0.1.zip LiveStyle_2.0.1.zip]
+[http://www.haijin-boys.com/uploads/LiveStyle_2.0.1.zip LiveStyle_2.0.1.zip] 1,032,956 バイト 2016/08/13
-*1,032,956 バイト 2016/08/13
 *SHA256: [https://www.virustotal.com/ja/file/ca70c02bf7f126bc93009c1ce0fe30d8498f4b7018b776d394ba6a3927e88258/analysis/1471079440/ ca70c02bf7f126bc93009c1ce0fe30d8498f4b7018b776d394ba6a3927e88258]
 *対応 OS: Windows 10, 8, 7 (32 ビット, 64 ビット)