Android 向け AIR アプリケーションと画面の回転の実現 パート 1
必要条件
ユーザーレベル
すべて
必要な製品
- Flash Professional CS5 (Download trial)
- Flash Builder 4 (Download trial)
- Adobe AIR SDK
AIR 2.5 では Android 向けのアプリケーションを開発できるようになりました。スマートフォンやタブレットは、画面を縦にしたり横にしたりと向きを変えて使うことが可能ですが、 AIR では、デバイス用にに、画面の向きにあわせてスクリーン内の表示をコントロールする手段がいくつか提供されています。この記事では、デバイスの向きの変化 に応じて 、AIR アプリケーションの表示を変更する方法をご紹介します。
必要な環境
Adobe Flash Professional CS5 Extension for AIR 2.5
Adobe Labs からダウンロードしてインストールAndroid デバイス
Android 2.2 以降がインストールされているもの
概要
AIR アプリケーションの表示をコントロールするには、2つの "向き" を使います。1 つ目は、デバイス自身の向きです。デバイスの縦向き、横向き、あるいは上下逆さまといった状態を指します。2 つ目は、デバイス内に表示される "ステージ" の向きです。これは、デバイスの向きを基準にした相対的な方向です。例えば、デバイスが左横を向いていてステージがデフォルト表示だと、ユーザーからはア プリケーションが左側に倒れているように見えます。下の図の真ん中の状態です。
デバイスの向きは、デバイスを持つ人 （あるいは置かれた状態） により決定されます。その際、ステージの向きを自動回転させるよう設定された AIR アプリケーションは、ステージがユーザーから見て正常な （上向きの） 状態になるよう、自動的に表示が調整されます。
自動回転が行われたとき、スクリプト内ではデバイスの向きを Stage クラスの deviceOrientation 属性から知ることができます。deviceOrientation の値は、StageOrientation クラスに定数として定義されています。
- DEFAULT : デフォルト（上向き）
- ROTATED_LEFT : 左向き
- ROTATED_RIGHT : 右向き
- UPSIDE_DOWN : 上下が逆
- UNKNOWN : 不明
自動回転が有効でないときの値は UNKNOWN です。deviceOrientation 属性は読み取り専用で、スクリプトから変更することはできません。
ステージの向きの変更を検知するため、2 種類の StageOrientationEvent が追加されました。
- ORIENTATION_CHANGING : ステージが新しい向きに変わる前に発行される
- ORIENTATION_CHANGE : ステージが新しい向きに変わった後に発行される
前者は、ステージの向きが変わる前に必要な処理、後者は、ステージの向きが変わった後に必要な処理を実行するのに役立ちます。Android では、後者のみ利用することができます。
ステージの向きは、Stage クラスの orientation 属性から取得できます。取り得る値は、deviceOrientation 属性と同じで、現在のステージが縦長か横長かなどを知ることができます。ステージの向きが確定する前は、値として UNKNOWN をとります。その場合は、StageOrientationEvent が発生してから値を再度確認します。この属性も読み取り専用です。
ステージの向きを変えるために、setOrientation() メソッドが用意されています。引数に StageOrientation クラスに定義されている UNKNOWN をのぞく 4 つの定数のいずれかを指定すると、直ぐにステージの向きが変わります。ただし、このメソッドは、AIR 2.5 ではサポートされません。最新のヘルプファイルには、Android 向けに AIR 2.6 以降でサポート予定と書かれています。
stage.setOrientation(StageOrientation.ROTATED_LEFT);
AIR 2.5 では、代わりに setAspect() メソッドを使って、ステージの向きの縦長横長を切り替えることができます。引数に指定できる値は、StageAspectRatio.PORTRAIT か StageAspectRatio.LANDSCAPE です。下は使い方の例です。
stage.setOrientation(StageAspectRatio.PORTRAIT);
ステージの向きの自動変更
AIR 2.5 には、デバイスの向きに応じて、自動的にステージを回転させる機能があります。この機能を利用するためには、アプリケーション記述ファイル内に、以下の様な行を追加します。Flash Professioanl CS5 からは、パブリッシュ設定画面の一般タブ内で、"自動回転を有効にする" を選択しておけば、アプリケーション記述ファイルを編集する必要はありません。
<application xmlns="http://ns.adobe.com/air/application/2.5">
...
<initialWindow>
...
<autoOrients>true</autoOrients>
...
</initialWindow>
...
</application>
この方法では、特にロジックを記述しなくても、ステージ上の表示オブジェクトが上を向く方向にステージが回転します。しかし、表示幅やアスペクト比 の違いまでは調整されません。例えば、デバイスを横に回転させたとき、アプリケーション画面が幅に合わせて拡大されたり、下に隠れたエリアを表示するため のスクロールバーが追加されたりはしません。そのため、ステージが回転したときに、オブジェクトの大きさやレイアウトを変更するためのロジックが必要にな ります。
ステージが回転すると、ステージの大きさが変更されるため、Stage オブジェクトが resize イベントを送出します。このタイミングでステージ上の表示オブジェクトのサイズと位置を変更すると、常にステージの大きさに合わせた表示ができるので便利です。
下は、resize イベントに対するハンドラーを使用する簡単なサンプルです。配置をスクリプトから設定する場合は、Stage の align 属性と scaleMode 属性を以下のように設定します。scaleMode に NO_SCALE を設定すると、最初にステージが表示されるタイミングで resize イベントが発生するため、表示の調整は resize イベントハンドラー内に集約すると確実に実行されます。
// stage オブジェクトの属性を設定
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
// resize イベントのハンドラーを追加
stage.addEventListener(Event.RESIZE, onResize);
private function onResize(e:Event):void {
...
}
Flex の次期バージョンである Hero では、このようなロジックを記述しなくても、自動的に画面幅に合わせて表示を調整する機能があります。デバイス環境では、アプリケーションフレームワークの必要性が高くなりそうです。
アプリケーション起動後に自動変更に変える
アプリケーション起動時には、デバイスの向きに関わらず特定の方向で表示させて、その後、自動変更の機能を利用して表示を調整したい、というケースもあるかもしれません。そのような場合は、まず、アプリケーション記述ファイル内の autoOrients を false にします。Flash Pro CS5 では、パブリッシュ設定画面内の "自動回転を有効にする" のチェックを外しておきます。
<application xmlns="http://ns.adobe.com/air/application/2.5">
...
<initialWindow>
...
<autoOrients>false</autoOrients>
...
</initialWindow>
...
</application>
表示の向きは、aspectRatio タグを使って指定します。指定できる値は、portrait と landscape で、それぞれ、縦長表示、横長表示の意味です。下は縦長表示にしたいときの指定例です。Flash Pro CS5 を利用する場合は、パブリッシュ設定画面の一般タブ内の "起動時の縦横比" から "縦長モード" か "横長モード" を選択します。
<application xmlns="http://ns.adobe.com/air/application/2.5">
...
<initialWindow>
...
<autoOrients>false</autoOrients>
<aspectRatio>portrait</aspectRatio>
...
</initialWindow>
...
</application>
これで、初期表示の方向が指定できました。常に表示方向を固定したい場合であれば、このままにしておけばよいわけです。
アプリケーション記述ファイル内の autoOrients の値は、Stage クラスの autoOrients 属性に設定されます。上で説明した設定をすれば、アプリケーション起動時の autoOrients の値は false になっているはずです。初期表示が行われた後に autoOrients の値を true に変更すると、ステージの向きが自動回転するよう変更されます。変更のタイミングは、activate イベント （Flex では applicationComplete イベント） が最初の機会になる場合が多いでしょう。下は autoOrients を変更するコードの例です。
// イベントハンドラーを追加
NativeApplication.nativeApplication.addEventListener(Event.ACTIVATE,
onActivate);
private function onActivate(event:Event):void
{
// 自動回転するように設定
stage.autoOrients = true;
}
逆に、autoOrients の値を true から false に変更した場合の動作はデバイスに依存します。そのままステージの向きが固定されるケースもあれば、デバイス標準の向きに固定されるケースもあるようです。
ステージの向きを固定する別の手段として、 StageOrientationEvent.ORIENTATION_CHANGING イベントのオブジェクトに対して preventDefault() メソッドを呼ぶという方法も考えられます。しかし、先に記述したように Android ではこのイベントが発生しません。従って、こちらは、あまり汎用性のない方法ということになりそうです。
// イベントハンドラーを追加
stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGING,
onOrientationChanging);
private function onOrientationChanging(event:StageOrientationEvent):void
{
// ステージの回転をキャンセル
event.preventDefault();
}
パート 2 に続く
Tutorials and samples |
Samples
- Licensing Adobe AIR applications on Android
- Using web fonts with Adobe AIR 2.5
- Using Badger for Adobe AIR applications
AIR blogs |
More |
AIR Cookbooks |
More |
