以前の記事でお伝えした、Web コーディングに特化したコードエディタ Brackets の Sprint 10 が公開されました。それにあわせて、アドビからのアナウンスもようやく行われました。
Brackets は無償のオープンソースプロジェクトです。コードは githab に公開されています。 (brackets@githab)
Brackets を他のエディタと比べた時の大きな特徴は以下の 3 点です。
- インライン編集機能
HTML 要素に関連する CSS 属性をエディタ内でインライン編集 - ブラウザとの同期
ブラウザ内のコンテンツをそのままライブコーディング、ブラウザとエディタ間の行き来が発生しない - HTML/CSS/JavaScript のオープンソースプロジェクト
Web 制作スキルで、誰でも Brackets の開発に貢献ができる (実際、Brackets チームは Brackets を使って Brackets を開発しているとのこと)
実際に使ってみると、他のエディタとの違いがよくわかると思います。ダウンロードはこちらです。 (brackets-sprint-10.zip -- Brackets Sprint 10 Build)
インライン編集機能
従来のエディタでは、複数のタブを使って、関連する HTNL/CSS/JavaScript ファイルを開くのが一般的です。そして、個々の HTML 要素のスタイルが、どのファイルのどの辺りに書かれているかを管理するのは、制作者の役割でした。
Brackets は、各 HTML 要素と CSS 定義の関連を理解します。そのため、HTML コードの中で Cmd/Ctrl-E を押してインライン編集を起動すると、カーソルの置かれた要素に適用されている CSS クラスが、要素の下にインライン表示されます。
この機能を Quick Edit と呼びます。
そのまま CSS の編集作業を行ったら、再び Cmd/Ctrl-E を押すとインラインエディタが閉じられます。HTML のコードからは移動していないので、直ぐにそのまま作業を続けることができます。
下は、インラインエディタを表示した状態です。複数箇所や複数ファイルに定義がある場合は、インラインエディタの右側にそのリストが表示されます。 (下の画像では省略してます)
JavaScript の場合でも、関数名に対して Cmd/Ctrl-E キーを押すと、関数の定義がインラインエディタに表示されます。もちろん、そのまま編集できます。
将来は、カラービッカー等も、Quick Edit 機能の一部として提供したいとのことです。
ブラウザとの同期
Brackets の 2 つ目の特徴です。
今は、エディタ内でコードを編集して、ブラウザの更新ボタンを押して、変更を確認、という作業を繰り返すのが一般的だと思います。
ブラウザに組み込まれたデバッグツールを使えば、ブラウザ内のコンテンツを直接修正できますが、その後に、修正内容をエディタ側にコピーするという作業が発生します。そうすると、どのファイルの何行目を変更したのか、覚えていないといけません。
結局、エディタ内のコードと、ブラウザ内のコンテンツの同期をとるのは、制作者の役割になっています。
Brackets は、ブラウザと編集中のコードを連携させる、Live Preview 機能を持っています。この機能を起動すると、ブラウザは Brackets 内のコードを読み込んで表示します。
(ウインドウ右上のアイコンを押すとブラウザとの同期が開始されます)
Brackets 内での修正はそのままリアルタイムでブラウザ側に反映されます。例えば、インラインエディタで CSS を変更するだけで、その結果をブラウザ内で確認できます。さらに、その後、コードをブラウザのツールからコピーしてくる必要もありません。
現バージョンの Brackets は、Chrome とのみこの機能が利用できますが、他のブラウザでも利用できるようにしたいと考えているそうです。
HTML/CSS/JavaScript のオープンソースプロジェクト
Brackets は、みんなが使いたい機能を追加する、というポリシーで開発されています。
既に、いくつもの追加機能が、外部の開発者から提供されています。
また、Web 標準技術を使って開発しているため、様々な環境で利用することができます。例えば PhonGap を使えば簡単にアプリとしてパッケージできます。また、既存のアプリに組み込むことも可能でしょう。
最後に、Brackets のビデオを紹介します。
コメントする