Bracketsでもライブプレビューできるんです><;

某所でSublime Textのライブプレビューを紹介していたので、僕はBracketsのライブプレビューを紹介したいなと思います。
* BracketsはPhotoshopなどでおなじみのAdobe社が開発・提供しているエディタです。

ライブプレビューって?

Bracketsのライブプレビュー
エディタの編集が即ブラウザに反映されます。古来のやり方で言えば「エディタでコーディング」→「保存」→(サーバにアップなどする)→「ブラウザに切り替える」→「ブラウザを更新(F5など)」→「確認」だったのですがライブプレビューをすればいちいち保存したりブラウザを更新したりする必要もなくなります。

ライブプレビューのブラウザ上での見え方
また、どこを編集しているかブラウザ上でもすぐに分かるようになります。

導入方法

  • Bracketsをインストールする
  • コーディングに必要なデータ一式が入っているフォルダを開く(Ctrl+Alt+O)
  • フォルダを選択し、編集するHTMLを開く
  • ファイル→ライブプレビュー(Ctrl+Alt+P)を選択
  • ブラウザでのライブプレビュースタート

基本これだけです。SublimeTextと違っていろいろ下準備が必要というわけではありません。
フォルダを選択する理由としてはプロジェクトのルート化を行うためであり、ローカル環境だからということで絶対パス、ルートパスが適用されない、なんてこともなくなります。

SublimeTextはめんどうくさい

SublimeTextの場合はそもそもパッケージをインストールするところから始まります。Chromeにも拡張機能のインストールが必要だったりととにかく手間です。
且つ、致命的なのはSublimeTextだとデフォルトでクロスブラウザのライブプレビューができません。

クイックエディットを使うことによって更に爆速に

クイックエディット便利すぎワロタ
id/classを即修正できるということでSublimeTextの「GoTo-CSS-Declaration」が便利といろいろなところで紹介されていました。
しかし、SublimeTextだとCSSファイルを開いていなければ使えないという不便さがあります。HTMLとCSSの横断が発生するのです。せっかくのライブプレビューなのでHTMLのみ開いていじくりたい!!というワガママ悩殺ボティのあなた。
Bracketsだとhtmlのコード上に存在するid/classを選択して「Ctrl+E」で適用されているCSSをすぐに調整できます。
これだけではなく、色指定(RGBなど)のスタイル上で行うと視覚的に色の調整ができたり、CSSアニメーションのcubic-bezierなどのアニメーションの数値も視覚的に調整できます。
JavaScriptの関数名を選択するとその内容もすぐ展開し、ライブプレビューに反映されます。

ホバークイックビューで凡ミスをなくす

ホバークイックビューも便利すぎワロリンチョ
画像と色指定のクイックビューもエディタ上でできるため、ライブプレビューと併用すれば画像の選択ミス(コード上だけだとわかりにくい可能性があったり)を避けることができます。

まとめ

とにかくなにもインストールをしなくてもいろいろ便利なBracketsですが、拡張機能をインストールすることによって更に便利になります。
Adobeとの連携も強固なものなので、特にデザイナーにおすすめできるエディタに仕上がっています。
フロントエンド部分のデザイン最終調整をデザイナーが行うのにもってこいかな、と。
が、SublimeTextのほうが圧倒的に拡張機能が多いのも事実ですし、BracketsでGrepによる横断処理をするときの速度はSublimeTextのほうが圧倒的に軽いし安定している印象です(個人の感想です)。
適材適所、最強のエディタはあなたが決めるのです!!

あわせてこちらも

Bracketsで使った拡張一覧メモ
http://ma-san.org/?p=1180

 

ma-san

日々ラーメンとWebについてぶちかましてます!!東北地方でもWebアクセシビリティやるぞ!!