アドビの Web エディタ Brackets 1.1 の機能

クロスブラウザーのライブプレビュー

ライブプレビューは Brackets で編集中のコードを、プラウザーと連携して表示 & 確認ができる便利な機能です。

これまで、ライブプレビューを使うには Chrome が前提でしたが、バージョン 1.1 から、任意のブラウザを使える新しい実装が追加されました。

自分のメインブラウザーが使えるだけではなく、最初に開いたブラウザーから URL をコピー & ペーストすれば、同時に複数の種類のブラウザーに編集中のコードのプレビュー表示が可能です。表示の違いも、いちいちコードを保存せずに確認できるのが便利です。

新しいライブプレビューは、現在はまだ試験段階という位置づけになっていて、利用するにも設定変更が必要です。将来は現在の実装を置き換えて、正式な仕様になる予定です。

以下が、新しいライブプレビューを使うための設定方法です。

1. 「デバッグ」 -> 「環境設定ファイルを開く」 と選択し brackets.json を開く
2. 中括弧の中に以下の行を追加 （行の区切りのカンマを忘れずに）
   "livedev.multibrowser": true
3. ライブプレビューボタンを押してシステムデフォルトのブラウザーに編集中のページを表示

Brackets の再起動が必要な場合もあるかもしれません。

バグがまだまだあるようです。機能もまだ追加中という感じででした。

Extract 経由の PSD 読み込み

Extract は PSD のレイヤーから情報を抽出してくれる Creative Cloud のサービスです。最新の Dreamweaver CC には Extract と連携するパネルが追加されていますが、Brackets にもプレビュー版という位置付けながら、Extract から PSD の情報を取り込む拡張機能 Extract for Brackets が提供されています。

記事冒頭のリンク先のページからは、Extract for Brackets 機能拡張込みのパッケージがダウンロードできます。

Extract for Brackets のパネルには PSD のプレビューとレイヤー情報が表示されます。現在、パネル内で取得できる PSD の情報は、

• 色、グラデーション
• フォント
• オブジェクトの大きさ、オブジェクトの間隔
• レイヤーを画像として抽出

です。

抽出された情報は Extract パネルからコピーして使えるほかに、CSS や HTML のコードヒントとしても利用できます。

PSD の情報を読み込むには、まず自分で自分の Creative Cloud アカウントに PSD ファイルをアップロードするか、他の人がアップロードしたファイルへの公開 URL を入手します。

いずれの場合もクラウド上のサーバーから情報を取得するため、Creative Cloude のアカウントとインターネット接続されていることが利用の条件になります。いつかオフラインで使用できるようになるとよいのですが。

Extension for Brackets の簡単な使い方は、機能拡張に組み込まれているガイドからも確認できます。機能拡張を起動したら、パネルの上部エリアにある "?" マーク （今すぐはじめる） をクリックしてみてください。

SCSS/LESS 簡易サポート

バージョン 1.0 以降 SCSS/LESS に関する機能強化が行われています。SASS まではちょっと手が回らなかったようですが。

まず、クイック編集 （Ctrl/Cmd + E） と定義をクイック検索 （Ctrl/Cmd + T） が SCSS/LESS に対応しました。どちらもよく使用する機能だけに便利です。'&' 付きのセレクタも見つけてくれます。

また、ライブプレビューでは、SCSS/LESS ファイル内ｎｏ定義の上にマウスを移動すると、ブラウザ内でそのルールが使用されている箇所がハイライト表示されます。

ルールを編集したら即座にライブプレビューに反映させるというのはまだできないため、修正したら以下の機能拡張を利用してコンパイルを行います。

• LESS ： LESS AutoCompile Extension
• SCSS ： brackets-sass extension

どちらもファイルを保存すると自動コンパイルしてくれます。

分割ビュー

分割ビューは、画面を上下、または左右に分割して 2 つのファイルを並べて表示する機能です。サイドバーの上部にあるアイコンをクリックするか、「表示」 メニューから 「左右分割」 か 「上下分割」 を選んで使います。

ビューの分割中は、サイドバーの作業中ファイルのリストが 2 つに分かれます。リスト間でファイルをドラッグ & ドロップすると、表示するビューを選べます。分割ビューを終了すると分けたリストは 1 つに戻ります。

新規にファイルを開く場合、表示するビューを指定するには、まず表示したいビューをフォーカスした状態にして、その後ファイルをクリックします。

今のところ 2 つのビューに同じファイルを表示することはできません。