Flashクリエイターが買うべきAIR for Android/Packager for iPhone/BlackberryOS開発用端末

2011/2/23時点の記事です。

スマートフォンやタブレット開発でおすすめ開発端末を紹介したいと思います。

自分で作ったプログラムはエミュレータより、実機で確認したいですよね。AIR for Android やPackager for iPhoneを確認する上で推奨される開発端末一覧です。これだけ買うとお金足りませんが。。。。

nexus one(Froyo 2.2)

google 謹製のHTC製端末。ほとんどのAndroid開発者はこれをもってます。最新アップデートが一番最初に配信される端末として一世を風靡しましたが、いまはもう過去の端末になりつつあります。スペック的に見ればこれよりも低い端末はたくさんありますが、これで動いていればある程度安心出来ると思います。日本未発売なので通販サイトや個人輸入の必要があります。

nexus s (GingerBread 2.3)

Nexus Oneの後継機と呼ばれているsamsung製でGingerBreadのマルチカメラサポート、NFCをハードレベルでサポートしている端末です。これから買う人はこれでもいいかもしれません。ただ、端末はチープな感じですが、軽くて使いやすいです。こちらも日本のキャリアからリリースされていないので通販やオークション、個人輸入で手配擦る必要があります。

XOOM(Honey Comb 3.0)

XOOMはHoneycomb搭載の初のAndroidタブレットです。Pure Googleタブレットということもあってブートローダーが開発者向けに開放されています。

今のところ日本に来るかどうか不明です。一部噂ではauから??みたいな情報がありますが真偽不明です。アメリカ先行発売の後ヨーロッパなどで展開されるそうです。

PlayBook(blackberrytabletOS)

BlackberryTabletOS用のAIR SDKがリリースされるなどAIRとかなり親和性の高いタブレットです。これもBrackberryTabletOS搭載の初のタブレット端末ということもあり、開発用端末として広まりつつあります。ただ、それは世界の話で日本にはまだ入荷されるかどうかも不明な状態です。公式には世界展開するのは2011年Q2以降の話とあるので、まだかなり先の話になりそうです。

iPhone4(iOS4.2)

言うまでもなく超有名なiPhone4。日本では一番普及している端末で、開発競争もかなり激化している状況です。packager for iPhoneやるなら必須の端末です。予備用に3GSもあったほうがいいかもしれません。

iPad(iOS4.2)

tabletの本命(2010年度の)。こちらも既に周知のとおりですが、動作確認端末として欲しいところですね。iPad2の噂が出始めてる現在だと新しくiPad買うのは抵抗ありますけど。。。

以上開発用端末一覧でした。

既に発売&発売予定のAIR for Android、packager for iPhone向け書籍について

<お知らせ>
5月頃に岡田@shozoxxxさんと共著で「FlashによるAndroidアプリ開発ガイドブック(仮)」を発売予定です。書店などで見かけたらぜひ手にとってみてください!!※ターゲットは初心者向けなので高レベルの方は物足りないかもしれません。

AIR for Android、packager for iPhone関連の既に発売済みまたは発売予定の書籍集めてみました。

ただAIR for Android ,packager for iPhoneともにまだ正式リリースの段階ではないので正式リリース後内容が変わってくると思います。

特にpackager for iPhoneについては今はAIR2.0ベースなので今後AIR for Androidに合わせてくるとすれば内容が変わる可能性は高いと思います。なので今回はとりあえずAIR for Androidをぶっちぎってやるぜという方に今発売予定されている本、発売済みの本をまとめてみましたので購入の参考にどぞ。

Android Development with Flash

@shozoxx寄贈に感謝
英語注意!どちらかというとエントリー向けで、初めてAIR for Android触る人におすすめ。さらっと新機能一覧が学べます。既にAIRを突っ込んでやっていた人には物足りないかもしれません。それぞれの機能が簡潔に2ページでまとめられています。基本的な開発の基礎を学ぶ方はいい本だと思います。内容は270ページ程度。

Professional Flash Mobile Development


@shozoxxx寄贈
上記のAndroid Development with Flashと内容は変わらないけど、もう一歩中級者向けにスクリプトと合わせて新機能などの紹介をしています。kebin hoytさんが作ったfroyo向けのコンポーネントを使ったサンプルも掲載されていました。内容はかなりアツイです!!!iOSについても軽く触れられています。ActionScriptやAIR中心に開発している人の1冊目にオススメです。

Beginning Flash Development for Mobile Devices

英語注意!未発売:まだ内容見てないのでなんとも言えないですが、androidというようよりもタブレットやスマートフォン(android,iOS,symbian)、TVなど広い範囲、マルチスクリーンにおける開発手法などが盛り込まれた内容になっているようです。個人的にかなり気になってて発売が楽しみです。

Pro Android Flash Games

androidベースのスマートフォン、タブレット向けゲーム開発に特化した内容になっているみたいです。android flashゲーム開発者はマストバイな予感です。
・デスクトップ向けゲームをどやってモバイル向けに最適化する?
・センサー周りの解説
・最適化手法の解説

Flash Mobile Developing Android and iOS Applications

英語注意! 未発売:中身見れなかったので買えたらコメントします。もしくは教えてください。
概要はiOSとAndroidをターゲットとしたアプリケーション開発の入門書みたいです。ひと通りの開発手順とマーケットの説明、あとはゲーム開発や3Dの扱いなどの解説があるみたいです。

Flash Mobile Application Development For Dummies

英語注意! 未発売:中身見れなかったので買えたらコメントします。もしくは教えてください。
Amazonの概要では中身がわかりませんでした。これどうなんだろ??

AIR for Androidで使えそうなライブラリ一覧

AIR for AndroidやPackager for iPhoneで使えそうなライブラリをまとめてみました。

実際に利用していないライブラリも混じっているのでご了承願います。また利用時は各ライブラリのライセンスに従ってご利用お願いします。

フレームワーク?的な何か

  • as3ds … ゲーム開発者向けデータ構造
  • as3viewnavigater … flexのviewnavigaterのAS3版

WEBサービスAPI関連

  • Facebook Graph API …  Facebook APIの利用を簡単にしてくれるライブラリ
  • Tweetr … twitterのAPIの利用を簡単にしてくれるライブラリ。airforandroidの場合は要改造
  • as3flickrlib … flickrAPIの利用を簡単にしてくれるライブラリ。
  • dropbox-as3 … dropboxAPIの利用を簡単にしてくれるライブラリ。
  • as3awss3lib … Amazon S3にアクセスするためのライブラリ。
  • as3youtubelib … Youtube用APIにアクセスするためのライブラリ。
  • as3googlecalendarlib … Googleカレンダー用APIにアクセスするためのライブラリ。
  • picasaflashapi … picasa APIのアクセス用ライブラリ
  • face.com … 顔認識APIにアクセスするためのライブラリ
  • as api for AWS … Amazon web service APIへのアクセスするときのライブラリ。

Utility

  • as3corelib … JPEG/PNGエンコードやデータ保存時の暗号化、JSON解析など。
  • as3crypt … 暗号化してくれるライブラリ。
  • flash-kikko … waveをMP3に変換してくれるライブラリ。
  • Fzip … zipファイルを解凍してくれるライブラリ。
  • FLARToolkit … AR用ライブラリ。AIR for Androidで使うには少し重いかも??
  • Exif library for AS3 … 写真のexif情報をパースしてくれるライブラリ
  • as3soundeditorlib … mp3のスペクトラム表示やキューポイント表示とそのナビ。
  • popforge … オーディオ生成
  • as3syndicationlib … AtomやRSSのパースライブラリ
  • faist … xmlソケットの利用を簡単にしてくれるライブラリ

コンポーネント関連

AIR for Androidで実機でtraceを確認するアプリ

AIR for Androidではテキストフィールドなどを代用してトレースを確認するか、デスクトップのDDMSから確認する方法があります。しかし、実機単体で確認する方法がなかったので実機単体でもtraceを確認できるアプリを作りましたので開発にお役立てください!

http://www.appforandroid.info/app/logcatviewer.apk

※このアプリは以下のBRILLIANT SERVICE様のソースを改変してAIR for Android向けに再パッケージしたものです。

http://d.hatena.ne.jp/bs-android/20100519/1274206549

手書きメモアプリを作る。

手書きしたBitmapDataをカメラロールに保存するシンプルなメモアプリケーションです。

今回、Kevin HoytさんのAndroid UI 風コンポーネントを利用して作ってみました。

http://www.appforandroid.info/app/memo.apk

Kevinさんのコンポーネントを利用する際の注意点として、
http://www.himco.jp/articles/pdf/kevinHoytComponents.pdf
に記載されている注意点の他に、固定解像度(縦向き)での利用に制限されています。
よってマルチ解像度で利用する際にはコンポーネントの位置や大きさを自分で調整してあげる必要があります。

以下ソースになります。

package  
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.TimerEvent;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.media.CameraRoll;
	import flash.events.MouseEvent;
	import flash.utils.Timer;
	import Menu;
	import MenuEvent;

	public class Main extends MovieClip
	{
		var canvs:Bitmap = new Bitmap();
		var pointer:Point = new Point();
		var timer:Timer;
		
		public function Main() 
		{
			
			var sp:Sprite = new Sprite();
			canvs.bitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xFFFFFF);
			sp.addChild(canvs);
			addChild(sp);
			
			timer = new Timer(10);
			timer.addEventListener(TimerEvent.TIMER, onDrawingHandler);
			
			sp.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent) {
				pointer.x = canvs.mouseX;
				pointer.y = canvs.mouseY;
				timer.start();
			});
			sp.addEventListener(MouseEvent.MOUSE_UP, function(e:MouseEvent) {
				timer.stop();
			});
			
			//メニューの生成
			
			var menu:Menu = new Menu( new Array( 
				{ path:"file.png", label:"RESET" }, 
				{ path:"save.png", label:"SAVE" } 
			) );
			menu.addEventListener(MenuEvent.CLICK, onMenuClickHandler);
			addChild(menu);
	
		}
		
		//メニューのボタンがクリックされたときのアクション
		private function onMenuClickHandler(e:MenuEvent):void 
		{
			switch(e.label) {
				case "RESET":
					resetCanvas();
				break;
				case "SAVE":
					imgSave();
				break;
				default:
				break;
			}
		}
		
		//bitmapdataに線を描く
		private function onDrawingHandler(e:TimerEvent):void 
		{
			var temp:Sprite = new Sprite();
			temp.graphics.lineStyle(4, 0x000000);
			temp.graphics.moveTo(pointer.x, pointer.y);
			temp.graphics.lineTo(canvs.mouseX, canvs.mouseY);
			var bmpd:BitmapData = canvs.bitmapData;
			bmpd.draw(temp);
			
			pointer.x = canvs.mouseX;
			pointer.y = canvs.mouseY;
		}
		//キャンバスを白く塗り直す。
		private function resetCanvas():void {
			var bmpd:BitmapData = canvs.bitmapData;
			bmpd.fillRect(
				new Rectangle(0, 0, bmpd.width, bmpd.height),
				0xFFFFFF
			);
		}
		//画像をカメラロールに保存する
		public function imgSave():void {
			var cmrl:CameraRoll = new CameraRoll();
			if (CameraRoll.supportsAddBitmapData) {
				cmrl.addBitmapData(canvs.bitmapData);
			}
		}
	}
}

LCCSでP2Pマルチキャストのビデオ配信を行うサンプル

Adobe Live Cycle Collaboration Serviceを使ってP2Pマルチキャスト配信サンプルを作ります。

下のビデオはLCCS(LiveCycle Collaboration Service)を使ったP2Pビデオ配信サンプルです。
androidのカメラで撮影されている動画をリアルタイムに複数のデバイスに配信できます。
フォーラムではまだ接続数に限界があると書き込みがありましたが、5同時接続程度ならきちんと配信されていました。

作り方
まずアカウントを登録など、各種準備を行います。
あとは下のコードでコンパイルすればOK

配信側AS3

package
{
	import com.adobe.rtc.authentication.AdobeHSAuthenticator;
	import com.adobe.rtc.collaboration.WebcamPublisher;
	import com.adobe.rtc.collaboration.WebcamSubscriber;
	import com.adobe.rtc.events.SessionEvent;
	import com.adobe.rtc.session.ConnectSession;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;


	public class Main extends Sprite
	{
		protected var _cSession:ConnectSession =  new ConnectSession();
		protected var _webCamSubscriber:WebcamSubscriber;
		protected var _webCamPublisher:WebcamPublisher;
		
		private var _username:String = "LCCSログイン時のユーザー名(メルアド)";
		private var _pass:String = "LCCSログイン時のパスワード";
		private var _roomname:String = "LCCSで作成したルーム名";	
		
		public function Main()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			var authenticator:AdobeHSAuthenticator = new AdobeHSAuthenticator();
			authenticator.userName = _username;
			authenticator.password = _pass;
			_cSession.roomURL = _roomname;
			_cSession.authenticator = authenticator;
			_cSession.login();
			_cSession.addEventListener(SessionEvent.SYNCHRONIZATION_CHANGE, onLogin);
		}
		
		
		protected function onLogin(p_evt:SessionEvent):void
		{
			
			//プレビュー用ビデオ受信
			_webCamSubscriber = new WebcamSubscriber();
			_webCamSubscriber.subscribe();			
			
			//配信設定
			_webCamPublisher = new WebcamPublisher();
			_webCamPublisher.publish();
			_webCamSubscriber.webcamPublisher = _webCamPublisher;
			addChild(_webCamSubscriber);
		}
	}
}

受信側AS3

package
{
	import com.adobe.rtc.authentication.AdobeHSAuthenticator;
	import com.adobe.rtc.collaboration.WebcamSubscriber;
	import com.adobe.rtc.events.SessionEvent;
	import com.adobe.rtc.session.ConnectSession;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	public class Main extends Sprite
	{
		protected var _cSession:ConnectSession =  new ConnectSession();
		protected var _webCamSubscriber:WebcamSubscriber;
		
		//ID,PASSをほんとのソースに埋め込むとまずいので、
		//管理画面で表示されているトークンを埋め込む方法がおすすめです。
		private var _username:String = "LCCSログイン時のユーザー名(メルアド)";
		private var _pass:String = "LCCSログイン時のパスワード";
		private var _roomname:String = "LCCSで作成したルーム名";
		
		public function Main()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			var authenticator:AdobeHSAuthenticator = new AdobeHSAuthenticator();
			authenticator.userName = _username;
			authenticator.password = _pass;
			_cSession.roomURL = _roomname;
			_cSession.authenticator = authenticator;
			_cSession.login();
			_cSession.addEventListener(SessionEvent.SYNCHRONIZATION_CHANGE, onLogin);
			
		}
		
		protected function onLogin(p_evt:SessionEvent):void
		{
			//受信側
			_webCamSubscriber = new WebcamSubscriber();
			_webCamSubscriber.subscribe();
			addChild(_webCamSubscriber);
		}
	}
}

※Packager for iPhoneではカメラをサポートしてないので今のところ配信はできません。
※動作確認できたのは、
・android2.2
・winXP,win7のAIR
・MacOSX AIR
・iPad,iPodTouch4G

Adobe LiveCycle Collaboration Service の使い方

Adobe LiveCycle Collaboration Serviceを使ってみました。

このサービスはチャット、WEBカメラ、ホワイトボード、VoIP、複数ユーザー、セッションの管理などが利用出来るとあります。

LCCSを利用するための手順を順番に説明します。

1,アカウントの登録

LCCSを利用するためのアカウントの登録を行います。登録フォームはこちら
※ここで登録したメアド、パスワードはコード上でも利用しますのでメモを忘れずに!

2,SDKをダウンロード。

アカウントの登録後、ログインすると下のような画面に遷移します。
画面の(3)からLCCSのライブラリをダウンロードします。
このライブラリの中には色々なサンプルが入っているのでとても重要です。

3,ROOMの作成

アカウントの登録後すでに何らかのROOMが作成済みかもしれません。
作成したROOMのURLは上記の画像の(2)+(1)のような表記になります。
https://collaboration.adobelivecycle.com/[youraccount]/[roomname]

4,完了

完了です。あとはなにかサンプルを作って動作確認できます。
※FlashファイルからダウンロードしたSDK内にあるswcファイルにライブラリ登録する必要があります。

Air for Android、Packager for iPhoneでアプリを作る際、デザイナーさんに知ってもらいたいこと

アプリ、ゲームのデザインを専門にやっておられるデザイナーさんはまだ少ないと思うので開発側からデザイナーさんに知ってもらいたいことを下にまとめました。

※アプリケーションを作る場合と、ゲームを作る場合でいろいろデザインも変わってくると思いますのでそこらへんは臨機応変に対応お願いします。



基本的なお約束ごと一覧

  • デザインツールはFireworksがおすすめ。
  • 画面が回転します。また縦に固定、横に固定することもできます。
  • スマホがターゲットの場合は基本は480x800pxでタブレットはXGA?で作ればOK。
  • Android端末には複数の解像度、縦横比が存在する。
    アンドロイドは携帯専用OSではなく、TV、タブレット、携帯に搭載されることを想定して作られている。
    それぞれで画面解像度が異なっているという認識が大切。
    携帯端末だけでも画面の解像度は多岐に渡るのでリキッドデザイン/レイアウトが重要
  • ボタンは一辺が最低でも40pixel以上で作る。高解像度になるほど大きく作る必要がある。
    ※マウス操作ではなく指でタッチしてボタンを押すことになるので、WEBのような小さいボタンではとても押しにくい。
  • ボタンはロールオーバーがない。※プレスした状態は存在する。
  • 画像の中に読ませる文章を含めない。↑の解像度の問題に起因します。
  • フォントは14px以上で指定。
    PCのディスプレイよりも相対的に解像度が高いのでWEBと同じ大きさで作ると文字が読めません。
  • 文章が入る箇所はコントラスト高めの背景希望。
    屋外での利用も想定されるので日光の反射があると文字が読みにくい可能性がある。
  • アプリケーションを作る場合は、カスタムUIは可能なかぎり使わない。※ゲームの場合は自由※アプリを作る場合はFlexHeroを想定。
  • アプリケーションを作る場合はある程度Heroの概要レベルでいいので知っておいてほしい。Viewとかタブとか。
  • 画像の縦横サイズは2のべき乗もしくはそれを超えないpixel数で作る。また、1辺が1024pxを超えてはいけない。
    ※表示が高速化されます。
  • 画像に透明な処理、乗算効果などレイヤー効果は極力使わない。
  • 9スライスの仕組みを知っておいて欲しい。ボタンなどでよく使うことになると思います。



必要なデザインファイル

  • アプリのアイコン

    Androidアイコンのガイドラインアイコンテンプレート zip

    ・iPhoneは29,57,512px ,iPadは48,72pxのpngファイルを用意すればiPhone側で角丸をとって反射をいれたアイコンを自動生成してくれます。
  • 各画面デザイン

    ・ローディング、タイトル、設定画面、各種。

    ・遊び方、操作方法の説明画面。※必要に応じて

    ・マーケット登録時のアプリ画面キャプチャ※各マーケット参照

Flashでアプリ開発ができる、発売済み&来年発売予定のTablet PCまとめ

2010年はiPadの年、2011年はandroid tabletの年だと個人的に思っています。

そう考えると早く来年になってほしいと思うのですが、その気持ちを抑えつつ発売済み、来年発売予定のタブレットPCをまとめてみました。2.2対応端末だけまとめたので、2.1も含めると30機種以上になりそうです。

※噂含みます。また、日本で発売されていないものも含んでいます。
※並び順は個人的に気になる順で、AIRやFlashが動くかどうかを掲載基準にしています。
※一部異なるOSも混じっていますが、Flashは動きます!

・PlayBook http://us.blackberry.com/playbook-tablet/


※日本の発売未定 (SDKいれてみたところ日本語サポートしてない感じでした)もし日本で発売されるとすれば世界展開が秋なのでそれ以降の予感がします。OSがblackberrytabletOSという独自OSが乗っています。公式にAdobe AIRをサポートしていてSDKもFlex版のみですがすでに配布が始まっています。

・HP Slate 500 http://www.hp.com/go/slate/

windows7搭載のタブレットです。背面デザインが申し分なくかっこいいです。iPadはエンターテイメントベースでの利用が主ですが、こちらはビジネスユーザーをターゲットにしていることもあって法人向けにしか販売されていません。個人的には一番欲しい端末!!日本では未発売ですが、すでに発売中ですので通販サイトからは購入可能です。欲しい方はこちらから購入できます。

・Notion Ink Adam http://www.notionink.com/

インド発の激安タブレットですがかなりのハイスペックなんでかなり注目度が高いです。2011/12/10予約開始なんでもうすぐ発売秒読みです。
最小構成で31500円です。android2.2搭載。※上の写真はちょっと古いです。

他Tegra2搭載Tablet

他タブレット

AIR for Android 関連のブログ巡回先一覧

Air for Android関連の情報を定点観測してます。
<英語>
※chromeでみれば何となく翻訳してくれます。

<日本語>
http://hi-posi.jp/
http://himco.jp/air-for-android/

他にもおすすめあれば教えてください!