「プラグイン:Emmet LiveStyle」の版間の差分
編集の要約なし |
編集の要約なし |
||
(同じ利用者による、間の31版が非表示) | |||
1行目: | 1行目: | ||
= 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 にも対応しています。 | |||
* 余計なツール不要: 特別なツールやサーバーのインストールが不要で、エディターとブラウザに直接統合されています。 | |||
* どんなサイトでも使用可能: 一枚ページから大規模なプロジェクトまで、あらゆるウェブサイトに対応しています。 | |||
=== | == はじめに == | ||
'''動作環境''' | |||
LiveStyle | * 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) を参照します。 | |||
'''制限事項''' | |||
*Mery | * クロスドメインの環境では、CSS の読み込みに関する問題が発生するようですが、ローカル サーバーでは正常に動作しているようです。 | ||
* ブラウザのデベロッパー ツールで特定の属性値をドロップダウンで選択すると、エディター側に余分なセミコロンが残ることがあるようです。 | |||
* たとえば、<code>overflow-x</code> の値を <code>auto</code> から <code>hidden</code> にドロップダウンで変更する場合などに問題が発生します。LiveStyle 専用のエディタソフト (Sublime Text、Atom) でも同様の問題が報告されており、おそらくは Chrome 拡張機能の側に問題があると考えられます。 | |||
* Mery にはプロジェクト機能が提供されていないため、プロジェクトで使用されているグローバルな依存関係を渡すパラメータ <code>globalDependencies</code> には対応していません。 |
2023年10月29日 (日) 07:03時点における最新版
Emmet LiveStyle プラグイン
エディターと Web ブラウザーを同期させ、スタイル シートをリアルタイムかつ双方向で編集できるアプリケーション、Emmet LiveStyle を Mery で利用できるプラグインです。
- 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 以降がインストールされている環境
- 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: 本ドキュメント
インストール
- アーカイブを展開し、
LiveStyle.dll
をMery.exe
のインストール先のPlugins
フォルダーにコピーしてください。 - 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 に渡すには、以下の条件のいずれかを満たしている必要があります。
- ファイルの拡張子が css、less、scss のいずれかであること。
- 編集モードの名称が css、less、scss のいずれかであること。(必要に応じて less や scss の編集モードを作成してください)
- 既存のファイルを使用する場合は条件 (1)、未保存のファイルを LiveStyle に渡す場合は条件 (2) を参照します。
制限事項
- クロスドメインの環境では、CSS の読み込みに関する問題が発生するようですが、ローカル サーバーでは正常に動作しているようです。
- ブラウザのデベロッパー ツールで特定の属性値をドロップダウンで選択すると、エディター側に余分なセミコロンが残ることがあるようです。
- たとえば、
overflow-x
の値をauto
からhidden
にドロップダウンで変更する場合などに問題が発生します。LiveStyle 専用のエディタソフト (Sublime Text、Atom) でも同様の問題が報告されており、おそらくは Chrome 拡張機能の側に問題があると考えられます。 - Mery にはプロジェクト機能が提供されていないため、プロジェクトで使用されているグローバルな依存関係を渡すパラメータ
globalDependencies
には対応していません。
スポンサーリンク