1204 fitc2010
-
Upload
nobuhito-kiritooshi -
Category
Documents
-
view
2.164 -
download
2
Transcript of 1204 fitc2010
~Air for Android で簡単にアプリつくれます!~
1
アメーバピグ for Androidができるまで
資料アップ先お知らせします@modeplus
2010年12月4日土曜日
アジェンダ1.アメーバピグの紹介
2.検証、Androidでピグは動くの?
3.デザインについて
4.機能の実装について
5.これからの展開と課題
2
資料アップ先お知らせします@modeplus
2010年12月4日土曜日
1.アメーバピグの紹介
5.これからの展開と課題
4.機能の実装について
3.デザインについて
2.ワークフローについて
1.アメーバピグの紹介
2010年12月4日土曜日
<アメーバピグの紹介> アメーバピグとは?自分ソックリなキャラクターであるピグを作れる 他のユーザーとのチャット、ゲーム等でコミュニケーションを楽しめるサービス 現在、500万人を超えるユーザー数
2010年12月4日土曜日
<アメーバピグの紹介> アメーバピグとは?自分ソックリなキャラクターであるピグを作れる 他のユーザーとのチャット、ゲーム等でコミュニケーションを楽しめるサービス 現在、500万人を超えるユーザー数
2010年12月4日土曜日
<アメーバピグの紹介> PC版アメーバピグ2009年2月19日サービス開始
開発体制 約50人 (デザイナー26、デベロッパー9、エンジニア9、ディレクタ運営管理8)
FlashPlayer9以上で動作
2010年12月4日土曜日
<アメーバピグの紹介> Android版アメーバピグ2010年11月1日リリース開発体制 5人 (デザイナー1、デベロッパー2、ディレクター運営管理2)
Android 2.2で動作
業務時間外でひっそりとスタート
2010年12月4日土曜日
ワークフロー
開発期間 1ヶ月半
業務時間外で
2010年12月4日土曜日
<ワークフローについて> 効率的なワークフロー
デザイン確定後、変更や修正が多発する。デベロッパーの業務が巻き戻る。
ラフ段階からMockを作ってデザイン確認は実機でする。
開発のなやみ
解決策
2010年12月4日土曜日
<ワークフローについて> 初期のモック
これで確認を進めます
2010年12月4日土曜日
<ワークフローについて> 初期のモック
これで確認を進めます
2010年12月4日土曜日
<ワークフローについて> シンプルな分担
DirectorDeveloper Designer
最小人数だからこそ
役割は明確に
2010年12月4日土曜日
<ワークフローについて> シンプルな分担
2010年12月4日土曜日
<ワークフローについて> シンプルな分担
進捗進捗
仕様
デザイン
Director
企画
Developer
Flash制作
Designer
UI制作
2010年12月4日土曜日
<ワークフローについて> シンプルな分担
進捗進捗
仕様
デザイン
Director
企画
Developer
Flash制作
Designer
UI制作
徐々にデザインが完成
2010年12月4日土曜日
<ワークフローについて> チェックについて
誰に確認をとるのか?
2010年12月4日土曜日
<ワークフローについて> デザインができるまで
デザインチーム確認
プロジェクトチーム確認
アートディレクター確認
プロデューサー確認
社長確認
2010年12月4日土曜日
<ワークフローについて> デザインができるまで
デザインチーム確認
プロジェクトチーム確認
アートディレクター確認
プロデューサー確認
社長確認
全部クリアして晴れて開発開始!
OK!
2010年12月4日土曜日
<ワークフローについて> 通常
五人の責任者
プロジェクトチームリーダー
デザインチームリーダー
クリエイティブディレクター
アートディレクター社長 改革!
2010年12月4日土曜日
今回は違う方法をとりました。
2010年12月4日土曜日
<ワークフローについて> 今回
50名のユーザーレビュー
アイコンが見づらい
ペットを飼いたい
着せ替えできないの?
スクロールの反応が悪い
ボタンが押せない
ユーザー
目線の評価獲
得!
3、4回に分け「評価、修正」を繰り返し完成度を高める
2010年12月4日土曜日
実機で確認すると、誰でもイメージしやすい
通常の確認系統をレビュー会で補完
ユーザー評価を獲得することでデザインや操作性に問題が少ない
<ワークフローについて> ワークフローのまとめ
2010年12月4日土曜日
2. 検証、Androidでピグは動くの?
5.これからの展開と課題
4.機能の実装について
3.デザインについて
2.Androidでピグは動くのか?
1.アメーバピグの紹介
2010年12月4日土曜日
そもそも、Androidで動くの?Android 2.2から Flash Player 10.1が動くデバイスはNexus Oneを用意ブラウザでpigg.ameba.jpを確認
2010年12月4日土曜日
結果
動きますが、操作が難しい
2010年12月4日土曜日
操作が難しいアドレスバーが邪魔ボタン小さすぎて押せないチャットするとキーボードが閉じない
2010年12月4日土曜日
解消のため、いろいろやってみました
フルスクリーンモード jsポップアップ
どれも、問題解決にならず
2010年12月4日土曜日
そこで
AIR for Androidで作り直し
2010年12月4日土曜日
AIR for Androidで移植した感想
機能の移植は簡単!!なので
デザインにこだわります
2010年12月4日土曜日
3.デザインについて
5.これからの展開と課題
4.機能の実装について
3.デザインについて
2.Androidでピグは動くのか?
1.アメーバピグの紹介
2010年12月4日土曜日
<デザインについて> デバイスの違い
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月4日土曜日
<デザインについて> 画面サイズ
480px
800px使用ソフト Adobe Fierworks CS5
2010年12月4日土曜日
<デザインについて> デザインをAndroid用に最適化する
表示するものは
少なく大きく
2010年12月4日土曜日
機能を絞る主要な機能をアイコン化 ボタンと文字は大きくメニューを開閉式に変更ポップアップは使わない多機能なUIを簡略化ピンチイン/アウトジェスチャーを追加
デザインをAndroid用に最適化する<デザインについて> デザインをAndroid用に最適化する
2010年12月4日土曜日
<デザインについて> PCピグのボタン数
2010年12月4日土曜日
<デザインについて> Androidピグのボタン数
9つの機能に絞った
2010年12月4日土曜日
チャット
アクション
来訪アラーム
ツール
<デザインについて> 主要機能のアイコン化
2010年12月4日土曜日
<デザインについて> ボタンの位置決め
ピグの世界はクオータービュー
2010年12月4日土曜日
<デザインについて> ボタンの位置決め
Androidでのトレースイメージ
2010年12月4日土曜日
<デザインについて> ボタンの位置決め
必然的に四隅に隙間ができる
2010年12月4日土曜日
<デザインについて> ボタンの位置決め
ここに最も重要な要素を配置
メニュー
アクション
きたよ
ちゃっと
2010年12月4日土曜日
配置
2010年12月4日土曜日
配置
2010年12月4日土曜日
<デザインについて> 実際のイメージ
使用ソフト Adobe Fierworks CS5
2010年12月4日土曜日
ボタンのタテ配置は間隔を十分とる。指の先でミスタッチする可能性が高い。
<デザインについて> 配置での注意点
×ヨコ配置 タテ配置
2010年12月4日土曜日
<デザインについて> 文字とボタンを大きく
2010年12月4日土曜日
<デザインについて> 文字とボタンを大きく
2010年12月4日土曜日
<デザインについて> ボタンのサイズと余白
使用ソフト Adobe Fierworks CS5
75px
75px
115px
115px
20px
ボタン作りで考慮すべきポイント余白は多めにとる
2010年12月4日土曜日
<デザインについて> リストの縦幅
リストの縦幅はアイコンと同じ75px
75px
使用ソフト Adobe Fierworks CS5
2010年12月4日土曜日
<デザインについて> 既存ボタンのリサイズ
使用ソフト Adobe Fierworks CS5
2010年12月4日土曜日
<デザインについて> 既存ボタンのリサイズ解像度の違いによるリサイズ
使用ソフト Adobe Fierworks CS5
2010年12月4日土曜日
<デザインについて> 既存ボタンのリサイズ
PC 解像度の違いによるリサイズ
使用ソフト Adobe Fierworks CS5
2010年12月4日土曜日
<デザインについて> 既存ボタンのリサイズ
PC
Android
解像度の違いによるリサイズ
使用ソフト Adobe Fierworks CS5
2010年12月4日土曜日
<デザインについて> メニューを開閉式にした
2010年12月4日土曜日
<デザインについて> メニューを開閉式にした
2010年12月4日土曜日
<デザインについて> メニューを開閉式にした
2010年12月4日土曜日
<デザインについて> メニューを開閉式にした
2010年12月4日土曜日
<デザインについて> メニューを開閉式にした
2010年12月4日土曜日
<デザインについて> ウィンドウを使わないようにした
2010年12月4日土曜日
<デザインについて> ウィンドウを使わないようにした
2010年12月4日土曜日
3. デザインを最適化する
<デザインについて> ウィンドウを使わないようにした
2010年12月4日土曜日
<デザインについて> ウィンドウを使わないようにした
2010年12月4日土曜日
<デザインについて> ウィンドウを使わないようにした
2010年12月4日土曜日
<デザインについて> ウィンドウを使わないようにした
2010年12月4日土曜日
<デザインについて> 多機能なUIを簡略化
2010年12月4日土曜日
<デザインについて> 多機能なUIを簡略化
2010年12月4日土曜日
<デザインについて> 多機能なUIを簡略化
2010年12月4日土曜日
<デザインについて> 多機能なUIを簡略化
2010年12月4日土曜日
<デザインについて> 多機能なUIを簡略化
2010年12月4日土曜日
<デザインについて> ピンチイン/アウトジェスチャーを追加した
2010年12月4日土曜日
<デザインについて> ピンチイン/アウトジェスチャーを追加した
2010年12月4日土曜日
<デザインについて> ピンチイン/アウトジェスチャーを追加した
2010年12月4日土曜日
<デザインについて> ピンチイン/アウトジェスチャーを追加した
2010年12月4日土曜日
<デザインについて> ピンチイン/アウトジェスチャーを追加した
2010年12月4日土曜日
<デザインについて> ピンチイン/アウトジェスチャーを追加した
2010年12月4日土曜日
4.機能の実装について
5.これからの展開と課題
4.機能の実装について
3.デザインについて
2.Androidでピグは動くのか?
1.アメーバピグの紹介
2010年12月4日土曜日
開発環境
• Flash Builder4• AIR SDK 2.5• AndroidSDK• Nexus One
※開発開始の9月時点での環境
2010年12月4日土曜日
AIR for Androidで移植した感想
機能の移植は簡単!!
2010年12月4日土曜日
なぜ、機能の移植は簡単なのか?汎用性のある設計元々、低スペックPCでも動くAIR for Androidだから
2010年12月4日土曜日
<機能の移植は簡単> 汎用性のある設計元々多人数で同時開発を行うためのものが、今回移植の際うまく活用できた
各viewとMainが粗結合だったので入れ替えが楽
各プロジェクトを変更しても影響が最小になるような設計
2010年12月4日土曜日
<機能の移植は簡単> 汎用性のある設計変更の範囲
2010年12月4日土曜日
<機能の移植は簡単> 各viewモジュールの変更おでかけリスト
PC Android
2010年12月4日土曜日
<機能の移植は簡単> 各viewモジュールの変更プロフィール
PC
Android
2010年12月4日土曜日
<機能の移植は簡単> 各viewモジュールの変更ピグとも
PC
Android
2010年12月4日土曜日
<機能の移植は簡単> 各viewモジュールの変更部屋
PC Android
2010年12月4日土曜日
<機能の移植は簡単> 低スペックPCでも動くPC版が低スペックPCでも動くように作られていたから移植時は、パフォーマンスチューニングはしていない今後、GPUモードを試してみる
2010年12月4日土曜日
<機能の移植は簡単> AIR for Androidだから
AIRアプリとしてデスクトップ上で動く機能はほぼAndroid上で動く動作確認が楽実機を操作してのデバックもできる
2010年12月4日土曜日
<機能の移植は簡単> 実際に行った作業
AIRアプリに変換プロジェクトの再作成セキュリティ周りの対応
Android用の対応コンテキストメニューマウスホイールイベント&マウスイベントデバイスボタン&バックグラウンド処理
2010年12月4日土曜日
<機能の移植は簡単> 実際に行った作業
AIRアプリに変換プロジェクトの再作成セキュリティ周りの対応
Android用の対応コンテキストメニューマウスホイールイベント&マウスイベントデバイスボタン&バックグラウンド処理
2010年12月4日土曜日
<AIRアプリに変換> プロジェクトの再作成actionscriptプロジェクトはFlexプロジェクト(Application type>Desktop application)で再作成
ライブラリプロジェクトはFlex Library Complier > Include Adobe AIR libraries にチェックを入れる
2010年12月4日土曜日
<AIRアプリに変換> セキュリティ周りの対応Security.allowDomain()の削除loadBytes() の対応
2010年12月4日土曜日
<AIRアプリに変換> セキュリティ周りの対応Security.allowDomain()は削除
main.swfがサーバーから各viewモジュールswfを読み込み操作している
AIRだとこの方法は使えないため削除apk作成時に一緒にパッケージしてセキュリティサンドボックス内に納める
2010年12月4日土曜日
<AIRアプリに変換> セキュリティ周りの対応loadBytes() の対応各アイテム類は数が膨大なのと更新が頻繁なので一緒にパッケージはしない。AIRだとloadBytes()を使ってswfを読み込むことができないため allowCodeImportをtrueに設定
var context:LoaderContext = new LoaderContext();context.allowCodeImport = true;
2010年12月4日土曜日
<機能の移植は簡単> 実際に行った作業
AIRアプリに変換プロジェクトの再作成セキュリティ周りの対応
Android用の対応コンテキストメニューマウスホイールイベント&マウスイベントデバイスボタン&バックグラウンド処理
2010年12月4日土曜日
<Android用の対応> コンテキストメニューAndroid上で実行時にエラーになるためコンテキストメニューをカスタマイズしている場合は削除
2010年12月4日土曜日
<Android用の対応> マウスホイールイベントタッチデバイスには無いのでタッチムーブイベントで対応
if(Multitouch.supportsTouchEvents) { addEventListener (TouchEvent.TOUCH_BEGIN, onTouchBegin); addEventListener (TouchEvent.TOUCH_MOVE, onTouchMove);}
2010年12月4日土曜日
<Android用の対応> マウスイベントマウスイベントは変更なし マウスオーバー、ロールオーバーもタップオーバーで判定ダブルクリックもダブルタップとして判定
なので、楽でしたよと感想です
2010年12月4日土曜日
<Android用の対応> デバイスボタン今回はbackボタンを無効化private function onKeyDown(event:KeyboardEvent):void { if(event.keyCode == Keyboard.BACK) { event.preventDefault(); }}
間違ってbackボタン押してアプリを閉じてしまうため
押し感のない画面とフラットなボタン
2010年12月4日土曜日
<Android用の対応> バックグランド処理
画面非表示でアプリも終了させるstage.addEventListener(Event.DEACTIVATE , onDeactivateHandler);
private function onDeactivateHandler(event:Event):void { NativeApplication.nativeApplication.exit();}
リアルタイムのコミュニケーションを行うアプリなので裏側で起動し続けるのは好ましくないため
2010年12月4日土曜日
パブリッシュアイコン作成
アプリケーション設定XML
証明書の作成
apk作成
マーケットにアップしましたが!
2010年12月4日土曜日
アイコン作成72px × 72px を用意
2010年12月4日土曜日
アプリケーション設定XMLインターネット接続を許可<android>
<uses-permission android:name="android.permission.INTERNET"/>
・・・
</android>
2010年12月4日土曜日
証明書の作成証明書の有効期限は25年を指定
adt -certificate -cn pigg_android -c JP -validityPeriod 25 2048-RSA pigg_android.p12 xxxxxxxx
validityPeriodオプションが追加されたのでこれで25を指定します(デフォルトは5年)
2010年12月4日土曜日
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月4日土曜日
実機にインストール
adb install -r pigg_air.apk
adbで実機にインストール
Android Debug Bridge
adb
2010年12月4日土曜日
マーケットにアップしましたが!GALAXY Sでマーケット検索ヒットしない!
<uses-configuration android:reqFiveWayNav="true"/>
5 方向ナビゲーション制御は記述しない
アプリケーション設定XML<android>タブ内のマーケットフィルタが原因
Desire、Droid2、Nexus One は問題なくアプリページに行ける
GALAXYは5方向ナビゲーションがない
2010年12月4日土曜日
5.これからの展開と課題
5.これからの展開と課題
4.機能の実装について
3.デザインについて
2.Androidでピグは動くのか?
1.アメーバピグの紹介
2010年12月4日土曜日
これから
まだ実装していない機能を追加Androidだからできる機能を追加AmebaPicoにも展開
2010年12月4日土曜日
課題
今後増えてくる画面サイズへの対応 PC版とのソース管理正式なチームビルド
2010年12月4日土曜日
ご清聴ありがとうございました。
資料アップ先お知らせします@modeplus
2010年12月4日土曜日