TECHNOLOGY 2013.04.05

Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに!

  • ActionScript
  • AIR
  • Tips

こんにちは、Flashデベロッパーの荒井です。

弊社では企業などのプロモーションサイトを数多く制作させていただき、クライアントの広告メッセージを伝えるために、Flash が持つ高い表現力はとても有効だと感じています。

また弊社ではFlashサイトを制作する上で以下のことを大事に考えています。
広告メッセージを伝えるための世界観の構築
グラフィックデザイン
レイアウトデザイン
広告メッセージを効果的に伝えるための演出
モーションデザイン
インタラクティブデザイン
ユーザビリティ・使い勝手
Flash サイトにありがちな見た目は良いけど使いにくいサイトにならないように

そんなFlashサイト制作で培ってきた表現力をAIRを使ってスマートフォンアプリにも活かしたい!
ということで、2012年春ぐらいから社内でAIRアプリの研究を開始しました。
以前も研究していた時期があったのですがAIRがまだ不安定な時期で・・・(苦い経験をした方も多くもいられると思います。)
しかし下記のように環境も整いそろそろAIRを本格的に始めてみても良いんじゃないかと思い再び始動しました。

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

AIRとは?

PCのWebブラウザ上で実行されていたFlashコンテンツをWebブラウザなしにPCやスマートフォンなどのアプリとして実行できるようにしたものがAIRです。
AIRはFlashをベースとした技術でAIRで使用する言語はFlashと同じActionScriptです。
開発環境もFlashと同じものがそのまま使えるのがいいですね。
※ちなみに弊社の開発環境は、「Flash Professional」+「Flash Develop」を使用しています。
またiOS / Androidの両プラットフォームに対応しています。
iOSアプリの標準的な開発環境と言語は、Xcode + Objective-CでAndroid アプリはEclipse + Javaなので
iOS / Android の両方のアプリを作ろうと思ったら、別々の言語と開発環境を使わないといけません。
しかしAIRを使うとひとつの開発環境と言語でiOS / Androidの両方のアプリを開発する事ができるので効率化が図れます。

Flashコンテンツをとりあえずそのままアプリ化してみたサンプルになります

 

Stage 3Dについて

Stage 3Dは描画専用の処理エンジン「GPU」を使って高速な描画を可能にする機能本家Flash のバージョン11.0から新たに搭載AIR でも使用することができるます。
今まではCPU だけで全ての処理を担ってきたので表現をリッチにしようとするほど描画処理に負担がかかりました。
しかしGPU を使えば描画処理を分担できるのでCPUだけでは追いつかなかった描画処理もGPU なら高速に処理できるようになります。
とにかく早いです。(CPUの1000倍以上という説も)

個人的な感覚でいうとCPUのみを使ったPCよりCPUとGPUの両方を使ったスマートフォンの方がパフォーマンスがよく
GPU を使えば今までのPC 向けのWebサイトよりも表現力の高いコンテンツをスマートフォンでも作れる可能性もあるかと思います。

AIRアプリでStage3Dを使うのはとても有効なのですがStage3Dはその名の通り、3DCGプログラミングの技術従来のActionScriptに加えて、AGAL という新たなプログラミング言語も必要です。
しかし、AGALは呪文のようなプログラムなので敷居が高く、加えてとても生産性が悪いです。
そこで、ActionScriptだけでStage3Dの機能を実装できるフレームワークを利用します。

3D用途 Alternativa3D
http://alternativaplatform.com/en/technologies/alternativa3d/
AGALのような難解な言語を書く必要はない3DCGの知識があれば、従来のActionScriptだけで実装が可能
3Dのモデリングデータを表示できる3DCGデザイナーとの新たな連携の可能性
2D用途 Starling
http://gamua.com/starling/
今までのFlash制作と全く同じ感覚で3DCGの知識も必要ない

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



ネイティブ拡張(ANE)機能について

各OSのネイティブプログラムをAIRアプリから呼び出す機能でAIR がサポートしていない最新のOSやデバイスの機能もネイティブのプログラムを用意できれば、ANEを経由して実行することが可能です。
理論上はAIRアプリで実現できないことは無いはず(?)

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

まとめ

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