Git、Sass／LESS、EmmetそしてExtractの拡張機能が便利なBracketsの使い方：OSSエディターでWebコーディングはここまでできる（1/2 ページ）

バージョン1.0となったオープンソースのコードエディター「Brackets」について、概要と、核となる拡張機能を使ってWeb制作をどこまで効率化できるのかを解説します。便利なプラグインの見つけ方も。

[岡本紳吾，hatte Inc.]

Brackets 1.0リリース、無料なのにここまでできる！

　オープンソースのコードエディター「Brackets」が満を持してバージョン1.0となった。

Brackets

　今回のリリースに合わせてBracketsのプラグインである「Extract for Brackets」のプレビュー版も公開されている。これらを組み合わせるとAdobe Photoshop CC（以下、Photoshop）やAdobe Dreamweaver CC（以下、Dreamweaver）で使える、Adobe Creative Cloudの「Extract」機能をBracketsで利用できるようになる。

コードベースのデザイン用にデザインアセットを抽出するワークフロー

　これまでWeb制作ではSublime TextやCodaなど、さまざまなエディターがそのシェアを争うような構図であったが、Extractの搭載でBracketsにもまた注目が集まろうとしている。本稿では、ExtractやLESS／Sass、Emmet、Gitなどと連携するさまざまなプラグインでBracketsを拡張し、Webコーディングがどのように便利になるのかを紹介していく。

Bracketsの特徴

　ここでまず、Bracketsの特徴について紹介しておく。Bracketsはオープンソースのコードエディターであるが柔軟な拡張性を持ち合わせ、コードヒント、コード補完機能、さらにはコード内で別のコードを呼び出して編集するクイック編集機能などが搭載されている。また、日本語メニューにも対応している。

クイック編集でCSSを表示させた状態。ディレクトリ内にあるCSSファイルから必要な要素を全て表示してくれるので、CMSのテンプレート編集などにも活用できる（ここではDrupalのテンプレートを編集している）

CSSではカラーコードやトランジションのイージングの調整がクイック編集できる。クイック編集はJavaScriptでも利用できる

Extract for Bracketsとは

　ExtractはPhotoshopやDreamweaverにも搭載されたアドビ システムズ肝入りの機能だ。これはPhotoshopのPSDファイルを解析してその中にあるアセットやプロパティ、テキスト情報を抽出して利用できるというものだ。極論を言うと、PSDさえあればPhotoshopを起動することなく画像の書き出しができてしまうということになる。

　Extract for BracketsはBracketsのコード補完機能に統合されており、選択したレイヤーの情報をさまざまな形でコード補完してくれる。

画像を選択しているとimgタグなど画像が必要なコードを書こうとするところでコード補完がされる

背景色ではグラデーション要素を補完

もちろん、角丸ボーダーも補完される

PSD内のテキストを選択すると、そのテキストを抽出することが可能だ

フォントのスタイルももちろん抽出可能だ

CSS TransitionのイージングのカスタムもGUIで行える。複雑なイージングを画面で見てコントロールできる

　Extractを利用すれば、Photoshopを用いなくても要素を抽出できるようになる。デザイナーは煩わしいスライスの指示から解放され、コーダーはデザイナーの意図を汲んだコーディングがしやすくなる。