エンジニアカフェ× CyberX 技術勉強会 #2 　～スマホ対応でJavascript,HTML5はどう使う？～

1. スマートフォンにおける
アニメーション実装
∼FlashからHTML5にシフトするには∼
株式会社CyberX 佐野 裕

2. 自己紹介
佐野 裕
2011年６月 入社
Flashディベロッパー
現在は開発部にて主にスマートフォン向けのフロント
部分の実装/開発etc

3. Agenda
現在のスマートフォン対応状況
スマートフォン向けアニメーション実装手法
制作の際注意したいこと
アニメーション実装の今後

4. 現在のスマートフォン
対応状況

5. 現在のスマートフォン対応状況
iPhone Flash非対応
Adobe Flashモバイル（ブラウザ）からの撤退
Android Chrome Flash非表示

6. 現在のスマートフォン対応状況
FlashがiOS/Androidともに対応出来なくなるのはすぐ
そこまで来ている
弊社で開発しているソーシャルゲームのメインプラッ
トフォームはスマートフォンに移行しつつある
考えるべきは「対応する/しない」ではなく「どう
やって対応するか」

7. スマートフォン向け
アニメーション実装方法

8. どんな手法があるか
大きく分けて３パターン
1. IDE(GUI)ツールを使ってアニメーションを作る
2. JavaScript/CSSでアニメーションを実装する
3. 変換ツールを使う

9. 1.ツールを使った実装
Flash IDEライクなタイムラインベースのアニメーショ
ン制作ツールを用いて制作する方法

10. 長所／短所
長所
アニメーターが作りやすい
短所
ツールの習得コスト
フィーチャーフォンと両立しなければならない
まだ過渡期のためツールの仕様変更が発生しやすい

11. 1.ツールを使った実装
Adobe Edge
jQueryベースでアニメーションを実装
Sencha Animater
独自フレームワークによるアニメーション
Hype
独自フレームワーク 安価

12. 2.JavaScript/CSSによる実装

13. 2.JS/CSSによる実装
JavaScriptとCSS3でアニメーションを実装する
DOM／Canvasの2パターン

14. 2.JS/CSSによる実装
DOM
フレーム毎にDIVタグなどのDOM要素のパラメータを
JS/CSSを用いて変えながらアニメーションを表現
Canvas
フレーム毎にCanvas要素をリフレッシュしながら再
描画を行ってアニメーションを表現

15. 長所／短所
長所
フレーム毎の処理が出来るのでゲームなどの実装に向
いている
短所
直感的なアニメーションの実装が難しい
プログラマーとアニメーターの分業をどうするか
フィーチャーフォンとの両立

16. 各種ライブラリ
enchant.js
ゲーム開発向けライブラリ DOMベース
Arctic.js
Canvas用ライブラリ Flashライクな実装が売り
Easel.js
adobeが採用
...その他色々

17. 3.変換ツールを使う

18. 3.変換ツールを使う
長所
フィーチャーフォンとの両立
アニメーション制作ツールとしてFlashが使える
短所
ASのボタン処理などを変換してやる必要がある
パフォーマンスチューニング

19. 変換ツール
swfキャプチャ
Flaファイル変換
swfファイル変換

20. 変換ツール(キャプチャ系)
swfをフレーム毎にキャプチャしてスプライトシート
を作りJavaScriptで再生
実装が容易/不具合は出にくい

21. 変換ツール(キャプチャ系)
自社用ツール
SWF Animation Converter
ASに対応させたツール

22. 変換ツール(Flaファイル変換系)
Flaファイルからアニメーションを生成するツール

23. 変換ツール(Flaファイル変換系)
Wallaby
adobe製変換ツール
FlaファイルをCSS3ベースのアニメーションに変換
SVGをPNGに変換すればAndroidでも動作する
一年近くバージョンアップ無し

24. 変換ツール(Flaファイル変換系)
Swiffy
google製変換ツール
通常変換サーバでswfを変換。拡張Extentionを使うと
IDEからFlaファイルから直接変換出来る
SWFをjsonデータに変換、独自プレイヤー(js)で再生
ベクターはSVGに変換される

25. 変換ツール(swf変換系)
SWFを直接変換してJavaScriptなどで再生する
動的生成したswfにも対応出来る

26. 変換ツール(swf変換ファイル系)
FlashForward
Parserがphp
SVG/Canvas両対応
まだ不完全（ex.グラデーション）

27. 変換ツール(swf変換ファイル系)
Reel(Gree) / ExGame(Mobage)
JavaScriptでSWFを再生する
それぞれプラットフォームに参加していなければ使用
出来ない

28. 変換ツール (swf変換系)
Lightning
Swfmillで変換したXMLファイルをパースして
CSSベースのアニメーションで再生
動作環境 python

29. 制作の際の注意点

30. Androidから作れ
Android2.1ではCanvas処理にバグあり
ツール系のものでもサポートされてない場合あり
大量の端末の多さ / SDKバージョン違い
今後はAndroid Chrome対応も

31. 通信環境は3G
大量に素材読み込む時はローディング周りには注意
使うツールライブラリではプリロードに対して無自
覚なものもあるので注意（特にPC向けのライブラ
リ）

32. アニメーション実装の今後

33. 現在は過渡期
ツールもライブラリもまだ成熟していない
決め手にかける

34. フィーチャーフォンとの両立
スマホ対応だけでいいのか？
FlashとHTML5それぞれでアニメーションが作れる
か？
→出来ないなら変換ツールを使う方向を検討

35. 今後の動向
Adobe CreateJS
FlashIDEからHTML5コンテンツをexport

36. 最後に
アニメーションはセンス
→センスを活かせる環境のチョイスが重要
基準はフィーチャーフォンなのかスマホなのか
→スマホの性能を生かしたもの方がクオリティは良
いはず

37. ご清聴ありがとうございました。