Adobeが公開したHTML/CSS/JavaScript専用の新エディタ「Brackets」

杉山貴章(オングス)
2012-07-24 16:41:00
  • このエントリーをはてなブックマークに追加

Bracketsの特徴

 6月25日、Adobe SystemsがWebアプリケーション開発をターゲットとした新しいソースコードエディター「Brackets」を発表した。BracketsはHTMLやCSS、JavaScriptといったWebアプリケーションのためのコードの編集に特化したエディタであり、MITライセンスに基づいてオープンソースで開発が進められている。ソースコードは数カ月前からGitHub上にホストされて公開されていたが、今回公式サイトがオープンし、その詳細が明かされた形になる。とはいえ、依然として開発途上であることに変わりはなく、今後も引き続き機能を拡張していくとのこと。現在のところ、BracketはWindowsおよびMacOS X上で使用することができる。

 Bracketsの特徴的な機能としては、次のようなものが挙げられる。

  • HTML/CSS/JavaScript用のシンタックスハイライト
  • HTMLの編集中にショートカットキーによってスタイルをインライン編集できる
  • JavaScript編集時に関数をインライン編集できる
  • Webブラウザと連動したライブ・プレビューで編集結果をリアルタイムに確認できる
  • JSLintによる構文チェックに対応
  • JavaScriptによる機能拡張が可能

 機能面以外のBracketsの大きな特徴としては、Brackets自身もコア機能はHTML/CSS/JavaScriptによって作られている点を挙げることができる。プロダクトマネージャーのAdam Lehman氏によれば、これはユーザー自身がBracketsの機能を容易にカスタマイズしたり拡張したりできるようにするためだという。また、将来的に様々なデバイスやプラットフォームの上でBracketsを利用できるようにするというビジョンがあるからとも説明されている。Web標準技術に準拠して作られたアプリケーションであれば、実行環境の選択肢は自ずと幅広くとることができる。PCだけでなく、モバイル端末上で動かしたり、Webアプリケーションに組み込で利用したりといった方向性も考えているという。

シンプルだがユニークな機能を搭載

 Brakcetsはこのページよりダウンロードできる。本稿執筆時点での最新版は「Brackets Sprint 10 Build」。アーカイブ中には、HTML/CSS/JavaScriptで作成された本体の他に、WindowsおよびMacで実行するためのライブラリや起動スクリプトが同梱されている。ディレクトリ構成は図1のようになっており、Windowsの場合にはbin\win\Brackets.exeを実行すれば起動できる。bracketsフォルダにはBrackets自身のソースコードが収められている。

図1 Bracketsのディレクトリ構成
図1 Bracketsのディレクトリ構成

 エディタのUIそのものは図2のようにシンプルなものだ。左側がファイルマネージャで、デフォルトではbrakets\srcフォルダが表示されている。

図2 UIは極めてシンプル
図2 UIは極めてシンプル

 ファイルマネージャに表示するフォルダの変更は[File]-[Open Folder...]メニューから行える。[File]-[New]メニューまたはCtrl+Nでファイルを新規作成した場合、作成したファイルは自動的にファイルマネージャで開いているフォルダに配置される。これは慣れるまでは少々戸惑うかもしれない。開いたファイルはフォルダツリーの上部分にリスト表示される。図3は適当なindex.htmlファイルを編集中の例である。

図3 シンタックスハイライトなどの基本的な機能は備わっている
図3 シンタックスハイライトなどの基本的な機能は備わっている

 Bracketsのもっとも特徴的な機能が、HTMLファイル上で直接CSSプロパティを編集できる「Quick Edit」だ。任意のタグの上でCtrl+Eをタイプするか、[Navigate]-[Quick Edit]メニューを選択すると、図4のようにそのタグに摘要されているCSSが表示され、編集することができる。編集した結果は元のCSSファイルにも反映される。

図4 CSSの編集にはQuick Editが非常に便利
図4 CSSの編集にはQuick Editが非常に便利

 もうひとつの特徴的な機能が「Live File Preview」である。これは、Webブラウザと連携して、ファイルの編集結果をリアルタイムにWebブラウザの表示に反映させるというもの。現在のところこの機能が有効なブラウザはChromeのみであり、またCSSの編集のみに対応している。

Live File Previewは、[File]-[Live File Preview]メニューを選択するか、Ctrl+Alt+Pキー、または右上の稲妻型のアイコンをクリックすることで有効にできる。Live File Previewを使用中にCSSを編集すると、Chrome上のページの表示にリアルタイムに編集内容が反映される。ページのリロードは必要ない。

図5 Live File PreviewでChromeと連携。リロード不要で編集結果を確認できる
図5 Live File PreviewでChromeと連携。リロード不要で編集結果を確認できる

 その他に便利な機能としては、JSLintを利用した構文チェックがある。構文チェックは[View]-[Enable JSLint]メニューにチェックを入れておくことで有効になり、構文エラーがある場合には図6のようにその場所と内容が表示されるようになる。

図6 JSLintでの構文チェックも可能
図6 JSLintでの構文チェックも可能

 全体的な特徴としては、各種機能の利用やコード内のカーソルの移動などを、できる限りキーボードショートカットのみで行えるよう意識している点を挙げることができるだろう。参考までに、よく使いそうなショートカットキーを以下にまとめておく。

主なショートカットキー
ショートカットキー内容
Ctrl+EQuick Editの起動/終了
Ctrl_Alt_PLive File Previewの有効/無効
Ctrl+Shift+OファイルのQuick Openナビゲーションプロンプトの表示
Ctrl+G行指定でカーソルを移動するナビゲーションプロンプトの表示
Ctrl+T関数やスタイルの定義位置に移動するナビゲーションプロンプトの表示
Ctrl+Shift+Hスライドバーの表示/非表示
図7 三種類のナビゲーションに対応したQuick Openプロンプト
図7 三種類のナビゲーションに対応したQuick Openプロンプト

 Bracketsはまだ開発がスタートしたばかりのエディタであり、お世辞にも十分な機能が揃っているとは言えない。しかし、Quick EditやLive File Previewなどといった機能は極めてユニークで、完成度が高まれば実用性も高いだろう。そういった点では将来性を感じさせてくれるエディタと言えるのではないだろうか。

Keep up with ZDNet Japan
ZDNet JapanはFacebookページTwitterRSSNewsletter(メールマガジン)でも情報を配信しています。

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]