メニューアイコン

ハリマブログ

正式版LiveStyleのセットアップでつまづいたので使えるようになるまでをまとめてみた。

Akito Kageyama

2016.01.14

マイハニー。LiveStyle。


いつものように SublimeText3 と Chrome を立ち上げ。今日は弊社サイト管理ページのデザインの変更をする。少しだけぶりにCSSを触ります。
自社サイトの、しかも管理ページなので、デザインカンプなんてありません。そんな、スーパークリエイティブ(超適当)にCSSを書くときに最高なプラグインが Emmet Live Style!
ブラウザ⇔エディター間でCSSが連動して書けるんだぜ!

いつものようにChrome開発者ツールから起動・・・



???



”Welcome to all-new Emmet LiveStyle!”

おお!ベータ版だったLiveStyleがついに正式ver1.0リリースしてる!



新しいステキアイコンを押す。

正式版LiveStyleのセットアップ





ん?
”No connected editor”

SublimeText3は起動している。仕方ないので、小さい字を読む。

”If editor with LiveStyle plugin is running, make sure that:
You have the most recent version of editor plugin. If you installed Sublime Text plugin via Package Control, simply restart editor to automatically upgrade plugin. Or try LiveStyle app.
Your proxy/firewall doesn’t block connection to http://127.0.0.1:54000 host.”


訳)
”LiveStyleプラグインでエディタが起動している場合は、必ずその行います。
あなたは、エディタのプラグインの最新バージョンを持っています。あなたがパッケージ制御を介した崇高テキストプラグインをインストールした場合、単純に自動的にプラグインをアップグレードするためのエディタを再起動します。またはLiveStyleのアプリを試してみてください。
プロキシ/ファイアウォールがhttp://127.0.0.1:54000ホストへの接続をブロックしません。”
(Google翻訳)

つまり
「SublimeTextを再起動しなさい、プラグインを入れているなら通常は自動的に更新されるよ。」


イエス!再起動!
ついでにChromeも再起動!
ChromeのLiveStyleアイコンをクリック!



・・・

”No connected editor”




動かない。
まあよくあることですw

では次は・・・
”Or try LiveStyle app.”

LiveStyle App なるもの


*************************************
単純にLiveStyleを使うにはAppは不要です。
とりあえず使える状態に、という方は飛ばしてください。
*************************************

リンクから LiveStyle サイトへ。


Win/Mac を選んでダウンロード、インストール。


面白いインストール進捗表示。


完了!
インストールが終われば自動的に起動します。


Appが走らない?


livestyle app

LiveStyle App 普通に動く時もあるが、たまに 「Checking status ...」 のまま、×閉じもできない状態で止まる。。。
とりあえずChromeのLiveStyleアイコンをクリック!

どっちの状態でも やっぱり ”No connected editor”

プロキシ?ファイアウォール?


ならばこれか?
”Your proxy/firewall doesn’t block connection to http://127.0.0.1:54000 host.”

Windowsのコマンドプロンプトで確認。
CMD / netstat -nao
127.0.0.1:54000 の PIDを確認。
Ctrl + Alt + Del でタスクマネージャを起動して詳細タブから該当のPIDのプログラム名を確認。
livestyle.exe です。問題無さそうよねぇ。


基本に立ち返る


ソフトウェアが動かない時の最終手段は、アンインストール&再インストール!

まずはChrome App から LiveStyle を削除&再インストール。
 → 動かない


次にSublimeText のプラグインから LiveStyle をRemove。

remove package
Ctrl + Shift + P でPackage Controlを開いて 「Remove Package」を選択。LiveStyleを削除します。


1.自動インストール
ちなみにここで LiveStyle App を開くとこうなってます。

App

App Plugin installing

LiveStyle App からSublimeText のプラグインをインストールすることもできます。ただしその場合、Upgrade Package しないと正常に動きませんでした。

2.手動でインストール
SublimeTextを使っている方はこちらの方がなじみやすいと思います。
Ctrl + Shift + P でPackage Controlを開いて 「Install Package」を選択。LiveStyleを追加します。
こちらは最新版が入るので、更新する必要はありません。


う、う、う、動いたー!!!


LiveStyle
動きました(*'▽')
あとはこれまで通りに使えそうです!

ハマリポイント


ハマリポイント

”If you installed Sublime Text plugin via Package Control, simply restart editor to automatically upgrade plugin.”
この文章にやられました。ST再起動したら自動的に最新版に更新される。「Upgrade Package」も試したので確かに更新はされていたんだけど、何かが足りていなかったようです。

Remote View


Remote View

それはそうと、この機能はめっちゃ便利そう!今は無料だけど、いずれ有料化されるかもみたいです。
今のうちに使っておかなければ!!
アイコン: 資料作成資料作成 アイコン: デザイン・企画デザイン・
企画
アイコン: WEBWEB アイコン: 設計・製図設計・製図 アイコン: 印刷・出力印刷・出力 アイコン: 加工加工