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

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

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

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

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

Brackets の Sprint 31 が公開されました。

• Windows (msi, 35.1 MB)
• OS X (dmg, 34.54 MB)
• Linux 32 (deb, 44.5 MB)
• Linux 64 (deb, 46.0 MB)

今回から、Windows 版はウインドウの枠やタイトルバーなどが、OS 標準からいわゆる最近のアドビ製品っぽい感じの濃いグレーに変更されました。Mac 版も同じ方向性で変更が行われる予定のようです。

ライブプレビュー

大きな機能追加としでは、HTML のライブプレビュー機能がいよいよちゃんと利用できるようになってきました。ライブプレビューを起動した後に、エディタ内で HTML ファイルを編集すると、リアルタイムでブラウザ内の表示が更新されます。

ただし、タグの編集中など HTML の構造の整合性が取れていない状態が検知された場合、Brackets はライブプレビューを一時的に中断します。その間、プレビューの更新は行われません。

前回の記事でも紹介したように、Topcoat は CSS だけで記述された UI フレームワークです。CSS のみのため、任意の JavaScript フレームワークと安心して組み合わせられますし、VM　を必要としない分、モバイルデバイスでのパフォーマンスに有利な面もありそうです。

Topcoat はもともと PhoneGap 用に開発が始められたものなので、PhoneGap アプリをつくる機会があれば、是非試してみてください。

（PhoneGap アプリ開発を最初から勉強したい方には、こちらの連載がだんだんと充実してきてますのでおすすめです。企画レベルでは既に 16 話までできているという話なので、かなり充実したシリーズになりそうです）

ということで、CSS だけのコンポーネントがどんなつくりになっているのか、ちょっと興味を持った人のため、今回は Topcoat のアーキテクチャの紹介です。

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

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

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

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

新機能

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

Flash Player 及び Adobe AIR セキュリティアップデートが公開されました。更新の詳細はこちら （英語） です。

Flash Player の対応した問題の影響度は一番高い "critical"、緊急度は Windows 版と Mac 版は実際に攻撃に利用される可能性を示す "1"、それ以外のプラットフォームは緊急度の低い "3" です。

新しい Flash Player のバージョンは以下の通りです。

• 11.8.800.168 Windows、 OSX
• 11.2.202.310 Linux
• 11.1.115.81 Android 4.x
• 11.1.111.73 Android 3.x と 2.x

Chrome はバージョンが少し異なり 11.8.800.170 となります。Windows 8 と Chrome 以外は Flash Player の自動更新機能で更新が行われているかと思います。

Topcoat のバージョン 0.7 が公開されました。 （Topcoat 0.7@Github）

Topcoat は HTML アプリ用の UI コンポーネントです （開発チームはデザイン言語だと言っています）。全て CSS で記述されているのが特徴です。

使い方は、ダウンロードした Topcoat のパッケージ内の css, img, font フォルダから必要なものをプロジェクトにコピーしたら、以下のように CSS ファイルを HTML ページとリンクして、あとは、BUtton 等のタグにクラス定義を追加します。

< link rel="stylesheet" type="text/css"
  href="css/topcoat-mobile-light.min.css" >
...
< button class="topcoat-button"> Button </button>
< button class="topcoat-button" disabled> Button </button>

Topcoat を採用したアプリケーションの代表的な例としては、Edge Reflow や Brackets があります。といっても、これまで Topcoat はモバイルアプリ向けの機能を優先して開発されてきました。ようやくデスクトップ向けのコンポーネントも同じレベルまで引き上げられた、というのが今回のバージョンアップの目玉の 1 つとなっています。

Generator について、いくつか質問をいただいたので、昨日の記事に引き続きこの話題です。

画像アセット生成機能の有効化／無効化

Photoshop に新しく追加された "画像アセットの生成機能" を利用するには、「ファイル」 → 「生成」 → 「画像アセット」 と選択して、「画像アセット」 の前にチェックが付いた状態にします。 （「生成」 が選べなかった人は次の段落をお読みください）

逆に、"画像アセットの生成機能" を無効にするには、「ファイル」 → 「生成」 → 「画像アセット」 と選択して、「画像アセット」 の前にチェックが無い状態にします。 「画像アセット」 を選択するごとに、機能のオンオフが切り替わります。

「画像アセット」 がチェックされると、.png, .jpg, .gif 等の名前の付いたレイヤーは、画像アセットとして書き出されます。より正確には、レイヤーの状態と、画像アセットが同期されるようになります。つまり、書き出しの対象であるレイヤーを変更すれば、その直後に画像アセットが更新されるということです。

昨日の記事の最後で触れたように、Photoshop に画像アセットを生成する機能が追加されました。これを実現しているのが Adobe Generator for Photoshop CC です。

Generator の 「コア」 は、Photoshop で編集中のドキュメント内のレイヤーやビットマップなどの情報にアクセスできます。コアから情報を受け取るモジュールは、Generator プラグインと呼ばれます。Photoshop には、Generator コアと、画像アセットを生成する Generator プラグインが付いてくる、という仕組みです。

Generator 自体は Node.js をベースとしたオープンソースプロジェクトで、JavaScript を使ってプラグインを開発し、MIT ライセンス下で自由に拡張できるので、いろんな可能性がありそうです。ソースコードは GitHub に公開されています。 （Adobe Photoshop@GitHub）

まだ頻繁に変更が行われているようなので、長く使えるプラグインをつくるのはしばらく待った方が良いかもしれません。多少落ちついてきたら Generator のアーキテクチャの記事なども書く予定です。

Edge Reflow のプレビュー版がアップデートされました。同じく本日アップデートされた Photoshop CC と連携して、Photshop のデザインカンプを直接 Reflow のデザインアセットとに変換できます。

従来から提供されている CSS 属性を生成する機能とは完全に次元が異なり、デザインカンプから "自動的に HTML が生成され" て、しかも配置情報の一部は "相対値に変換" されていたりします。Web デザイナーにとっては全く新しい体験だと思いますので、是非お試しください。

インストールの際は、まず Photshop CC を更新して、その後 Reflow の更新を行います。これは、Reflow のインストール時に Photshop のプラグインがインストールされるためです。後からプラグインをインストールする場合は、以下から別途ダウンロードできます。

• 32-bit Windows
• 64-bit Windows
• Mac

Reflow の前のバージョンをを既にインストールしてある環境でも、Creative Cloud アプリは、更新ではなく新規インストールとして扱います。これは既知のバグだそうです。

Brackets の Sprint 30 が公開されました。OS X 10.6 で起動するとクラッシュする件は修正されてます。

また、Linux 版がかなり充実して、Win や OS X との差がぐっと縮まりました。だたし、まだプレビュー版という位置づけは変更されていないのでご注意下さい。

• Windows (msi, 38.7 MB)
• OS X (dmg, 34.4 MB)
• Linux 32 (deb, 44.5 MB)
• Linux 64 (deb, 45.9 MB)

主な変更点は以下の 2 つです。

• コード補完機能の強化
  関数の引数の候補を括弧内で入力開始すると自動的に表示、Ctrl+Shift+Space からも表示可能
• 検索／置換機能の強化
  検索結果をまとめて置換する際の新しい UI を提供

さらに、新しいライブ HTML 開発機能がプレビューとして追加されています。 （デフォルトでは機能オフの状態）

Adobe Labs に Flash Player と AIR のベータ版が公開されました。(Flash Player 11.9 ベータ@Labs, AIR 3.9 ベータ@Labs)

公開されているバージョンは以下の通りです。

• Flash Player : 11.9.900.85
• AIR : 3.9.0.720

Flash Player の主要な新機能は、以下の 2 つです。

• Mac OS 10.9 サポート
  動作テストに加え、Mavericks の新機能 “App Nap” への対応なども追加
• Mac .pkg インストールのサポート
  システム管理者向けに pkg フォーマットびインストーラーを提供

Flash Player は、引き続き Windows 8 （含モダン UI） と Windows RT もサポートします。Windows 8 & IE10 コンテンツのガイドラインはこちらの MSDN 記事に詳しく紹介されています。

AIR に関しては、以下のように今回比較的大きな機能追加が計画されているようです。

DisplayObject のインスタンスから metadata という属性が利用できるようになっています。パブリッシュのターゲットを Flash Player 11.6 （SWF version 19） 以降に設定した場合に有効な属性です。

metadata を利用すると、個々の表示オブジェクトのインスタンスの振る舞いを、実行時に決定することができるようになります。例えば、以下のようにして、表示する位置を指定できます。

var parms:Object = myInstance.metadata;
myInstance.x = params.x;

実際にこの機能がサポートされる表示オブジェクトは、シンボル （ムビクリ、テキスト等） とビットマップ限定 （少なくとも今のところ） です。

従来から、UI コンポーネントなどでは、インスタンスのプロパティをオーサリング時にパネルから設定し、実行時の表示を制御するというワークフローが提供されていました。今では、通常のムービークリップもコンポーネントのように扱えるわけです。

なお、オーサリング環境としては、Flash Professional CC から、この機能に対応しました。