出来た…Sublimetext3でブラウザプレビュー View in Browser

2014.3.25 webツール

※すいません、Package Controlを開くショートカットキーがCtrl+Alt+Pって書いてありましたが、
正しくはCtrl+Shift+Pです!(5/3訂正)

  • 2014/9/3 プレビュー児時のSublimetextフリーズについて追記

sublimetext_viewinbrowser

恋に落ちるエディタとして名を馳せるSublimetext

3もベータ版ながらに問題なく機能しており人気沸騰中のエディタです!
最近、やっと僕も手を出し始めたのでメモ代わりに記事にしていきます。

インストール手順も日本語化もスキップして、今日は「Sublimetextでのブラウザプレビュー」について書こうと思います。

これが色々検索したものの、”これだ!”というものにあまりヒットせず…
Browser Refreshなんかも有名ですが、何故か僕はショートカットキーが効かず。

純正テキストエディタとまで書かれているSublimetextにとってブラウザプレビューは神の領域であると、半分諦めていました…

が、別の手段を見つめました。これがお手軽。

SublimetextでブラウザプレビューするならView in Browser

View in Browser

これです。Browser Refreshの場合、プレビュー(厳密に言うと違うが)できるブラウザは1種類でしたが、View in BrowserはなんとデフォルトでFirefox,IE,Chrome,Safariの4種でプレビューが出来ます

それでは設定していきましょう。

Package Controlを開く

Ctrl+Shift+pでパッケージコントロールを開きます。

inst」までいれれば一番上に、「Install Package」があるはずなのでEnterで進みます。

sublimetext_viewinbrowser

view in browser」と検索します。これまた一番上に現れますので、Enterでインストール開始。

いかがでしょうか。

インストールが終了した気配があれば、Preference > Package Settings >View in Browser を探してみてください。

sublimetext_viewinbrowser2

キーバインド設定を開く

Preference > Package Settings >View in Browser > Settings – Defaultを確認します。

こんな感じになっていました。

{
      "supportedBrowsers": {
           "firefox": [
                {
                     "osname": "posix",
                     "platform": ".*",
                     "command": "firefox"
                },
                {
                     "osname": "posix",
                     "platform": "darwin",
                     "command": "open -a \"/Applications/Firefox.app\""
                },
                {
                     "osname": "nt",
                     "platform": "win32",
                     "command": "C:/Program Files (x86)/Mozilla Firefox/firefox.exe"
                }
           ],
           "safari": [
                {
                     "osname": "posix",
                     "platform": "darwin",
                     "command": "open -a \"/Applications/Safari.app\""
                }
           ],
           "iexplore": [
                {
                     "osname": "nt",
                     "platform": "win32",
                     "command": "C:/Program Files/Internet Explorer/iexplore.exe"
                }
           ],
           "chrome": [
                {
                     "osname": "posix",
                     "platform": "darwin",
                     "command": "open -a \"/Applications/Google Chrome.app\""
                },
                {
                     "osname": "posix",
                     "platform": "linux.*",
                     "command": "google-chrome"
                },
                {
                     "osname": "nt",
                     "platform": "win32",
                     "command": "%Local AppData%/Google/Chrome/Application/chrome.exe"
                }
           ],
           "chromium": [
                {
                     "osname": "posix",
                     "platform": "linux.*",
                     "command": "chromium"
                }
           ]
      },

      "selectedBrowser": "firefox"
 }

デフォルトではctrl+alt+vですでにファイルのプレビューが出来るようになっており

それだけでも感動するのですが、他のブラウザは如何なものか。

デフォルトでの各ブラウザごとのショートカットキーはコチラです。

ctrl+alt+v/ctrl+alt+f Firefox
ctrl+alt+c Chrome
ctrl+alt+i IE
ctrl+alt+s safari

このとき、Evernoteをインストールしていると「ctrl+alt+V」のショートカットキーが混同し、Evernoteに保存されまくってしまうので、Evernoteのショートカットキーは変更してください

View in Browserプレビューが出来ない時

普通にキーを叩いてプレビューができればいいのですが、出来ない時は、上記の設定ファイルに書いてある、ブラウザへのパスが間違っています。

これを変更するために、Preference > Package Settings >View in Browser > Settings – Defaultの文をコピーし、Preference > Package Settings >View in Browser > Settings – Userに貼り付けます。

ブラウザへのパスを変更するのですが、そこはご自身の環境に合わせて行ってください。

変更箇所はこちら

sublimetext_viewinbrowser3

"chromeとかブラウザ名": [
                {
                     "osname": "posix",
                     "platform": "darwin",
                     "command": "open -a \"/Applications/Google Chrome.app\""
                },
                {
                     "osname": "posix",
                     "platform": "linux.*",
                     "command": "google-chrome"
                },
                {
                     "osname": "nt",
                     "platform": "win32",
                     "command": "ここに正しいブラウザへのパスを記述"
                }
           ],

それではひとまず「Ctrl+Alt+I」を叩き、IEでプレビューします。

sublimetext_viewinbrowser4

一切伝わってきませんが、成功しています。


2014/9/3追記ここから

ブラウザプレビューで、Sublimetextがフリーズする現象について…

これWindowsだけでしょうか?それとも僕の入れてるパッケージの干渉なのか…ブラウザプレビューすると、Sublimetextが応答しません。

これに対する対処法としては、「事前にプレビューしたいブラウザを立ち上げてからSublimetextでキー入力しプレビューすること」です。これでなんとか応答してくれます。

誰か対処法知っていたらsatohmsysに教えてください。

追記終わり


 

ひと通り、デフォルトショートカットキーでのブラウザプレビューは出来ました。
同じ記述をしていけば他のブラウザも設定可能とのこと。

ブラウザプレビューが出来ると余計にハマりますよね~

だいぶ恋に落ちています。

というわけで、今後は他のことも書いていくつもりなので宜しければまた目を通してみてください。

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。