写真提供:マイナビニュース

写真拡大

●Adobe製のOSSテキストエディター
一昔前はプロプライエタリ・ソフトウェアが一般的だったテキストエディターも、多くがOSS(オープンソースソフトウェア)化を選択するようになった。アジャイル開発が進む開発の現場でも「Atom」など、OSS製テキストエディターを選択する場面が増えているが、今回取り上げるのはAdobe SystemsがOSSとして公開している「Brackets」である。

HTMLやCSS、JavaScriptのコーディングに特化したOSS製テキストエディターとして、2011年12月から開発をスタートし、2016年6月には最新版となるバージョン1.7をリリースしたばかりだ。ソースコードはもちろん、Windows版やmacOS版に限らずLinux版(Debパッケージ)をGitHub上で公開している。使用環境を選ばないところも高い評価を得る理由の1つだろう。

Adobe SystemsはBracketsを「HTML/CSS/JavaScript用のコードエディター」と称しているが、PHP、Ruby、Pythonなど多くのシンタックスハイライトを用意している。だが、後述する機能を俯瞰(ふかん)すると、やはりWeb開発の利便性を向上させるテキストエディターと評すべきだろう。

Brackets最大の特徴となるのが、ライブプレビュー機能だ。編集中のHTMLファイルやindex.htmlファイルを含むCSSファイルに対して実行すると、Webブラウザーでリアルタイム表示するというもの。現バージョンはGoogle Chromeが必要となるが、<ファイル>メニュー→<試験ライブプレビューを有効にする>を選択するか、brackets.jsonの「"livedev.multibrowser": true」にすることで、Microsoft Edgeなども使用可能だ。

もちろん単にHTMLファイルをWebブラウザーで開くのではない。Adobe Systemsによれば、ローカルブラウザーにライブ接続し、編集結果をリアルタイムで表示する。つまりBrackets側でコードや文章を書き換えれば、そのままWebブラウザー上の表示内容も即時反映されるというものだ。これまで保存とリロードを繰り返してきたWeb開発者には大きなポイントとなるだろう。また、HTMLやCSSの編集内容がWebページ上でどのように表示されるのか、簡単に確認できるハイライト機能も使いやすい。なお、開発チームの説明によれば、リアルタイムで確認できるのはHTML/CSSファイルのみ。JavaScriptファイルに対してはリロードを要する。

Bracketsは他のテキストエディターと同じく、ブロックごとに折りたたみや展開、括弧のマッチングなど作業効率を向上させる機能を多数備えているが、"Web開発に特化"したテキストエディターと呼ばれる理由は、クイック編集機能の存在だ。ID名やCLASS名、HTMLタグ上でクイック編集を実行すると、適用しているスタイルを取得して直接編集できる。このクイック編集はCSSに限らず、配色やCSSアニメーション(cubic-bezier()やsteps()など)、JavaScript関数にも使用可能だ。その他にも画像や配色に関してはマウスカーソルを重ねると小さなウィンドウで表示するホバークイックビュー機能も用意している。

●開発者に好まれるIDE機能やキーアサインも充実
BracketsがWeb開発者に好まれる理由の1つが、コードヒント機能だ。IDE(統合開発環境)では入力中のコードに対して、関数名などを補完する自動補完機能を備えているが、BracketsはHTML/CSS/JavaScriptに対して同様の機能を用意している。「コードヒント」と呼ばれる本機能は、「<」を入力した状態でHTMLコードを選択するリストボックスを用意し、開発者はそこから使用するコードのスペルを1文字ずつ入力していけば、自動的にコード補完が行われる仕組みだ。ちなみにリストボックスは[Ctrl]+[スペース]キーで再表示できる。

この他にもプロジェクトのルート化や、複数箇所の選択機能など便利な機能を供えているが、Bracketsは他のOSS系テキストエディターと同じく拡張機能をサポートしている。登録数は数え上げるのが難しいものの、PDF出力を行う「ExportPDF」や、HTMLファイルなどを編集しやすいように整形する「Beautify」、HTML/CSS/JavaScriptファイルの構造をアウトライン表示する「Brackets Outline List」と多岐にわたるため、ご自身の開発環境や用途に合わせて探してほしい。

テキストエディターの移行は機能もさることながら、最大の問題はショートカットキーなどのキーアサインにある。指に馴染(なじ)んだキーが違うと新しいレイアウトに慣れるまでかなりの時間を要してしまう。Bracketsも標準ショートカットキーを備えているが、keymap.jsonファイルに対して、ショートカットキーとコマンドIDを対にして記述すれば、自由に変更できる。公式WikiではSublime Text風のキーアサインを紹介されているので、Bracketsを試そうと思われた方はWikiを参考にそれまで使っていたテキストエディターのキーアサインをBracketsに適用すると移行しやすいだろう。

阿久津良和(Cactus)

(阿久津良和)