Brackets Sprint 20 の公開と未公開のライブ開発機能を有効にする方法

OS X 10.8 の場合、最初の実行時に右クリックして表示されるダイアログから "開く" を選び、表示されるダイアログ内で再度 "開く" をクリックします。これは Brackets が電子署名されていないため必要になる手順です。

Windows 環境でインストールする場合は、既存の Brackets に上書きするのは避けた方が良いそうです。

未公開ライブ開発機能の使い方

最新版の Brackets では、まだ開発中ということで隠された状態ではありますが （そのため利用は自己責任で、ということになってます）、ライブ開発機能の実装が進められています。

正式にアナウンスされているライブ開発関連の機能は、 CSS への変更がリアルタイムでブラウザ内に反映される、というもので、HTML や JavaScript に関しては、一旦ファイルを保存するまでブラウザに反映されません。

一方、現在実装が進められている機能は、HTML も JavaScript も、エディタ内で編集すると、リアルタイムでブラウザ内の表示が変わるというものです。特に HTML の方は、結果を横目に見ながら編集できるのが嬉しい感じです。

そのうえ、ブラウザ内のテキストを直接編集することもできるようになります （その際エディタ内の HTML ファイルもリアルタイムで更新されます）。ブラウザ内の要素に対して、その要素が定義されている HTML や、要素に適用されている全てのスタイルのリストを表示することもできます。リスト内の項目をどれでもクリックすれば、その項目が定義されている行がエディタ内で開き、該当箇所にカーソルが移動します。 （Dreamweaver みたいです）

この機能を使うには以下の手順を行います。まず事前準備です。

1. Brackets Sprint 20 または Edge Code Preview 3 をインストールする
2. GitHub のリポジトリから最新の Brackets のコードをダウンロードしてローカルディスクに展開する
3. Brackets または Edge Code を Shift キーを押しながら起動する
4. ダイアログが表示されたら、ダウンロードした Brackets フォルダ内の src フォルダの下にある index.html　を選択する
5. エディタが起動したら、"ファイル" → "フォルダを開く" と選択 （もしくは現在選択中のフォルダ名の右端にある三角をクリック）
6. ダイアログ内で src フォルダ内にある LiveDevelopment フォルダを選択する
7. main.js を開き、55 行目辺りにある、"experimental: false" を "experimental: true" に変更
8. main.js を保存
9. "デバッグ" → "開発者ツールを表示" と選択 （もしくは opt+cmd+i / alt+ctrl+i ）
10. Chrome が起動したら、画面右下のアイコンを クリック
11. 設定画面内の "Disable Cache" をチェック
12. 最後に忘れずに "デバッグ" → "Brackets をリロード"

これでライブ開発ができるようになったはずです。実際に HTML ファイルをエディタ内に開いて、画面右上のライブプレビューアイコンをクリックしてみて下さい。エディタ内のカーソルの位置に合わせてブラウザ側で要素がハイライト表示されていれば成功です。

ブラウザ内で、opt/alt キーを押しながら要素をクリックすると、その要素と関連するスタイルが定義された行の一覧が表示されます。そこからエディタに移動できます。opt+cmd/alt+ctrl キーを押しながらテキストをクリックすると、そのテキスト要素を直接騙取できるようになります。