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