アドビ、レスポンシブWebデザイン専用ツール「Adobe Edge Reflow」を公開

アドビ システムズは15日、同社が提供する「Adobe Creative Cloud」のアップデートを発表した。

今回のアップデートはWeb開発者向けのツールを対象としたもの。レスポンシブWebデザインのためのツール「Adobe Edge Reflow」プレビュー版が新たに追加され、「Adobe Edge Animate」、「Adobe Edge Code」、「Adobe Dreamweaver」がアップデートされた。

「Adobe Edge Reflow」:レスポンシブWebデザイン専用ツールが登場

Edge Reflowは、今回初めてプレビュー版が登場した新ツールで、Web閲覧環境が多様化している今、重要性を増している「レスポンシブWebデザイン」を実現するための専用ソフトとなっている。CSSを用いてレイアウトやビジュアルデザインを作成することができ、直感的に画面の表示サイズを変更することが可能なインタフェースを搭載。PC、スマートフォン、タブレットなど、さまざまな画面サイズにおけるWebページの見え方を確認することができる。

また、ブラウザでのプレビューや、Edge Inspectと連携したリアルタイムでのデザイン検証、およびEdge Code、Dreamweaver、他のコードエディタでも利用できるCSS抽出も可能。HTMLソースの書き出し機能は本バージョンでは搭載していないが、機能を強化したのちリリースされる予定ということだ。

「Adobe Edge Animate」:CSSのグラデーションに対応

HTML/JavaScript/CSSでアニメーション対応のコンテンツを作成するツール「Edge Animate」がアップデートされ、CSSの線形/円形グラデーションに対応。加えて、Webフォントサービス「Adobe Edge Fonts」のサポート機能も追加された(英文フォントのみ)。

また、「CSS Filter」をサポートし、従来はPhotoshopを使った作業が必要だったフィルター加工(グレースケールや色相、反転、彩度など)を、Edge Animate内で完結することができるようになった(対応ブラウザはGoogle Chrome、Safari、iOS 6、BlackBerry 10のみ)。

「Adobe Edge Code」:Chrome連携のライブプレビュー機能など

HTML/JavaScript/CSSで作られた軽量なコードエディター「Edge Code」については、デビューから3バージョン目のプレビュー版が公開された。「Edge Code」はオープンソースのコードエディター「Brackets」をもとに「PhoneGap Build」と「Edge Web Fonts」の機能を追加して製品化したものとなっている。

今回追加された新機能は、Google Chromeと連携し、コード編集の結果を保存前にブラウザで確認することのできる「ライブプレビュー」に加え、ファイル間を行き来することなく、コンテキスト内でコードを編集することのできる「クイック編集」も搭載した。また、CSSプロパティとHTMLタグ、属性のコードヒント機能も加わっている。

「Adobe Dreamweaver」:Edgeツールとの連携を強化

Dreamweaverのアップデートは、Creative Cloud有償メンバー向けのアップデートとして行われた。Edge Fonts」のサポートなど、Edgeツール&サービスファミリーとの互換性が高められ、コードオーサリングとワークフローを改善するいくつかの機能が加わった。また、Dreamweaver CS6で初めて導入された可変グリッドレイアウトの機能を強化し、IDタグに加えてクラスタグも利用可能となった。

無償で最新版・新ツールの使用が可能

このたびアップデートが行われた「Adobe Edge Animate」、「Adobe Edge Code」の最新版、そして今回リリースされた「Adobe Edge Reflow」プレビュー版は、「Creative Cloud」の無償メンバーも入手可能となっている。

■無償で使えるEdgeツール一覧

	リリースビルド	機能制限
Edge Animate	1.5	なし(Animate 1.xは完全無償提供)
Edge Code	preview 3	なし
Edge Inspect	1.2	同時接続デバイスは1台
Edge Reflow	preview	なし