ラベル Titanium の投稿を表示しています。 すべての投稿を表示
ラベル Titanium の投稿を表示しています。 すべての投稿を表示

2012/11/07

【7日目】Tabletかどうかの判定

この記事は、@astronaughts が始められた「Titanium mobile “early” Advent Calendar 2012」向けに書いています。11月1日 ~ 30日まで毎日誰かがTitanium Mobileについての記事を書いていくというイベントです。

 ■Tabletかどうかの判定 
マルチデバイスをターゲットにしたアプリを制作する場合に、対象の端末がタブレットかどうかを判定したい場合があると思います。 Titanium Studioで作成されるテンプレートだと、以下のような素敵コードでタブレットかどうかを判定してくれます。
//considering tablet to have one dimension over 900px - this is imperfect, so you should feel free to decide
//yourself what you consider a tablet form factor for android
var isTablet = osname === 'ipad' || (osname === 'android' && (width > 899 || height > 899));
iOSの場合はこれでも問題無いでしょう。Ti.Platform.osnameが'ipad'を返せば、それは間違い無くタブレットなのでしょうから。

でも、Androidの場合はどうでしょう?上記コードだと縦もしくは横の解像度が900ドット以上だとタブレットと判定するようです。 これそのまま使うと、いまなら多くのAndroid端末がタブレットと判定されてしまうでしょう。ましてやauの冬モデルで発表されたHTC J butterflyなんかは5inchサイズながら1920x1080のフルHD解像度です。Nexus10を別にすれば、その辺のタブレットも真っ青な解像度ですよ。

コメントにもあるようにこの判定方法は完璧とはほど遠く(それにしても"feel free to decide yourself"とは何とお気楽な...)、このような解像度で判定するやり方は進化の早いスマートデバイス業界にはとても通用しそうもありません。 

では、どのようにしてタブレットかどうかを判定すれば良いのでしょうか?タブレットをタブレットとして我々が認識するのはやはりその画面サイズだと思われます。Ti.Platform.DisplayCaps以下にスクリーンサイズを得るメソッドが無くても臆することはありません。自分で計算して求めればいいのです。

HTC J butterflyがスマホで、Nexus7がタブレットとして世の中に認知されているなら、5.0 - 7.0inchの間にタブレットかどうかの判断ポイントがあるようです。以下の例では6.5inchサイズより大きければタブレットと判定するようにしてます。
function isTablet() {
  // xdpi, ydpiが未定義のプラットフォームもあるのでその場合はdpiを使用
  var xdpi = Ti.Platform.displayCaps.xdpi == undefined ? Ti.Platform.displayCaps.dpi : Ti.Platform.displayCaps.xdpi;
  var ydpi = Ti.Platform.displayCaps.ydpi == undefined ? Ti.Platform.displayCaps.dpi : Ti.Platform.displayCaps.ydpi;
  var disp_size = Math.sqrt(
    Math.pow(Ti.Platform.displayCaps.platformWidth/xdpi, 2) +
    Math.pow(Ti.Platform.displayCaps.platformHeight/ydpi, 2)
  );
  return (disp_size > 6.5 ? true : false); // 6.5インチ以上ならタブレット
}
え?いまだとスマホとタブレットの間にphabletっていうジャンルがあるって?
知らんがな...

ってことで、明日は@masapla さんです。よろしくお願いします。

Code strong,

2012/09/21

CloudCore VPS

自分で開発したプライベートな非公開のコードをそろそろsvnとかgitなどのVCSでちゃんと管理したいなぁと思ってました。で、QNAPとかDroboとかのNASでsvnやgitのサーバーとして運用できるものがあるので、それの導入を当初は考えていました。

ところが、ひょんなことからCloudCore VPSという仮想専用サーバーの存在を知り、NASの購入に5-6万も費やすくらいなら、こちらを利用した方が安いかもと思い立ち、今回試しに使ってみることにしました。

もちろんこの場合は、自分でちゃんとデータのバックアップを取ることが前提になりますが、まぁそれなりにちゃんとしたサービスなら簡単にトラブルが起きるとも考えにくいと楽観視してます。いずれバックアップのサービスも開始されそうですし。

運用するOSはとりあえず何か不都合があるまでは、デフォルトのCentOS5.xのままでいいかなと思い、ここを参考に必要最低限の設定を行い、svn+SSLのサーバーとして使用できるところまでに関してはここを参考にセットアップを完了しました。

(CloudCoreはデフォルトではほとんど何もインストールされておらず、それゆえ自分の好みに応じてカスタマイズがやりやすいというのを1つの売りにしているよう?です)

これでノマド生活になっても、どこからでもネットにつながってさえいれば自分のコードへのアクセスやコミットができるようになりました。

後はサーバーサイドの勉強にnode.jsでもセットアップしていろいろ実験してみようかなと思っておりますが、そのような個人的なプライベートサーバー的な使用なら、VPSのスペック(CPU物理1Core/RAM 2G/HDD 10GB)もいまのもので充分以上だと思います。

こういうものが年間1万円程度で利用することができるのだから、まったく良い時代になったものだと思います。これからはこのようなプライベートなサーバーに自分専用の環境を構築し、自作のモバイルアプリでスマホからアクセスして仕事に役立てる、というような使い方をする人が増えるのかも知れませんね。

プライベートサーバーゆえ公開はしませんが、何か面白いものでも出来たらここのblogでまたお知らせしたいと思います。

あ、冒頭のそもそものCloudCore VPSを知ったきっかけですが、自分がちょっと関わっているTitanium Mobileユーザー会用のサーバーが、KDDIの開発者支援制度を通じて無償提供されることになり、その環境がCloudCoreだったというわけです。

そのユーザー会の第1回目の会合が9/24にありますので、もしご興味がございましたら是非ご参加してみてください(atnd)。

ではでは。

2012/08/15

QuickTiGame2d UI Firstlook

Titanium Mobile用に2D GameエンジンモジュールのQuickTiGame2dってのがあるのですが、自分はゲームとかはちょっと作れません。

でも、UIのアニメーションに使えると面白いと思いたち、作者の方にSpriteのテクスチャーにblobを突っ込めるようにお願いしてみたところ、v.1.3でサポートされましたので早速試してみました。

仕組みは簡単で、通常のTiのViewでUIを作成すると、.toImage()メソッドでViewのイメージのblobを作成できるので、それをSpriteのテクスチャーとして指定します。

で、通常はUIのViewを表示しておいて、UIをアニメーションさせる時だけGameViewを前面に表示させて、アニメーションが終了するとまたUIのViewに切り替えるだけです。

以下がそのサンプルですが、これは2つのViewをフリックで行き来し、行けない方向にフリックするとViewが少し傾くというAndroidではお馴染みの動きです。使っているのはiPodなのですが(笑)


このように簡単に2D効果を使ったUIを作れそうなのですが、いま流行りの折り紙みたいなUIに応用するにはやはり3Dのサポートが必要なので、QuickTiGame3dの登場が待たれます(笑)

とりあえず、短い時間でやっつけで作ったので、コードの整理とサンプルのUIをもう少し追加してからソースコードは公開したいと思います。

Code strong,

2012/05/05

xib2js & TiMockをリリースしました

frogonmobileのサイトにxib2jsの新版とTiMockをリリースしましたので、ご案内すると同時に簡単なQuick startガイドをここに記したいと思います。

基本的に、frogonmobileのサイトで公開している英語版のQuick Start Guideの和訳+αみたいな感じにしたいと思います。

ここのサイトに来ていただいている方ならばxib2jsに関してはもうご存知だと思われますが、前回のエントリーで述べた通り今回はこれのバージョンアップと共にTiMockというTitanium Mobileアプリを併用することで、モックアップを簡単に作成し実機で確認できる環境を構築することができるようになったのが大きな売りとなっております。

ワークフロー的には、下図のようにXcodeでUIのコンポーネントを並べて.xibファイルを作成し、それをxib2jsでJavaScriptに変換した後にTiMockを使って実機やシミュレータ上で確認しながらコンポーネントの位置や大きななどをコードを改変して微調整するという感じになります。


1. XcodeでUIを作成
XcodeでFileメニューからNew Fileを選択し、iOSのUser Interfaceのテンプレートを選択します(ここではEmptyを選択してます)。


後は、コンポーネントを並べてUIを構築していけば良いのですが、ここでの注意点としましては、ファイルの形式を"Interface Builder3.1"を選択しておくことです。それ以外のバージョンではxib2jsが正常にコードを生成できないことを確認してます。


2. xib2jsで.xibファイルをJavaScriptに変換
UIが出来たら、毎度お馴染み.xibファイルをxib2jsにドラッグ&ドロップすると、いつもの通りにJavaScriptのコードが生成されます。


今回のバージョンから生成されるJavaScriptがCommonJSのスタイルに則っていることが確認できると思います。

3. TiMockと連携してUIのカット&トライを行う
さて、ここからが今回の売りであります、TiMockを併用したUIのカット&トライです。まず、TiMockを実機かシミュレータで起動できるようにまずはビルドから始めます。

Githubからコードをダウンロードしたら、Titanium Studioで適当な新規モバイルプロジェクトを作って(Titanium Mobile SDKは2.0を選択する)コードや画像ファイル等をコピーし、ビルドします。

特に難しい部分は無いと思いますが、実機用にビルドする時にはui/ApplicationWindow.jsファイルの31行目のコードのコメントを外してください。
//require("api/Includes");
シミュレータで実行する場合は、そのままビルドして問題ありません。

ビルドが完了しましたら、TiMockを起動してください。TiMockは起動するとBonjourで_timock._tcpサービスをサーチします。xib2jsが起動していれば、xib2jsがこのサービスを提供しますので、TiMockアプリ上に"TiMock Service"というボタンが見えていると思います。


このボタンをタップすると、xib2jsとTiMockの通信が確立されます。xib2js上のSyncボタンが有効になるのと、TiMock上のボタンもConnectedとなったことが確認できると思います。


試しに、この状態でSyncボタンをクリックすると、変換されたJavaScriptのコードがTiMock側に転送されて、UIを実機上で確認できます。


後はxib2js上で微妙なレイアウトの崩れなどを、コード上でコンポーネントの位置やサイズのプロパティ値を調整しながらカット&トライしてUIのモックを仕上げていきます。コードを編集したら、都度Syncボタンをクリックすることで実機上で修正内容が反映され確認できます。

尚、コードの編集に関しては、TiMock上で正常に動作させるには、かなり制約されたものになります。

まず、関数とexportsの定義は変更できません。また、self変数に何らかのUIコンポーネントのインスタンスを格納し、それを返り値として返す形を取る必要があります。
function ApplicationWindow() {             // この行は編集してはダメ
  var self = Ti.UI.createWindow();           // self変数にインスタンス化した
                                                              // UIを格納する
  // ここの中はわりと自由に書ける

  return self;                                          // 必ずselfを返すようにする
}                                                           // この行は編集してはダメ
module.exports = ApplicationWindow; // この行は編集してはダメ
このルールを守れば、逆に関数の中身に関してはわりと自由に書けますが、あくまでも目的はUIのモック作成なので、あまり本格的なアプリケーションロジックをここでコーディングすることはお薦めできません。

とは言え、どんなコードなら動くのかはある程度試行錯誤が必要だと思いますので、いろいろ試してみて自分なりの答えをみつけてください。

また、xib2jsは拡張子が.xib以外のファイルを受け取った場合は、そのファイルをTiMockに転送します。TiMock側は受け取ったファイルをTi.Filesystem.applicationDataDirectoryに保存しますので、コード上でパスを適切に設定することで、画像をUIにはめ込むことが可能です。


ここで指定するパスは、実際のアプリを作成する際にリソースが置かれる位置とは違うものと思われますが、画像がどのような位置・サイズで表示されるのかを確認するには便利に使えるのでは無いかと思います。

また、xib2jsにはファイルをまとめて複数ドラッグ&ドロップしても、同時には1つのファイルしか処理できませんので、お手数でも1つずつドラッグ&ドロップしてください。

4. コードの保存
さて、最後にここまで調整してきたモックのコードを保存します。Saveボタンをクリックするとファイルの保存先を選択するダイアログが表示されますので、Titianium Studio上の適切なプロジェクトのResourceフォルダーを選択してください。


尚、いつもの注意点ですが、保存の際にxib2jsはファイルの存在の有無を確認しませんので誤ってファイルを上書きしないようにお気をつけください。これ、いい加減にちゃんと対応しないといけませんね。。

ここまで来たら、後はTitanium Studioに引き継いでアプリケーションの開発を継続しましょう。

Code Strong,

2012/04/23

xib2js 2.0 preview

久々の更新ですね(^_^;

Titanium Mobile 2.0 ローンチ記念イベント in Tokyo!!が開催されましたので、参加してきました。イベントの詳細レポートはTitanium Newsをどうぞご参照ください。

イベントの中でLTの枠がありましたので、長らく放置してましたxib2jsの新しいバージョンを発表させていただきました。ちなみに、デモがメインだったのでスライドの公開予定は特にありません。

xib2jsで生成するJavascriptは当時のKitchenSinkを参考にしましたので、現在は推奨されていない所謂マルチコンテキストと呼ばれていたスタイルのコードを生成していましたが、今回のバージョンアップで、CommonJSスタイルのコードを生成するように変更しました。

まぁそれだけでは面白くないので、TiShadowを真似て変換したJavascriptを実機やシミュレーターに転送して実行できる機能を組み入れました。

TiShadowでは、HTTPのサーバーと接続するのにIPアドレスをいちいち打ち込む必要がありますが、xib2jsはMac + iOSでの利用を前提にしているので(なぜならXcodeで作成した画面レイアウトをJavascriptに変換するツールなので)、簡単に接続できるようにBonjourを使うようにしました。

後は、画面のレイアウトを作った後に画像データを貼り込むケースを想定して、.xibファイル以外をドロップした時は、端末のアプリケーションデータディレクトリーにファイルを転送して保存する機能も追加しました。

実際のアプリを作成する時は、違うディレクトリーにアセットやリソースを置かれるとは思いますが、実機上で画像の位置やサイズとかを簡単に確認・調整するには便利に使えるかなと思ってます。

正式に公開するまでには、まだじゃっかんコード整理以外にもやることがありますので、もうしばらくご辛抱くださいまし。

Code Strong,

2011/06/24

Titanium Meetup Tokyo #5 参加

6/21に開催されたTitanium Meetup Tokyo #5に参加してきました。

基本的に、各々がモクモクとコーディングをする(だけの)会なのですが、@masuidriveさんを捕まえてTitaniumの深いところまで質問できるのが、個人的には魅力的だと思いました。

ちょうどいま、Titaniumを使って初めて本格的なアプリを作ってて、幾つか質問したいことも溜まってたし、今回は開催地がオフィスの近くということもあって、いろいろ好都合でした。

ってことで、恥を忍んで、質問したことをここに晒そうと思います。

1. Toolbarのあるウィンドウから無いウィンドウに遷移すると黒背景が見える
app.jsでbackgroundColorを黒に設定してました・・・orz お恥ずかしい

2. 階層の深いウィンドウから元のウィンドウに一気に戻る
下図のように、どんどん階層の深いウィンドウに潜って行って、一気に一番はじめのウィンドウに戻りたい時ってありますよね?でも、どうやればいいんでしょう?


これは、増井さんも良いやり方がわからないとのことでした。でも、必要性はわかっていただけたと思うので、そのうちFrameworkでサポートされるかも知れませんね?こういったリクエストを直接なかの人に伝えられるというのも、こういう会合に参加するメリットだと自分は思いますよ。

で、自分は、一番はじめのウィンドウにカスタムイベントを飛ばして、そのハンドラーの中で直下の子ウィンドウをクローズすることで、ムリヤリ実現していたのですが、増井さんもいまはそれしかなかろうということでした。

まぁ、これでやってやれないことは無いのですが、やってみるとわかりますが、元に戻るのに結構時間がかかります。一瞬ハングったかと思うくらい・・・多分、内部ではいろいろ後始末に追われているんでしょうね(汗

3. アプリケーションがバックグラウンドに回った/戻った時のイベント
アプリケーションが動作中に電話がかかってきたなどで、バックグラウンドに回ることがあるじゃないですか?あるいは、ユーザーがホームボタンを押したとか。そういう時、あるいは逆にバックグラウンドからまた復帰した時のイベントは無いのか?ということを最後にお尋ねしました。

これに関しては、ドキュメント化されていないけど、Ti.App.addEventListener()で以下のイベント設定すれば取れるということでした。

pauseアプリがバックグラウンドに回った
resumeアプリがバックグラウンドから復帰

流石にこれは、ドキュメントに書いておかなアカンやろ(笑

Code strong,

2011/06/12

書評:Titanium Mobileで開発するiPhone/Androidアプリ


6/10に世界初のTitanium Mobile本こと「Titanium Mobileで開発するiPhone/Androidアプリ」が発売されました。

レビューをほんの少しお手伝いさせていただいた関係で、ご献本いただきましたので、軽く中身をご紹介させていただきます。

第1章はTitanium Mobileを開発したAppcelerator社の紹介やツールの将来展望、そして気になる価格体系の情報など。そしてそして、最後に例のSection3.3問題に関して。昨年のいま頃は、もうこれからどうなるの?って感じで、個人的にTitaniumに対するモチベーションもかなり削がれた時期だったのですが、まさか1年経って開発環境としてこんなに注目を集め、入門書まで刊行されることになるとは、感慨もひとしおですね。

第2章は開発環境のインストールから、Hello worldまで。Titanium Mobileは開発環境もターゲットもマルチプラットフォームに対応しているので、すべての環境を網羅するのは大変だったと思うのですが、非常に丁寧に解説されてます。

第3〜5章は、具体的なアプリの開発を通じて、より詳細にTitanium Mobileの使い方を学べます。Twitterクライアントを題材にしているので、多くの方に非常に参考になる内容では無いでしょうか?また3-4章でスクリプトファイルの分割に関しての解説があるのですが、個人的にはTitanium Mobileでアプリを作る際にわりと肝になる部分ではないかと思いますよ。

第6章は、Titanium Mobile APIリファレンスとなってます。本家Appceleratorのサイトよりも詳細で、豊富なコードサンプルも掲載されており、本書の実に1/3ほどのボリュームをこのAPIリファレンスに費やしています。簡易リファレンスと書いてあるのは単なる著者のご謙遜でしょうね(笑)。このAPIリファレンスの為だけに本書を購入しても良いくらいです。

そして、充実のAppendixへと本書は続きますが、これより先は実際に手に取ってみて皆さんの方で是非ご確認してみてください。拙作のXib2Jsも紹介されてて、うれしい限りです(何でも、Appcelerator社の研修テキストブックにも紹介されてるとか?)。

ってことで、これから始める方にも、既にTitanium Mobileを開発に使っている方にもお薦めの一冊だと思います。

Code strong,

2011/05/14

AIRとTitanium MobileがBonjour

モバイル端末上のアプリケーションデータを、PC上の別アプリケーションに送りたいような場合に、HTTPサーバーを立ててやる方法もあるにはあるんですが、事前にIPアドレスを知っていないといけないとか、もひとつエレガントさに欠けると思うんですよ。

で、PC側がMacintoshでモバイル側がiPhoneならば、Bonjour(リンク)を使ったらネットワークの面倒な設定をしなくても簡単にやり取りを出来るんじゃないかと思い、試してみました。

iPhone側はTitanium MobileがBonjourをサポートしているので、これを利用すれば良さそうです。今回は、Kitchen SinkにBonjourを使ったサンプルがあるので、せっかくだから、これをそのまま使用します。

Mac側はAIRでアプリを作ることに決めているんですが、残念ながらAIRではBonjourをサポートしておりません。仕方ないので、NativeProcessで外部アプリを利用しましょう。

1. dns-sdコマンドラインツール
 Macにはdns-sdというコマンドラインツールがあって、これでBonjourサービスの検索や登録ができます。このツールを使って、接続したい機器のアドレスとポートの情報を取得するまでの手順を確認しましょう。

まず事前に、Kitchen SinkのPlatformタブにBonjourってのがあるので、これを選択しておきます。これは、Bonjourのサービスを起動すると共に、そのサービスとのやり取りを兼ねたサンプルとなっております。

ソースコード(リンク)を見てみると、サービスタイプが _utest._tcp になっているので、以下のコマンドを実行すると、このサービスタイプを提供している機器のインスタンス名を取得できます。
$ dns-sd -B _utest._tcp
インスタンス名が取得できれば、以下のコマンドでアドレスとポートを知ることができます。
$ dns-sd -L <インスタンス名> _utest._tcp
ここまでわかれば、後はAIRで、このアドレスとポートに接続するSocketを作成してあげれば、それを通じてやり取りが出来るようになります。

実際に上記コマンドを実行して、出力されるログを確認してみてください。

2. AIRアプリの作成
AIRで外部のプログラムを起動するには、NativeProcessを使用します。以下のようにして、まずインスタンス名を取得するコマンドを実行します。
var process:NativeProcess = new NativeProcess();

var args:Vector.<string> = new Vector.<string>();
args.push("-B");
args.push("_utest._tcp"); // 今回のサンプルのサービスタイプ

var info:NativeProcessStartupInfo = new NativeProcessStartupInfo();
info.executable = new File("/usr/bin/dns-sd");
info.arguments = args;

process.start(info);
process.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA,
    onBrowseService);
コマンドの実行結果は標準出力に出ますので、ハンドラー関数の中で以下のようにして、結果を取得し、インスタンス名に当たる部分を抜き出します。
private function onBrowseService(event:ProgressEvent):void{
  var stdo:IDataInput = process.standardOutput;
  var result:Array = stdo.readUTFBytes(stdo.bytesAvailable).split('\n');
  var column:String = String(result[result.length - 3]);
  var index:int = column.search("Instance Name");
  if (index != -1) {
    var instanceName = result[result.length - 2];
    instanceName = instanceName.slice(index); // インスタンス名
  }
}
ここでは、直前の行の"Instance Name"文字列の位置を手がかりにインスタンス名を抜き出してます。また、同名のサービスタイプを提供する機器が複数存在する場合を考慮してません。

インスタンス名がわかれば、以下でアドレスとポートの情報を取得します。
var process = new NativeProcess();

var args:Vector.<string> = new Vector.<string>();
args.push("-L");
args.push(インスタンス名);
args.push("_utest._tcp");
    
var info:NativeProcessStartupInfo = new NativeProcessStartupInfo();
info.executable = new File("/usr/bin/dns-sd");
info.arguments = args;
process.start(info);
process.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA,
    onResolveService);
同様にコマンドの実行結果は標準出力に出ますので、ハンドラー関数の中で以下のようにして、結果を取得し、アドレスとポートに当たる部分を抜き出します。
private function onResolveService(event:ProgressEvent):void {
  var stdo:IDataInput = process.standardOutput;
  var result:Array = stdo.readUTFBytes(stdo.bytesAvailable)
                                      .split("can be reached at ");
  if (result.length == 2) {
    process.removeEventListener(ProgressEvent.STANDARD_OUTPUT_DATA,
        onResolveService); 
    result = result[1].split(" (");
    var iNamePort:Array = String(result[0]).split(":");
    var address:String = iNamePort[0];     // アドレス
    var port:int = parseInt(iNamePort[1]); // ポート
  }
}
アドレスとポートがわかれば、それとやり取りする為のSocketを作成してあげます。
var socket = new Socket();
socket.connect(address, port);
socket.addEventListener(Event.CONNECT, onConnect);
無事に接続すると、ハンドラー関数が呼ばれます。Kitchen Sinkのサンプルでは、ターゲットに"req"という文字列を送ると、機器情報を返信してきますので、これを受け取れるように受信ハンドラーを設定しておきます。
private function onConnect(e:Event):void {
  socket.addEventListener(ProgressEvent.SOCKET_DATA, onSocketData);
  socket.writeUTFBytes("req"); // ターゲットにデータ送信
}

// ターゲットからデータを受信
private function onSocketData(e:ProgressEvent):void {
  var reply:String = socket.readUTFBytes(socket.bytesAvailable);
}
ご参考までに、以下に実際に動作するAIRアプリのソースコードを置いておきます。
http://homepage.mac.com/daoki2/lab/Bonjour/BonjourTest.tar.gz (4KB)

以上のようにすれば、Bonjourを介して、MacとiPhoneで簡単にデータのやり取りを行うアプリを作ることが出来そうです。ただ、Mac以外やAndroidでは、どうすれば良いのでしょうか?

実は、ここ(リンク)にBonjourのJava実装のソースコードがあるので、これを使えばもしかしたらその他のプラットフォームでも同じようなことが出来るかも知れません。

もしうまく動かせたら、是非教えてください (^_^;

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,