HTML5によるアニメーション作成を容易にする「Adobe Edge」

Adobe Edgeとは

　「Adobe Edge」（以下、Edge）は、Adobe Systemsが開発中のHTML5アニメーション作成ツールである。Edgeでは、HTML5、CSS3、JavaScriptを利用したアニメーションを、コードをほとんど記述することなく作成することができる。

　HTML5を使えばWeb標準の技術だけでインタラクティブなコンテンツを実現できるが、Flashなどの既存技術に比べると完成されたオーサリングツールがない点が課題とされていた。それに対して、デザインツールベンダーの雄ともいえるAdobeが送り出したのがEdgeだ。

　Edgeで提供される主な機能としては、次のようなものが挙げられている。

• シンプルで直感的に使いやすい描画ツール
• 既存のWebページにEdgeで作成したアニメーションを埋め込むことが可能
• WebKitベースのプレビュー画面
• スニペットを有したJavaScriptエディタによって、自前のコードを挿入できる
• CSS3を使ったスタイルの適用
• 直感的にプロパティを変更できるビジュアルプロパティインスペクタ
• FlashやAfter Effectsのようなタイムラインエディタ
• 再利用可能な“シンボル”ベースのアニメーション
• PNG、JPEG、GIF、SVGといった素材を読み込んでアニメーションさせることが可能
• モバイルプラットフォーム向けのブラウザにも対応

　Edgeの大きな強みのひとつはUIが洗練されていることである。EdgeのUIのベースにはFlash ProやAfter Effects、Photoshopといった既存のAdobe製品のスタイルが使われているため、Adobeのツールを触ったことのあるユーザーであれば違和感なく使うことができるだろう。また、パフォーマンス面においても、プロのレベルで通用するように最適化が行われているとのことだ。

Adobe Edgeのユーザーインタフェース。見覚えのあるパネルやタイムラインエディタが並ぶ
※クリックで拡大画像を表示

　Edgeによる成果物は、HTMLやJavaScript、CSSなどのWeb標準技術のみで構成される。プロジェクトにはプロジェクト定義ファイル（.edgeファイル）が含まれるが、これもテキスト形式のファイルになっている。Edge自身はプロプライエタリな製品だが、成果物には特別なバイナリファイルは含まれないため、既存のWebサイトに埋め込んだり、Edgeで作成したコンテンツを自前で書き換えたりといったことも容易に行える。

　また、Edgeでは既存のHTMLファイルを読み込んで、そこにアニメーションのエフェクトを追加するといった使い方もできる。その際にもアニメーションの実行時に動的に表示を変更する仕組みになっているため、元のHTMLのページの構造やコンテンツを変えることはないという。HTML内のあらゆるDOM要素をエフェクト追加の対象にすることが可能なので、様々なシーンで活用することができるだろう。

リリーススケジュールと入手方法

　Edgeが最初に公開されたのが2010年10月のAdobe MAXである。その10カ月後の2011年8月に最初のプレビュー版が公開された。その後、バージョンアップによる機能強化を重ねていき、本稿執筆時点ではプレビュー6がリリースされている。まだ正式リリース前なので若干不安定な部分は残るものの、すでに完成度は実用に耐えるレベルに達している。プレビュー版はAdobe Labsの特設ページより無料でダウンロード可能。また、Adobe Creative Cloudのメンバーは、Application Managerからもインストールできる。

　正式版のリリースは2012年夏頃の予定になっている。正式版はAdobe Creative Cloudのメンバーシップ向けに提供される他、単体製品サブスクリプション（月額2200円から）でも利用できる予定とのことだ。

　その他、Adobe ShowcaseではEdgeで作成された様々なサンプルが公開されている。Edgeを使う上で参考になるだろう。

Flash Pro vs Edge