Edge Animateで作るHTML5リッチコンテンツ入門 ― 第1回

Edge Animateとは――無料で使えるHTML5制作ツール (1/2)

「スマホにも対応したいからFlashの代わりにHTML5でアニメーションを作って」と頼まれることありませんか？　ところが、JavaScriptのコードを記述してアニメーションを作るのはWebデザイナーにはハードルが高く、多くのデバイスで動くコンテンツの制作は簡単ではありません。そこで注目されているのが、Flash感覚でタイムラインベースのアニメーションを作れる「Edge Animate」です。本連載では、WebデザイナーやFlashクリエイターを対象に、Edge Animateの基本的な使い方から実践的なコンテンツ制作の方法までを解説します。（編集部）

「スマホにも対応したいからFlashの代わりにHTML5でアニメーションを作って」と頼まれることありませんか？　ところが、JavaScriptのコードを記述してアニメーションを作るのはWebデザイナーにはハードルが高く、多くのデバイスで動くコンテンツの制作は簡単ではありません。そこで注目されているのが、Flash感覚でタイムラインベースのアニメーションを作れる「Edge Animate」です。本連載では、WebデザイナーやFlashクリエイターを対象に、Edge Animateの基本的な使い方から実践的なコンテンツ制作の方法までを解説します。（編集部）

「HTML5使える人、知らない？」と聞かれることが増えました。いまさら説明するまでもなく、（JavaScriptやCSS3を含む広い意味での）HTML5が求められるようになった大きな要因は、iPhoneやiPadといったiOS端末でFlashコンテンツが表示できないことでしょう。Android向けのFlash Playerの開発も終了し、アニメーションをはじめとするリッチコンテンツをスマートデバイスのブラウザーで表示するためには、「HTML5で制作すること」が必須になっています。

「HTML5で簡単にハイブリッド開発」のウソ

　HTML5といえば、「一度作ってしまえばiPhoneでもAndroidでも表示できて一挙両得」「ツールを使ってネイティブアプリにも変換できるのでよいこと尽くめ」などと言われ、ここ数年、期待のまなざしを集めてきました。実際、クライアントや代理店から、「HTML5で作ればコストが抑えられるんでしょ？」などと言われたこともあるのではないでしょうか。

　そんな期待とは裏腹に、HTML5でのコンテンツ制作は簡単ではない現実があります。原因としては、スマートデバイスごとの細かな挙動の違いやバグの存在、開発ツールの整備の遅れが挙げられます。

　特に、スマートデバイスごとの挙動の違い、ブラウザーのバグは大きな課題であり、現場では端末ごとの検証や修正に多くの時間が割かれています。中でも、数多あるAndroid端末間での挙動の違いには回避が難しいものもあり、非常に骨が折れます。

　開発環境についてもまだまだ不十分です。Flash時代には「Flash Professional」があり、タイムライン機能を使えば誰でも簡単にアニメーションを制作できました。それに比べ、HTML5ではツールの整備が遅れており、バナーのようなちょっとした動きを付けるにもJavaScriptを使ってプログラムを書く必要があります。今までプログラミングを書いたことのないクリエイターにとっては、簡単ではありません。

それでも間違いなく必要になる「HTML5コンテンツ」の制作

　HTML5コンテンツの制作は容易ではない一方で、HTML5人材の需要は急激に高まっています。特に、昨今のソーシャルゲーム業界の盛り上がりから、ソーシャルゲーム業界での求人が増加しているのです。逆に、HTML5人材がソーシャルゲーム業界に集中した結果、受託制作などの企業では人材の確保が難しくなっているのではないでしょうか。

　もちろん、スマートデバイスを対象としたコンテンツ制作の重要性が増していることは言うまでもないありません。環境は整っていなくとも、時代はHTML5を求めている。であれば、いまからでもHTML5に挑戦する価値はあるでしょう。

ライブラリーやツールを使い分けて賢く作ろう

　実際に制作現場ではどのようにしてHTML5コンテンツを制作しているのかを紹介しましょう。制作するコンテンツによって手法に違いがありますが、大きく以下の3つに分けられます。

1.フルスクラッチで制作

　大規模なコンテンツで自由度が求められるときや、逆にごく小さなコンテンツでライブラリーを使用しなくてもよい場合は、HTML5のCanvas APIをJavaScriptで制御したり、CSS3アニメーション（CSS AnimationやTransitions）を使ったりして制作します。自由度は高いものの、JavaScriptの深い理解とそれなりの制作時間が必要です。

2.ライブラリーを使用して制作

　フルスクラッチでは膨大な時間がかかることから、世界中でさまざまなJavaScriptライブラリーが公開されています。実際の制作現場ではライブラリーを使用して制作することがほとんどでしょう。特に、Canvasはライブラリーを使用しないと大量のコードを書かなくてはならないので、便利なライブラリーが多数公開されています。

　Canvasを扱うライブラリーでは「EaselJS」が有名です。「EaselJS」は、著名なFlashクリエイターであるGrant Skinner氏が開発したライブラリーで、ActionScriptライクな書き方でCanvasを扱えます。ActionScriptに慣れ親しんだFlashクリエイターには手をつけやすい一方、ActionScriptをあまり使用したことのないクリエイターにとってはハードルが高いデメリットがあります。

EaselJS

3.オーサリングツールを使用して制作

　数はまだそれほど多くありませんが、オーサリングツールも少しずつ増えてきており、一部の現場では使われています。グーグルの「Swiffy」は、Flashで制作したコンテンツをそのままHTML5コンテンツに変換できます。また、センチャの「Sencha Animator」はタイムラインのようなインターフェースでHTML5コンテンツを制作できます。

　オーサリングツールのメリットとしては、HTML5コンテンツを制作するハードルを大きく下げられることです。GUIベースの操作で作れるので、プログラミングにあまり馴染みのないデザイナーやクリエイターであっても、HTML5コンテンツを制作できます。

　本連載で紹介する「Edge Animate」も、オーサリングツールの1つです。