FlexでiOSアプリを作ってみた。

AdobeAIR2.6も公開され、AIR for iOSも公式に実装される形になりました。
というわけでFlexでiOSアプリを作ってみます。
なぜFlexかというと、Flashはタイムラインの概念がどうにもわかりにくく扱いきれてないので・・・

必須なものはAIR2.6SDKとiOSのデベロッパー登録のみです。
コレを参考に。
FlashBuilderなんかがあるとビルド設定あたりは勝手にやってくれるので楽です。
FlashBuilderに最新版のSDKをいれ、新規アプリケーションを作成します。

はじめはWindowedApplicationが親になっているので、こいつをApplicationに変更。
BorderContainerにLabelいれただけでのHelloWorld作ります。

FlashBuilderであれば自動的に「プロジェクト名-app.xml」ファイルが出来ているので、これの中身を編集。
とりあえずiPhoneの部分を活かし、supportedProfilesをmobileDeviceに。
FlashBuilderが勝手にコンパイルしてくれるので、出来たswfとxmlを使ってadtでipaファイルにコンパイル。
ipaファイルができたらiTunesのAppに放りこんで実機と同期。

サクっとiOSアプリが完成しました。
特にFlexアプリケーションでも問題なく動くようです。
これを登録するときはApplicationLoaderを使うのかな？

アプリの方は若干起動が重い感じがしますが・・・。Flexベースなせいでしょうね、きっと。
Flashちゃんとやらないとなぁ・・・ああめんどくさい＞＜
cocos2d for Flashとかあればいいのに！

でもこれでWin,Mac,Android,iOSとワンソースでいけるのはなかなか魅力的ですね！
あとはAirのランタイムが初回起動時にネット接続必須なのがなんとかなってくれるといいんだけどなぁ

Air2.0Beta!

Air2.0ついに公開されました。

ここからダウンロード出来ます。

色々あって、このアプリを作ってます。
（見た目とかデフォのままなのでいけてないですが・・・）

Adobe AIR Dayで紹介されるのかな？
行くけど今回は喋りません :)

Air Flex visible=false で領域を確保しないように

良く忘れるのでメモ

通常Air,Flexではlayoutを指定した状態（verticalとかhorizontalとか）で、配置されたオブジェクトのvisibleをfalseにしても、表示が消えるだけで詰めてはくれません。

詰める場合は includeInLayout というアトリビュートを false にしてやればＯＫです。

merapiがもたらすAirとJavaの素敵な関係

Air（Flex）でJavaを呼び出すという夢のようなライブラリが登場したようです。
まだベータですが試してみましたのでつらつらと書いていきます。

参考
公式サイト
マイコミの紹介
javaとairを繋ぐmerapiを使ってみた。

まずはJava側の実装から

merapi本体を解凍した中にある framework/java/libs にあるのがJava側で必要なライブラリ
適当なクラスを作って、IMessageHandler を implements する

public static void main の中で Bridge クラスに、自身を regist する

public class MerapiTest implements IMessageHandler {
 public static void main(String[] args) {
  System.out.println("start");
  Bridge.getInstance().registerMessageHandler("merapiSample", new MerapiTest());
 }
}

第一引数でBridgeに登録するID（タイプと呼ぶらしい）、第二引数が自身のJavaクラスのインスタンス

flexから呼ばれた時に handleMessage がcallされるのでこれをクラスに書いておく（インターフェース定義されてます）

  public void handleMessage(IMessage obj) {
    try {
      System.out.println("flex > java :"+((Message)obj).getData());
      Message response = new Message("merapiSample", "hello merapi");
      Bridge.getInstance().sendMessage(response);
    } catch(Exception e) {
      System.out.println("Caught Exception");
    }
  }

IMessageというのがFlexから受け取るデータ、MessageにキャストしてgetDataすると中身を取得出来る。
System.out.println("flex > java :"+((Message)obj).getData());

void なんで return値はなし、Flexに情報を返したい場合は Bridge の sendMessageを使う。
Messageの第一引数にregistしたのと同じIDを指定、第二引数に送りたいデータをセットする。
Message response = new Message("merapiSample", "hello merapi");
Bridge.getInstance().sendMessage(response);

続いてFlex側の実装

merapi本体を解凍した中にある framework/flex/libs にあるのがflex側で必要なライブラリ

まずはBridgeのインスタンスを作成する

<merapi:BridgeInstance id="bridge" result="handleMessage(event)" />

こっちはresultのfunction名を指定出来る、Javaと同じにしとといた方がわかりやすいかもね！

メッセージの送信は以下のように

var message:Message = new Message("merapiSample","from flex");
bridge.sendMessage(message);

MessageクラスはJavaとおんなじ使い方でOK

実行方法

まずは java のクラスを起動してやる必要がある
起動して regist した時点で listen 状態で待機される

この状態でFlexを起動してやると、メッセージを送信出来る
Flexが終了した時点でJavaも落ちる

欠点はJavaを起動する必要がある所かな・・・
終了は一緒に終わってくれるので問題なさそうだけど、Airの起動時にJavaが動いてないとエラーになるんで
なんとかしてJavaを起動してAirを起動するような仕組みが必要

うまく使えばクライアントサイドで今以上に色んな事が出来そうですね！
Grailsとの絡みで考えると、Grails1.1からGORMが単体で使えるようになっているのでsqliteを使った生なDBでなく、GORMを使ってHSQLとかでクライアントDBを実装出来たら素敵な気がする！

Airで画面解像度の取得

Airアプリケーションでユーザの画面解像度を取得する方法、忘れそうなのでメモ

Screen.mainScreen.visibleBounds

返り値はRectangle、macの場合 x , y , w , h で x , y はドックとメニュー分の位置がくるので、
領域として使えるのが w と h で、実際の解像度は x+w , y+h で取得可能。

拡大／縮小させたいメインコンテンツを%指定して作っておけば画面サイズにあわせて自動的にフルスクリーンになるアプリが作れそう。

と、思ったけど最大化ボタンを使えばいいじゃん・・・
ご丁寧に maximize() なんてメソッドもありました。

・・・まぁ何か使う時もあるでしょう！

Air+Grailsでファイルアップロードの巻

AirにはFileReferenceというアップロード用のクラスが用意されてますので、そいつを使います。

 var fileRef:FileReference=new FileReference();
 fileRef.addEventListener(Event.SELECT,selectHandler);
 fileRef.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);
 fileRef.browse();

// ファイル選択後アップロード処理を実行
private function selectHandler(event:Event):void {
  var file:FileReference = FileReference(event.target);
  var uploadURL:URLRequest = new URLRequest();
  uploadURL.url = "http://localhost:8080/grails/sample/upload";
  file.upload(uploadURL);
}

// これがないとエラー画面が出ました
private function ioErrorHandler(event:IOErrorEvent):void {
}

Grails側に受けのアクションを作ってやります。
普通にMultiPartFormDataが来るので、処理してやるだけです。

class SampleController {
  def upload={
    def file=request.getFile("Filedata")
    file.transferTo(new File("/hoge",params["Filename"]))
  }
}

Air(Flex)か〜ら〜のHTMLか〜ら〜のJavascript

AirのHTMLタグから、パッケージに含んだファイル（とかローカルファイルとか）を読み込む方法

        var file:File = new File("app:/html/index.html");
        var src = new File(file.nativePath).url;
        html.location=src;
      
        <mx:HTML id="html" />

パッケージ内にあるJavaScriptは相対パスで読めます。
HTMLとinclude.jsが同じ場所にあるとすれば以下のように。

 <script src="include.js"></script>

JavaScriptが全然別のドメインとかでもひっぱてきて使えちゃいますよ。

 <script src="http://hoge.jp/outer.js"></script>

なんでJavaScriptのコアをどっかにおいておけばアプリ本体を更新せずにサーバのJSを置き換えて更新も出来ちゃう。

でもってAirからHTMLでロードした中のJavaScriptの実行方法
htmlのcompleteイベントからdomを取得出来るので、、、

      private function loadCompleteHandler(e:Event):void {
       dom=e.currentTarget.domWindow;        
      }
      <mx:HTML id="html" location="{src}" width="100%" height="100%" complete="loadCompleteHandler(event)" />

domの直下にスクリプトがバインドされているので、それを実行すればオッケィ

html.functionName();

思い立ったが吉日

誰に見せるわけでもないけど、やれる事はやっておこうという精神で。

で、Adobe Airの話です。
前から気になっていたのですが、なかなか触る時間もなく放置だったAirをインスコ。
適当に調べてとりあえずHelloWorld! > オウム返しの作成

Hello.xml

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M6" version="1.0">
<filename>Hello</filename>
<id>com.kujirahand.test.Hello</id>
<initialWindow>
<content>Hello.html</content>
<visible>true</visible>
<width>640</width>
<height>480</height>
</initialWindow>
</application>


Hello.html

<html>
<head>

<title>Hello</title>
<script type="text/javascript"><!--
function say() {
alert("Hi "+document.getElementById("name").value);
}
//-->
</script>
</head>
<body>
Input your name:<input type="text" name="name" id="name">
<input type="button" onclick="say()" value="OK"/>
</body>
</html>


何事も無く順調に、、、ってあれ、日本語入力できなくね？
ちょっと調べてみるとまだ日本語入力には対応してないっぽい、、、しょぼーん
というわけでしばらく様子見なAirでした。