「アメーバピグ for Android」 開発事例
開発環境
この記事に必要な予備知識
- Adobe AIR 2.5 SDK
- Flash Builder 4
- Flash CS5
- Nexus One
ユーザーレベル
すべて
必要な製品
500万人を超える規模の利用者を抱えるコミュニティサービス「アメーバピグ」は、仮想空間にてユーザーが自分そっくりなキャ ラクターであるピグを通して洋服のきせかえや、おでかけ、他のユーザーとのリアルタイムな会話を楽しむことができるサービスです。
今回はアメーバピグPC版からAIR for Androidへの移植の過程をお話します。
まずは検証から始めます
Android 2.2からFlash Player 10.1 が動くようになったので
Android端末にFlash Player 10.1 をインストールしてブラウザからアメーバピグPC版（pigg.ameba.jp）の動作を確認してみました。
Android上でもサクサク動いて驚きましたが
- ボタンが小さすぎ
- アドレスバーが画面の領域をとってしまう
- チャット用のテキストフィールドにフォーカスがあたったままなのでキーボードが閉じない
等・・。
動くには動きますが、実際に使ってみると操作が困難です。
原因は、もともとPC画面を想定してつくっているため、ピクセル密度の高いスマートフォンの画面だとボタン等が小さくなってしまうこと。それから、入力手段がマウスからタッチパネルにに変わったことで、操作方法が影響を受けたことでした。スマートフォンサイズの画面だとボタン類が小さいことや、マウスからタッチパネルに変ったことで指定したい箇所の範囲がマウスポインタから指にかわったことも原因でした。
AIR for Android を使った開発
そこで「Adobe AIR for Android 」で作り直すことにしました
はじめに結論からですが
機能面の移植は簡単にできました。
その理由は以下の2点です。
- 元となったPC版のソースが粗結合な構造になっていたこと
元々複数人で平行して作業できるよう設計されていたものが、必要な部分だけAndroid対応するのに役立ちました。 - AIR for Androidを使ったこと
AIRアプリとしてデスクトップ上で動く機能はほぼそのまま使えます。
なのでUI部分に時間をかけて操作性の向上に取り組むことが出来ました。
Viewモジュールの開発
サーバーサイド(java)はそのまま
クライアントサイド(actionscript)の通信分もそのまま
表示する部分とそれに付随するロジックだけ作り直します。
ピグフレームワークについて
ピグフレームワークは、アメーバピグの開発に使われているフレームワークです。多人数で同時に開発できるように、Viewモジュールプロジェクトと、各Viewモジュールのswfをロードしてサーバーとの通信を行うmainプロジェクトから構成されます。
各viewモジュールは、モックデータを作る事で、サーバー接続無しでも単体で表示確認が出来るようになっています。単体での動作確認後に、mainプロジェクトで各viewモジュールをロードしてサーバー接続を含めた全体のテストを行います。これで問題が出なければ完成です。
今回は、mainプロジェクトはほとんど改修せずに、各ViewモジュールのみAndroid用に作りなおしました。
Adobe AIR にコンバート
PC版はブラウザ内で動くFlashアプリですが、Android版は直接OS上で動くAIRアプリです。
そのため、Flash BuilderのプロジェクトをAIR用に再作成します。
プロジェクトの再作成
→actionscriptプロジェクトはFlexプロジェクト(Application type>Desktop application)で再作成
→ライブラリプロジェクトはFlex Library Complier > Include Adobe AIR libraries にチェックを入れます。
セキュリティ周りの対応
- Security.allowDomain()は削除します
ピグは各モジュール画面ごとにサーバーからswfを読み込みんで読み込み元のswfから各モジュールのswfを操作しているためSecurity.allowDomain()を指定していますが、この方法はAIRだと使用できないので、各モジュールswfはapk作成時に一緒にパッケージしてセキュリティサンドボックス内に納めるように修正しました。 - loadBytes() の対応を行います
各アイテム類は数が膨大なのと、追加や更新が頻繁に行われるため、アプリと一緒にパッケージして配布することが現実的ではありません。そのため、loadBytes()を使って、都度外部からswfを読み込むように変更しています。
AIRだとデフォルトではloadBytes()を使ったswfの読み込みができない設定になっています。そのためallowCodeImportをtrueに設定して外部SWFロードをできるよう変更します。
Android用の対応
- コンテキストメニュー
Android上で起動時にエラーになるため、コンテキストメニューをカスタマイズしている場合は削除します。 - マウスホイールイベント(MouseEvent.MOUSE_WHEEL)
タッチデバイスには無いので対応しました。
PC上でのデバック用に残しますが
別途タッチムーブイベントで対応します。タッチデバイスにはマウスホイールイベントが無いので、別途タッチムーブイベントを追加して対応しました。（PC上でのデバック用に、マウスホイールイベントは削除しませんでした）
if(Multitouch.supportsTouchEvents)
{
addEventListener (TouchEvent.TOUCH_BEGIN, onTouchBegin);
addEventListener (TouchEvent.TOUCH_MOVE, onTouchMove);
}
- マウスイベント
マウスイベントはそのままタッチイベント用に使用しました。
マウスオーバー、ロールオーバーもそのまま使用できました。
ダブルクリックもダブルタップとして判定できました。 - ジェスチャーイベント
エリアの拡大縮小のために、ジェスチャーイベントを追加しました。
Multitouch.inputMode = MultitouchInputMode.GESTURE;
addEventListener( TransformGestureEvent.GESTURE_ZOOM, onGestureZoom);
private function onGestureZoom(e:TransformGestureEvent):void
{
_currentScale *= e.scaleX;
// 最小値、最大値の設定
if(_currentScale < 0.5) _currentScale = 0.5;
if(_currentScale > 3.0) _currentScale = 3.0;
// スケール変更
changeScale(_currentScale, true);
}
- デバイスボタンの対応
デバイスによってはbackボタンと画面の距離が近いものがあるため、backボタンを間違ってタッチしてアプリを終了させてしまうことがありました。そのため、今回はbackボタンを無効化しました。
private function onKeyDown(event:KeyboardEvent):void
{
if(event.keyCode == Keyboard.BACK)
{
event.preventDefault();
}
}
- バックエンド処理
バックエンドで起動状態にするかの可否ですが
アプリの性質上バックエンドで起動し続けるのはユーザーにとってよろしくないので
画面を閉じるとアプリを終了にしています。
stage.addEventListener(Event.DEACTIVATE , onDeactivateHandler);
private function onDeactivateHandler(event:Event):void
{
NativeApplication.nativeApplication.exit();
}
UIの変更
機能を絞って画面に配置します。
仮のボタン類を実機で確認しながら大きさや配置を決定
その中でいくつか気をつけた点をあげます。
- ボタンは縦に並べない
縦方向に指を置くことが多いので押し間違いの回避 - 画面角にボタン配置
クォータービューなので主なタッチポイントの床が菱形で角が空くため各ボタンは角に配置しました。
- 触れる回数の多いボタンは画面下に配置
指で画面を隠さないように頻繁に押すアクション、チャットは下におでかけ、ぴぐともは上部に配置しました。 - オーバー、ダウンの挙動は音と見た目で補完
タッチパネルだと実際の押した感がないため、見た目と音で補完します。 - 文字、ボタンは大きく
文字は実機で可読性の確認を行いながら決定
ボタンも実機で操作を行い大きさを決定します。
配置と大きさを決定したものを、実機で確認します。
操作感に問題なくなった時点で実際のデザインを適用します。
この状態でユーザーテストを繰り返し
着せ替え、ヘルプを追加したり、デザインの修正を行い
完成です。
apk作成して実機にインストールします
アイコンを作成します
48px*48pxのpng
72px*72pxのpng
アプリケーション設定XMLの記述
ピグはインターネット接続が必要なので
インターネット接続を許可します。
<uses-permission android:name="android.permission.INTERNET"/>
5 方向ナビゲーション制御の設定は削除します。
<uses-configuration android:reqFiveWayNav="true"/>
ギャラクシー端末からマーケット検索できない現象がありましたので5 方向ナビゲーション制御の設定は記述しませんでした。
証明書の作成
証明書の有効期限は25年を指定
adt -certificate -cn pigg_android -c JP -validityPeriod 25 2048-RSA pigg_android.p12 xxxxxxxx
-validityPeriod
オプション追加されたのでこれで25を指定します（デフォルトは5年）
apk作成
$AIR_SDK/bin/adt -package -target apk -storetype pkcs12 -keystore $KEY/pigg_android.p12 -storepass xxxxxxxx pigg_air.apk pigg_air-app.xml pigg_air.swf main.swf swf/* icons/* pigg/*
実機にインストール
adb install -r pigg_air.apk
実機で確認
marketにアップします
おわりに
Android端末自体も今回初だったので移植は大変だろうと思っていたのですが、意外と時間も掛からずに移植できました。機能部分の移植に関しては本当にすぐにできた印象で、あとは端末画面サイズとタッチパネル用にどれだけ操作しやすくするかに時間をかけました。
課題はPC版とのソース差分が出てくるので、どのようにスムーズに運用していくかになります。
今後はまだ足りていない機能を追加したり、Androidだからできる機能も追加していきます。
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 |
