Sublime Text 3を使ったHTML/CSSリアルタイムプレビューの話
Emmet LiveStyleとやらを使うと、Sublime Text 3(以下ST3)とChromeを連動させる事が出来る。
その状態で、ST3でCSSを編集すると保存などの工程を全てとばしてHTMLに反映させ、表示の確認が出来る…という物である。
2015年に正式リリースがされたとか。
その状態で、ST3でCSSを編集すると保存などの工程を全てとばしてHTMLに反映させ、表示の確認が出来る…という物である。
2015年に正式リリースがされたとか。
これについて調べてみると、やはり便利な物ではあるし結構な数の解説記事がヒットする。
ただ、「ST3で編集しているHTMLやCSSのリアムタイムプレビューが出来る」といった論調で説明がされているサイトが結構な割合で存在する。
正確に言うとこの説明は正しくない。実際の所、HTMLのリアルタイムプレビューは出来ないからだ。私がやり方を知らないだけなのかもしれないが、すくなくとも調べた限りではその方法は見つからなかった。
ただ、「ST3で編集しているHTMLやCSSのリアムタイムプレビューが出来る」といった論調で説明がされているサイトが結構な割合で存在する。
正確に言うとこの説明は正しくない。実際の所、HTMLのリアルタイムプレビューは出来ないからだ。私がやり方を知らないだけなのかもしれないが、すくなくとも調べた限りではその方法は見つからなかった。
まだ一つ大きな問題がある。インストール後の、使い方の解説が少ない事だ。
基本的な使い方は「ChromeでCSSを適用したいサイトを開く → そのサイト(HTML)に適用するCSSを選ぶ → そのCSSをST3で編集する」という物で、とても簡単だ。
しかし、これだけでは説明が足りないのではないだろうか。
ここで私は、その足りないと感じる部分について説明しようと思う。
基本的な使い方は「ChromeでCSSを適用したいサイトを開く → そのサイト(HTML)に適用するCSSを選ぶ → そのCSSをST3で編集する」という物で、とても簡単だ。
しかし、これだけでは説明が足りないのではないだろうか。
ここで私は、その足りないと感じる部分について説明しようと思う。
たとえば、単純なHTMLファイルを作り、それをD&DでChromeに読み込ませてみる。このHTMLにCSSを適用させるため、アイコンをクリックしたとする。
この時、Extension updateという見出しが現れ、その下に小さく「Please close DevTools panel (if it’s opnened) and refresh current page.」と表示される。
「開発者ツールを開いている場合はそのパネルを閉じ、現在開いているページを再読み込みしてください」という意味だ。
この場合の開発者ツールは、考えるまでもなくChrome DevTools ―― Windowsの場合F12で起動するツール ―― を意味しているのだろう。
しかし、これは開発者ツールを開いていなくても表示されるし、ページをリロードしても解決しない。
そもそも、このシステムはST3→Chromeの一方的な物ではなく、Chromeの開発者ツールで編集した物をST3のテキストに反映させるという機能も内包しているのだ。開発者ツールが使えない…本末転倒も良いところだ。
これが表示される条件ははっきりとは分からない。調べてみると、レンタルサーバー等でこの機能を使うとセキュリティの問題で表示されないとあるが、それだけでは無いという事は確かだ。
はてなブログのページはほとんどのページでこのテキストが表示されるし、ニコニコ動画やYouTubeなどの動画サイトでも同じだ。
そして、ローカルのファイル(HTML等)を読み込んでいる時。つまり、URLが"file://~"になっている時。
なんと、編集中のHTMLを直接読み込むと、LiveStyleの機能が使えないのだ。
これについて適切な説明をしているサイトは、私が見た範囲では一つも無かった。日本語のサイトに限定すると、存在していない可能性すらある。
HTML/CSSコーディングをする時、どういう形であれ一度.htmlファイルを作るという人は少なくないと思う。
まさに私がそういうタイプなのだが、そういう人にとって、この問題は早急に解決する必要がある。
この時、Extension updateという見出しが現れ、その下に小さく「Please close DevTools panel (if it’s opnened) and refresh current page.」と表示される。
「開発者ツールを開いている場合はそのパネルを閉じ、現在開いているページを再読み込みしてください」という意味だ。
この場合の開発者ツールは、考えるまでもなくChrome DevTools ―― Windowsの場合F12で起動するツール ―― を意味しているのだろう。
しかし、これは開発者ツールを開いていなくても表示されるし、ページをリロードしても解決しない。
そもそも、このシステムはST3→Chromeの一方的な物ではなく、Chromeの開発者ツールで編集した物をST3のテキストに反映させるという機能も内包しているのだ。開発者ツールが使えない…本末転倒も良いところだ。
これが表示される条件ははっきりとは分からない。調べてみると、レンタルサーバー等でこの機能を使うとセキュリティの問題で表示されないとあるが、それだけでは無いという事は確かだ。
はてなブログのページはほとんどのページでこのテキストが表示されるし、ニコニコ動画やYouTubeなどの動画サイトでも同じだ。
そして、ローカルのファイル(HTML等)を読み込んでいる時。つまり、URLが"file://~"になっている時。
なんと、編集中のHTMLを直接読み込むと、LiveStyleの機能が使えないのだ。
これについて適切な説明をしているサイトは、私が見た範囲では一つも無かった。日本語のサイトに限定すると、存在していない可能性すらある。
HTML/CSSコーディングをする時、どういう形であれ一度.htmlファイルを作るという人は少なくないと思う。
まさに私がそういうタイプなのだが、そういう人にとって、この問題は早急に解決する必要がある。
この問題は、SublimeServerなどを使い、URLを"file://~"ではなく"http://~"にする事で解決する。
SublimeServerの場合は、ST3にSublimeServerをインストールし、コマンドパレット(ctrl+shift+p)にSublimeServerを入力し、"SublimeServer: Start SublimeServerを選択する事でSublimeServerが機能する。
その後、CSSを適用したいHTMLファイルをST3で開き、編集画面を右クリックする。View in SublimeServerという項目があるので、これを選択する。
これも解説されているサイトが少ないのだが、読み込むHTMLがあるフォルダか、それをサブフォルダとするフォルダをST3で読み込んでおく必要がある(File > Open Folder…から開ける)。これをしないと、"File *.html not in Sublime Project Folder"というエラーが出て、SublimeServerで扱う事が出来ない。
そして、最終的にLiveStyleで編集をしたいのだから、このHTMLファイルはChromeで読み込む必要がある。
デフォルトのブラウザがChromeになっている場合は良いが、そうでない場合は、Chromeのアドレス欄に"http://localhost:8080/"と入力する事で、SublimeServerにアクセス出来る。
その後は、表示されてるフォルダやファイルを選択し、CSSを適用したいHTMLを選択すれば良い。
こうして読み込んだHTMLファイルは、LiveStyleアイコンから適用するCSSを選択し、そのCSSファイルをST3で編集する事でそれがリアルタイムに反映される。
しかし残念ながら、HTMLファイルそのものはST3で編集してもリアルタイムでは反映されない。保存をして、Chromeで再読み込みをする必要がある。
SublimeServerの場合は、ST3にSublimeServerをインストールし、コマンドパレット(ctrl+shift+p)にSublimeServerを入力し、"SublimeServer: Start SublimeServerを選択する事でSublimeServerが機能する。
その後、CSSを適用したいHTMLファイルをST3で開き、編集画面を右クリックする。View in SublimeServerという項目があるので、これを選択する。
これも解説されているサイトが少ないのだが、読み込むHTMLがあるフォルダか、それをサブフォルダとするフォルダをST3で読み込んでおく必要がある(File > Open Folder…から開ける)。これをしないと、"File *.html not in Sublime Project Folder"というエラーが出て、SublimeServerで扱う事が出来ない。
そして、最終的にLiveStyleで編集をしたいのだから、このHTMLファイルはChromeで読み込む必要がある。
デフォルトのブラウザがChromeになっている場合は良いが、そうでない場合は、Chromeのアドレス欄に"http://localhost:8080/"と入力する事で、SublimeServerにアクセス出来る。
その後は、表示されてるフォルダやファイルを選択し、CSSを適用したいHTMLを選択すれば良い。
こうして読み込んだHTMLファイルは、LiveStyleアイコンから適用するCSSを選択し、そのCSSファイルをST3で編集する事でそれがリアルタイムに反映される。
しかし残念ながら、HTMLファイルそのものはST3で編集してもリアルタイムでは反映されない。保存をして、Chromeで再読み込みをする必要がある。
長話が過ぎるようではあるが、この記事によって誰かの助けになれば嬉しい。
SublimeServerやEmmet LiveStyleの導入方法については、もし要望があればまた書こうと思う。
SublimeServerやEmmet LiveStyleの導入方法については、もし要望があればまた書こうと思う。
