メジャーバージョンアップをきっかけに

Brackets 1.0 Rerease

昨日PSDデザインカンプからのコーディングに超便利！Extract for Bracketsという記事を書いたばかりですが、もうちょっとBrackets自体についての話しを書きたいと思います。

一年半前は…

私は昨年の5月にSublime Text2との恋を見送り、Adobe Bracketsに巡り会いましたという記事を書いています。この頃からほとんどのコーディング作業、テキストエディットをBracketsで行っています。主に書くのはHTML、CSS、SCSS、MarkDownです。JSやJSON、PHPを少し触ります。

当時聞こえてきた、Bracketsを触ってみての使わないなあという感想について、現在のBracketsはそのそれぞれの問題を一通り解消してきていると思います。

一年前から備わっていた基本的な特徴は前述の記事を参考にしてもらえれば詳しく知れると思います。

ネイティブ機能の拡充

というわけで、この記事ではここ1年で新しく加わった機能、または拡張機能で付加できる機能についてさらっと紹介します。まずはエディター自体の機能について。

2ペイン機能

最近の目玉機能追加はこれでしょうね。目玉というか、よくえ…1ペインなの…（使わねー）と言われてたのでw 2つまでなので完全なマルチペインではないのですが、左右か上下で2つまでファイルを開くことができるようになりました。サイドバー右上の四角いアイコンでon/off、左右/上下の切り替えができます。ちなみに隣のギアアイコンはソートです。

2ペインでファイルを開ける

これによってCSSのクイック編集とかはちょっと影が薄まったかな？あと、一度どちらかで開いたファイルは常にそちらで開くようになるので反対側で開きたいとき、ちょっとそれで戸惑います。

ちなみにこの機能が追加された0.44ではそのせいかファイルの展開がかなり遅くなったのですが、それは1.0で解消されています。

テキスト編集機能

エディターとしてテキストの選択、検索置換などの機能充実は地味だけど重要ですね。よく使うモノを挙げます。Macの場合なのでWinの人は適宜読み替えてください。

編集機能も当時と比較して充実した

shift+alt+↑

前の行にカーソルを追加

shift+alt+↓

次の行にカーソルを追加

alt+command+クリック

クリックした場所にカーソルを追加

control+command+↑

選択行を上に移動

control+command+↓

選択行を下に移動

control+L

行を選択

control+command+G

選択文字列を検索して選択

その他ファイルの横断検索、置換やコメントの挿入などもショートカットがあります。

キーマップ

キーマップ自体は以前から拡張機能での追加ができましたが、ネイティブに搭載されたようです。といってもデバッグ→ユーザーキーマップを開くでkeymap.jsonを編集していくことになるので拡張機能にもっと簡単な方法があるかもですね。

キーマップはJSONで記述

詳しいやり方はUser Key Bindings · adobe/brackets Wiki（英語）にあります。

テーマの追加

テーマは表示→テーマから選択できます。デフォルトではDarkとLightしかないですが、拡張機能マネージャーからテーマが選択できます。

テーマのダウンロードは拡張機能から行う

一度ダウンロードしないとプレビューできないのがちょっとめんどいですね。これについてはそのうちプレビュー機能がつくかと思います。

その他挙げておきたい特徴

他にも一応挙げておきたい特徴を少し紹介。

クイック編集

クイック編集自体の出番は減るかも

Bracketsの特徴の一つ、クイック編集はHTML要素にカーソルを合わせて該当するCSSのルールセットを追加、編集するものですが、これは一部のCSSプロパティーの上でも同じ操作でGUI的な編集機能を呼び出せます。

色やグラデーションをカラーピッカーで編集できる

トランジションスピードがベジェ操作で編集できる

対応しているのはcolorプロパティー、background-imageプロパティーでの背景色とグラデーション、transition-timing-functionでのアニメーションスピードなどです。

マウスオーバーすると色系の値ではカラーチップが出たり画像ではサムネイルが出るのも地味にいいですね。

プロジェクトのルート

現在開いているファイルとフォルダーはサイドバーに表示されていますが、ライブプレビュー中のページでは現在開いているフォルダーが暗黙的に相対パスのルートと見なされます。

上部が開いているファイル、下部がプロジェクト

つまり、a要素のhref属性に/とだけ書いておいた場合、リンク先は現在開いているフォルダー直下のindex.htmlに遷移しますし、外部ファイルは/css/style.cssのように記述することで全ページ統一の記述にできます。

また、ファイル→プロジェクト設定からベースURLの設定もできるようですね。

強力な拡張機能

Bracketsは今では400以上の拡張機能があるようです。確かそうだったと思うけど今度数えます。

Adobe Edge Web Fonts

Webフォントの埋め込みスクリプト生成

Autoprefixer

CSS保存時のプリフィックス自動付加

DEVimg for Brackets

プレースホルダー画像の生成

Emmet

Emmetの追加

Gist Manager

Gistの呼び出しによるスニペット管理

ImageToData

画像のDataURI変換

Lorem Ipsum

プレースホルダーテキストの生成

Markdown Preview

マークダウンのプレビュー

拡張機能は人によって使うものが大きく違うのでこれが役に立つ！というものはばらけますが、コーダー視点で軽く挙げてみました。もちろん前回の記事で紹介したExtractも有用ですね。

SCSSを使う際私は現在Gruntを経由していますが、拡張機能にはBrackets SASSというものがあるので完全にBracketsの機能でやってしまえるのならそうしようかなと思ってます。

コードヒントやシンタックスハイライトはJavaScriptはもちろんPHPやPythonなんかもサポートしているようです。もちろんSCSSも大丈夫。

特殊な拡張機能も充実

実はこの記事を書こうと思ったのは、APPGIGA!!のGithubのWeb開発用エディタ「Atom」が、いつの間にか進化し過ぎている件！という記事が発端です。

あの記事を読んでいてそれBracketsでもできるよ！…と言いたいわけでもないんですけど（むしろこの記事のおかげで存在を知ったりした）、本当に様々なものがあります。

正規表現のダイアグラムはRailroad diagram of regular expressionsというものがあったりします。

gitを使うならBrackets Gitがありますし、SVGの編集にはSVG Preview、Edge Inspect、Edge Reflowとの連携など、バラエティー豊かですね。

おわりに

Bracketsもっと使われてほしいです

Extractを見ても、BracketsがAdobeの開発する製品であることのアドバンテージを活かした他のエディターとの差別化の道を歩んでいることがわかると思います。正直なところBracketsを使い始めたのはそうしたAdobeの動きに期待したところが大きいです。実際、前述の記事のAtomや大人気のSublime Textなど他のエディターにしても、それを求める人のニーズに寄っていってるんじゃないですかね。

BracketsはAdobeの各種デザインソフトと連携をとりつつフロントエンドを中心としたサポートをしつつも、他の言語や職種についても拡張機能で幅広く対応していく感じのようです。このエディターの方向性がフィットする仕事をしている人、結構多いのではないでしょーか。

…ところで今年もアドベントカレンダーの季節がやって来ているんですが、私は今年Brackets Advent Calendar 2014を立ててみました。この記事を読んでBracketsに目覚めた人、俺もめっちゃ使ってるよという人、参加してみませんか！！空いてるところは自分で埋めると思うんですが、できればそうならないよう、お願いします…w Brackets以外の記事も書きたいので＞＜