1215 sig startups vol2
TRANSCRIPT
Flash Platformランタイム
2
Flash Player Adobe AIR
ブラウザ上で動作 デスクトップ上で動作•ローカルファイルアクセス•ドラック&ドロップ
•FlashPlayerLite(携帯端末用)•旧称は Macromedia Flash
2010年12月17日金曜日
アジェンダ1.アメーバピグの紹介
2.検証、Androidでピグは動くの?
3.デザインについて
4.機能の実装について
5.これからの展開と課題
3
@modeplus
2010年12月17日金曜日
http://www.cyberagent.co.jp/news/cm/
5.これからの展開と課題
4.機能の実装について
3.デザインについて
2.ワークフローについて
1.アメーバピグの紹介
CM動画
2010年12月17日金曜日
<アメーバピグの紹介> アメーバピグとは?自分ソックリなキャラクターであるピグを作れる 他のユーザーとのチャット、ゲーム等でコミュニケーションを楽しめるサービス 現在、500万人を超えるユーザー数
2010年12月17日金曜日
<アメーバピグの紹介> PC版アメーバピグ2009年2月19日サービス開始
開発体制 約50人 (デザイナー26、デベロッパー9、エンジニア9、ディレクタ運営管理8)
FlashPlayer9以上で動作
2010年12月17日金曜日
<アメーバピグの紹介> Android版アメーバピグ2010年11月1日リリース開発体制 5人 (デザイナー1、デベロッパー2、ディレクター運営管理2)
Android 2.2で動作
業務時間外でひっそりとスタート
2010年12月17日金曜日
<ワークフローについて> 効率的なワークフロー
デザイン確定後、変更や修正が多発する。デベロッパーの業務が巻き戻る。
ラフ段階からMockを作ってデザイン確認は実機でする。
開発のなやみ
解決策
2010年12月17日金曜日
<ワークフローについて> シンプルな分担
進捗進捗
仕様
デザイン
Director
企画
Developer
Flash制作
Designer
UI制作
徐々にデザインが完成
2010年12月17日金曜日
<ワークフローについて> デザインができるまで
デザインチーム確認
プロジェクトチーム確認
アートディレクター確認
プロデューサー確認
社長確認
全部クリアして晴れて開発開始!
OK!
2010年12月17日金曜日
<ワークフローについて> 今回
50名のユーザーレビュー
アイコンが見づらい
ペットを飼いたい
着せ替えできないの?
スクロールの反応が悪い
ボタンが押せない
ユーザー
目線の評価獲
得!
3、4回に分け「評価、修正」を繰り返し完成度を高める
2010年12月17日金曜日
実機で確認すると、誰でもイメージしやすい
通常の確認系統をレビュー会で補完
ユーザー評価を獲得することでデザインや操作性に問題が少ない
<ワークフローについて> ワークフローのまとめ
2010年12月17日金曜日
2. 検証、Androidでピグは動くの?
5.これからの展開と課題
4.機能の実装について
3.デザインについて
2.Androidでピグは動くのか?
1.アメーバピグの紹介
2010年12月17日金曜日
そもそも、Androidで動くの?Android 2.2から Flash Player 10.1が動くデバイスはNexus Oneを用意ブラウザでpigg.ameba.jpを確認
2010年12月17日金曜日
<デザインについて> デバイスの違い
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)
2010年12月17日金曜日
機能を絞る主要な機能をアイコン化 ボタンと文字は大きくメニューを開閉式に変更ポップアップは使わない多機能なUIを簡略化ピンチイン/アウトジェスチャーを追加
デザインをAndroid用に最適化する<デザインについて> デザインをAndroid用に最適化する
2010年12月17日金曜日
<デザインについて> ボタンのサイズと余白
使用ソフト Adobe Fierworks CS5
75px
75px
115px
115px
20px
ボタン作りで考慮すべきポイント余白は多めにとる
2010年12月17日金曜日
<機能の移植は簡単> 汎用性のある設計元々多人数で同時開発を行うためのものが、今回移植の際うまく活用できた
各viewとMainが粗結合だったので入れ替えが楽
各プロジェクトを変更しても影響が最小になるような設計
2010年12月17日金曜日
<機能の移植は簡単> 低スペックPCでも動くPC版が低スペックPCでも動くように作られていたから移植時は、パフォーマンスチューニングはしていない今後、GPUモードを試してみる
2010年12月17日金曜日
<機能の移植は簡単> AIR for Androidだから
AIRアプリとしてデスクトップ上で動く機能はほぼAndroid上で動く動作確認が楽実機を操作してのデバックもできる
2010年12月17日金曜日
<機能の移植は簡単> 実際に行った作業
AIRアプリに変換プロジェクトの再作成セキュリティ周りの対応
Android用の対応コンテキストメニューマウスホイールイベント&マウスイベントデバイスボタン&バックグラウンド処理
2010年12月17日金曜日
<機能の移植は簡単> 実際に行った作業
AIRアプリに変換プロジェクトの再作成セキュリティ周りの対応
Android用の対応コンテキストメニューマウスホイールイベント&マウスイベントデバイスボタン&バックグラウンド処理
2010年12月17日金曜日
<AIRアプリに変換> プロジェクトの再作成actionscriptプロジェクトはFlexプロジェクト(Application type>Desktop application)で再作成
ライブラリプロジェクトはFlex Library Complier > Include Adobe AIR libraries にチェックを入れる
2010年12月17日金曜日
<AIRアプリに変換> セキュリティ周りの対応Security.allowDomain()は削除
main.swfがサーバーから各viewモジュールswfを読み込み操作している
AIRだとこの方法は使えないため削除apk作成時に一緒にパッケージしてセキュリティサンドボックス内に納める
2010年12月17日金曜日
<AIRアプリに変換> セキュリティ周りの対応loadBytes() の対応各アイテム類は数が膨大なのと更新が頻繁なので一緒にパッケージはしない。AIRだとloadBytes()を使ってswfを読み込むことができないため allowCodeImportをtrueに設定
var context:LoaderContext = new LoaderContext();context.allowCodeImport = true;
2010年12月17日金曜日
<機能の移植は簡単> 実際に行った作業
AIRアプリに変換プロジェクトの再作成セキュリティ周りの対応
Android用の対応コンテキストメニューマウスホイールイベント&マウスイベントデバイスボタン&バックグラウンド処理
2010年12月17日金曜日
<Android用の対応> マウスホイールイベントタッチデバイスには無いのでタッチムーブイベントで対応
if(Multitouch.supportsTouchEvents) { addEventListener (TouchEvent.TOUCH_BEGIN, onTouchBegin); addEventListener (TouchEvent.TOUCH_MOVE, onTouchMove);}
2010年12月17日金曜日
<Android用の対応> マウスイベントマウスイベントは変更なし マウスオーバー、ロールオーバーもタップオーバーで判定ダブルクリックもダブルタップとして判定
なので、楽でしたよと感想です
2010年12月17日金曜日
<Android用の対応> デバイスボタン今回はbackボタンを無効化private function onKeyDown(event:KeyboardEvent):void { if(event.keyCode == Keyboard.BACK) { event.preventDefault(); }}
間違ってbackボタン押してアプリを閉じてしまうため
押し感のない画面とフラットなボタン
2010年12月17日金曜日
<Android用の対応> バックグランド処理
画面非表示でアプリも終了させるstage.addEventListener(Event.DEACTIVATE , onDeactivateHandler);
private function onDeactivateHandler(event:Event):void { NativeApplication.nativeApplication.exit();}
リアルタイムのコミュニケーションを行うアプリなので裏側で起動し続けるのは好ましくないため
2010年12月17日金曜日
アプリケーション設定XMLインターネット接続を許可<android>
<uses-permission android:name="android.permission.INTERNET"/>
・・・
</android>
2010年12月17日金曜日
証明書の作成証明書の有効期限は25年を指定
adt -certificate -cn pigg_android -c JP -validityPeriod 25 2048-RSA pigg_android.p12 xxxxxxxx
validityPeriodオプションが追加されたのでこれで25を指定します(デフォルトは5年)
2010年12月17日金曜日
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ってどっち?
2010年12月17日金曜日
マーケットにアップしましたが!GALAXY Sでマーケット検索ヒットしない!
<uses-configuration android:reqFiveWayNav="true"/>
5 方向ナビゲーション制御は記述しない
アプリケーション設定XML<android>タブ内のマーケットフィルタが原因
Desire、Droid2、Nexus One は問題なくアプリページに行ける
GALAXYは5方向ナビゲーションがない
2010年12月17日金曜日