誰でも簡単iPhone / Androidアプリ開発　: 開発覚書

ラベル 開発覚書 の投稿を表示しています。すべての投稿を表示

2013/10/30

Flex:: view statesについてまとめ

Flex 4.10:: view statesについて復習したのでメモ。view statesの動きはFlex独特なのでしっかり把握しておきたいところ。理解できればかなり使い勝手はよい。

View states定義はコンパイル時されるので、State.nameにデータバインディングは使えない。
Arrayの最初のview satesがデフォルトとして登録される。名前は「default」でなくてもよい。
setCurrentState()メソッドで２番めの引数にfalseを設定するとtransitionを行わずにview stateを変更できる。
propertyの値をクリアする方法「」
コンポーネントを表示・非表示させるにはincludeInとexcludeFromを使用。
ランタイムでview stateを含むグループコンテイナーに対してaddElement, removeElement, setElementIndexをしない。
「」でコンテイナーを超えてコンポーネントを移動させることができる。
最初のview stateで存在しないコンポーネントはview stateが変更されるまでアクセすることが出来ない。
最初のviewで存在しないコンポーネントにview stateが変更される前にアクセスしたい場合は「itemCreationPolicy」を「deferred（デフォルト）」から「immediate」に変更する。
「itemDestructionPolicy」を「auto」にするとview stateがそのコンポーネントが存在しないview stateに変更された際に、そのコンポーネントのcacheを破棄する。
複数のview stateに設定した場合は、「stateGroups」を設定し、その値をセットする。
「stateGroups」は複数指定できる。ex.)「stateGroups="oneGroup, twoGroup"」
view statenのイベントは「enterState」「exitState」「currentStateChanging」「currentStateChange」

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf63611-7ffa.html#WS434685AA-B886-4f71-BF3F-F81884986F28

AS3:: Capabilities.versionでOSを特定する

ActionScript 3:: OSによって切り替えたい処理はたくさんある。iOSとAndroidで処理を分ける必要があることもある。そんな時に、Capabilitiesクラスのversionプロパティを使ってOSを特定する事ができます。

「Capabilities.version」はプラットフォームとFlash or Airのバージョン情報を返します。
プラットフォームの返り値は以下のような感じです。

iOS: IOS
Android: AND
Blackberry: QNX
Windows: WIN
Mac OS: MAC
Linux: LIN

OS毎に処理を替えたい場合は、この文字列を取得して、それぞれの処理をコーディングすることで実装できます。

http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/system/Capabilities.html#version

http://stackoverflow.com/questions/8404071/how-to-determine-if-an-application-is-running-as-a-mobile-or-desktop-air-applica

iOS:: iAdのバナーサイズについて

iOS:: iAdのバナーサイズが知りたかったので調べた。

■iPhone and iPod touch
　　Portrait: 320pt x 50pt
　　Landscape: 480pt x 32pt

■iPad
　　Portrait: 768pt x 66pt
　　Landscape: 1024pt x 66pt

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/iAd_Guide/BannerAdvertisements/BannerAdvertisements.html

2013/10/28

Flex:: Group, HGroup, VGroupのhorizontalalign, verticalalignはCSSで設定できない

Flex 4.10:: 前回、Group, HGroup, VGroupのgapとpaddingもCSS設定できないと書きましたが、 horizontalalign, verticalalignもCSSで設定できないです。

http://stackoverflow.com/questions/15101999/flex-css-does-not-support-align-manipulation

Flex:: Group, HGroup, VGroupのgap, paddingはCSSで設定できない

Flex 4.10:: Group, HGroup, VGroupレイアウトコンポーネントのgapやpaddingの値はCSSでは設定できない。直接MXMLに書くしかない。

これも、不便だ。それに、Group系のCSS設定についてはあまり信用出来ない。直接LabelやボタンなどのコンポーネントにCSSを設定する時は問題ないんだけど。

http://www.spongedesign.jp/diary/?p=457

2013/10/27

Flex:: CSSでwidth / height/ x / y は設定できない

Flex 4.10:: CSSでwidth / height / x / y は設定できません。Adobeはパフォーマンスのためと言っています。不便だな。

http://forums.adobe.com/message/3157605

2013/10/26

Flash Builder:: AIR 3.9.0.1050にアップデートでシミュレーターバグ解消

Flash Builder 4.7:: AIR SDKを3.9.0.1050にアップデートしたら「シミュレーターがいつもサイズ500x375で起動されてしまうバグ」が解消されました！（たぶんそうだと思います。「Apache Flex SDK Installer」で再度SDKをダウンロードしました。）

これ結構困っていたので助かりました！

http://forums.adobe.com/message/5749181#5749181

2013/10/25

iOS７で必要になったアイコンサイズ

iOS7から必要なアイコンサイズが６つほど増えました。

40 x 40 (iPhone and iPad)
60 x 60 (iPhone)
76 x 76 (iPad)
80 x 80 (iPhone and iPad)
120 x 120 (iPhone)
152 x 152 (iPad)

なんだか必要アイコンがいっぱいになってきたので、ちょとまとめました。

iPhoneだけの場合で８種類、iPadだけの場合１０種類、ユニバーサルアプリの場合１４種類もいるのか。。。さらにiTunes用の512 x 512と1024 x 1024がいります。

■iPhone and iPod touch（８種類）

29 x 29 (Settings in iOS7 and Spotlight / Settings in iOS6 and earlier)
40 x 40 (Spotlight in iOS7) ※1
57 x 57 (App icon in iOS6 and earlier)
58 x 58 (Settings with Retina in iOS7 and Spotlight / Settings with Retina in iOS6 and earlier)
60 x 60 (App icon in iOS7) ※1
80 x 80 (Spotlight with Retina in iOS7)
114 x 114 (App icon with Retina in iOS6 and earlier)
120 x 120 (App icon with Retina in iOS7)

※1. Non-RetinaディスプレイでiOS7がインストールできるiPhone and iPod touchは存在しない

■iPad（１０種類）

29 x 29 (Settings in iOS7 and Settings in OS6 and earlier)
40 x 40 (Spotlight in iOS7)
50 x 50 (Spotlight in iOS6 and earlier)
58 x 58 (Settings with Retina in iOS7 and Settings with Retina in iOS6 and earlier)
72 x 72 (App icon in iOS6 and earlier)
76 x 76 (App icon in iOS7)
80 x 80 (Spotlight with Retina in iOS7)
100 x 100 (Spotlight with Retina in iOS6 and earlier)
144 x 144 (App icon with Retina in iOS6 and earlier)
152 x 152 (App icon with Retina in iOS7)

https://developer.apple.com/library/ios/documentation/iphone/conceptual/iphoneosprogrammingguide/App-RelatedResources/App-RelatedResources.html

http://dev.classmethod.jp/references/ios-device-icon-file-list-2013-9/

http://help.adobe.com/en_US/air/build/WS901d38e593cd1bac1e63e3d129907d2886-8000.html

Airアプリの追跡情報をiOSアプリから削除する方法

Airアプリを作成すると、デフォルトでAirアプリの追跡情報がアイコンのメタデータに組み込まれてしまいます。
これを削除することもできますので、気になる方は試してください。

手順は

作成したipaファイルをの拡張子をzipに変更して解凍
Payloadを右クリックしてパッケージを開くを選択
中にIcon.png, Icon-Large.png, Icon-xxx.pngというファイルがあるのを確認
このファイルから以下のようなサイトを使ってメタデータを削除　　http://www.smushit.com/ysmush.it/
同じ名前でファイルを保存
ターミナルアプリでcertificateファイルと共に再度パッキング
コマンド：「codesign -f -s "" Payload/myapp.ipa」
Payloadフォルダを圧縮でzipファイルにする。以上。

このzipファイルでアップロードして申請できます。

http://helpx.adobe.com/air/kb/opt-out-air-app-analytics.html

2013/10/24

Flex:: IconItemRendererをカスタマイズ

Flex 4.10:: IconItemRendererはmobileに最適なrendererです。アイコンやラベル、デコレーターをセットするだけで、自動でレイアウトなどもしてくれます。
しかし、アイテムをもっと表示したい時や、アイコンの位置などを変更したいときには、カスタマイズしないといけず、それも結構複雑です。

このサイトはプログレスバーをIconItemRendererに追加して綺麗に配置しています。もし、IconItemRendererをカスタマイズする必要がある際には参考にさせて頂きます。

リンクメモ。
http://chsmea.net/~mioproject/freo/view/173?continue=1

2013/10/23

Flex:: アプリケーションDescriptorについて

Flex 4.10:: ちょとアプリケーションDescriptorについて見直す必要があったので、再勉強。
リンクのメモ。

AIR application descriptor elements

2013/10/22

AS3: 型変換キャスト方法について

ActionScript3:: AS3では型変換（キャスト）する方法がいくつかあります。
簡単なのは型名で括弧で囲う方法。例. String(12345)、int("5678")

それから、「as」演算子を使う方法。例. "12345" as int, 56789 as String

両方ともキャストする方法ですが、「as」演算子を使う方法と型名+()でキャストする方法は結果が違うので、注意が必要です。

型名+()キャストでは、型によって違う値を返します。（例外が返ることも）
「as」キャストでは、型変換出来ない場合はnullを返します。

trace(String(12345)); // 12345
trace(int("56789")); // 56789
   
var string:String = "Hello";
   
trace(Array(string)); // Hello
trace(Boolean(string)); // true
trace(int(string)); // 0
trace(Number(string)); // Nan
trace(Object(string)); // Hello
   
trace("12345" as int); // null
trace(56789 as String); // null
   
trace(string as Array);  // null
trace(string as Boolean); // null
trace(string as int);  // null
trace(string as Number); // null
trace(string as Object); // Hello

http://d.hatena.ne.jp/ActionScript/20090427/as3_as_operator

2013/10/19

Flex:: Flash Builder 4.7 新規プロジェクト作成でエラーがでる問題

Flex 4.10:: Flash Builder 4.7 (4.6も) with Flex 4.10で新規プロジェクト作成（Spark アプリケーション）すると最初からエラーが出ます（ApacheとAdobe認知のバグです）。

対処方法は簡単で、

「layout="absolute"」箇所を削除するだけです。

http://flex.apache.org/doc-getstarted.html

https://cwiki.apache.org/confluence/display/FLEX/Adobe+Flash+Builder+'New+Project'+Bug

2013/10/18

AS3:: オペレーター "===" について

ActionScript3:: オペレーターで "==="（=が３つ）という表現があります。"=="（=が２つ）と何が違うんでしょうか？

それは、"==="（=が３つ）は型変換をしないで比較した結果を返します。"=="（=が２つ）は型変換をした後に比較した結果を返します。

なので、"=="の場合は完全に一致していない（型が一致していない）場合でも"true"を返すことがあります。これは普段あまり気に留めないですが、注意しないといけない場合もたくさんあります。
下に例を出しますが、「true == 1」はtrueを返しますが、「true === 1」はfalseを返します。

※オペレーター "?:" についてはこちらの記事を参照

■例（ソースコード）

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160"
      initialize="initializeHandler(event)">
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   protected function initializeHandler(event:FlexEvent):void
   { 
    (true == 1) ? trace("true == 1: true") : trace("true == 1: false");
    (true === 1) ? trace("true === 1: true") : trace("true === 1: false");
    (null == undefined) ? trace("null == undefined: true") : trace("null == undefined: false");
    (null === undefined) ? trace("null === undefined: true") : trace("null === undefined: false");
   }
   
  ]]>
 </fx:Script>
 
</s:Application>

■結果

true == 1: true
true === 1: false
null == undefined: true
null === undefined: false

http://www.c-point.com/javascript_tutorial/jsgrpComparison.htm
http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons

2013/10/17

Flex:: モバイル用コンポーネントのリスト

Flex:: モバイル用に最適化されたコンポーネントのリストというものがどんなに探してもない。。。不便だ。
自分で分かる範囲でメモしていこうかなと思い、ちょとまとめてみた。

Flex 4.5
Controls	BusyIndicator
	Button
	ButtonBar
	CheckBox
	HSlider
	Image, BitmapImage
	Label
	List
	RadioButton, RadioButtonGroup
	TextArea
	TextInput
Layout	DataGroup
	Group
	HGroup
	Scroller
	Spacer
	TileGroup
	VGroup
Charts	All

Flex 4.6
Controls	Callout
	CalloutButton
	DateSpinner
	SpinnerList
	SplitViewNavigator
	ToggleSwitch
Others	Soft Keyboards

http://flex.apache.org/asdoc/index.html

http://www.adobe.com/devnet/flex/articles/mobile-development-flex-flashbuilder.html

”?:”オペレーターって使いますか？

ちょと最近、他人のソースコードを読むことがあって、自分ではあまり使わないオペレーターを使っていたので、メモ。

"?:"というオペレーターです。これは条件オペレーターで、"if...else..."と同じです。
下のif...else...文と?:を使ったコードは同じです。１行で書けるのでとても便利！

■例（if...else...）

if (a > b)
{
    value = a;
}
else
{
    value = b;
}

■例（?:）

1	value = (a > b) ? a : b;

http://www.cafeaulait.org/course/week2/43.html
http://livedocs.adobe.com/flex/3/html/help.html?content=03_Language_and_Syntax_14.html

Android 4.2で開発者モードを表示させる方法

Android 4.2では初期設定では、開発者モードは非表示に設定されています。
なので、開発者モードをONにする方法を紹介します。

※実機デバッグの設定方法についてはこの記事を参照

手順

設定画面 > 端末情報に移動
一番下の「ビルド番号」までスクロール
「ビルド番号」を７回タップ（途中で「後４回でデベロッパー」などと表示がある）
設定画面に戻る
「開発者向けオプション」という表示が追加されている

以上です。その「開発者向けオプション」に「USBデバッグ」などのメニューがあります。

http://www.wugfresh.com/faq/how-do-i-enable-usb-debugging-on-android-4-2-the-developer-options-menu-item-is-gone/

Flash / Flex:: Androidデバイス実機テストのための設定

Flash / Flex / Air:: Androidデバイスで実機テストするためには少し設定が入ります。母体がMacだとそんなにめんどくさくないです。Windowsだと色々設定しないといけないみたいです（こっちは試したことない）。

※Android 4.2では開発者モード表示をONにするひつようがあります。

手順（Mac編）

まずAndroidデバイス側の設定をします。

ホーム画面 > 設定に移動
アプリケーション > 開発に移動
USB デバッグをONに設定

USBでAndroidデバイスをコンピュータに繋げます。
Androidデバイスの通知エリアをドラッグダウンして表示させます。

USB接続をタップ
充電モードと表示されていたら、タップ
ストレージモードと表示されていたらOFFに設定

以上です。

これで、設定完了です。Flash / Flexから実機テストができるようになっているはずです。Airがインストールされていない場合は、最初にインストールするかどうかのダイアログが表示されるはずです。

http://help.adobe.com/en_US/flashbuilder/using/WSe4e4b720da9dedb5-2e7310a1136ab7c1811-7ff3.html

Android OS 2.2のデバイスにAdobe Airアプリをインストールしようとしたんだけど

古いAndroid OS（2.2）でも自作したAdobe Airアプリをテストしようとインストールを試みたんですが、出来ませんでしたorz

で、なんでインストールできないんだろうと思い、まずはAdobe Air自体をインストールしようとGoogle Playで探すが、見つからない。。。よく見ると、他のAirで作ったアプリもないようだ。

ネットサーフィンして情報収集したところ、どうもスペックを満たしてないとAirアプリをインストールもできないし、ストアにも出てこないようだ。

まぁ無理やり入れればできるのかもしれないけど、そんな機種でテストする意味ないので、諦める。

スペック要件は以下みたいです。

Google Android™ 2.2 operating system
ARMv7-A processor with vector FPU
OpenGL ES 2
H.264 and AAC hardware decoders
256MB of RAM

http://forums.adobe.com/message/3450026#3450026

2013/10/15

Flex:: Spark Listコントロールにタイトル行を追加する方法について

Flex 4.10:: Spark Listコントロールにタイトル行を追加する方法のメモ。
まだ、自分で実装していないけど、よさそうなウェブページ見つけたのでメモ。また自分で実装したら紹介します。

登録: 投稿 (Atom)

誰でも簡単iPhone / Androidアプリ開発