Brackets、2つの便利機能

Bracketsでもっとも基本的で特に使いやすい機能を取り上げたいと思う。

CSSのインライン編集が可能な「Ctrl-E」

まず、前回も紹介したCtrl-E(MacではCmd-E)だ。HTMLのタグを選択した状態でCtrl-EまたはCmd-Eを押すと、そのタグに掛かっているCSSをインラインで編集できるようになる。Bracketsは対象となるHTMLファイルが含まれているフォルダをプロジェクトとして扱い、関連するCSSファイルを自動的に編集してくれるようになる。

通常であればHTMLファイルとCSSファイルをそれぞれ別のタブに開いておいて、CSSファイルを編集したら保存してブラウザから見た目を確認するといった作業を行う。タブの間を行ったり来たりする作業が頻発するわけだが、Bracketsを使うとそうした遷移が発生しなくなる。

インラインで編集したCSSはそのままオリジナルのCSSファイルに反映される。またLESSやSCSSにも対応しているので、結構広いシーンで利用できる。

Ctrl-EまたはCmd-Eはカラーセレクタの表示にも利用できる。CSSでカラー指定部分を選択してからCtrl-EまたはCmd-Eを押すと次のような感じでカラーセレクタが表示される。カラーコードではなく色を見ながら変更できるようになっている。

洗練されたライブプレビュー機能

もうひとつ知っておくべきはライブプレビュー機能だ。

今のところ対応しているのはGoogle Chromeのみだが、シェアを考えるとGoogle Chromeが動作すれば充分ともいえる。Bracketsの右上にフラッシュをイメージしたようなアイコンがあるが、これをクリックするとライブプレビュー機能が起動してくる。

ライブプレビュー機能を有効にすると自動的にGoogle Chromeが起動して、編集中のHTMLファイルが表示される。ローカルにWebサーバが起動して、Google Chromeがそれにアクセスするといった仕組みだ。

この状態ですでにライブプレビューが有効になっている。Brackets側でタグを選択すると、それに対応したタグがGoogle Chrome側でも選択表示されるようになる。

ライブプレビュー状態では編集内容もリアルタイムに反映されるようになっている。Brackets側でHTMLを編集すると、結果が自動的にGoogle Chrome側に表示される。Google Chromeをリロードする必要もなく、常に横にGoogle Chromeをおいておけば編集結果が反映されるようすを確認できる。

起動してきたGoogle Chromeを終了すると次のようにライブプレビュー機能が自動的にオフになる。または、ライブプレビュー機能を有効にしたときのボタンをもう一回クリックすると、ライブプレビュー機能がオフになる。

Ctrl-EまたはCmd-EによるCSSのインライン編集、Ctrl-EまたはCmd-Eによるカラーセレクタ、ライブプレビュー機能によるリアルタイムチェック、このあたりはBracketsの基本機能でありもっとも便利な機能だ。これら機能がもたらす作業効率の高さはなかなかのものがある。AtomやSublime Textを使っているのであれば、Bracketsも一度は使ってみて欲しい。