kaz_konno's blog: walkthisway

Titanium Mobileの事など。

JavaScriptでモジュールを作ろう!

f:id:kaz_konno:20111125002537p:image

マーケットプレイスを良く見て行くと、様々なモジュールやテンプレート、デザインなどが揃っています。英語が分からない人でもスクリーンショットなどを見ればどんなものなのか分かるはずなので、是非じっくり回遊してみてください。


さて、Titanium Mobile用のモジュールを作るには、通常Objective-CJavaで書く事になりますが、実はJavaScriptでもモジュールを作ることができます。実際、マーケットプレイスJavaScriptで書かれたモジュールもいくつか見つかります。


これまで自分には無関係と思っていた人も、アイデア次第ではJavaScriptベースのモジュールで小遣い稼ぎができるかもしれませんよ〜!


モジュールの一番の目的は、Titanium Mobileに足らない機能をモジュールによって拡張することです。しかし、それ以外にライブラリ的などのように、開発の効率化を図るためにもとても重宝します。


例えば、自分用に、機能別のモジュールを用意しておいて、要所要所で機能別のモジュールをパーツとして設置してアプリをくみ上げていくということが可能です。JavaScriptでモジュールを作る場合、CommonJSスタイルにするのでデータの受け渡しさえ間違えなければ、様々なプログラムに設置することができるはずです。


それでは実際に作ってみましょう。
今回作るのは、ローディング画面からフェードアウトしてアプリトップに遷移するフェードアウトアニメーションモジュールです。
仕組みはローディング画像(Default.png)と同じ画像を表示し、そのViewにフェードアウトアニメーションを付けることで実現します。
iphone/Default.pngの画像と同じだからと言って、iphone/Default.pngを指定しても、アプリからは見えない場所なので、必ずResources以下もしくはimages等任意のフォルダを作って同じ画像を設置してください。


var HomeWindow = require('HomeWindow').HomeWindow;

HomeWindow().open({
modal : Ti.Platform.osname === "iphone",
modalTransitionStyle : Ti.UI.iPhone.MODAL_TRANSITION_STYLE_CROSS_DISSOLVE,
navBarHidden : true
});

modalで実は上記のように設定するとフェードアウトアニメーションできますが、rootウィンドウでmodal設定をするとwarningが出て不安定になるので、ちょっと危険かもしれません。

実際モジュールにしなくても実現できるのですが、敢えてモジュールにしてみます。
例えば、自分用のツールパックモジュールのようなものを予め作っておき、必要に応じて利用するのも良いかもしれません。


モジュールベースの作り方
preview版のTitanium Studioでは、既に新規モジュール開発テンプレートが選べるようになっています。近い将来安定板にも反映されると思われます。それまでの間は、以下のようにコマンドラインでベースを作成します。

titanium create --type=module --platform=iphone --id=com.kazkonno.newtools --name=newtools

f:id:kaz_konno:20111125012256p:image:left

このような構成でベースが出来上がります。
Objective-Cでモジュールを書く場合は、.xcodeprojが付いたプロジェクトファイルを開いて、Xcodeで開発をしていくことになります。


JSモジュールの書き方
書き方については、最後に明記します。


JSモジュールのビルド前準備

JavaScriptでモジュールを作る場合は、「assets」フォルダに、先ほどidに設定した名称のファイルを設置します。


今回は、com.kazkonno.newtools.jsというファイルをassetsフォルダに設置します。
ファイル名がとても重要です。必ずidで設定した名前にしてください。
f:id:kaz_konno:20111125013112p:image


JSモジュールのビルド

設置したら、コマンドラインツールでプロジェクトフォルダに移動してビルドします。

./build.py

ビルドに成功すると、「com.kazkonno.newtools-iphone-0.1.zip」という圧縮ファイルができあがります。


JSモジュールの設置

ここまで出来たら、通常のモジュールと同じようにインストールしてください。
汎用的なモジュールなら、/Library/Application Support/Titanium/modules/iphone/フォルダ内設置してください。
特定のプロジェクト用であれば、アプリのプロジェクトフォルダ内に設置してください。
モジュール設置方法についての参考ページ:Repeated BackgroundImageモジュールが素晴らしい!


JSモジュールの書き方

呼び出し側はこんな感じです。


var newtools = require('com.kazkonno.newtools');
Ti.API.info("module is => " + newtools);


var bgOption = {
backgroundImage : 'loading.png',
waitTime : 2000,
fadeTime : 600,
window : self
};

var indOption = {
loading : true, // loading indicator
labelon: true, // loading label
label : L('loading'),
type: 2, // 0: BIG, 1: DARK, 2:PLAIN
width: 20,
height: 20,
bottom: 140
};

var fader = newtools.loadingFadeView(bgOption, indOption);
self.add(fader);

是非皆さんもJSモジュールで開発効率化を試してみてください。



[※補足]

呼ばれる側のcom.kazkonno.newtools.jsファイルはこんな感じです。


exports.loadingFadeView = function(bgOption, indOption) {
var self = Ti.UI.createView();
self.backgroundImage = bgOption.backgroundImage;

if(indOption.labelon) {
var label = Ti.UI.createLabel({
.
.
.
.
return self;
};

このファイルに、exports.xxxで設定して行けば、複数の機能モジュールを組み込むことができます。アプリ容量には十分気をつけてください。

お客さん、つまりiPhoneを使っている人達の多くは、無線LAN設定ができなかったり、iTunes同期もしていなかったりするので、私自身は、基本的に3G回線で落とせる20MB以内を目安にしています。