2011/02/20

Xib2JsでTitaniumアプリ作成入門

前回のエントリーで、Titaniumでアプリ開発をする際の面倒な点として、GUIのRADツールがまだ無いので、拙作のxib2jsというツールを紹介させていただきました。

今回は、もう一歩進んで、xib2jsで具体的にアプリを作成する手順をご紹介させていただこうかと思います。

1. Titaniumアプリの新規プロジェクトを作成
まず、Titanium Developerで新規プロジェクトを作成してください。


2. アプリケーションの画面を設計
次にInterfaceBuilderでアプリの画面を作成します。InterfaceBuilderを立ち上げてiPhoneアプリの作成を選択します(iPadアプリの場合はiPadを選んでください)。


次にTab Bar Controllerを画面構成ウィンドウにドラッグ&ドロップして作成します。


新規作成したTab Bar Controllerにインスペクターウィンドウから名称を設定します。名前は何でも構いませんが、スペース等を入れると後のJavaScriptのコンパイルでエラーが出ますので、ご注意ください。


 それぞれのTabにUIViewを配置しまして、以降は通常のやり方でUIComponentを画面上にドラッグ&ドロップで並べて行きます。



今回は、あまり見栄えはしませんが、Titanium Developerで作成されるデフォルトのアプリケーションと同じようなものにしてみましたが、適宜、いろんなUIComponentを使って画面を作成してみてください。ひと通りのもの使えるようにしてあるつもりです。



使用するUIComponentに名称が設定されてあると、後にxib2jsがJavaScriptのコードに変換する際に、その名称を使用しますので、適宜名称を設定しておきます。名称が未設定の場合はxib2jsの方で、コンポーネントの種類と通し番号で適当な名称に変換します。


[注意]
xib2jsはTab Bar Itemに設定されているラベルの名称でTitanium.UI.Tabを作成するコードを生成します。InterfaceBuilderはデフォルトで"Item 1"のようにスペースの入ったラベルを作成するので、このままでは後ほど生成されたJavaScriptをコンパイルする際に、エラーとなってしまいます。これを避ける為、ここではラベルを"Item1"のようにスペースを削除してます。

画面設計をひと通り終えたら、ファイルを保存しておきます。

3. JavaScriptコードへの変換

InterfaceBuilderで作成したファイルをJavaScriptへ変換するのにxib2jsを使用します。ここから(link)アプリをダウンロードしてください。zipで圧縮してあるので解凍してできた.airファイルをダブルクリックしてインストールします。

xib2jsアプリが起動したら、先程InterfaceBuilderで作成した.xibファイルをアプリにドラッグ&ドロップすると、JavaScriptに変換されます。



画面左上の[Save]ボタンを押して、変換されたコードを保管するディレクトリーを選択します。ここでは、最初に作成したTitianiumアプリのResourceフォルダー以下を指定します。

[注意]
xib2jsはファイルを保存する際に、同名のファイルが存在しても無断で上書きしますので、必要なファイルを誤って上書きしないようにご注意ください

また、xib2js上で作成されたコードは選択してコピー出来ますので、必要な部分のみを選択して、自分のコードにペーストして使用するという方法もあるかと思います。

4.コンパイル&実行

作成されたコードをTitanium Developer上のRun EmulatorでiOSシミュレータを起動します。JavaScriptのコンパイルに成功すると、シミュレータが立ち上がって先程作成した画面がアプリに反映されていることが確認できると思います。


ここで、Tabの順序がInterfaceBuilderとは逆になっているのは、ご愛嬌(笑)。JavaScriptを編集して、Tabの設定順序を変更してください。

このようにxib2jsは、まだInterfaceBuilderで作成した画面を100%完璧に再現するJavaScriptのコードに変換できるわけではありませんので、変換に失敗した場合は寛大な気持ちでコードを適宜修正して使用してくださいまし。

Code Strong,

2011/02/15

MogSnap

iPhoneユーザーの皆様、是非MogSnapという無料アプリをAppStoreからダウンロードして触ってみてください。

これ、最近注目度の上がってきているTitanium Mobileという開発環境を使って作られているのですが、恐らく言わなければネイティブのObjective-Cで作られたアプリだと思われることでしょう。それくらい素晴らしい出来なんです。

自分は少し前からTitaniumを触ってますが、AIRなどと比べてUIはネイティブのCocoa Touchを使いますので、他のアプリとのルックアンドフィールの統一感や、何よりパフォーマンスの面で有利です。

Packager for iPhoneは、現状自分の持っているiPhone 3Gでは使い物にならないくらいの速度しか出ないのに比べて、上述のMogSnapなんかもボタンの表示が(いま現在は)おかしくなるようですが、何とか動かせられます。

まぁ、AIRにはAIRの良い面もあって、例えば、Particle BreakやRealCircleのようなゲームをTitaniumで作るのは、逆にちょっと難しいような気もします。

ただ、Titaniumの場合は、Titaniumが提供する環境で解決できない問題が発生した場合は、ネイティブコードで作成したモジュールを呼び出すという技が使えるので、(もちろんそれ用に別途用意する必要があるので)労力を別にすれば、作れないアプリなど無いのかも知れませんが。

とまぁ、ここまで読んで試しにTitaniumを触ってみようと思われた方、Titaniumの現在の泣き所は、開発ツールがまだ充実していない点です。アプリは基本的にJavaScriptで記述するのですが、GUIのRADツールが現状用意されていないので、いまどきGUIをコードで記述して構築しないと行けません(FlexでいうところのMXMLのような仕組みも無い)。

なので、そこんところが面倒だという方は、拙作のxib2jsというアプリを試してみてください。これは、Interface Builderで設計したUIデータをTitanium Mobile用のJavascriptコードに変換するAIRアプリです(変換精度は要改善)。

そう、AIRはこういうちょっとしたツールを作るのにも便利ですよね。

Titaniumに関する情報は以下のblogに詳しくまとめられておりますので、ご参考にしてくださいまし。

http://d.hatena.ne.jp/donayama/

とにかく、いま日本のTitanium開発者の間ではMogSnapに追いつけ追い越せって感じで盛り上がっていますので、今後も面白いアプリで出てくると良いなぁと思ってます。

Code Strong,

2011/02/07

WebGL Lesson1


初めてのWebGL

やっていることはここに書いてあるのと全く同じです。Chrome9など、WebGLに対応したブラウザなら以下に表示されているはずです。



とりあえず、触ってみましたよレベル。

2011/02/05

De MonsterDebuggerを使ったデバッグ

第1回AIR for Android勉強会で、自分のお薦めの開発スタイルとして、なるべくデスクトップ上で開発するという話をさせていただきました。

AIRの利点はマルチプラットフォーム環境ということです。マルチプラットフォームには2つの意味があります。1つは、MacやLinux、WinなどのOSを超えるという意味でのマルチプラットフォーム。

もうひとつは、デスクトップやモバイル、TVなどの機器を超えるという意味でのマルチプラットフォーム。要するに、AIR for Androidだろうが、所詮AIRアプリなので、それなら開発効率を最優先して、画面の小さなデスクトップアプリとしてあらかた開発してしまい、デバイス固有な部分やパフォーマンスなどの合わせこみは、大体アプリが動き始めてから行えば良いではないか?という発想です。

そういう開発スタイルをとった場合に、デバッグ用のツールとして重宝したのがDe MonsterDebuggerです。

1. インストール/実行方法
De MonsterDebuggerのホームページからAIRファイルをダウンロードして、インストールします。

De MonsterDebuggerを起動すると、Fileメニューに"Export Client Class"というアイテムがあるので、これを選択し、De MonterDebuggerと接続する為のクライアントクラスを自分のプロジェクトディレクトリーを指定して作成します。


最後に、自分のアプリケーション内でMonsterDebuggerのインスタンスを作成しておけば、アプリケーションを起動した際にDe MonsterDebugerと接続します。
import nl.demonsters.debugger.MonsterDebugger;
var debugger:MonsterDebugger = new MonsterDebugger(this);


2. 便利な使い方
De MonsterDebuggerを使う利点は、簡単にログをトレースしたりメモリーリークのチェックができたりすることもあるのですが、個人的にはLive editing機能によってDe MonsterDebugger側から実行時にオブジェクトのプロパティを編集できるのが非常に便利だと感じました。


表示オブジェクトのちょっとした座標やサイズの調整に、コンパイル⇒実行というサイクルを繰り返さないでも済むのは、ありがたいです。

3. 注意点
De MonsterDebuggerをAIR for Androidアプリのデバッグに使う際に、1つだけ注意が必要です。

それは、アプリケーション記述ファイルのsupportedProfilesタグ(下記)を無効、もしくは"desktop"等にしないといけません。
<supportedProfiles>mobileDevice</supportedProfiles>
これは、AIRアプリとDe MonsterDebuggerはLocalConnectionで接続されるのですが、この機能はmobileDeviceプロファイルではサポートされていないからです。

4. ハードウェアキーの割り当て
同様に、adlはmobileDeviceプロファイルが指定されていると、メニューからAndroidのBack/Menu/Searchキーをエミュレーションできるのですが、これが使えなくなりますので、別途Back/Menu/Searchの機能を矢印キー等に割り当てておくこともお薦めします。
private function keyHandler(e:KeyboardEvent):void {
    switch(e.keyCode) {
    case Keyboard.MENU:
    case Keyboard.DOWN:
        //Menu選択時の処理
        break;
    case Keyboard.LEFT:
    case Keyboard.BACK:
        //Back選択時の処理
        break;
    }
}

AIR for Android勉強会の発表資料

第1回AIR for Android勉強会で「Flashコンテンツの移植ノウハウ」というお題で発表させていただきましたので、その資料をここに晒しておきます。

AIR for Android勉強会 Flashコンテンツの移植ノウハウ

De MonsterDebuggerをAIRアプリケーションのデバッグに使う為の改造方法も近日中に公開しますので、お楽しみに。


[追記]改造しなくてもちゃんと動きました(汗 何か勘違いしてたようです。資料の方もアップデートしました。

2011/02/04

引っ越ししました

これまで、http://homepage.mac.com/daoki2/で展開していたFrog on AIRですが、2011年2月からこちらに移って心機一転がんばりたいと思います。

前のblogはmac.comドメインであることを気に入ってたのですが、最近はすっかりiPhoneよりもAndroidに興味が移ってたり、あと何よりもHTML手打ちがすっかり億劫になってしまって、blogの更新もままならないので、思い切って引っ越すことにしました。

Bloggerのいじり方がまだよくわかっていないので、見た目とかも徐々に整備して行くつもりですので、その過程を楽しむのもまた一興かも知れません。

あぁ、前のblogにも告知を載せないと・・・めんどい・・・