Bracketsとは?

Bracketsは、PhotoshopなどのグラフィックツールやDreamweaver、Flashといったオーサリングツールでお馴染みのAdobeがオープンソースで開発しているWeb開発用のエディタで、HTML、JavaScript、CSSで実装されている。

まだ開発が始まったばかりのプロダクトではあるが、今後の可能性を探るという意味も込めて、今回はこのBracketsを取り上げてみたい。

Bracketsをインストールしてみよう

まず、Bracketsのダウンロードページから最新のアーカイブをダウンロードし、適当なディレクトリに展開しよう。binディレクトリ内にWindows用、Mac用の起動用バイナリが格納されており、Windowsの場合は「bin/win/Brackets.exe」をダブルクリックすることで、Bracketsが起動する。

Bracketsの画面は左右の2ペイン構成となっており、左側には現在開いているファイルの一覧やディレクトリツリーが、右側にはエディタが表示される。左側のペインは非表示にすることも可能だ。

図1 : Bracketsの画面構成

エディタはHTML、JavaScript、CSSなどに対応した強調表示機能や一般的なテキストエディタで可能な検索機能などを備えているが、いまのところコード補完などの高度な編集支援機能はサポートされておらず、ファイルの文字コードを指定することもできない(ファイルの読み書きはUTF-8)。

HTMLやJavaScriptに関しては、JSLintによるチェック機能が提供されており、エラーがあった場合は以下のように画面の下部に一覧表示される。一覧に表示されたエラーをクリックすると、エディタ上の該当箇所にジャンプする。

図2 : JSLintのエラー表示

また、Bracketsは編集中のHTMLのプレビューが可能だ。画面右上のアイコンをクリックするとブラウザが起動し、現在編集中のHTMLを表示できる。

Bracketsのユーザ・インタフェースは全体的にシンプルにまとめられている。コード編集に関する機能はまだまだ改善の余地があるものの、[CTRL]+[O]でファイルをインクリメンタル検索して開くことができるなど、優れた操作性を垣間見せる機能も存在する。

クイック編集

Bracketsの特徴的な機能の1つがクイック編集機能だ。

たとえばHTMLを編集中に[CTRL]+[E]を押すと、その要素に適用されているCSSのスタイルをインラインで編集することができる。CSSはHTMLファイル内に記述されている場合でも、外部ファイルで定義されている場合でも、同じようにインライン編集が可能だ。

図3 : CSSのクイック編集

CSSの編集時はHTMLファイルと頻繁に行き来する必要があるうえに、CSSが複雑になってくると、どのスタイルがどの要素に適用されるのかがわかりにくくなってしまうことも多い。Bracketsのクイック編集機能は、このような問題を解決するための意欲的な機能といえるだろう。

まとめ

Bracketsはまだ開発中であり、現段階では実用的なツールとは言い難い。しかし、githubでは多くのフィードバックやプルリクエストが寄せられており、活発に開発が行われている。今後開発が進むにつれて機能は充実していくはずだ。

ただし、Brackets自体はそれ自身が完成されたWeb開発ツールを目指しているのではなく、様々なWeb開発ツールに組み込んで利用可能なコンポーネントを指向しているように見受けられる。デザイナ向けツールとして支配的名シェアを持つAdobeが、Webベースのツール開発に着手したということは大きな意味を持つのではないだろうか?

Bracketsが今後Adobeの製品に組み込まれていくのか? また、組み込まれるとしてどのような形の製品として提供されることになるのか? その動向に注目していきたい。