必要条件

この記事に必要な予備知識

必要なもの

  • Adobe AIR インストーラー
  • Adobe AIR SDK
  • Flash Builder 4(Standard、 Premium どちらでも可)
  • AIR for Androidが動作するAndroid端末

ユーザーレベル

すべて

2010年6月9日にAdobe AIR 2がリリースされました。約2年半振りのメジャーバージョンアップとなり、多くの新機能追加と機能強化が行われています。本連載(全9回予定)では、 それら機能について詳しく説明するとともに、サンプルアプリを用いながらその使い方を解説していきます。

本記事では、Adobe AIR 2から強化されたウィンドウサイズ機能と、新しく採用されたジェスチャーイベントについて紹介します。

ウィンドウサイズ機能の強化

Adobe AIRで扱えるウィンドウの最大サイズは、バージョン1.5以前では2880×2880ピクセルまででしたが、バージョン2では4096×4096ピクセルまでとなりました。

nativeWindow.boundsプロパティ

Adobe AIRのウィンドウサイズを変更するには、nativeWindow.boundsプロパティを使用します。このプロパティは、Rectangleオブジェクトを使用して、ウィンドウのサイズと位置を一括で設定することができます。nativeWindow.boundsプロパティを使用すれば、ウィンドウサイズ機能が強化されたことを実感できるでしょう。

ここで気をつけておかなければならない点は、「ウィンドウサイズにはシステムクロームが含まれる」ということです。そのため、ウィンドウのステージサイズは、ウィンドウサイズからシステムクロームの領域を引いたものと等しくなります。ウィンドウの幅と高さを変更すると、ステージのstageWidth プロパティと stageHeightプロパティ値が変更されます。その逆も同様で、ステージサイズを変更すると、ウィンドウサイズが変更されます。

nativeWindow.boundsプロパティの使用方法は次の通りです。

【NativeWindowオブジェクトへの参照を含むウィンドウの境界を設定する場合】

windowObject.bounds = new Rectangle(0, 0, 4095, 4095);

【ウィンドウステージの表示オブジェクトへの参照を使用した場合】

displayObject.stage.nativeWindow.bounds = new Rectangle(0, 0, 4095, 4095);

【ウィンドウのHTMLLoaderオブジェクト(またはHTMLウィンドウ)で実行しているJavaScriptルーチンから設定する場合】

window.nativeWindow.bounds = new air.Rectangle(0, 0, 4095, 4095);

ちなみに、nativeWindow.boundsプロパティに4096×4096ピクセル以上のRectangleオブジェクトを渡しても、ウィンドウサイズは4096×4096ピクセル以上の大きさになりません。

ジェスチャーイベント

Adobe AIR 1.5以前のバージョンでは実現できなかったジェスチャーイベントが、Adobe AIR 2から採用されました。ジェスチャーとは、タッチスクリーン搭載の携帯電話またはタブレットなどのタッチデバイスの操作において、ユーザーが指やポインティングデバイスで画面に触れたり画面上で動かしたりする動作のことを指します。

ジェスチャーイベントを使用できる状態にする

ジェスチャーイベントを使用するためには、Multitouch.inputModeプロパティに、ジェスチャーを使用することを設定しなければなりません。設定方法は簡単で、アプリケーション起動時のタイミングで以下のように設定します。

Multitouch.inputMode = MultitouchInputMode.GESTURE;

ジェスチャーイベントの対応状況を確認する

ジェスチャーイベントを使用するためには、タッチデバイスが手元にないと始まりませんが、もう一つ確認しなければならないことがあります。それは、タッチデバイスが対応しているジェスチャーイベントの種類です。タッチデバイスの機種ごとに、サポートしているジェスチャーイベントの種類が異なる可能性があります。それを事前に確認するためには、Multitouch.supportedGesturesプロパティの中身を確認します。

Multitouch.supportedGesturesプロパティは、アプリケーションを実行しているタッチデバイスの環境でサポートされるジェスチャーイベントの種類(文字列)を保持するVector.<String>型の配列です。デバッグ環境上で次のように出力することで、対応状況が確認できます。

trace( Multitouch.supportedGestures.toString() );

者の手元にあるGoogle Nexus one (AIR for Android)では、次のように出力されます。

実際にコーディングするときは、次のように事前にチェックしておけば、アプリケーションのエラーによるクラッシュを避けることができます。以下は、TransformGestureEvent.GESTURE_ROTATEを使用する際のコード例です。

Multitouch.inputMode = MultitouchInputMode.GESTURE; if ( Multitouch.supportedGestures == null || Multitouch.supportedGestures.length == 0 || Multitouch.supportedGestures.indexOf(TransformGestureEvent.GESTURE_ROTATE) == -1 ) { trace("このデバイスは、GESTURE_ROTATE イベントをサポートしていません。"); return; } else { addEventListener(TransformGestureEvent.GESTURE_ROTATE, … … }

ジェスチャーイベントの種類

現在、Multitouch.supportedGesturesプロパティが対応しているジェスチャーイベントの種類は次の通りです。なお、機種によっては、下記の通りに動かない可能性もあります。

イベントの種類 操作
GestureEvent.GESTURE_TWO_FINGER_TAP 2つの指を同時にタップ
PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP 1つ目の指が触れた状態で2つめの指をタップ
TransformGestureEvent.GESTURE_SWIPE 指を触れたまま移動させる(例えば左から右)
TransformGestureEvent.GESTURE_PAN 複数の指が触れた状態で全ての指を平行に動かす
TransformGestureEvent.GESTURE_ROTATE オブジェクト上で2つの指を、円を書くように動かす
TransformGestureEvent.GESTURE_ZOOM 2つの指が触れた状態で、指をそれぞれ遠ざかる (または近づく) 方向に移動

Tour de Mobile Flex で学ぶジェスチャーイベント

筆者が、ジェスチャーイベントを学ぶためにお勧めしたいコンテンツは、「Tour de Mobile Flex」です。Tour de Mobile Flexとは、現在、Android マーケットから無償でダウンロードできるAIR for Android開発者向けお勉強アプリケーションで、様々なサンプルをコード付きで確認できます。もちろん、今回紹介したジェスチャーイベントについて も、サンプルが用意されているので、Android端末を持っている方は、ぜひ試してみて下さい。

Tour de Mobile Flexは、アプリケーションだけでなく、ソースコードも公開されています。米Adobe Systems のFlexテクニカルエバンジェリストJames Ward氏のブログにて、Flash Builder "Burrito"用のFlexモバイルプロジェクトがFXP形式でダウンロードできるので、ぜひダウンロードして試してみて下さい。

James Ward氏のブログ

おわりに

今後マルチスクリーンが普及して、それを考慮しながらコンテンツを展開させていくとき、本記事で紹介したAdobe AIR2の新機能は、Webコンテンツ制作者(開発者)ならどちらも押さえておくべき事項だと筆者は考えています。これらのチュートリアルやアプリケーションに触れることで、Adobe AIRアプリケーションがより身近に感じることでしょう。