reflowpreview6

Edge Reflow Preview 6 リリース:iOS7でもサポートされたCSS Regionsに対応

この記事は、2013/9/24にポストされたAdobe Edge Reflow Team Blogを翻訳したものです。

アップル社が先日リリースしたiOS7は、単にモバイルOSの展望を変えようとしているだけでなく、モバイルでのWebブラウジングのあり方をも大きく進化させる一歩を踏み出しています。最新版のSafariにはCSS Regionsという、レスポンシブデザインへのアプローチに革命をもたらす機能がサポートされています。このCSS Regionsを使えば、Webでは実現が難しかったレイアウトとコンテンツを分けてデザインすることが可能になります。DOMの順序を無視してレイアウトすることができ、コンテンツは異なるコンテナ間を行き来できるようになります。

そして本日、Edge ReflowがこのCSS Regionsをサポートする最初のデザインツールとなったことをお伝えします。(Edge Codeチームも最近のリリースで、CSS Regionsのコードヒントに多大な労力を掛け実装してましたね。)CSS Regionsはまだ「Shiny Web Feature(輝くWebの機能)」と我々が呼んでいる状態、つまり、まだ全てのブラウザがサポートしている訳ではない最新機能なので、次の方法でEdge Reflow上で利用可能に設定する必要があります。”View” > “Shiny Web Features”。パネルに表示された”CSS Regions”のスイッチをONにしてください。これで、Edge ReflowでもCSS Regionsが使えるようになります。

CSS RegionsはEdge Reflowでどうやる?

一番簡単に試す方法は、Edge Reflowのキャンバス上に2つのテキストボックスを配置し、2つとも選択します。そして、右クリックで”Create Region Container”を選択します。こうすると、テキストボックスのサイズが変更された時に、テキストボックス内の文字が2つのコンテナであるテキストボックス間を行き来するのが分かると思います。このテキストボックスの間にイメージ画像など他のDOMを配置したとしても、テキスト文字は問題なく流れて行きます。これこそが、次世代のレスポンシブレイアウトの強力なところです。

ちょっとしたTips

Edge ReflowでRegionコンテナに指定したオブジェクトをダブルクリックすると、”region edit mode(Region編集モード)”に入ります。このモードでは、Regionにコンテンツを追加したり編集したいるすことができます。通常モードに戻る場合は、Edge Reflowの画面下にあるDOMバーの戻る矢印(左向きの矢印)をクリックするか、どこかバックグラウンドをダブルクリックすればOKです。

また、Regionコンテナの右側に”+”ボタンが見えると思いますが、このボタンをクリックするとそのRegionに追加のコンテナを配置することが可能になります。”+”が赤になっている時は、表示しきれていない文字があることを指し示しています。”+”ボタンをクリックすると、カーソルが代わり、追加のコンテナが配置できることが分かります。

さらに知りたい方へ

CSS Regionsについてさらに知りたい方は、AdobeのWeb Platformチームのブログをチェックしてください。さらに、Edge ReflowによるレスポンシブデザインにCSS Regionsを追加するための解説ビデオも用意してあります。サンプルプロジェクトもこちらのページから入手可能です。何かフィードバックなどがありましたら、我々Edge Reflow開発チームのTwitterアカウント(@Reflow)、または、Edge Reflow内にあるフィードバックパネルからお知らせ下さい。