Flex 4.5 （Hero）による モバイルアプリケーション開発
プレゼンテーション資料 : RETWEET_Share.pdf
Android向けAIR 2.5アプリケーションの開発方法について説明する横田聡氏
2010年10月にカリフォルニア州ロサンゼルスで開催されたAdobe Systems最大規模のイベント「Adobe MAX 2010」では、Adobe AIRの最新版である「Adobe AIR 2.5」（以下、AIR 2.5）、およびFlashプラットフォームをターゲットとした3つの開発ツールの最新プレビュー版が公開された。Flash Builder 4.5 (開発コード"Burrito") 、Flex SDK 4.5（同"Hero"）、Flash Catalyst 1.5 (同"Panini")である（いずれも、Adobe Labsのサイトからダウンロードすることが可能）。
Adobe MAX 2010での発表をもとに、日本の開発者やデザイナー向けにFlashプラットフォームの最新情報を伝えるユーザイベント「Adobe MAX 2010 RETWEET」では、クラスメソッド株式会社代表取締役社長の横田聡氏が、AIR 2.5の新機能や、HeroおよびBurritoを使ったAIRアプリケーション開発の方法などを解説した。本稿では、その内容をリポートする。横田氏による講演資料は氏のブログにて公開されているので、そちらもあわせて参照していただきたい。本稿で使用している図は講演資料より抜粋したものである。
1 Adobe AIR 2.5のモバイル端末向け新機能
Adobe AIRは、FlashやHTML、JavaScriptといったWeb技術を利用してデスクトップ向けのアプリケーションを開発することができるプラットフォームである。今回リリースされたAIR 2.5では、デスクトップPCに加えてスマートフォンをはじめとするモバイル端末やテレビにおける実行が新たにサポートされた。横田氏は、AIR 2.5に追加されたモバイル向けの新機能として次のものを挙げている。
基本API
- StageWebViewによるOS標準ブラウザの利用
- Network情報の取得（NetworkInfo）
- マイクの利用
- メニューキー、戻るキー、検索キーのキーボードイベントのハンドリング
- CameraUI による静止画とビデオの撮影
- カメラロールの利用
- 位置情報の利用
- 画面表示方向の変更
応用API
- モバイル向けのアプリケーション記述子
- 予約されたURI(SMS, TELなど）の利用
- カスタムURIの利用
その他
- レンダリングのハードウェアアクセラレーター対応
- パッケージング時のターゲットデバイスの指定
- 36x36サイズのアイコンの利用
- 証明書の有効期間の指定
- 画面暗転の防止
- SSL証明書ダイアログの表示
- 仮想キーボードの使用
こられの機能のうちいくつかはモバイルデバイス特有のものであり、デスクトップ向けのアプリケーションでは必要のないものも含まれている。逆に、デスクトップ向けの機能の中にもモバイル機器では利用できないものがある。そこで、AIR 2.5では各デバイス向けに必要となる機能だけを抽出したデバイスプロファイルが定義された。これによって不要な機能の搭載によるアプリケーションサイズの肥大化を防ぐことができる。現時点ではデバイスプロファイルとして以下のようなものが用意されている。
- desktop - デスクトップアプリケーション向けのプロファイル。ネイティブプロセスとは通信できない
- extendedDesktop - デスクトップアプリケーション向けのプロファイル。ネイティブインストーラーにパッケージ化される
- mobileDevice - モバイルデバイス向けのプロファイル。AndroidおよびiOS向けアプリケーションを作成できる
- tv - テレビで利用可能な機能を定義したプロファイル。Blu-rayディスクプレーヤー、デジタルビデオレコーダー、セットトップボックスなどが対象となる
図1.1 AIR 2.5のデバイス別の対応機能一覧
なお、現時点で対応するモバイルプラットフォームはAndroidのみとなっている。今後対応するプラットフォームを増やしていくとのことだが、具体的なスケジュールは明らかにされていない。とはいえ、AIRの強みのひとつは異なるプラットフォーム向けのアプリケーションを同一のソースから作成できるという点であるため、対応プラットフォームが増えた際にもアプリケーション側に変更を加えることなく利用できるというメリットがある。したがって横田氏が紹介した以下のアプリケーション開発の手順は、Android以外のプラットフォームにおいても同様に考えることができる。
2 どうやって作るのか
モバイル向けのAIRアプリケーションを開発するための開発ツールとしてはFlash Builderの次期バージョンである「Flash Builder 4.5」が利用できる。冒頭で紹介したように、そのプレビュー版である「Burrito」がAdobe Labsより公開されている。BurritoにはAIR 2.5アプリケーション開発のための「AIR SDK 2.5」と、Flex SDK 4.5のプレビュー版である「Hero」が同梱されているため、これひとつあればモバイル向けAIRアプリケーションが開発可能だが、横田氏はもうひとつ有用な補助ツールとして「Adobe AIR Launchpad」を紹介した。
Adobe AIR LaunchpadはAdobe Labsより提供されている、AIRアプリケーション向けソースコードの自動生成ツールである。デスクトップ向けとモバイル向けそれぞれについて、主要なフィーチャーを含んだアプリケーションを自動で生成してくれる。AIRアプリケーションをはじめて作る開発者や、気軽に試してみたいというユーザにとっては有用なツールである。
3 Flexフレームワークの活用
Flexフレームワークを利用したモバイルアプリケーションの基本構造は図3.1のようになるという。画面ごとに<s:View>を用意し、それが<s:ViewNavigator>によって管理される。アプリケーションのルートは<s:MobileApplication>となる。
図3.1 Flexフレームワークを利用したモバイルアプリケーションの基本構造
画面のナビゲーションは、navigator.pushView()で次の画面へ、navigator.pop()で前の画面へ移動する。その他に表示を消すnavigator.popAll()や最初の画面に戻るnavigator.popToFirstView()などがある。
また、モバイルアプリケーション特有のナビゲーションとしてはタブナビゲーションがある（図3.2）。タブナビゲーションの場合には、図3.3に示すように<s:TabbedMobileApplication>をルートとし、その下に複数の<s:ViewNavigator>を保持する。各タブの画面表示はそれぞれの<s:ViewNavigator>によって管理される。
図3.2 モバイル端末におけるタブナビゲーションの画面例
図3.3 Flexアプリケーションでタブナビゲーションを利用する場合の基本構造
4 AIR 2.5のモバイル向け基本機能
それでは、続いてAIR 2.5で利用できるモバイル向けの基本的な機能に目を向けてみよう。基本的には端末に搭載された各種センサーと連動した機能となるので、まずリスナを登録することでセンサーの値を監視し、値が変化した場合に何らかの処理を行う、という手順になる。横田氏が紹介したソースコード例は、Adobe AIR Launchpadによって生成されるコードの中に含まれているため、実際に動くプログラムとして確認できるとのことだ。
4.1 傾きの検知（Accelerometor）
加速度センサーによる傾きの検知は、図4.1.1のように重力方向に対する正位置、横、縦の3つの向きの値としてそれぞれ取得することができる。具体的には、図4.1.2の例のようにリスナを登録することで傾きが変更した際に発生するAccelerometerEventを受け取ることができるので、そのイベントを経由して現在のX、Y、Zの値を取り出すことができるとのことだ。
図4.1.1 AIR 2.5における傾き検知
図4.1.2 傾きの検知を行うサンプルコード
4.2 地図情報（Geolocation）
地図情報としては、現在地の緯度、軽度、高度、精度、ヘッダ情報、速度、タイムスタンプを取得できる。地図情報が変化した場合にはGeolocationEventが発生するので、図4.2.1このイベントオブジェクトを介してそれぞれの値を取り出すことが可能となっている。
図4.2.1 地図情報を参照するサンプルコード
4.3 ボタン検知
モバイル端末は、[戻る]や[メニュー]、[検索]などといった特有のボタンを持っていることが多い。AIR 2.5はこれらのボタンの押下にも対応している。基本的な手順は通常のKeyboardEventと同様だが、押下されたボタンを表すキーコードとしてKeyboard.BACK、Keyboard.MENU、Keyboard.SEARCHなどの定義が追加されているので、これを利用することでボタンの種類を判別できる（図4.3.1）。
図4.3.1 ボタン検知のサンプルコード
4.4 カメラおよびカメラロールの利用
AIR 2.5ではカメラを扱うためのUIとして「CameraUI」が用意されており、これを利用することでデバイスの持っているカメラの機能をそのまま利用することができる。撮影のハンドリングは、図4.4.1のようにMediaEvenetを監視することで行う。撮影に成功すると画像がローカルのストレージに保存され、MediaEventにはそのURLが渡される。
図4.4.1 カメラを利用するサンプルコード
カメラと同様にカメラロールについてもデバイスの持っている機能をそのまま利用することができる。図4.4.2はメディアの選択に対してonMediaSelectを、クリックに対してonBrowseを呼び出すコード例である。
図4.4.2 カメラロールを利用するサンプルコード
4.5 ジェスチャーの検知
ジェスチャーは、スーム（Zoom）、振り（Pan）、回転（Rotate）、スワイプ（Swipe）の4種類に対応している。デバイスごとのジェスチャーの対応状況についてはMultitouch.supportedGesturesによって確認できる。ジェスチャーに対してはTransformGestureEventが発生するので、これをハンドリングすることによって各ジェスチャーに応じた動作を実装することができるようになっている。図4.5.1は、各ジェスチャーに対応しているかどうか調べて、対応していればリスナを登録するというコードの例である。onZoom()メソッドはズームが行われた際に呼び出されるもので、x／Y方向の拡大率を取得する。
図4.5.1 ジェスチャーを検知するサンプルコード
4.6 マイクの利用
AIR 2.5ではデバイスが持つマイクから音声を読み込んで加工・保存することができる。音声はバイナリデータとして読み込まれる。図4.6.1はマイクから読み込まれたデータの保存を開始する部分のコード例である。マイクオブジェクトはMicrophone.getMicrophone()メソッドによって取得することができる。
図4.6.1 マイクを利用するサンプルコード
4.7 マルチタッチ操作の利用
マルチタッチは、2本以上の指で行うタッチ操作である。端末がマルチタッチに対応している場合、図4.7.1のようにTouchEventを監視することで各タッチ操作に対応した処理を実装することができるようになっている。
図4.7.1 マルチタッチを利用するサンプルコード
4.8 ネットワーク情報の参照
ネットワークを利用するアプリケーションでは、リアルタイムなネットワーク情報を参照できることは極めて重要である。AIR 2.5では端末のネットワーク接続に関する以下の情報を取得することが可能。
- ネットワークインタフェースのリスト
- バインドされているアドレスのリスト
- アクティブか否かの判定
- 表示名
- ハードウェアアドレス
- MTU
- 親インタフェース
- サブインタフェース
ネットワーク情報を保持するのはNetworkInfoオブジェクトであり、これは図4.8.1に示すようにNetworkInfo.networkInfoで取得することができる。このオブジェクトからは各ネットワークインタフェースを表すNetworkInterfaceオブジェクトが取得でき、そこから様々な情報を取り出すことが可能となっている。
図4.8.1 ネットワーク情報を取得するサンプルコード
4.9 StageWebViewによるブラウザ表示の取り込み
StageWebViewはOSの持つブラウザによる表示をアプリケーションの中に組み込む機能である。図4.9.1のようにStageWebViewクラスのインスタンスを生成して、loadURL()メソッドを呼び出せば、OS提供のブラウザ機能を利用した表示を行うことができる。
図4.9.1 StageWebViewを利用するサンプルコード
4.10 ローカルDB（SQLite）の利用
AIRにはローカルデータベースとしてSQLiteが内蔵されている。これを利用することで、アプリケーション内でSQLを利用した効率のよりデータ管理を行うことができる。図4.10.1は"datastore.db"というデータベースファイルを指定して、「store」という名前のテーブルが無ければそれを作成するというコード例を示している。
図4.10.1 ローカルDBを利用するサンプルコード
4.11 ネイティブアプリケーション連携
AIR 2.5のアプリケーションからは、Androidにインストールされたネイティブアプリケーションを起動することができる。アプリケーションの起動は図4.11.1のようにnavigateToURL()メソッドを用いて行う。どのアプリケーションを起動するかはURLによって判別される。「mailto」であればメーラーを、「http」であればWebブラウザを起動して、指定されたURLのリソースを表示するといった具合である。Eメール、ブラウザ、地図、電話、SMSなど、代表的なものはデフォルトで用意されている。
図4.11.1 ネイティブアプリ連携のサンプルコード
5 プラットフォーム固有の設定を活用
上記の基本機能の他にも、AIR 2.5では実用的なアプリケーションを作成するための様々な機能が用意されている。代表的なものとしては、プラットフォーム固有の設定がある。Androidではアプリケーションごとにハードウェア機能やネットワーク機能へのアクセス権限を個別に設定するようになっており、AIR 2.5もこれに対応している。
また、Android特有の仕組みとしてはインテントがある。インテントはネイティブアプリケーションを起動して何かの処理を行いたい場合に便利な仕組みである。通常は呼び出したいアプリケーション名を指定することで、必要なデータをそのアプリケーションに渡して処理を行うが、もしアプリケーション名が指定されなかったとしても、自動でそれらしいものの候補を表示して選択できるようにしてくれるのがAndroidのインテントの便利なところである（図5.1）
図5.1 Andridのインテント機能
このインテント機能に対応して、AIR 2.5アプリケーションにも個別のインテント設定を追加できるようになっている。たとえば既定のアクションやどの呼び出し時に候補になるかといったカテゴリ、対応するデータタイプなどを指定することができる。
さらに、このインテントによるナビゲーションに対してカスタムのURLを設定することもできるようになっている。図5.2では「myapp」というURLを独自に定義しており、「myapp」のスキーマを持つURLが渡された場合にはどの種類のアプリケーションを候補にするかということを設定している。
図5.2 カスタムURLを設定し、インテントでの呼び出しに利用することができる
横田氏によれば、あまり知られていないものの、AndroidだけでなくiOSでもこれと同様のカスタムURLの設定が可能とのこと。したがってもしiOS対応のAIRがリリースされた際には、iOS固有の設定として、同じようにカスタムURLに対応するのではないかとの話である。
このように、モバイル端末向けのアプリケーションといえども、それぞれの機能の利用方法はActionScript内に隠蔽されているので、従来のAIRアプリケーションと何ら変わることなく利用することができる。それに加えて端末特有の機能にも対応しているので、端末の性能を十分に活用することができるようになっている。BurritoおよびHeroはまだプレビュー版の段階だが、AIR 2.5についてはすでに正式にリリースされており、Androidマーケット経由でインストールすることが可能。iOSをはじめとした他のプラットフォームのサポートも待ち遠しいところである。
