アドビ、Flash使わないHTMLアニメーション作成ソフトなど無償提供

　アドビシステムズ株式会社は25日、ウェブコンテンツ／HTMLアプリのデザイン・開発のためのツール／サービス群「Adobe Edge」を公開した。HTMLアニメーション作成ソフト「Adobe Edge Animate 1.0」をはじめとした7つのツール／サービスがある。

「Adobe Edge Tools & Services」のトップページ

　サブスクリプション制サービス「Adobe Creative Cloud」を通じて提供する。同サービスの有償会員だけでなく、無償会員でも利用できるため、一部ツール／サービスでは機能制限などがあるものの、これらのツール／サービス群が無償で利用できることになる。一部ツール／サービスについては、単体での販売も行う。

　アドビによると、ウェブ／HTMLのデザイン、レイアウト、コーディング、プレビュー、アプリ化までのプロセスをでカバーするライトウェイトなツールやクラウドサービスをそろえたという。ウェブデザイナーやウェブ開発者が必要に応じて各ツール／サービスを取り入れることで、既存のワークフローを強化できるとしている。

「Adobe Edge」各ツール／サービスが対応するプロセス

●Adobe Edge Animate 1.0

　アニメーションコンテンツやインタラクティブなコンテンツを、Flashを使わずに、ウェブ標準のHTML/CSS/JavaScriptを使って作成できる。Windows 8/7とMac OS X 10.6/10.7/10.8に対応する。

　使用する画像やテキストなどの各要素に対して、表示する座標の変化や視覚効果などの動きをタイムラインエディター上で設定していく仕組み。バナーなどを一から作成する場合だけでなく、既存のウェブページのHTMLを読み込んでアニメーションを付加するといった活用も可能だ。非モダンウェブブラウザー向けの代替画像を簡単に生成し、表示するよう設定する機能もある。

　Edge Animateはこれまで、「Edge Preview」という名称でプレビュー版が提供されていたもの。Edgeの名称は今回、新たに提供を開始したツール／サービス群のブランドとなった。

　なお、Edge Animateは、単体ライセンスが499ドル、単体サブスクリプションが月額14.99ドルで有償提供される予定だが、今回公開したバージョン1.0は無償で提供することを決定した。今後、有償版が公開された後も、バージョン1.0は無償で利用し続けることが可能。

Adobe Edge Animate 1.0でバナーを作成している状態。画面下がタイムラインエディター

既存ウェブページのHTMLファイルを編集している状態

●Adobe Edge Reflow

　デバイスの画面サイズに合わせてページのレイアウトを変える、ウェブコンテンツのレスポンシブデザインを簡単に行えるようにする専用ツール。例えば、画面の横幅のしきい値（ブレイクポイント）を設定し、それを境に、幅の広いPC向けレイアウトでは画像を3列、タブレットでは2列、スマートフォンでは1列に表示するというようにCSSを切り替えることが可能。

　現在は概要発表のみで、2012年中のプレビュー版提供開始を目指して開発中。

Adobe Edge Reflow

●Adobe Edge Code

　コーディング機能に特化したライトウェイトなHTML/CSS/JavaScriptコードエディター。プレビュー機能は、現時点でGoogle Chromeと連携して行うようになっている。クイックエディット（Ctrl＋E、コマンド＋Eキー）機能により、任意部分のタグに関連するCSSファイルやJavaScriptを検索することなく、画面上に割り込み表示する機能が特徴。現在は、プレビュー版としての提供。

　オープンソースプロジェクトによるコードエティター「Brackets」をベースに、Adobe Edgeブランドで製品化したもの。このエディター自体がHTML/CSS/JavaScriptで作成されているため、開発者が独自に機能拡張することも可能だという。

Adobe Edge Code。右のウィンドウの網掛け部分が、クイックエディットで割り込み表示した部分

●Adobe Edge Inspect

　これまで「Shadow」という名称でプレビュー版を提供してきたツール。例えば、コーディング作業のメインマシンとなるMacなどを“母艦”として、同一ネットワーク上にある各種モバイルデバイスを紐付けることで、母艦上のEdge InspectからHTMLコンテンツを各デバイスに表示し、画面遷移などのプレビューとデバッグをリモートで行える。各デバイスで表示したスクリーンショットを、デバイスの機種やOS、解像度などの付随情報を記述したテキストファイルとともに一括取得する機能もある。

　Creative Cloudの無償会員向けに提供する無償版は、フル機能が提供されるが、同時に接続できるモバイルデバイスが1台に制限される。Creative Cloudの有償会員向け、または月額1000円のEdge Inspect単体サブスクリプションで提供する有償版は、同時接続台数は無制限。

Adobe Edge Inspect。画面左側に、モバイルデバイス側の画面をウェブカメラで撮影して表示している状態

●Adobe Edge Web Fonts

　無償で利用できるウェブフォントサービス。アドビやGoogle、世界のデザイナーらが提供した500以上のフォントを、アドビが“キュレーション”した。Edge Web Fontsのサイト上でフォントを指定すると、それを使用するためのHTMLタグが表示される。なお、現在は欧文フォントのみ。

Adobe Edge Web Fonts

●Adobe Typekit

　ホスト型の高品質フォントライブラリを提供するサービス。Creative Cloudの無償会員向けの無償版は、1サイト／2フォント／2万5000ビューの制限がある。Creative Cloudの有償会員向け、または年額49.99ドルの単体サブスクリプションによる有償版は、サイト／フォント数の制限はなく、50万ビューまで。

●Adobe PhoneGap Build

　HTML/CSS/JavaScriptで作成したアプリ／コンテンツを、各種モバイルデバイス用アプリとしてクラウド上でパッケージングするサービス。ファイルセットをZIPファイルに圧縮してアップロードするだけで、iOS、Android、Windows Phone、BlackBerry、webOS、Symbianなどに対応したパッケージが生成される。GitHubにアップロードしてあるファイルを読み込むことも可能なため、複数スタッフやチームでアプリ開発を進めている場合などにも活用しやすいとしている。

　生成されたパッケージは、PhoneGap Build上に表示される各デバイス対応のボタンからダウンロードできるほか、同じくPhoneGap Build上に表示されるQRコードを各デバイスで撮影することでも簡単にダウンロード可能。アプリの手直しなどをした場合に、各デバイスでアップデートを検知するよう設定しておくことも可能。

　Creative Cloudの無償会員向けの無償版は、アプリ（ソースコードを公開しないプライベートアプリ）1個まで利用可能。Creative Cloudの有償会員向け、または月額1000円の単体サブスクリプションによる有償版は、アプリ（同）25個まで。

「Adobe Edge」各ツール／サービスの利用料金