Bracketsがメジャーバージョンアップ

昨日、これまで小刻みなマイナーバージョンアップを繰り返し0.44までバージョンを重ねていたBracketsが1.0と、正式なバージョンアップを行いました。わーい！！確か私は0.14くらいから（2年近く経ってる？）使っているはずですが、開発には既に3年ほどかかっているそうです。

Brackets – A modern, open source code editor that understands web design.

今回はこれについてではなく（別途記事を書きます書きました→Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて）、この1.0と同時にリリースされたBrackets制作チーム肝いりの拡張機能、「Extarct for Brackets」の紹介をしたいと思います。これはまだまだ多いPSDカンプからのHTML起こしの作業を劇的にスムーズにしてくれるコーダーにとってとても便利な機能です。

Extractとは

その前にExtractというものがなんなのかを解説します。Extractは、Creative Cloud FilesのWeb版（現在はCreative Cloudのアセットという名前になっているようです）の中にあるPSDファイルのレイヤーやスタイル、フォント、形状を解析し、ブラウザー上で設定値を取得したり画像の書き出しを行うことができる機能です。Extractまで含め、Creative Cloudの無償会員でも利用可能です。

Extractはブラウザー上でPSDを解析し設定値や切り出し画像を取得できる

これだけでもなんかびっくりする機能ではあるんですが（私は最近まで知りませんでした）、これをワークフローに組み込んだ場合エディターとブラウザーを行ったり来たりすることになりますよね。確かに便利なんだけど、微妙にやりにくい気もします…。

Extract for Bracketsの機能

Extract for Brackets

ここまででこの拡張機能の役割について察しがつくと思いますが、「Extract for Brackets」はBrackets上でExtractの機能が使える拡張機能です。これって結構すごくないですか？

エディター上でPSDファイルを開く

Extract for Bracketsを開くとまずサインインを求められます。するとパネル内にCreative Cloud内のフォルダーが表示されます。

右上のExtractのボタンを押し、まずサインインする

ここに入っているPSDファイルであればパネル内で内容のプレビューができます。

Creative Cloud Filesを一覧、アップロードもできる

現時点のバージョンでは、ファイルによってはうまく全体が表示されないことがあります。言語関係の問題がありそうですが、近いうちに改善されるでしょう。

レイヤーの表示切り替え、サイズや間隔の取得

表示させたファイルはレイヤーやグループごとに表示と非表示を切り替えられます。ただしここでレイヤーを削除したり移動、変形、入力値やテキストの変更はできません。あくまで閲覧のみになっています。これはそれでいいと思います。

レイヤーは名称、グループ、階層などが維持されている

ここで選択したレイヤー同士の距離などを確認することができるほか、選択したレイヤーの寸法をpxか%で取得することもできます。

pxか％のいずれかで数値をクリップボードに取得する

Web版のExtractではここでテキストやレイヤーに設定されているスタイルや数値を元にCSSのプロパティーと値を作ってくれたりテキストをクリップボードに取得することができるのですが…現在Brackets版ではCSSの取得ができません。また、テキストをコピーする機能は現状では英語にしか使えません。ここでテキストも取れれば、欲を言うならテキスト部分を選択したりできれば良かったんですがねw この辺はおいおい対応されるでしょう。Web版ではできてますし。

任意のファイル名、形式、パスでの画像書き出し

画像をカンプから直接書き出す

これが目玉の機能だと思うので細かく解説します。

まず書き出したいレイヤーを一つ、または複数選択します。その状態でエディターにimg要素やCSSのbackground-imageプロパティーなどを記述しようとすると、Extractパネルで選択していたレイヤーがコードヒントに表示されます。ここで任意のパス、ファイル名（デフォルトではレイヤー名やグループ名）、拡張子を設定するとその通りのフォルダーにその名前と形式で画像が書き出されます。ついでに縦横のサイズも出ます。

コードヒントに選択した画像が表示される

書き出しフォルダも指定でき、ベクターならSVGも書き出せる

このように、ほとんどフォルダーの操作もせずにエディター上でコードを書くだけで、必要な部分だけを画像として書き出しながらデザインを起こしていくことができます。

カンプからコーディングというワークフロー

これまでデザインカンプをHTMLコーディングに落とし込む場合はスライス機能が使われていました。開発者の間では今後カンプの作成はいらなくなる、インブラウザーでデザインするようになると言われていますが、実際の現場でこのカンプ起こしのワークフローはまだ多いはずです。

最近のPhotoshopではアセット書き出しという機能がついていて、適正なファイル名やグループ名をつけることでPSDの保存時に画像を書き出してくれます。これはこれで便利なんですが、アセットを使ったフローではHTMLに起こす前から書き出すことを意識してカンプを作成していかなければならず、デザインカンプ制作とコーディングという作業がかなり密接になってしまいます。自分でデザインからコーディングを行うのであれば便利だなと思うんですが。

もちろん作ったあとのものをリネームしてもいいんですけどPSDからいじる必要がありますし、二度手間感は否めません。

Extractを用いた方法では適切なレイヤー構成で作ってさえいればカンプの段階ではどのようにしても問題ありません。カンプを見ながら、必要なところだけを選択し、都度必要な形で書き出せばいいだけです。まずカンプがあり、最後にファイル名やパスが決まるという順番でも問題なく作れてしまいます。

スライスと違って書き出す画像ごとに作業をする必要があるようにも見えますが、コーディングの作業がそのまま書き出し指定になっているので書き出し作業がないのと同じですよね。

フォントの指定や背景色などもコードヒントに表示される

コーダーはデザイナーとやりとリのできない状態でPSDファイルだけを受け取ることすらありますから、やり方が違ってもこの拡張機能で吸収してしまえる部分が少なくないのではないでしょうか。PSDと原稿さえあればBracketsだけでコーディングできるわけです。なんならPhotoshopを持ってすらいなくても大丈夫ですw

ちなみにこのエクステンションの解説をAdobeの轟さんが動画で解説してくれているものがあります。

この動画ではBracketsやExtractだけではなく最近のPhotoshopに入っているWebサイト制作のための便利機能やExtractのDreamWeaverとの連携機能が解説されているので、最近のPhotoshopの機能を追ってない人は見てみてるといいと思います！★

おわりに

ExtractはBracketsとともにダウンロード可能

Extract for Bracketsはおそらくメジャーアップデートにあわせての公開であったためなのか、日本語を含むファイルだけの問題だからなのかはわかりませんが、ところどころ未完成な部分もあります。

まだ原因を突き止めきれていませんが、日本語を含むPSDファイルでレイヤーが一部表示されなかったり、テキストをコピーできなかったりします（制作チームに問題として報告済みです）。また、CSSスタイルのコピーは未実装のようです。この辺りはExtractの機能としてはできているものなのでじき追いつくでしょう。英語のファイルでは問題のある挙動を見たことがないので、すでに即戦力なんですかね。

また、これは構造上しかたないんですがCreative Cloud上のPSDファイルを使うためオンラインでないと利用できません。解析に時間がかかることも考えると、ローカルでできるようになってくれたらありがたいなあ…と思います。この辺はBracketsのブログにも要望があがっていました。

BracketsはNightly Build（ソフトウェアが細かく更新されること）なので、今月中盤頃にはまた更新されるはずです。これまで通り私は新機能の実装や今回のさらなるExtractのパワーアップを待ち遠しくしています。この機能の動向が気になった人は私（@webcre8）やBrackets（@brackets）のTwitterアカウントをフォローしたり、Bracketsをダウンロードしてみてくださいー★