カテゴリー : AIR for iOS

AIR for iOS のipaファイルの構造とインストール時のディレクトリ構造について

AIR for iOSでパッケージングしたipaファイルの構造

AIR for iOSでパッケージングしてできたipaファイルはzipファイルになっています。パッケージングしたファイルの中にswfは含まれていません。

ほとんどのファイルがiOS向けにコンバートされているので解凍したところであまり内容はよくわかりません。ipaファイルを直接どうこうするという機会はないと思うので参考程度に御覧ください。

アプリインストール時のデバイス内のディレクトリ構造について

ipaファイルはデバイスにインストールされると、まずアプリ固有の任意のIDが割り振られ、このIDの名前のディレクトリ(サンドボックス)が作成されます。

このサンドボックス内ではアプリの本体ファイルといくつかのディレクトリが作成されています。

  • Documents … ユーザー用のデータの保管場所
  • Library… アプリ用データの保管場所
  • appidディレクトリ…ipaファイルを展開したディレクトリ
  • temp…作業用ディレクトリ(File.createTempDirectory()で参照できます)

ユニークIDがふられたディレクトリは一般的に外からアクセスできないようになっているのでこのユニークIDがふられたディレクトリならアプリで作成したデータは基本的にどこにおいても安全と思われます。ただiTunesのバックアップの対象がDocuments,Libraryの2つのディレクトリが対象になっているのでユーザー用DBなど記憶させておきたいデータはこの2つのディレクトリに置いたほうがよさそうです。ShareObjectもLibrary配下にあるのでバックアップの対象です。

AIR for iOS のFileクラスで参照できる領域

AIR for iOSでもファイルを参照することができます。参照できる場所はアプリケーション固有に割り当てられた領域(サンドボックス)と写真やビデオが保存されているメディアライブラリになります。(AIR2.6での話)

Fileクラスのプロパティに対応したデバイス上のパス

File.applicationDirectory

/var/mobile/Applications/[uniqueID]/[filename].app

アプリ本体のバンドルになっているのでいじらないほうがいい。

File.applicationStorageDirectory

/var/mobile/Applications/[uniqueID]/Library/Application Support/[appID]/Local Store/

Libraryディレクトリがアプリケーションの設定ファイルなど突っ込んでおくディレクトリ。iTunesバックアップ対象ディレクトリ。

File.desktopDirectory

/var/mobile/Applications/[uniqueID]/Desktop/

モバイルではあまり関係ないディレクトリ。

File.documentsDirectory

/var/mobile/Applications/[uniqueID]/Documents/

ドキュメントやアプリケーションデータを保存するディレクトリ。このディレクトリにあるコンテンツは、ユーザーとのファイルシェアが行える。iTunesバックアップ対象ディレクトリ。

File.userDirectory

/var/mobile/Applications/[uniqueID]/

このディレクトリがアプリに用意されたサンドボックスのルートになっている。

File.createTempDirectory()

/var/mobile/Applications/[uniqueID]/tmp/FlashTmp0/

テンポラリディレクトリは複数作ることができ作成するごとにディレクトリ名の最後の数字がインクリメントされていきます。名前のとおり作業用の一時的なディレクトリのため作業が終わったら自分で掃除してあげたほうがよさそうです。長時間放置された場合はOSが消してくれるそうです。iTunesバックアップ対象外です。

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ソケットの利用を簡単にしてくれるライブラリ

コンポーネント関連

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側で角丸をとって反射をいれたアイコンを自動生成してくれます。
  • 各画面デザイン

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

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

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

デバイスのディスプレイ解像度(ppi)について

android端末はメーカーによってモニタの縦横比やpixels,モニタの大きさに大きくばらつきがあります。
このばらつきによって端末のディスプレイが緻密や荒いといった評価になりますが、開発する際に画面のUIをPixelベースで作った場合端末によってボタンの大きさや文字の見えやすい&見えにくい状態が発生し、これらはかなり障害になってくると思います。Flashで制作を行う場合これらの留意点を対策する必要があります。

画面解像度の求め方

ppiという単位はpixel per inch の略で1inchあたりにどれだけのpixelがはいるか?を表す単位です。

・計算式による算出方法

ppi = √(縦pixel^2 + 横pixel^2) / 画面の大きさinch
でカタログのスペック表から求めることができます。

・ActionScriptからの参照方法

trace(Capabilities.screenDPI);

2010/12/13 現在の端末の画面解像度一覧

下の表が2010/12/13時点で発表されている端末の画面解像度ppiになります。

この表から以下のように分類できます。

  • 一般的な端末の場合、200ppi~300ppi(480x800pxが中心)
  • Retinaのような高解像度の場合 300ppi以上(640x960pxが中心)
  • タブレット端末や一部のレガシー端末の場合200ppi以下(XGAその他)

将来的にもっとマニアックなppiがでてくる可能性もあります。

じゃあ実際に作る場合どうするの?

Flex Heroで開発する場合この部分はある程度緩和されているはずですが、Flashで開発する際は自分でこの部分を実装しなければいけません。

いくつか方法はあって思いつくのは下の二つです。

  • Capabilities.screenDPIを引っ張ってきてデバイス毎にスケールを変更する(Adobe MAX2010翻訳記事pdf)
  • 高解像度デバイス、汎用デバイス、タブレットなど各デバイス向けに9スライスで構成したassetを含むflaファイルを作成し、リキッドレイアウトできるようにする。

前者のスケールする方法だと線がぼやけたり、いろいろな箇所にアンチエイリアスがかかって、デザイナーさん的に許せない感じになるかもしれません。ただ将来的にどんな解像度がでても修正ボリュームは最小になるはずです。

後者は解像度を3種に分けた場合縦横比も異なるので、各解像度&比率向けのUIをきっちり作り込んだ上でマニアックなものは捨て去りますよというスタンスです。applicatin.xmlでマーケットフィルタを追記してインストールできるデバイスを制限する方法です。

今の時点でどちらがいいかも分かりませんし、アプリケーションやゲームのデザイン/UIによってもケースバイケースで使い分ける必要があるかと思います。

Adobe MAX 2010 まとめ

現在絶賛開催中の Adobe MAX 2010 まとめ記事です。

MAX行ってきた人がまとめイベントをしてくれるそうです!!!近い方は是非参加!
adobe MAX retweet(11/25)
http://www.adobe.com/jp/joc/max/retweet/

概要まとめ

重要項目

各セッションのビデオアーカイブ(とりあえず英語。日本語見つかったら差し替えます)

デザイン

Dreamweaver® CS5 Deep Dive: Next-Generation Workflows

What’s new in Flash Professional CS5

Pixel-Perfect: Photoshop® CS5 Power Shortcuts for Web and Interactive Designers

デベロッパー

Optimizing Flash® Player Compatible Content for Mobile Devices

Designing and Developing for Touch-Based Devices

Flash, Flex®, HTML5: Ouch, My Head Hurts!

広告関連

Creating Interactive Rich Media Advertising Campaigns with Video

Future of Advertising

Multiscreen Development Techniques with Flex and Adobe® AIR®

各種ソフトダウンロードURL