Archive

For 6月, 2011

AIR2.7でAIR for iOSを試してみた

2 Comments

ちょっとAIR for iOSを試す機会があったので、どうせならと思いAIR 2.7で試してみました
AIR2.7の情報はここらへんが参考になります
Adobe AIR 2.7 開発者向けリリースノート
Adobe AIR 2.7 公開 – akihiro kamijo

試した環境はWindows7 + Flex 4.5 SDK + AIR 2.7 SDK + iPhone4 iOS 4.3.3 でテストしました

この記事を実際に試すには、有料のApple iOS Developer Program に登録する必要があります

目次
1.Flex 4.5 SDKをダウンロード
2.AIR 2.7 SDKをダウンロード
3.PATHの設定
4.swfを用意する
5.開発用証明書とプロビジョニングプロファイルの用意
6.アプリケーション記述ファイルの用意
7.パッケージ化する
8.iPhoneで動かしてデバッグする方法
9.実機で動かしている様子
10.感想
11.参考にしたサイト

Flex 4.5 SDKをダウンロード

まずFlex4.5 SDKを落としてきます
Download Flex 4.5 – Flex SDK – Adobe Open Source
ここからAdobe Flex SDKをダウンロードします
2011年6月19日現在のバージョンは4.5.0.20967です

落としてきたら解凍してわかりやすい場所に配置します
俺はフォルダをflex_sdk_4.5に変えて C:flex_sdk_4.5 に配置してます

AIR 2.7 SDKをダウンロード

次にAIR 2.7 SDKを落としてきます
まだ日本語サイトは2.6のままだったので、英語サイトからダウンロード
rich Internet applications | Adobe AIR SDK

解凍して、AdobeAIRSDKフォルダの中身をまるごとflex_sdk_4.5のフォルダの中に突っ込みます
Flex SDKとAIR SDKがごっちゃになりますがこれで大丈夫です

PATHの設定

コマンドラインからいじるので、AIR SDKのコマンドを認識させるためにPATHの設定をします
先ほどのflex_sdk_4.5のbinフォルダまでのパスを環境変数に追加します

Windows7の場合
Winキーを押して「システムの詳細設定」と打ちEnterを押すとシステムのプロパティが開きます
または、マイコンピュータを右クリック→プロパティ→システムの詳細設定をクリック でも開きます

次に「詳細設定」タブから「環境変数」をクリック
下半分の「システム環境変数」の中から「Path」と書いてある変数を選んで編集
末尾に「;C:flex_sdk_4.5bin」を追加してOK
※Flex SDKのフォルダ名は自分で変えた名前に適宜変更してください

ちゃんとPATHの設定ができてるか確認
コマンドプロンプトを開きます
※Winキー+Rを押すと「ファイル名を指定して実行」の窓が出てくるので、「cmd」と打ってEnterでコマンドプロンプトが開く

mxmlc -version と打ってバージョン情報が出ればFlex SDKの設定はおk
また
adt -version と打ってちゃんとバージョン情報が出たらAIR SDKの設定もおk

こんな感じ
コマンドプロンプトでバージョン確認

swfを用意する

メインコンテンツのFlashを用意します

ステージのサイズはフルスクリーンの場合
3GS以前 320 x 480
iPhone 4 640 x 960
で作れば大丈夫です
ステータスバーを表示させる前提で作るときは、縦を20ピクセル減らして作ればおk

開発用証明書とプロビジョニングプロファイルの用意

用意したFlashをiOSのネイティブコードに変換するには、開発用証明書とプロビジョニングプロファイルというものを用意する必要があります
また、これを用意するためには有料のApple iOS Developer Program に登録する必要があります
ここは省略しますが、わからない人は以下のヘルプを参考にしてください
Adobe Flash Platform * iPhone 開発ファイルの入手と操作

※Developer Program登録から開発ファイルの入手までの方が大変だったりしますが・・・w

アプリケーション記述ファイルの用意

アプリケーションの設定を記述した、アプリケーション記述ファイルというxmlを用意する必要があります
Flash CS5/5.5なら自動的に吐いてくれるのですが、コマンドラインからやる場合は自分で書く必要があります

アプリケーション記述ファイルの全体的な内容は以下を参考にしてください
Adobe AIR * AIR アプリケーション記述ファイル
Adobe AIR * アプリケーション記述ファイルの構造

iPhone固有の設定は以下を参考にしてください
Adobe AIR * モバイルアプリケーションプロパティの設定

注意点として
versionプロパティはAIR2.5以降からversionNumberに変更になったので流用する場合は注意が必要です

idプロパティは、AppleサイトのiOS Provisioning Portal のApp IDsで発行したApp IDと一致していなければなりません
テストする場合は、net.ton-up.* のようにワイルドカードを指定しておくと便利です

iPhone4のRetinaディスプレイに対応する場合は、iPhoneタグの中に

<requestedDisplayResolution>high</requestedDisplayResolution>

を追加する必要があります

アイコンはなくても大丈夫ですが、iPhone4のために114×114の画像を1つ用意しました

例 – Warp-app.xml

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<application xmlns="http://ns.adobe.com/air/application/2.7" minimumPatchLevel="0">

  <id>net.ton-up.warp</id>

  <versionNumber>1.0.0</versionNumber>

  <filename>Warp</filename>

  <description/>

  <name>Warp</name>

   <supportedProfiles>mobileDevice</supportedProfiles> 

  <copyright/>

  <initialWindow>
    <content>Warp.swf</content>
    <systemChrome>standard</systemChrome>
    <transparent>false</transparent>
    <visible>true</visible>
    <fullScreen>true</fullScreen>
    <aspectRatio>portrait</aspectRatio>
    <renderMode>auto</renderMode>
    <autoOrients>true</autoOrients>
  </initialWindow>

  <icon>
  	<image114x114>icon/icon114.png</image114x114> 
  </icon>

  <customUpdateUI>false</customUpdateUI>

  <allowBrowserInvocation>false</allowBrowserInvocation>

  <iPhone>
    <InfoAdditions>
      <!&#91;CDATA&#91;<key>UIDeviceFamily</key><array><string>1</string></array>&#93;&#93;>
      </InfoAdditions>
      <requestedDisplayResolution>high</requestedDisplayResolution>
  </iPhone>
</application>

パッケージ化する

これでようやくパッケージ化の準備ができました
コマンドラインで、swfファイルなどが置いてある場所に移動して、以下のコマンドを入力します
実際には1行で全て入力する必要があります

adt -package 
     -target  
     -storetype pkcs12 -keystore <*.p12>
     -storepass < password>
    -provisioning-profile <*.mobileprofile> 
    <*.ipa> 
    <*-app.xml> 
    <*.swf>
    < icon>
    < files>
    ...

C:Userston>adt -package -target ipa-test -storetype pkcs12
    -keystore private_key.p12 -storepass hogehoge
    -provisioning-profile Test.mobileprovision
     Warp.ipa Warp-app.xml Warp.swf icon/

-storepassオプションは証明書のパスワードを入力します
コマンドラインだと履歴が残っていやだって人は-storepassオプションを付けずに実行すれば毎回パスワードを聞かれるようになります

-targetオプションで指定できるタイプは次のようなものがあります

  • ipa-ad-hoc:アドホック配布用の iOS パッケージです。
  • ipa-app-store:Apple App Store 配布用の iOS パッケージです。
  • ipa-debug:追加のデバッグ情報を含む iOS パッケージです(アプリケーション内の SWF ファイルも、デバッグサポートを使用してコンパイルする必要があります)。
  • ipa-test:最適化やデバッグ情報を含まずにコンパイルされた iOS パッケージです。
  • ipa-debug-interpreter:機能的にはデバッグパッケージと同等ですが、コンパイル時間が短くなります。ただし、ActionScript バイトコードが解釈され、マシンコードには変換されません。そのため、インタープリターパッケージではコードの実行が遅くなります。
  • ipa-test-interpreter:機能的にはテストパッケージと同等ですが、コンパイル時間が短くなります。ただし、ActionScript バイトコードが解釈され、マシンコードには変換されません。そのため、インタープリターパッケージではコードの実行が遅くなります。

無事成功したらipaファイルができてます
これをダブルクリックまたはiTunesにドラッグ&ドロップで追加して、iPhoneと同期することでiPhoneで実行することができるようになります

iPhoneで動かしてデバッグする方法

実機で動かしながらデバッグしたいんだけど・・・っていう時のために、Flashデバッガー(fdb)でリモートデバッグできるようになってます
fdbは、breakポイントを設定したり、traceログやエラーメッセージをリアルタイムで表示することができます

まずFlashをデバッグビルドします
そんで、パッケージ化する際に、

-target ipa-debug

を指定し

-connect < IPアドレス >

でデバッグするホストPCのIPアドレスを入力します

IPアドレスにローカルIPアドレスを指定する場合は、iPhoneも同じLAN内の無線LANに繋がっている必要があります

C:Userston>adt -package -target ipa-debug -connect 192.168.0.2
     -storetype pkcs12 -keystore private_key.p12 -storepass hogehoge
    -provisioning-profile Test.mobileprovision
     Warp.ipa Warp-app.xml Warp.swf icon/

まずコマンドラインで

fdb

と打ってfdbが起動したら

run

と打ち、待機します

その後、iPhoneに移動させたアプリを起動すると自動的に接続されます

接続されると、breakポイントを設定できるのですが、そのまま続行したい場合は

continue

と打つと、traceログをリアルタイムで受け取れるようになります

実機で動かしている様子

今回は過去にwonderflに投稿した以下の3つの作品をちょこっと変えて実機で動かしてみました

以下の3つはその元のFlash

ワープっぽいなにか – wonderfl build flash online

SquareLines – wonderfl build flash online

HueCircleTest 色相環テスト – wonderfl build flash online

上の3つをiPhoneアプリ化して動かしてる様子
ちょっと見づらくてすいません・・・w

感想

意外と既存のFlashがそのままサクっと動いてしまってちょっとびっくりしています
AIR2.7で初めてAIR for iOSを試したので、速くなったかどうかはわかりませんが、あまり速度を求めないようなアプリなら十分にいけそうな気がします
ただバグがまだいっぱいあって、作るときにはリリースノートの「既知の問題」というところをしっかり読んだほうがよさげです
俺は埋め込みフォントの問題と、Loaderのloadbytesが動かない問題、指を離すとmouseX、mouseYの座標がどっかにぶっ飛ぶ問題に遭遇しました
あと、やっぱりマウスと指では感覚がだいぶ違うので、そこらへんを意識して作らないと、操作しづらくなります
3つめのHueCircleTestもマウス前提で作ってあるので、指ではすごくやりづらかった・・・w
AIR2.7で作る場合はまだコマンドライン叩くしかないのでちょっと敷居が高い感じですが、パフォーマンスは実用レベルになりつつあるので、いろんな開発環境でサポートされるのを期待しときます

追記

この記事を公開した当日にFlashBuilder4.5.1とFlex 4.5.1が発表されて、FlashBuilderからAIR2.7のパッケージング機能を利用できるようになりました
Flash Builder 4.5.1 と Flex 4.5.1 SDK 公開 – akihiro kamijo

参考にしたサイト

Adobe AIR 2.6 開発者向けリリースノート
Adobe AIR 2.7 開発者向けリリースノート
Adobe AIR 2.7 公開 – akihiro kamijo
Adobe AIR * モバイルデバイス向けの AIR アプリケーションの開発

「ActionScript Beautifl Code」本が発売!俺の作品も載ってるよ!

No Comments

ActionScript Beautifl Code~Beautifl: Flash Gallery of wonderfl~

ActionScript Beautifl Code~Beautifl: Flash Gallery of wonderfl~という本が出ました

wonderflに投稿された作品の中で美しい作品をピックアップして1つずつ解説する、という本です

著者の池田さんはwonderflの美しい作品をまとめているBeautiflというサイトを運営されていて、
今回のBeautifl本に掲載されている作品はすべてhttp://beautifl.net/book/で見ることができます

ということでこのBeautifl本に自分の作品を載せていただきました!
初めて献本をもらってすこし興奮気味です!w

Beautifl本に自分の作品が!

自分のコードが本に載るなんて信じられない・・・
しかも恥ずかしいアイコンが・・・!

このBeautifl本は1つの作品を大体2~3ページで解説されてて、全部で96作品(!)あります

この作品の中身はどんな感じになってるのかなーとパラパラっとめくってみるだけでも面白いので、よかったら是非手にとってみてください!

MacBookProのメモリを4GBから8GBに換装

No Comments

MBP買って早々ですがメモリを8GBにしました
4GBじゃ仮想PCでWin動かすと死にそうだったのでw

準備するもの

1.メモリ

当然8GBのメモリが必要です
最初にMBPについてたメモリの規格がSODIMM DDR3-1333(PC3-10600)だったので、同じ規格のメモリから選びました
俺が買ったのは
シー・エフ・デー販売 Elixir ノートPC用メモリ DDR3-1333(PC3-10600) SODIMM CL9 4GB 2枚セット W3N1333Q-4G

4GB*2枚が7000円以下で買えるなんて素敵!

3.精密プラスドライバー

MBPの裏蓋を開けるときに必要です
ない人はメモリと一緒に買うといいんじゃないでしょうか
このドライバーならぴったり合うので不安な人はこれを買うといいかもw
アネックス(ANEX) 精密ドライバー プラス00×50 No.3450

手順

1.まず脱ぎます

2.メモリを用意します

メモリ

3.メモリを出しておきます

メモリを取り出したとこ

4.MBPの裏蓋のネジを外します

MBPを裏返すと、縁の方にネジがあります
10個あるので全部外します

裏蓋のネジの位置

ネジは場所によって長さが違うので、どれがどこのネジなのかちゃんとわかるようにしときましょう

外したネジ

5.蓋を外します

そのまま上にぱかっと外します
真ん中少し右の緑のがメモリです

裏蓋をはずしたところ

6.メモリを外します

少しわかりにくいですが、メモリの両側がプラスチックのバネ?で固定されているので指で外側に開くと、メモリがびよーんと上に上がってきます
そしたらそのまま引き抜きます

メモリを外すとこ

7.買ってきたメモリを取り付けます

メモリは先端の金色の所に触れないように注意

メモリ

メモリをつけるときは、先端の金色のとこが一箇所だけくぼんでるので、そことスロットのでっぱりが合うように付けます
まず下のメモリから、斜めにさしてぐっと奥まで入れたら下にさげます
両端のプラスチックがパチンって言ったらおk

メモリ換装完了!

8.裏蓋をつけてネジでとめて終了!

About Mac

わーい!

MacBookProを買いました!

No Comments

我が家にMacBookProがきました!
初めてのMacです
買ったのは13インチの下位モデル(MC700J/A)
Core i5の2.3GB
メモリ4GB
HDD 320GB

開封の儀!

MacBookPro

てってれー!

開封!

MBPを開いてまず気付いたこと

CapsLockとControlキーの位置が逆になってる!
素晴らしい!!

CapsLockの位置

あとトラックパッドが使いやすい!

こ、これは・・・イイネ!

でもまだ慣れないのでこれからいっぱいいじってみます!
これでiPhoneアプリ開発できる!

Blue Taste Theme created by Jabox