2012年3月7日水曜日

AIRの採用に迷ったら「安く・速く」か?「最高のUX」か?それが問題だ

ソーシャルゲームのUI開発はAdobe AIR/Flashが主役になるか~「ADC MEETUP 04 Social Gaming」レポート(1/4)- @IT

・・・アドビシステムズ(以下、アドビ)は2月28日、開発者向けイベント「ADC MEETUP Round 04 Social Gaming」を開催・・・間もなくリリース予定のFlash Player 11.2およびAIR 3.2には、モバイル環境でもStage3Dが利用できるようになる・・・AIR 2.6で作っていた段階ではドロップシャドウやぼかし、ベベルなどのフィルタを利用するとパフォーマンスが悪くなる問題があったが、AIR 3.0にアップデートしたら解決してしまったそう・・・中野氏は、このスピードと気軽さがFlashの魅力だと語った・・・「Mobage AIR SDK」・・・「GREE Platform for Smartphone」・・・藤本氏は「HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog」の資料を引用してFlashのパフォーマンスが高いことを挙げた。その他、Flash開発者が多く人材やノウハウが生かせること、開発ツールやオーサリングツールの完成度では他の追随を許さないことなどの理由から、採用を決定したとのこと・・・AIRを使ってスマートフォン向けアプリを開発するうえでの注意点としては、メモリサイズが限られていること・・・パッケージサイズについても、AIRアプリは容量が大きくなりがち・・・Angry Birds FacebookはすべてFlashテクノロジーによって開発されている・・・

このところモバイルFlash、つまりAIRを採用することのメリット・デメリットを探っている。

HTML5に比べればまだFlashが速いことはうなずけるけど、結局ネイティブにはかなわない。しかし、今後AIRがバージョンアップすればパフォーマンスの問題は解決していくかもしれない。特に描画関連はStage3Dで劇的に速くなるのかも。

ただ、こういった技術的な事以外にもAIRを採用するメリットはある。GREEの藤本氏や中野亘氏がおっしゃるように、

・人材やノウハウが生かせる
・開発ツールやオーサリングツールの完成度が高い
・気軽さ
・開発スピードの速さ

MobageとGREE、そろってAIRを採用したのもこういった理由なのでは?と思う。特に、最後の「開発スピードの速さ」はビジネス上、相当重要なんだろうなと思う。

「安く・速く」を追求するなら、AIRはぴったりだと思う。しかし、作るアプリが「最高のUX」を追求するものであれば、どうだろう。

「安く・速く」か?「最高のUX」か?

今のところ、これがAIRを採用するかしないかの判断基準ではないかと思う。

もちろん、どちらの選択も正しい。要は、どういったアプリを作りたいかだ。



AndroidにおけるAIRアプリとネイティブアプリのメモリ使用量の差を調べる

AndroidにおけるAIRアプリとネイティブアプリの最低メモリ使用量の差を調べておきたい。

感覚的にはもちろんネイティブアプリの方が少ないだろうと思うのだけど、どれだけ違うのかをハッキリさせておきたい。

今回つくるアプリは、画面にボタンを表示するだけのアプリ。最低限の機能にすることで、より最低メモリ使用量に近い値を得たいため。実機はGalaxy Tabを使った。


まずはネイティブアプリ。APKは約13Kバイト。実行画面はこんな感じ。

メモリ使用量は?


なるほど。2.86MBか。CPUの使用率もしばらく見てたけど、ずっと0%だった。


次はAIRアプリ。「Flex モバイルプロジェクト」で作成し、Captive Runtimeなしでリリースビルドした。APKは約538KBバイト。実行画面はこんな感じ。

メモリ使用量は?

24.37MBも食っている。CPU使用率は0.33%〜0.66%を行ったり来たりして、0%になることはまれだった。何やってるんだろ?


まとめると


<ファイルサイズ>

AIRアプリはネイティブの約41倍(AIR:538KB - ネイティブ:13KB)
>AIRアプリはネイティブアプリよりもファイルサイズが大きくなる傾向


<メモリサイズ>

AIRアプリはネイティブの約8.5倍(AIR:24.37MB - ネイティブ:2.86MB)
>AIRアプリはネイティブアプリよりもより多くのメモリを消費する傾向


<CPU使用率>

AIRアプリはバックグラウンドでも微妙にCPUを食っている
>AIRアプリはネイティブアプリよりもバッテリーを消費するかもしれない傾向


やっぱり感覚は正しかった。

残念ながら、AIRアプリはいわゆる「重い」と言わざるを得ない。

2012年3月5日月曜日

Androidアプリ開発、事始め

うし。Androidアプリの開発環境を構築しよう!


1. Eclipseのダウンロードとインストール

まずはここからEclipseをダウンロードする。

Eclipse Downloads

必要なバージョンは3.6以降。エディションは

・Classic
・Java Development
・EE

のどれかが推奨されている。

System Requirements | Android Developers

どれを選ぶか迷うけど、Eclipseは後から色々機能を追加できるし、とりあえずAndroidの開発だけするつもりならClassicが軽くていいだろう、ということでClassicを選択した。

ダウンロードしたらインストール。といっても、単に解凍するだけ。自分の環境の場合、すでにいくつもEclipseがあるので「eclipse3.7.2」とリネームして/Applicationsフォルダに配置した。

念のため起動。ワークスペースの場所を聞かれる。デフォルトの「workspace」だと既存の環境とごっちゃになるので、~/Documents/AndroidDevとすることにした。

ところで、EclipseにPayPalで寄付できるようになってた。長年お世話になってるから、ここは一発、長年の感謝を込めて寄付しとこう。


2. ADTのインストール

・Eclipseを起動
・Help > Install New Software...
・右上の「Add」クリック
・「Add Repository」ウィンドウで「Name」に「ADT Plugin」、「Location」に「https://dl-ssl.google.com/android/eclipse/」を設定して「OK」
・「Work with」が「ADT Plugin - https://dl-ssl.google.com/android/eclipse/」になっていることを確認
・下のテーブルで「Name」の列に「pending...」と表示される
・しばらく待つ(これが相当時間かかった)と「Developer Tools」が出てくるのでチェックして「Next」
・「Install Details」で4項目出てくることを確認して、さらに「Next」
・「Review Licenses」で3項目出てくる。「Apache License」項目に対して「I accept...」をチェックして「Finish」(その他の項目はApacheのを「I accept...」すると自動的にチェックが入る)
・インストールが開始される。途中「Security Warning」が出るけど、もちろん「OK」
・「Restart Now」

Eclipseから自動インストールできなかった場合に備えて、手動インストールの方法も書いてあった。あまりにも遅いので、手動でやろうかと考えたくらいだ。

ADT Plugin for Eclipse | Android Developers


3. Android SDKのインストール

・Eclipseが再起動されると「Welcome to Android Development」ウインドウが表示される
・「Install new SDK」チェック
・「Install the latest available version of....」チェック
・「Target Locations」は「/Applications/eclipse3.7.2/android-sdks」とした
・「Contribute Usage Statistics?」はどっちでもいいけど「Yes」をチェックで協力することにして「Finish」
・コンソールに何やら色々とFetchしている様子が出る(これも結構時間かかる)
・「Choose Package to Install」のウインドウが出る
・3項目選べるけど「SDK Platform Android 4.0.3...」をインストールするために他の2項目が必要なようなので、「Accept All」して「Install」
・コンソールに何やら色々やってる様子が出る(これも結構時間かかる)


4. Android SDKの追加コンポーネントをインストール

以上のインストール作業では最新の4.0.3での開発環境しか入らないようだ。しかし、自分の場合は2.2以上の開発環境も必要なので、追加コンポーネントをインストールする。

・Window > Android SDK Manager
・しばらく待つとインストールできるもののリストが出てくる(要辛抱)
・Android 2.2 (API 8)より上の項目をチェック(「Tools」以外)して「Install Packages...」
・「Choose Package to Install」のウインドウが出るので「Accept All」して「Install」

SDK Managerはどうも不安定らしく、リストをロードするたびに違うリストになることもあった。最低でもそれぞれのバージョンで「SDK Platform」が含まれているかどうかは確認する必要がある。足りないものは後でチェックして、「もしあったら入れる」、的な(^^);

ダウンロード速度はマジで遅いので辛抱が必要。途中で「MOTODEV」「htcdev」がどうのこうの言ってIDとPWを聞かれた。「Cancel」。モトローラやHTCの機体用のエミュレータの何かじゃなかろうか?と思ったけどGoogle APIのアイコンと同じなので独自APIか何かかも。

アカウントを持っていない場合は、モトローラ関連とHTC関連はチェック外しといた方が良さそうだ。


5. 「Hello Android」してみる・・・ためにAVD作成

SDKがちゃんとインストールできたかどうかを確認するには、やはり歴史的に「Hello World」すべきだろう。

Hello, World | Android Developers

始めはエミュレーター、Android Virtual Device (AVD)を作らなければならないらしい。

・Window > AVD Manager
・「Android Virtual Device Manager」ウインドウが出る
・「New」
・「Create new Android Virtual Device」ウインドウが出る
・「Name」に「Android_2_2」、「Target」は「Android 2.2 API Level 8」として「Create AVD」


6. Androidプロジェクト作成

・File > New > Project
・「New Project」ウインドウが出る
・「Android」フォルダから「Android Project」を選択して「Next」
・「Project Name」を「HelloAndroid」として「Next」
・「Build Target」の選択。デフォルト選択は「Android 4.0.3」。ここは「Android 2.2」を選択して「Next」
・「Package Name」を「jp.helloandroid」(テキトー)として「Finish」
・左の「Package Explorer」に「HelloAndroid」プロジェクトができる


7. Activityを初編集

・HelloAndroid/src/jp.helloandroid/HelloAndroidActivity.javaを開く

これにTextViewを追加する。最後のsetContentView()でtvをセットするところがポイント。

package jp.helloandroid;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class HelloAndroidActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView tv = new TextView(this);
        tv.setText("Hello Android");
        setContentView(tv);
    }
}


8. 実行!

・Run > Run
・「Run As」ウインドウが出る
・「Android Application」を選択して「OK」
・Androidのエミュレーターが立ち上がる(しばらく、いや結構待つ。OSが立ち上がる感じ。)
・出た


エミュは実行しっ放しでいいらしい。


という訳で、以上。どうやら、ちゃんと開発できるようになったらしい。


NOTE. Android Developpersサイトは日本語があっても英語基本で

これからAndroidアプリ開発の総本山へと何度となく逝くことになるだろう。

Android Developers

ご丁寧にも日本語版があるようだけど、毎度のことながら使い物にならない。「Android 2.0 の最新バージョンが公開されました」っていつの話だ?(^^);

英語のままあたるのが吉。



2012年3月2日金曜日

現状でのモバイルFlash開発は、残念ながら「Painである」と言わざるを得ない

例えば、モバイルFlashではListアイテムのドラッグ&ドロップはサポートされない_| ̄|○

まず、ドキュメントにそう書いてある。

spark.components.List - Adobe® Flash® Platform 用 ActionScript® 3.0 リファレンスガイド

・・・
dragEnabled プロパティ
・・・
interactionMode が touch に設定されているモバイルデバイスでは、ドラッグ&ドロップがサポートされていません。
・・・

マジかよ?と思って、このようにやってみた。

/**
 * アカウント並べ替えボタンクリック時
 * 
 */
protected function onClickBtnOrganizeAccount():void {
    trace("onClickBtnOrganizeAccount() w=" + listAccount.width + " h=" + listAccount.height);
    currentState = "organize";
    listAccount.setStyle("interactionMode", "mouse");
    listAccount.dragEnabled = true;
    listAccount.dragMoveEnabled = true;
    listAccount.dropEnabled = true;
    listAccount.itemRenderer = new ClassFactory(AccountSortItemRenderer);
}


/**
 * アカウント並べ替え終了ボタンクリック時
 * 
 */
protected function onClickBtnOrganizeDone():void {
    trace("onClickBtnOrganizeDone() w=" + listAccount.width + " h=" + listAccount.height);
    currentState = "default";
    listAccount.setStyle("interactionMode", "touch");
    listAccount.dragEnabled = false;
    listAccount.dragMoveEnabled = false;
    listAccount.dropEnabled = false;
    listAccount.itemRenderer = new ClassFactory(AccountItemRenderer);
}


このようにすれば、リストアイテムのドラッグ&ドロップはモバイルでもできる。しかし、痛い問題が。

interractionModeがtouchの時の右端の表示はこう。


mouseの時はこう。


つまり、interractionModeをmouseにすると右端にスクロールバーが出るべき数ピクセルが確保されてしまうのでカッコ悪いことに。

これには百歩譲って目をつぶるとしても、マウスカーソルが出るのは許せん!

上のキャプチャはMac上で動作させたものだが、iOSでもAndroidでも同様にマウスカーソルが表示されることを確認した。

要するに、アイテムのソートをサポートしなければならないリストとしては、spark.components.Listは使い物にならない。となると、自分で実装するほかないだろう・・・


現状のモバイルFlashは、こういった残念なことがまだ色々とあるなと痛感している。

例えば、ラジオボタンはなぜか当たり判定が大きすぎて使い物にならず、結局自分で作ってしまった。

また、モバイルFlashは遅くてViewの切り替えに時間がかかりすぎるので、Viewの切り替えが完了してからコンポーネントを追加するという、コンポーネントの遅延作成処理をする必要もあった。

さらには、コンポーネントの話ではないけれど、registerClassAlias()が使えないっぽいこととかも・・・
琴線探査: モバイルFlashではregisterClassAlias()が使えない?

最悪なのは、iOSへアプリをデプロイするのが手動であること_| ̄|○


こうなるとやはり・・・結局、最高のパフォーマンスを発揮でき、まともなコンポーネントや開発環境が揃っているネイティブ言語で開発したほうが、変なところで苦労する時間を減らせるのではないか?結局その方が早いのでは?と思ってしまう。

今年中にはモバイルFlashもかなり速くなりそうだけど、十分なパフォーマンを確保できるようになるだろうか。

琴線探査: モバイルのFlashは速度的にまだまだだけど、今年中にもある程度速くなりそうか?

また、今後のSDKのバージョンアップでコンポーネントの完成度も上がっていくだろうか。


残念ながら、現状でのモバイルFlash開発は「Painである」と言わざるを得ないと感じている。

やはり、マルチプラットフォームにおけるソフトウェア開発に対する「Pain Killer」は永遠に処方されないのか。



I DO want ペイン!ぺいんン!キラー!キラーァ!

もし1年後もこの状況が改善されていなければ、恐らくFlashプラットフォームは徐々に力を失っていくのだろうなとも感じている。

しかし、こういった問題が解決されれば、Flashのモバイルアプリ開発効率は相当なものだ。

1年後には是非、そういう状況になっていることを切に願いたい。

Googleアカウントをログアウトするには?

自分でも普通はこんなアホみたいな事は考えないけれど、プログラマティークにやるとなると考える必要がある。

とにかくログアウトして、Googleのトップページに行くとすると、AS3的にはこんな感じだろうか。

var url:String = "http://www.google.com"
url = "http://www.google.com/accounts/Logout?continue=" + escapeMultiByte(url);

でも、この方法はログアウトして次のページに行くまでに遅い気がする。

もう少し速くログアウトする方法はないだろうか・・・