レスポンシブウェブデザイン専用ソフト「Adobe Edge Reflow」無償公開

　アドビシステムズ株式会社は15日、サブスクリプション制サービス「Adobe Creative Cloud」を通じて提供している「Adobe Edge」シリーズのHTML5対応ウェブ開発ツールをアップデートしたと発表した。レスポンシブウェブデザインのための専用ソフト「Adobe Edge Reflow」をプレビュー版として新たに公開したほか、提供中のHTMLアニメーション作成ソフト「Adobe Edge Animate」とコードエディター「Adobe Edge Code」に機能追加のアップデートを行った。

　いずれも現在のバージョンは、Adobe Creative Cloudの有料会員または無料会員であれば、無料で利用できる。

Adobe Edge Reflow

　レスポンシブウェブデザインとは、デバイスの画面サイズに合わせてページのレイアウトを切り替える仕組み。Edge Reflowでは、画面の横幅のしきい値（ブレイクポイント）を設定し、それを境にCSSを切り替えるよう定義できる。例えば、 幅の広いPCでは画像やテキストブロックを3列、タブレットでは2列、スマートフォンでは1列に表示する、あるいはスマートフォンでは重要性の低いブロックを非表示にするといった具合だ。

　定義したレイアウトは、ウェブブラウザーでプレビューできる。また、スマートフォン／タブレット実機でのプレビューを“母艦”となるPCからリモートで行えるツール「Adobe Edge Inspect」とも連携するため、レイアウトしたレスポンシブデザインをスマートフォン／タブレットでリアルタイムに確認可能。

Adobe Edge Animate

　Edge Animateは、HTML/CSS/JavaScriptを使ったアニメーション／インタラクティブコンテンツを作成するソフト。画像やテキストなどの要素に対して、表示する座標の変化や視覚効果などの動きをタイムラインエディター上で設定していく仕組み。

　今回、バージョン「1.5」にアップデートしており、divタグに対してCSSの線形／円形グラデーションを設定できるようになった。さらにCSSフィルターを新たにサポートし、ぼかし／グレースケール／セピア／ブライトネス／コントラスト／色相循環／反転／彩度など、WebKitブラウザーのCSS機能を活用できるようになった。

　また、無償で利用できるウェブフォントサービス「Adobe Edge Web Fonts」との連携機能も追加。Edge Animate内でEdge Web Fontsをライブプレビューできるようになり、同サービスで提供している英文フォントのタイポグラフィ導入が簡単に行えるようになったとしている。

　なお、Edge Animateについては、バージョン「1.x」の段階は機能制限なしで完全無償提供することになっている。

Adobe Edge Code

　Edge Codeは、オープンソースプロジェクトによるコードエディター「Brackets」をベースにAdobe Edgeブランドで製品化したもの。コーディング機能に特化した軽量HTML/CSS/JavaScriptエディターとなっており、現在はプレビュー版として提供されている。

　コードの任意部分のタグでCtrl＋Eまたはコマンド＋Eキーを押すだけで、それに関連するCSSファイルやJavaScriptが画面上に割り込み表示される「クイックエディット」機能が特徴。検索したり、ウィンドウをスクロールさせる必要がないために作業効率が上がるとしている。

　すでに2012年12月に公開された「プレビュー2」において、クイックエディットにおけるカラーピッカー機能の追加、Edge Web Fontsへの対応、日本語UIなどの改良が行われており、さらに今回「プレビュー3」となり、エディターコアの「CodeMirror Ver.3」によるエディター機能の強化や、CSSプロパティ／HTMLタグ／属性のコードヒント機能の追加などが行われた。