特集
» 2014年11月17日 18時00分 UPDATE

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

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

[岡本紳吾,hatte Inc.]

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

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

 今回のリリースに合わせて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はオープンソースのコードエディターであるが柔軟な拡張性を持ち合わせ、コードヒント、コード補完機能、さらにはコード内で別のコードを呼び出して編集するクイック編集機能などが搭載されている。また、日本語メニューにも対応している。

brackets3.jpg クイック編集でCSSを表示させた状態。ディレクトリ内にあるCSSファイルから必要な要素を全て表示してくれるので、CMSのテンプレート編集などにも活用できる(ここではDrupalのテンプレートを編集している)
brackets4.jpg CSSではカラーコードやトランジションのイージングの調整がクイック編集できる。クイック編集はJavaScriptでも利用できる

Extract for Bracketsとは

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

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

brackets5.jpg 画像を選択しているとimgタグなど画像が必要なコードを書こうとするところでコード補完がされる
brackets6.jpg 背景色ではグラデーション要素を補完
brackets7.jpg もちろん、角丸ボーダーも補完される
brackets8.jpg PSD内のテキストを選択すると、そのテキストを抽出することが可能だ
brackets9.jpg フォントのスタイルももちろん抽出可能だ
brackets10.jpg CSS TransitionのイージングのカスタムもGUIで行える。複雑なイージングを画面で見てコントロールできる

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

       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。