1204 fitc2010

~Air for Android で簡単にアプリつくれます！~

1

アメーバピグ for Androidができるまで

資料アップ先お知らせします@modeplus

2010年12月4日土曜日

アジェンダ1.アメーバピグの紹介

2.検証、Androidでピグは動くの？

3.デザインについて

4.機能の実装について

5.これからの展開と課題

2



1.アメーバピグの紹介

５.これからの展開と課題


３.デザインについて

2.ワークフローについて



<アメーバピグの紹介> アメーバピグとは？自分ソックリなキャラクターであるピグを作れる他のユーザーとのチャット、ゲーム等でコミュニケーションを楽しめるサービス現在、５００万人を超えるユーザー数


<アメーバピグの紹介> アメーバピグとは？自分ソックリなキャラクターであるピグを作れる他のユーザーとのチャット、ゲーム等でコミュニケーションを楽しめるサービス現在、５００万人を超えるユーザー数


<アメーバピグの紹介> PC版アメーバピグ２００９年２月１９日サービス開始

開発体制　約５０人（デザイナー２６、デベロッパー９、エンジニア９、ディレクタ運営管理８）

FlashPlayer9以上で動作


<アメーバピグの紹介> Android版アメーバピグ２０１０年１１月１日リリース開発体制５人（デザイナー1、デベロッパー2、ディレクター運営管理2）

Android 2.2で動作

業務時間外でひっそりとスタート


ワークフロー

開発期間　１ヶ月半

業務時間外で


<ワークフローについて> 効率的なワークフロー

デザイン確定後、変更や修正が多発する。デベロッパーの業務が巻き戻る。

ラフ段階からMockを作ってデザイン確認は実機でする。

開発のなやみ

解決策


<ワークフローについて> 初期のモック

これで確認を進めます


<ワークフローについて> 初期のモック

これで確認を進めます


<ワークフローについて> シンプルな分担

DirectorDeveloper Designer

最小人数だからこそ

役割は明確に





進捗進捗

仕様

デザイン

Director

企画

Developer

Flash制作

Designer

UI制作



進捗進捗

仕様

デザイン

Director

企画

Developer

Flash制作

Designer

UI制作

徐々にデザインが完成


<ワークフローについて> チェックについて

誰に確認をとるのか？


<ワークフローについて> デザインができるまで

デザインチーム確認

プロジェクトチーム確認

アートディレクター確認

プロデューサー確認

社長確認


<ワークフローについて> デザインができるまで

デザインチーム確認

プロジェクトチーム確認

アートディレクター確認

プロデューサー確認

社長確認

全部クリアして晴れて開発開始！

OK!


<ワークフローについて> 通常

五人の責任者

プロジェクトチームリーダー

デザインチームリーダー

クリエイティブディレクター

アートディレクター社長改革!


今回は違う方法をとりました。


<ワークフローについて> 今回

50名のユーザーレビュー

アイコンが見づらい

ペットを飼いたい

着せ替えできないの？

スクロールの反応が悪い

ボタンが押せない

ユーザー

目線の評価獲

得!

3、４回に分け「評価、修正」を繰り返し完成度を高める


実機で確認すると、誰でもイメージしやすい

通常の確認系統をレビュー会で補完

ユーザー評価を獲得することでデザインや操作性に問題が少ない

<ワークフローについて> ワークフローのまとめ


２. 検証、Androidでピグは動くの？




2.Androidでピグは動くのか？



そもそも、Androidで動くの？Android 2.2から Flash Player 10.1が動くデバイスはNexus Oneを用意ブラウザでpigg.ameba.jpを確認


結果

動きますが、操作が難しい


操作が難しいアドレスバーが邪魔ボタン小さすぎて押せないチャットするとキーボードが閉じない


解消のため、いろいろやってみました

フルスクリーンモード jsポップアップ

どれも、問題解決にならず


そこで

AIR for Androidで作り直し


AIR for Androidで移植した感想

機能の移植は簡単！！なので

デザインにこだわります









<デザインについて> デバイスの違い

1024 x 768 (XGA) 以上 800 x 480 (WVGA)854 x 480 (FWVGA)

11 インチ以上 3.7 ～ 4.0 インチ

マウス, キーボードマルチタッチスクリーン,

加速度センサ, カメラ, マイク, GPS, キーボード

スクリーン解像度

スクリーンサイズ

入力UI

PC(アメーバピグ推奨環境)

Android(Galaxy S, Desire, Nexus One, Droid 2)


<デザインについて> 画面サイズ

480px

800px使用ソフト　Adobe Fierworks CS5


<デザインについて> デザインをAndroid用に最適化する

表示するものは

少なく大きく


機能を絞る主要な機能をアイコン化ボタンと文字は大きくメニューを開閉式に変更ポップアップは使わない多機能なUIを簡略化ピンチイン/アウトジェスチャーを追加

デザインをAndroid用に最適化する<デザインについて> デザインをAndroid用に最適化する


<デザインについて> PCピグのボタン数


<デザインについて> Androidピグのボタン数

９つの機能に絞った


チャット

アクション

来訪アラーム

ツール

<デザインについて> 主要機能のアイコン化


<デザインについて> ボタンの位置決め

ピグの世界はクオータービュー



Androidでのトレースイメージ



必然的に四隅に隙間ができる



ここに最も重要な要素を配置

メニュー

アクション

きたよ

ちゃっと


配置


配置


<デザインについて> 実際のイメージ

使用ソフト　Adobe Fierworks CS5


ボタンのタテ配置は間隔を十分とる。指の先でミスタッチする可能性が高い。

<デザインについて> 配置での注意点

×ヨコ配置タテ配置


<デザインについて> 文字とボタンを大きく


<デザインについて> 文字とボタンを大きく


<デザインについて> ボタンのサイズと余白


75px

75px

115px

115px

20px

ボタン作りで考慮すべきポイント余白は多めにとる


<デザインについて> リストの縦幅

リストの縦幅はアイコンと同じ75px

75px



<デザインについて> 既存ボタンのリサイズ



<デザインについて> 既存ボタンのリサイズ解像度の違いによるリサイズ




PC　解像度の違いによるリサイズ




PC　

Android　

解像度の違いによるリサイズ



<デザインについて> メニューを開閉式にした










<デザインについて> ウィンドウを使わないようにした




3. デザインを最適化する









<デザインについて> 多機能なUIを簡略化










<デザインについて> ピンチイン/アウトジェスチャーを追加した












４.機能の実装について







開発環境

• Flash Builder4• AIR SDK 2.5• AndroidSDK• Nexus One

※開発開始の９月時点での環境


AIR for Androidで移植した感想

機能の移植は簡単！！


なぜ、機能の移植は簡単なのか？汎用性のある設計元々、低スペックPCでも動くAIR for Androidだから


<機能の移植は簡単>　汎用性のある設計元々多人数で同時開発を行うためのものが、今回移植の際うまく活用できた

各viewとMainが粗結合だったので入れ替えが楽

各プロジェクトを変更しても影響が最小になるような設計


<機能の移植は簡単> 　汎用性のある設計変更の範囲


<機能の移植は簡単> 　各viewモジュールの変更おでかけリスト

PC Android


<機能の移植は簡単> 　各viewモジュールの変更プロフィール

PC

Android


<機能の移植は簡単> 　各viewモジュールの変更ピグとも

PC

Android


<機能の移植は簡単> 　各viewモジュールの変更部屋

PC Android


<機能の移植は簡単> 　低スペックPCでも動くPC版が低スペックPCでも動くように作られていたから移植時は、パフォーマンスチューニングはしていない今後、GPUモードを試してみる


<機能の移植は簡単> 　AIR for Androidだから

AIRアプリとしてデスクトップ上で動く機能はほぼAndroid上で動く動作確認が楽実機を操作してのデバックもできる


<機能の移植は簡単> 　実際に行った作業

AIRアプリに変換プロジェクトの再作成セキュリティ周りの対応

Android用の対応コンテキストメニューマウスホイールイベント＆マウスイベントデバイスボタン＆バックグラウンド処理






＜AIRアプリに変換＞プロジェクトの再作成actionscriptプロジェクトはFlexプロジェクト(Application type>Desktop application)で再作成

ライブラリプロジェクトはFlex Library Complier > Include Adobe AIR libraries にチェックを入れる


＜AIRアプリに変換＞セキュリティ周りの対応Security.allowDomain()の削除loadBytes() の対応


＜AIRアプリに変換＞セキュリティ周りの対応Security.allowDomain()は削除

main.swfがサーバーから各viewモジュールswfを読み込み操作している

AIRだとこの方法は使えないため削除apk作成時に一緒にパッケージしてセキュリティサンドボックス内に納める


＜AIRアプリに変換＞セキュリティ周りの対応loadBytes() の対応各アイテム類は数が膨大なのと更新が頻繁なので一緒にパッケージはしない。AIRだとloadBytes()を使ってswfを読み込むことができないため allowCodeImportをtrueに設定

var context:LoaderContext = new LoaderContext();context.allowCodeImport = true;






＜Android用の対応＞コンテキストメニューAndroid上で実行時にエラーになるためコンテキストメニューをカスタマイズしている場合は削除


＜Android用の対応＞マウスホイールイベントタッチデバイスには無いのでタッチムーブイベントで対応

if(Multitouch.supportsTouchEvents) { addEventListener (TouchEvent.TOUCH_BEGIN, onTouchBegin); addEventListener (TouchEvent.TOUCH_MOVE, onTouchMove);}


＜Android用の対応＞マウスイベントマウスイベントは変更なしマウスオーバー、ロールオーバーもタップオーバーで判定ダブルクリックもダブルタップとして判定

なので、楽でしたよと感想です


＜Android用の対応＞デバイスボタン今回はbackボタンを無効化private function onKeyDown(event:KeyboardEvent):void { if(event.keyCode == Keyboard.BACK) { event.preventDefault(); }}

間違ってbackボタン押してアプリを閉じてしまうため

押し感のない画面とフラットなボタン


＜Android用の対応＞バックグランド処理

画面非表示でアプリも終了させるstage.addEventListener(Event.DEACTIVATE , onDeactivateHandler);

private function onDeactivateHandler(event:Event):void { NativeApplication.nativeApplication.exit();}

リアルタイムのコミュニケーションを行うアプリなので裏側で起動し続けるのは好ましくないため


　パブリッシュアイコン作成

アプリケーション設定XML

証明書の作成

apk作成

マーケットにアップしましたが！


アイコン作成72px × 72px　を用意


アプリケーション設定XMLインターネット接続を許可<android>

<uses-permission android:name="android.permission.INTERNET"/>

・・・

</android>


証明書の作成証明書の有効期限は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/*

adtでパッケージを作成

Android Development Tools

AIR Developer Tool(AIR 開発ツール)

adtってどっち？


実機にインストール

adb install -r pigg_air.apk

adbで実機にインストール

Android Debug Bridge

adb


マーケットにアップしましたが！GALAXY Sでマーケット検索ヒットしない！

<uses-configuration android:reqFiveWayNav="true"/>

5 方向ナビゲーション制御は記述しない

アプリケーション設定XML<android>タブ内のマーケットフィルタが原因

Desire、Droid2、Nexus One は問題なくアプリページに行ける

GALAXYは５方向ナビゲーションがない









これから

まだ実装していない機能を追加Androidだからできる機能を追加AmebaPicoにも展開


課題

今後増えてくる画面サイズへの対応 PC版とのソース管理正式なチームビルド


ご清聴ありがとうございました。



Documents

1204 fitc2010