PSDからコーディングに必要な情報を抽出する技術がAdobeからCreative Cloud Extractとしてリリースされており、BracketsではExtract for Brackets (Preview)（以下Extract）というエクステンションとして、インストーラーに標準で組み込まれています。
Extractを使用することによりBrackets内でPSDを読み込み、各種コード・画像をその場でコードヒント（Ctrl+Space）で抽出・反映させることが出来ます。
コーディングの効率化に大きく貢献してくれるExtractのどのように使えばよいか、順を追ってご紹介していきます。
- 基本的な使い方はこちら→Bracketsの機能紹介、使い方解説
- その他の便利エクステンション集はこちら→ Brackets おすすめエクステンション集・解説
下準備～起動
Extractを使用するには、Creative Cloud（以下CC）のドライブにファイルがアップロードされている必要があります。
CCのステーションソフトをインストールすると自動でPCのユーザー名フォルダ内にフォルダが作成されますが、Adobe IDの作成～ステーションソフトのインストールが必要な方は、こちらの記事をご参照ください。
元々ファイルがCCドライブにある場合はそのまますぐに使用でき、アップしていない場合はBracketsからExtractを起動した段階でドロップしてアップロードすることもできます。
（ただしファイル名に日本語が使われていると、ファイルを開くことが出来ません）
width/height値の取得
レイヤー、レイヤーグループのwidth/height値を取得することが出来ます。
レイヤーの場合はPSD内の要素を直接、または右側のレイヤーツリーを選択することにより、レイヤーグループの場合はレイヤーツリーから選択することにより、情報がポップアップで表示されます。
またポップアップ内の%をクリックすると、表示単位を%に切り替えることが出来ます。
このとき表示される値は、カンバスのwidth/heightそれぞれの全体を100%とした相対値です。
位置情報の取得
こちらも上記のwidth/heightと同ポップアップ内で、カンバスの左上を起点としてX値・Y値を取得することが出来ます。
正直これだけだとあまり使い道は無いのですが、Shiftを押しながら2つ目のレイヤーを選択するとレイヤー間の相対位置を表示することが出来ます。
画像の抽出（スライス）
レイヤーを選択した状態で、imgタグ内src属性でコードヒントを表示すると、レイヤーを画像としてそのままスライスするポップアップ「アセットを抽出」が表示されます。
また複数のレイヤーを1枚の画像として出力したい場合は、Shiftを押しながらレイヤーを複数選択した状態でコードヒントを表示させます。（ただしちょっと重いです）
残念ながら2015年10月12日時点のWindows版では、ファイル名や拡張子を変更して出力しようとすると上手く動作しません。（下記、CSSで背景画像として書き出す場合は大丈夫です）
CSSスタイルの取得
スタイルを取得したいレイヤーを選択状態にしたままCSSファイルにてコードヒントを表示すると、自動でスタイルを取得・反映させることが出来ます。
レイヤーを背景画像として使用したい場合も、HTMLの場合と同じように画像をその場で抽出出来ます。
テキストの取得
テキストレイヤーを選択したポップアップ内の「テキストをコピー」から、テキスト情報をそのままクリップボードにコピーすることが出来ます。
残念ながら2015年10月12日時点では日本語をコピーするとHTMLエンコードされた状態でコピーされてしまいます。
- Brackets Tools等のプラグインを使用して、ペースト後にHTMLデコードする
- Creative CloudアセットのExtract（要はWeb版）を使う
のいずれかで、根本的ではありませんが解決することが出来ます。
（画像はBrackets Toolsを使用した場合）
実際の使用にあたって
正直、ExtractのパフォーマンスはPSDの内部構造に左右されるところも大きいです。
初めからExtract使用を意識した綺麗なレイヤー構造のPSDを使えればベストなのですが、実際の現場ではなかなかそうも行かないと思います。
私の場合はオリジナルのPSDはバックアップを取った上で
- ある程度レイヤーを整理する
- 1枚画像として切り出したい複数レイヤーは、なるべくスマートオブジェクト化する
ということをしています。
いずれにしても、無理してPSDを整理して普通にコーディングするより遅くならないよう、どこまでExtractで抽出するか事前に線引きをするようにしています。
なお具体的にどのようなポイントに注意してPSDを作成すれば良いかは、こちらのサイト様がとても参考になります。
→HTML／CSSコーディング時間を激減させる「Creative Cloud Extract」と、その真価を引きだすための10のポイント
以上、Extractの基本的な使用方法でした。
未だPreview版であるためところどころ不安定なところもありますが、上手く使えればかなり効率的にコーディングを行えると思います。
ぜひ上手な付き合い方を見つけて、快適なBracketsライフをお送りください！