ラクターであるピグを通して洋服のきせかえや、おでかけ、他のユーザーとのリアルタイムな会話を楽しむことができるサービスです。Androidへの移植の過程をお話します。インストールしてブラウザからアメーバピグPC版(pigg.ameba.jp)の動作を確認してみました。Android上でもサクサク動いて驚きましたがボタンが小さすぎアドレスバーが画面の領域をとってしまうチャット用のテキストフィールドにフォーカスがあたったままなのでキーボードが閉じない等・・。動くには動きますが、実際に使ってみると操作が困難です。原因は、もともとPC画面を想定してつくっているため、ピクセル密度の高いスマートフォンの画面だとボタン等が小さくなってしまうこと。それから、入力手段がマウスからタッチパネルにに変わったことで、操作方法が影響を受けたことでした。スマートフォンサイズの画面だとボタン類が小さいことや、マウスからタッチパネルに変ったことで指定したい箇所の範囲がマウスポインタから指にかわったことも原因でした。」で作り直すことにしましたはじめに結論からですが機能面の移植は簡単にできました。その理由は以下の2点です。元となったPC版のソースが粗結合な構造になっていたこと元々複数人で平行して作業できるよう設計されていたものが、必要な部分だけAndroid対応するのに役立ちました。Androidを使ったことAIRアプリとしてデスクトップ上で動く機能はほぼそのまま使えます。UI部分に時間をかけて操作性の向上に取り組むことが出来ました。Viewモジュールの開発サーバーサイド(java)はそのままクライアントサイド(actionscript)の通信分もそのまま表示する部分とそれに付随するロジックだけ作り直します。ピグフレームワークについてピグフレームワークは、アメーバピグの開発に使われているフレームワークです。多人数で同時に開発できるように、Viewモジュールプロジェクトと、各Viewモジュールのswfをロードしてサーバーとの通信を行うmainプロジェクトから構成されます。各viewモジュールは、モックデータを作る事で、サーバー接続無しでも単体で表示確認が出来るようになっています。単体での動作確認後に、mainプロジェクトで各viewモジュールをロードしてサーバー接続を含めた全体のテストを行います。これで問題が出なければ完成です。今回は、mainプロジェクトはほとんど改修せずに、各ViewモジュールのみAndroid用に作りなおしました。コンバートPC版はブラウザ内で動くFlashアプリですが、Android版は直接OS上で動くAIRアプリです。BuilderのプロジェクトをAIR用に再作成します。セキュリティ周りの対応Security.allowDomain()は削除しますピグは各モジュール画面ごとにサーバーからswfを読み込みんで読み込み元のswfから各モジュールのswfを操作しているためSecurity.allowDomain()を指定していますが、この方法はAIRだと使用できないので、各モジュールswfはapk作成時に一緒にパッケージしてセキュリティサンドボックス内に納めるように修正しました。対応を行います各アイテム類は数が膨大なのと、追加や更新が頻繁に行われるため、アプリと一緒にパッケージして配布することが現実的ではありません。そのため、loadBytes()を使って、都度外部からswfを読み込むように変更しています。AIRだとデフォルトではloadBytes()を使ったswfの読み込みができない設定になっています。そのためallowCodeImportをtrueに設定して外部SWFロードをできるよう変更します。Android用の対応コンテキストメニューAndroid上で起動時にエラーになるため、コンテキストメニューをカスタマイズしている場合は削除します。マウスホイールイベント(MouseEvent.MOUSE_WHEEL)タッチデバイスには無いので対応しました。PC上でのデバック用に残しますが別途タッチムーブイベントで対応します。タッチデバイスにはマウスホイールイベントが無いので、別途タッチムーブイベントを追加して対応しました。}マウスイベントマウスイベントはそのままタッチイベント用に使用しました。マウスオーバー、ロールオーバーもそのまま使用できました。ダブルクリックもダブルタップとして判定できました。ジェスチャーイベントエリアの拡大縮小のために、ジェスチャーイベントを追加しました。}デバイスボタンの対応デバイスによってはbackボタンと画面の距離が近いものがあるため、backボタンを間違ってタッチしてアプリを終了させてしまうことがありました。そのため、今回はbackボタンを無効化しました。}バックエンド処理バックエンドで起動状態にするかの可否ですがアプリの性質上バックエンドで起動し続けるのはユーザーにとってよろしくないので画面を閉じるとアプリを終了にしています。機能を絞って画面に配置します。仮のボタン類を実機で確認しながら大きさや配置を決定その中でいくつか気をつけた点をあげます。画面角にボタン配置クォータービューなので主なタッチポイントの床が菱形で角が空くため各ボタンは角に配置しました。指で画面を隠さないように頻繁に押すアクション、チャットは下におでかけ、ぴぐともは上部に配置しました。オーバー、ダウンの挙動は音と見た目で補完タッチパネルだと実際の押した感がないため、見た目と音で補完します。文字、ボタンは大きく文字は実機で可読性の確認を行いながら決定ボタンも実機で操作を行い大きさを決定します。配置と大きさを決定したものを、実機で確認します。操作感に問題なくなった時点で実際のデザインを適用します。この状態でユーザーテストを繰り返し着せ替え、ヘルプを追加したり、デザインの修正を行い完成です。apk作成して実機にインストールしますアイコンを作成します48px*48pxのpng72px*72pxのpngアプリケーション設定XMLの記述ピグはインターネット接続が必要なのでインターネット接続を許可します。方向ナビゲーション制御の設定は削除します。方向ナビゲーション制御の設定は記述しませんでした。pigg_air.apk実機で確認marketにアップしますおわりにAndroid端末自体も今回初だったので移植は大変だろうと思っていたのですが、意外と時間も掛からずに移植できました。機能部分の移植に関しては本当にすぐにできた印象で、あとは端末画面サイズとタッチパネル用にどれだけ操作しやすくするかに時間をかけました。課題はPC版とのソース差分が出てくるので、どのようにスムーズに運用していくかになります。今後はまだ足りていない機能を追加したり、Androidだからできる機能も追加していきます。地域を選択してください地域を選択すると、アドビサイトで使用する言語と内容が変わります。