Adobe MAX 2010 RETWEET - アメーバピグ for Android の作り方

アメーバピグ for Android の作り方

プレゼンテーション資料 : 1125MaxRetweet.pdf

「アメーバピグ for Android」の開発について説明する
株式会社サイバーエージェント切通伸人氏

「アメーバピグ for Android」のデザインについて説明する
株式会社サイバーエージェント浦野大輔氏

1 新しいソーシャルの形、アメーバピグ

日本で人気のあるソーシャルネットワークサービスのひとつに、株式会社サイバーエージェントの提供しているアメーバピグがある。アバターと呼ばれる自分のかわりとなるキャラクターを作成して、仮想空間でチャットやゲームなどを楽しむことができるサービスだ。WebブラウザとFlash Playerがあればよく、多くのユーザがサービスを楽しんでいる。

アメーバピグでは自分の部屋が割り当てられており、活動することで得られるポイントを使って家具を取得したり衣類やアイテムを手に入れることができる仕組みになっている。使えば使うほど自分らしさを表現できるようになっているわけだ。可愛いキャラクター、アバターの細かい設定、数多くの仮想空間、サクサクとした操作感、ミニゲームの面白さなど、今もっとも熱いソーシャルネットワークサービスのひとつだ。

図1.1 アメーバピグの使用例

アメーバピグのユーザはすでに500万人をこえている。サービスが開始されたのは2009年2月19日だから、2年経たずにこのユーザ数を獲得したことになる。アメーバピグの開発体制は約50人。開発者9名、エンジニア9名、ディレクタ運営管理が8名、残り26名をデザイナがしめている。Flash Playerのバージョン9以上に対応しているほか、低スペックのPCでも動作するように設計されているという特徴がある。

2 Androidへ移植されたアメーバピグ、きっかけはAndroid 2.2とFlash 10.1

2010年11月1日、このアメーバピグをAndroidへ最適化させたアメーバピグアプリ「アメーバピグ for Android」が公開された。Android 2.2を対象としている。営業時間外にひっそりと開始されたプロジェクトで、なんと開発体制は5名という小ささだ。開発者2名、ディレクタ運営管理2名、デザイナ1名という構成になっている。

Android向けのアメーバピグ開発は、Android 2.2においてFlash Player 10.1が動作するようになったことが発端になっていると説明があった。Flash 10.1が動作するようになったというから使ってみたら、最終的にはアプリ開発へ繋がっていったというわけだ。

最初のAndroidアメーバピグテストはNexus Oneで実施されたという。Nexus Oneに搭載されているブラウザからアメーバピグのサービスにアクセスして動作を確認。驚いたことに、アメーバピグはPCで閲覧するのと同じようにNexus Oneからも閲覧できたという。Android向けFlash 10.1の完成度の良さをそこに見ることができる。

しかし、実際に利用してみると次のような懸念点が浮上してきたという。これではAndroidユーザに申し訳ないということで、アプリケーションとしてのアメーバピグ for Androidの開発へつながっていく。

• アドレスバーが邪魔になる。画面が小さいので致命的なスペースの消失になっている。
• ボタンが小さくてタッチスクリーンではうまく扱えない。
• チャットするとキーボードが閉じてくれない。

Adobe AIRでアプリ開発を検討する前に、ブラウザベースのままでこうした問題を解消すべくいろいろ取り組んだという。しかしどれも解決にならず、最終的にAdobe AIR 2.5を使ってAndroidアプリとして開発することになった。そしてこれも驚いたことに、移植そのものは数日で終わるようなとても簡単なものだったということだ。

3 Androidに適したデザインへ変更する

移植そのものが簡単に終わったため、アメーバピグ for Androidの開発の重きはデザインに置かれたと浦野大輔氏から説明があった。PCとスマートフォンの大きな違いは、なんといってもスクリーンの解像度とサイズにある。このため、PCのスクリーンサイズと解像度を前提としたデザインは、スマートフォンでは小さく扱いにくいものになりがちだ。さらに、PCではマウスとキーボードを使って操作するところが、タッチスクリーンでは指による操作になる。このことも、PCを前提にして開発されたアプリケーションがそのままではスマートフォンで扱いにくい原因になっているという。

表3.1

	PC(アメーバピグ推奨環境)	Androidのデバイスサンプル
スクリーン解像度	1024x768以上	800x480, 854x480
スクリーンサイズ	11インチ以上	3.7〜4.0インチ
入力UI	マウス, キーボード	マルチタッチスクリーン, 加速度センサ, カメラ, マイク, GPS, キーボード

こうした違いを加味して、次のようにアメーバピグのデザイン変更を実施したという。

• 画面の向きをあえて横長に固定。
• ボタンと文字を操作しやすく、また読みやすいように大きく変更。
• 少しでも画面を大きく使うためにメニューを開閉式にして常時隠れるように変更。
• 機能はアイコン化してシンプル化。
• スクリーンサイズ的に扱いにくくなるのでポップアップは使わないように変更。
• 多機能なUIは簡略化を実施。
• マルチタッチスクリーンでよく使われるピンチインとピンチアウトに対応。

ボタンと文字を操作しやすく、読みやすいように大きく変更

図3.2 Adobe MAX 2010 RETWEET発表資料から抜粋

図3.3 Adobe MAX 2010 RETWEET発表資料から抜粋

メニューを開閉式にして常時隠れるように変更

図3.4 Adobe MAX 2010 RETWEET発表資料から抜粋

図3.5 Adobe MAX 2010 RETWEET発表資料から抜粋

機能はアイコン化してシンプルに

図3.6 Adobe MAX 2010 RETWEET発表資料から抜粋

ポップアップは使わないように変更

図3.7 Adobe MAX 2010 RETWEET発表資料から抜粋

図3.8 Adobe MAX 2010 RETWEET発表資料から抜粋

多機能なUIは簡略化を実施

図3.9 Adobe MAX 2010 RETWEET発表資料から抜粋

図3.10 Adobe MAX 2010 RETWEET発表資料から抜粋

実際にGALAXY Sでアメーバピグ for Androidを操作してみると、これら工夫がうまくいっていることを実感できる。指で扱いやすく、スマートフォンでPCと同じアプリが動作していることに驚きを覚える。

4 移植そのものは数日で完了、あとは細かい機能対応

アメーバピグ for Androidの開発に使われたのは次の開発環境と実機だと説明があった。現在最新の開発版ではなく、開発当時のリリース版を使っていることになる。

• Flash Builder 4
• AIR SDK 2.5
• Android SDK
• Nexus One

そして、機能の移植自体はとても簡単だったと、開発を担当した切通伸人氏は説明する。移植そのものは、それこそ数日レベルで完了する内容だったという。移植がこれほど簡単だった理由として次の項目が挙げられた。

• 複数の開発者やデザイナと共同で開発できるようにあらかじめ汎用性の高い設計を採用してあったので、ビューの変更以外はそのまま利用することが可能だった。
• もともとの設計で低スペックPCでも動作するように工夫されていたので、スマートフォンでの動作にも問題がなかった。
• AIR for Androidを使ったことで苦労することなく自動的に変換できた。PCでのシミュレーションも実機でのテストもできて開発効率がよかった。

移植時に特にパフォーマンスチューニングは実施していないということだ。Androidのハードウェアレンダリング機能すら使っていない状態だという。今後の開発でH/Wアクセラレーションを活用するように開発を検討しているとのことで、今後は今以上に軽快に動作することになりそうだ。

Androidへの移植は、具体的にはActionScriptプロジェクトとして作成していたものをFlexプロジェクトとして再作成するというものだったという。Security.allowDomain()などAIRアプリに変換することで機能しなくなる処理がいくつかあるため、そうした処理を削除したり、ほかの機能への置き換えを実施したという。さらにコンテキストメニューのカスタマイズを実施したり、イベント周りの対応を実施したりという作業を実施したと紹介があった。これら開発はスマートフォンやタブレットデバイスへの対応を進めたFlexフレームワーク"Hero"やFlash Builder "Burrito"を使っていない状態で実施されているため、こうした最新版を使えばさらに開発は簡単になっていたとみられる。

5 マーケットにアップするときの注意

切通氏からは、証明書を用意してプロダクト版をビルドし、最終的にマーケットに登録したものの、GALAXY Sでマーケット検索にヒットしないという問題がでたことが注意として紹介された。Desire、Droid2、Nexus Oneでは問題なくアプリがチェックできるものの、GALAXY Sからは検索してもアメーバピグ for Androidを見つけることができなかったという。

これは5方向ナビゲーションがGALAXY Sには搭載されていないことが原因だったという。5方向ナビゲーションを使うという指定を加えてあったため、GALAXY Sではそれに該当しないとして検索にヒットしなかったというわけだ。この指定項目を削除して更新したあとには、GALAXY Sでも検索にヒットするようになっている。アメーバピグ for Androidの場合みならず、対応するデバイスが多岐にわたるAndroidアプリケーションならではの注意点といえそうだ。

6 アメーバピグ for Android、今後の課題

アメーバピグ for Androidの今後の課題として、次の項目が挙げられていた。

• 増えてくるであろう多種多様なスクリーンサイズへの対応。
• PC版とのソースコード管理のよりよい統合。
• アップデート版をユーザにすばやく提供する方法の模索。
• 未実装の機能の開発。
• Androidならではの機能の開発。
• AmebaPicoに対しても同様のサービスを展開。

新しいフレームワークや新しい開発環境の提供している機能を活用してアメーバピグ for Androidを開発した場合、現在のアプリよりもレンダリング性能の向上が期待できそうだ。

7 Flash技術からAIR、マルチデバイス、マルチスクリーンへの対応

アメーバピグのAndroidへの移植は、FlashやAIRが得意とする技術展開の好例といる。Flashのなんといってもの利点は、すでに多種多様なプラットフォームやデバイスに対応し、そして開発環境が充実している点にある。すでにFlashでWebアプリケーションとして提供しているコンテンツは、あまり手間をかけずにスマートフォンやタブレットにアプリケーションとして提供できるようになるというわけだ。

PC向けに開発されたアメーバピグがNexus Oneからそのまま使えたという話にも驚くが、AIRを使った移植作業も数日レベルだったというのも驚きの事実だ。アメーバピグは500万人のユーザを抱える巨大なソーシャルサービス。このサービスをAndroidへ移植するのに、移植そのものは数日しかかからなかったというのは、FlashやAIRの優れた移植性を示す例といえる。労力の多くをデザインに向けたということからもわかるように、FlashやAIRの技術を活用することで移植作業そのものにかける労力を減らし、ユーザの体感を左右することになるデザイン部分に注力できることは大きな利点といえる。