2013年2月2日（大阪）と2月23日（東京）で行われた、ＪＷＳＤＡ×INVOGUEテクニカルセミナー「スマフォで遊ぼ　インヴォーグ流スマートフォンソリューション」のセッション1「Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに」のスライドです。

1. AIR for iOS / Android
について
Web制作で培ってきた Flash のリッチな表現力をモバイルアプリに！

2. 自己紹介

3. 荒井 祐一郎（あらい ゆういちろう）
株式会社 IN VOGUE @ 東京
インタラクティブ Div.
Flash ディベロッパー

4. Twitter : @altplus_jp
Facebook : http://www.facebook.com/yuichiroharai
Web : http://www.yuichiroharai.com/

5. AIR の話をする前に Flash の話

6. 弊社がどのような Flash サイト
を制作してきたのか

7. 企業などのプロモーションサイトを制作
※弊社の制作事例より抜粋。

8. クライアントの広告メッセージを伝えるために、
Flash が持つ高い表現力が必要

9. Flash サイトを制作する上で
大事に考えていること

10. 広告メッセージを伝えるための世界観の構築
・グラフィックデザイン
・レイアウトデザイン
※弊社の制作事例より抜粋。

11. 広告メッセージを効果的に伝えるための演出
・モーションデザイン
・インタラクティブデザイン
※弊社の制作事例より抜粋。

12. ユーザビリティ・使い勝手
Flash サイトにありがちな
見た目は良いけど使いにくいサイト
にならないように

13. ということを踏まえた上で、
制作事例のご紹介

14. 制作事例
http://varsan.lion.co.jp/varsanman/ http://adidas.jp/adipure/

15. そんな Flash サイト制作で培ってきた表現力を
AIR を使ってスマートフォンアプリにも活かしたい！
？

16. ということで、
2012年春ぐらいから社内で
AIR アプリの研究を開始

17. きっかけ

18. 2011年末～
• AIR がバージョン3.0 になって機能が充実してきた
• 高速サイクルリリースによって頻繁にアップデートされるようになった
• 本家 Flash が バージョン11となってStage3D をサポート
→ GPU による高速な描画処理
• ネイティブ拡張 (ANE) をサポート
→ AIR では実現できない機能でも、
ネイティブ言語で書かれたプログラムを経由して実装ができる

19. そろそろ AIR を本格的に始めてみても
良いんじゃないか？

20. 現状
• 2012年末に初めての案件を受注し、現在開発中
• いくつかの案件が相談レベルで進行中

21. そういう状況なので、
今はまだお見せできる案件事例はありません
ｍ（_ _ ）ｍ

22. ですが、今までの研究成果として、
AIR の基本的な知識を動作サンプル交えながら
ご紹介したいと思います

23. ここから本題

24. AIRとは？

25. PCのWebブラウザ上で実行されていた Flash コンテンツを
WebブラウザなしにPCやスマートフォンなどのアプリとして
実行できるようにしたものが AIR
Flash AIR
Webブラウザ上で実行 PCやスマホートフォン上で直接実行

26. AIR は Flash をベースとした技術

27. AIR で使用する言語は Flash と同じ ActionScript
開発環境も Flash と同じものがそのまま使える
Flash
Flash Professional
ActionScript
Flash Builder
etc…
AIR
※ちなみに弊社の開発環境は、「 Flash Professional」+「 Flash Develop」

28. Flash コンテンツを
とりあえずそのままアプリ化してみた

29. iOS / Android の両プラットフォームに対応

30. iOS アプリの標準的な開発環境と言語は、Xcode + Objective-C
Android アプリは Eclipse + Java
XCode Objective-C iOS アプリ
Eclipse Java Android アプリ

31. iOS / Android の両方のアプリを
作ろうと思ったら、
別々の言語と開発環境を使わないといけない

32. AIR を使うとひとつの開発環境と言語で
iOS / Android の両方のアプリを開発する事ができる
iOS アプリ
Flash Professional
ActionScript
Flash Builder
etc…
Android アプリ

33. Stage 3D について

34. Stage 3D は描画専用の処理エンジン 「GPU」
を使って高速な描画を可能にする機能
本家 Flash の バージョン11.0 から新たに搭載
AIR でも使用することができる

35. 今までは CPU だけで全ての処理を担ってきた
描画処理
CPU
その他の処理
表現をリッチにしようとするほど描画処理に負担がかかる
※図はあくまでもイメージです。実際の性能を表すものではありません。

36. GPU を使えば描画処理を分担できる
描画処理
CPU GPU
描画処理
その他の処理
CPUだけでは追いつかなかった描画処理も
GPU なら高速に処理できる
※図はあくまでもイメージです。実際の性能を表すものではありません。

37. とにかく早い
CPU の1000倍以上という説も

38. Stage3Dを使って
サクサク動くアプリのサンプル

39. 個人的な感覚値
GPU
GPU
CPU
CPU
PC スマートフォン

40. CPUのみを使った CPUとGPU の両方を使った
PC ＜ スマートフォン
GPU を使えば 今までの PC 向けの Webサイト よりも
表現力の高いコンテンツをスマートフォンでも作れる可能性もある

41. AIR アプリで
Stage3D を使うのはとても有効

42. ただし、Stage3D はその名の通り、
3DCGプログラミングの技術
従来の ActionScript に加えて、
AGAL という新たなプログラミング言語も必要

43. AGALの例
add ft0 v0 fc1.zw
sub ft1 v0 fc1.zw
add ft0 ft0 fc0
add ft1 ft1 fc0
m33 ft0.xyz ft0
m33 ft1.xyz ft1
sub ft0 ft0 fc0
sub ft1 ft1 fc0
tex ft0, ft0, fs1 <2d,wrap,linear,nomip>
tex ft1, ft1, fs2 <2d,wrap,linear,nomip>
add ft0 ft0 fc0.xy
add ft1 ft1 fc0.xy
mul ft0 ft0 fc1.xy
mul ft1 ft1 fc1.xy
add ft2 v0 ft0
add ft2 ft2 ft1
tex oc, ft2, fs0 <2d,linear,nomip>

44. 呪文のようなプログラムなので敷居が高い
加えて、とても生産性が悪い

45. そこで、
ActionScript だけで Stage3D の機能を実装できる
フレームワークを利用する

46. Stage 3D を利用するためのフレームワーク
3D用途 2D用途
Alternativa3D Away3D Starling

47. 3D 用途のフレームワーク
Alternativa3D / Away3D

48. AGAL のような難解な言語を書く必要はない
3DCGの知識があれば、
従来の ActionScript だけで実装が可能

49. 3Dのモデリングデータを表示できる
3DCGデザイナーとの新たな連携の可能性

50. 2D 用途のフレームワーク
Starling

51. 今までの Flash 制作と全く同じ感覚
3DCGの知識も必要ない

52. ネイティブ拡張（ANE）機能について

53. 各 OS のネイティブプログラムを AIR アプリから呼び出す機能
Objective-C iOS アプリ
AIR アプリ ANE
Java Android アプリ

54. AIR がサポートしていない
最新の OS やデバイスの機能も
ネイティブのプログラムを用意できれば、
ANE を経由して実行することが可能

55. 理論上は AIR アプリで
実現できないことは無いはず（？）

56. ANEを用意するには？
• まずはインターネットで探す
→ 人気のある機能は割りと有志の方が公開してくれている
→ ちゃんと使えるかどうかは事前に検証すること
• 見当たらなければ、ネイティブのプログラムが書ける人にお願いする
→ アプリ制作を全てお願いするより安く済むはず
• それでもダメなら、自分で頑張ってネイティブのプログラムを書く
→ アプリの全てをネイティブで書くよりはまだマシと思って頑張る

57. ネイティブ拡張 (ANE) を使った
アプリのサンプル

58. まとめ

59. • Flash 制作で培ったノウハウはそのまま AIR でも最大限活かす
• iOS も Android も両対応
• Stage3D を使って今までのPC向けWeb制作ではできなかった
より高い表現を AIR アプリで実現できるチャンス
• AIR でサポートされてない機能も ANE を使えば実装できるので、
諦めずに実現できる可能性を考える

60. 私からは以上です。
ありがとうございました。