Brackets に新しい拡張機能 Reflow Cleaner が公開されました。Reflow Cleaner は、Reflow で制作したデザインから、クリーンな HTML と CSS を生成する （ことを目的として開発された） 拡張機能です。

Reflow は、作業中のデザインをブラウザで表示確認するために HTML コードを生成します。しかし、生成されるコードの構造は、Reflow からの扱い易さを優先したもので、残念ながら、そのまま開発に利用するには適したものではありません。

Reflow はデザインツールである、という点からは、この仕様は理解できなくもないものですが、とはいえ、せっかく HTML ベースのデザインツールを使うのだから、その出力をコーディングに活かせないのかという期待も、Reflow が登場した頃からずっと聞かれてきた声でした。そこで、コーディング環境である Brackets の拡張機能として、Reflow が生成するコードを元に、開発に適した HTML や CSS を生成する機能が追加された、というのが背景のようです。

CSS Regions は、現在 W3C で標準化が進められている CSS のレイアウト機能の 1 つです。従来の HTML コンテンツのレイアウトの常識を変える革新的な試みです。

従来の Web レイアウトは、テキストや画像を含むタグの並びを指定することで実現されてきました。この方式では、HTML 文書の構造が、実現可能なレイアウトを大きく制限します。これに対し、コンテンツの定義をレイアウトに使う領域の定義から分離するのが CSS Regions です。

CSS Regions では、「このコンテンツをこの領域に流し込む」 という指定ができます。そのため、DOM 構造そのままだったら表示されていたはずの場所とはまったく違う場所にコンテンツを表示することが可能になります。

また、複数の領域にまたがった流し込みの指定もできるので、あるコンテンツを別のコンテンツの両側分けてに表示、なんてこともごく簡単に実現できます。

特に、全ての画面で同じソースを利用するレスポンシブデザインでは、CSS Regions による恩恵が大きそうです。例えば、下の例では、複数カラム表示時には、真ん中に見出しを配置してその周りにテキストが回りこむような配置になっていますが、1 カラム表示時は見出しがブロック間に移動します。

Edge Code のプレビュー版が更新されました。約束どおり、Brackets のアップデート 2 回分で Edge Code のアップデートが行われています。

日々 Edge Code を使用うしている方には既に更新の通知が届いているかと思いますが、これから使ってみようという方は、Creative Cloud からダウンロードできます。

• https://creative.adobe.com/products/code

プレビュー 4 以前がインストールされている環境では、上書きインストールではなく、一旦、既存の Edge Code を削除してから新バージョンをインストールするのが推奨されています。

新機能

Brackets 30 に機能的に追いついたこと以外には、あまり大きな追加機能はありませんが、

Edge Code のプレビュー版が更新されました。今回の変更は、ベースとなっている Brackets の最新版である Sprint 28 のキャッチアップと Kuler サービスの統合です。

まだ自動更新のお知らせが届いていない方は以下のリンクからもダウンロードできます。

• https://creative.adobe.com/products/code

Creative Cloud アプリからインストールする場合は、更新情報が表示されない場合もあるようですが、気にせず新規にインストールすると、最新版になるようです。このあたりの使い勝手は、プレビュー版のうちはしかたがないのかもしれません。

Kuler

Kuler は、カラーテーマを作成したり共有できるサービスです。最近は、iPhone アプリも公開されて、ますます楽しく使えるようになりました。

Brakets のアドビ版として公開されている Edge Code のプレビュー 2 が公開されました。

インストーラーは Creative Cloud からダウンロードできます。プレビュー 1 をインストールしている場合、そのまま上書きして大丈夫です。

基本的には、Brackets の Sprint 17 に、コアのコードをアップデートしたもののようです。従って、新機能もBrackets の 3 か月分を一気に追加したという感じです。

ざっとおさらいにすると、

• HTML と CSS のライブ開発
  CSS は即座に、それ以外はファイルを保存すると自動的にブラウザ内の表示を更新
• UI の変更
  ステータスバーを下部に追加
• パフォーマンス
  スクロールやキー入力への反応が 2 倍以上の高速化
• コード編集機能
  タブのサイズ設定、インクリメンタルサーチ、行削除のショートカット、行選択のショートカット、ブロックコメント用のショートカットなどを追加
• ビジュアル編集機能
  インラインのカラーピッカーを追加
• HTML コード編集
  href/src のコードヒント機能、閉タグの自動挿入など
• ファイル／フォルダパネル
  新しいコマンドやコンテキストメニューの追加
• 拡張機能
  拡張機能のフォルダをアプリフォルダの外に移動

あたりが、主な新機能となっていますす。

Brackets が順調に 2 週間ペースで更新されています。先週は Sprint 14 が github に公開されました。

インストーラが以下のリンクからダウンロードできます。Mac と Win それぞれ用意されています。

• brackets-sprint-14-MAC.dmg (22.8MB)
• brackets-sprint-14-WINDOWS.msi (21.2MB)

昨日のイベントでは Brackets ベースの Edge Code のプレビュー版も発表されていました。昨日の発表内容を見る限り、Edge Code の Brakets との違いは、

• いくつかの拡張機能がパッケージ済み （カラーピッカー等）
• 他の Edge サービスとの連携 （現在は Edge Web Fonts と Phonegap Build）

のようです。正式な製品になる頃にはもうちょっと差がつくのかもしれません。