第4回より、Web開発に特化した開発環境/エディタとして、GUI/CUIそれぞれの著名な開発プラットフォームを、第5回では最新版にて大幅にWeb開発の機能が強化された高機能開発プラットフォーム、NetBeansについて紹介しました。今回は、Adobeがオープンソースソフトウェアとして公開している軽量Web開発エディタ・Bracketsについて取りあげたいと思います。

Adobe Bracketsとは

Adobe Bracketsとは、Adobeが開発・公開しているエディタです。The MIT Licenseのもと、オープンソースソフトウェアとして公開されています。Windows、Mac OS X上で動作します。

Adobe Brackets

特徴は次のとおりです。

・初期状態でHTML/CSS/JSをサポート
・ライブプレビュー、コード補完、自動インデント、JSLint
・必要最低限の機能のみを搭載。利用者が別途欲しい機能は、Extensionにて拡充する
・作業中のファイルは、選択しているフォルダごとに管理される
・用意されている機能のほぼ全てにキーボードショートカットを用意
・エディタ自体がHTML5、JavaScriptで構成されている

同社が販売しているプロプライエタリなWebアプリケーション開発プラットフォーム、Dreamweaverと比較すると、かなり性質が異なります。DreamweaverはWeb系総合開発環境として、必要な機能や、開発に便利な機能を多数網羅しています。

これに対し、Bracketsは初期状態ではWeb系の開発に最低限の機能のみを用意しています。利用者にとって必要な機能は、Extensionにて拡充する方針を採用しています。1から自分に馴染むエディタを、時間をかけてコツコツと整えていきたいユーザにとっては嬉しい開発環境と言えるでしょう。

Bracketsは2013年5月に開かれたAdobe MAXにおいて※ハッカソンが実施されたり、前後において機能強化がおこなわれているなど、注目度の高いプロダクトとなりつつあります。今回はこのBracketsに用意されている機能や、便利なExtensionについてご紹介します。

ここでの動作環境は次の通りです。

・OS: Mac OS X 10.8.4
・Brackets: スプリント 25 試験ビルド 0.25.0-7701 (master e664a00d0)
・Google Chrome: 27.0.1453.110

※ハッカソン：協力しながら集中的にコーディングを行う催しのことでハック（hack）とマラソン（marathon）を組み合わせた造語。

Bracketsの概要

Bracketsの全体図は次の通りです。

画面はサイドバーとエディタからなります。画面右部にはライブプレビューを起動するためのアイコンと、Extension Managerのアイコンが配置されています。画面下部には、編集中のファイル情報とインデント設定、現在のカーソル位置などが表示されます。

サイドバーに表示される情報と「作業中ファイル」について

Bracketsでは、画面左のサイドバーに編集をおこなっている作業ファイルのリストを。その下に、選択しているディレクトリと、ディレクトリ配下のファイルツリーを表示します。ファイルツリー上のファイル名をクリックして、内容を表示。ファイル名をダブルクリックするか、内容を変更することで「作業中のファイル」と見なされ、作業中ファイルにファイル名が表示されるようになります。

サイドバー

この作業中ファイルは、選択しているディレクトリごとによって管理されます。プルダウンでディレクトリを変更すると、同時に作業中のファイルセットも変更されます。

サイドバーは非表示にすることも可能です。

コード入力支援について

Bracketsでは、次のコード入力支援をサポートしています。

・自動インデント
・行の複製・削除、上下移動
・コメント挿入
・自動閉じカッコ
・コード補完(コードヒント)

自動インデント

コードを入力し、改行をおこなった際に自動的にインデントをおこないます。インデント幅の調整は、画面右下より「タブ幅」「スペース」よりおこないます。

現在の行に対しインデントをおこなったり、解除する場合はそれぞれ次のショートカットキーを用います。

操作 Windowsショートカットキー Mac OS X ショートカットキー
インデント Ctrl + ] Cmd + ]
インデント解除 Ctrl + [ Cmd + [

行の複製・削除、上下移動

カーソルがある行の複製・削除、上下移動をおこないます。

操作 Windowsショートカットキー Mac OS X ショートカットキー
行の複製 Ctrl + D Cmd + D
行の削除 Ctrl + Shift + D Cmd + Shift + D
行を上に移動 Ctrl + Shift + ↑ Cmd + Ctrl + ↑
行を下に移動 Ctrl + Shift + ↓ Cmd + Ctrl + ↓

コメント挿入

現在のカーソル位置にコメントを挿入します。

操作 Windowsショートカットキー Mac OS X ショートカットキー
行コメントの切り替え Ctrl + / Cmd + /
ブロックコメントの切り替え Ctrl + Shift + / Cmd + Option + /

自動閉じカッコ

シングルクォートやダブルクォート、カッコ、ブラケットを入力した場合、自動的に閉じカッコを補完します。この機能は、[編集]メニューの「自動閉じカッコ」より機能の有効/無効を選択します。

コード補完(コードヒント)

コードの補完をおこないます。矢印キーを使用して候補中から選択し、TabキーまたはEnterキーで補完を実行します。

操作 Windowsショートカットキー Mac OS X ショートカットキー
コードヒントを表示 Ctrl + Space Ctrl + Space

コードヒントは、開いているファイルタイプごとによって表示する候補が異なってきます。HTMLの場合は要素名や属性、CSSの場合はプロパティ名や値、JavaScriptの場合はイベント名やメソッド、jQuery APIなどです。

HTMLの要素名をコードヒントで表示。aで始まる要素名が候補に表示されている

CSSのプロパティ名をコードヒントで表示

CSSの値をコードヒントで表示

CSSの候補に表示される値は、プロパティに応じて変化する

JavaScriptコーディング中にコードヒントを表示

画面表示に関係する機能

Bracketsの画面表示に関係する機能は次の通りです。

操作 Windowsショートカットキー Mac OS X ショートカットキー
サイドバーの表示切り替え Ctrl + Shift + H Cmd + Shift + H
フォントサイズを大きく Ctrl + + Cmd + +
フォントサイズを小さく Ctrl + - Cmd + -
フォントサイズを元に戻す Ctrl + 0 Cmd + 0

このほか、[表示]メニューから、次の機能を有効/無効に選択することができます。

・アクティブな行をハイライト
・エディタの左部に行番号を表示
・ウィンドウ幅で折り返し表示
・JSLintを有効に
・ホバー・クイックビュー

JSLintを有効にした状態で、JavaScriptファイルを編集して保存すると、JSLintによる構文チェックがおこなわれます。なにか問題があった場合は、エディタの下部にJSLintのエラーが表示されます。行をダブルクリックすることで、構文エラーが発生している箇所にジャンプできます。

各種ナビゲート機能

Bracketsには強力なナビゲート機能が用意されています。キーボードショートカットと記法ルールを覚えることで、円滑なコード編集が可能になります。

操作 Windowsショートカットキー Mac OS X ショートカットキー
クイックオープン Ctrl + Shift + O Cmd + Shift + O

クイックオープンを呼び出すと、エディタ上部にクイックオープンの入力窓が表示されます。現在選択しているディレクトリ内を対象に、ファイル名を入力すると、該当するファイルを開きます。ファイル名は部分一致で検索が行われます。

クイックオープンの入力窓にて、先頭に : をつけると、行移動をおこなうための機能になります。:に続けて行番号を入力すると、現在開いているファイルの該当行にジャンプします。

また、先頭に @ をつけると、定義の検索をおこないます。CSSの場合はセレクタ、JavaScriptの場合はJSONのキーを指定できます。

CSSで定義検索

JavaScriptで定義検索

ライブプレビュー

現在編集中のファイルに応じて、Google Chromeと連携したライブプレビューを実現します。Google Chromeはリモートデバッグを有効にした状態で起動する必要があります。

HTMLファイルを開いた状態で、画面右部の稲妻のアイコンをクリックすると、Google Chromeを起動します。リモートデバッグが有効になっていない場合、Google Chromeの再起動をおこない、リモートデバッグを有効にした上でライブプレビューを表示します。

ライブプレビュー

ライブプレビュー、およびライブハイライトが有効になっている状態でBracketsのエディタを操作していると、現在のカーソル位置に従って、Google Chrome側で該当する箇所がハイライト表示されます。

ライブハイライト
操作 Windowsショートカットキー Mac OS X ショートカットキー
ライブプレビュー Ctrl + Alt + P Cmd + Option + P
ライブハイライト Ctrl + Shift + C Cmd + Shift + C

執筆時における最新バージョンのBracketsでは、HTMLファイルおよびJavaScriptファイルは、編集内容を保存したタイミングでGoogle Chrome側の表示が更新されます。

CSSファイルの場合は、編集内容がリアルタイムにプレビュー表示されます。

Extensionによる機能拡充

Bracketsの初期状態では、Web開発に関係する必要最低限の機能のみ準備されています。機能をさらに拡張するには、別途Extensionを導入します。画面右のアイコンをクリックして、Extension Managerを起動します。

Extension Manager

新しいExtensionをインストールする場合は、ダイアログ左下の[URLからインストール]ボタンをクリックします。

拡張機能をインストール

Bracketsの拡張機能は、ZIPファイルまたはGitHubリポジトリのURLを指定することでインストールをおこないます。代表的なExtensionが、GitHub上のBrackets公式リポジトリ内Wikiページにて紹介されています。いくつかを取りあげてご紹介します。

Emmet plugin for Brackets editor

Emmet(旧称: Zen-Coding)を追加します。HTMLやCSSをショートカット/スニペットで簡略化し、素早くコーディングをおこなえるようになります。

brackets-snippets

JavaScriptをスニペットで簡略化し、素早くコーディングをおこなえるようになります。

たとえば

   f myFunc

と入力して、Ctrl + Alt + V (MacではCmd + Option + V) を押すと

   function myFunc () {
   }

と補完されます。

Show Whitespace in Brackets

ホワイトスペースを可視化します。

インデントのスペースが可視化されている

Tabs for Brackets

サイドバー非表示時に、作業中ファイルを画面上部にタブとして表示します。

タブ表示

Node.js/V8 Live Development with the Brackets editor

Node.js / V8 JavaScript Engineデバッガのライブ接続を提供します。

PhoneGap Extension for Brackets

Adobe PhoneGap Buildへの連携機能を追加します。

PhoneGap Extension

brackets-jasmine

Brackets上でJasmineによるユニットテストを実行し、結果を表示します。

Jasmine Results

open-source code editor built with the web for the webの名のとおり、BracketsはWeb技術から誕生した、Web開発のためのエディタです。軽量であり、シンプルでありながらExtensionによる拡張性の高さは、目を見張るものがあります。

開発版ということもあり動作が若干不安定な点もありますが、今後の発展が楽しみなエディタです。Web開発に携わるクリエイターは、ぜひ一度触ってみてはいかがでしょうか。

富田宏昭 Hiroaki Tomida
「株式会社キクミミ」でFileMakerやオープンソース言語などを用いた、Webアプリ開発 企業の業務改善のためのシステム開発や環境構築を行っている。主な著書に「HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門」(マイナビ)など。