Titaniumでアプリ開発【モジュール編】


Titaniumのモジュールとは

Titaniumでは、複雑な機能をまとめてAPIのように使えるようにしたい場合や、Titanium APIが提供する範囲以上のことをネイティブのコードを使って実現したい場合に、それらの機能をモジュールとして追加して使うことができます。

モジュールの種類

Titaniumモジュールには大きく分けて以下の2つの種類があります。

①ネイティブモジュール

ネイティブモジュールは、Titaniumの提供範囲にない機能をネイティブで実装して補う場合に使用します。ネイティブコードを使用するため、開発言語はiOSではObjective-C、AndroidではJavaとなります。

②JavaScriptモジュール

JavaScriptを使って作るモジュールです。ネイティブモジュールと異なり、OSを選ばず使うことができます。ただし、Titaniumの提供する範囲以上の機能を実現することはできません。

モジュールの入手方法


モジュールの入手方法は、主に以下の3つになります。

①購入する(マーケットプレイス)

Titaniumを開発しているAppcelerator社はモジュールを売買するためのマーケットプレイスを展開しています。取り扱う種類もAppcelerator公式のもの・サードパーティのもの、有料・無料のものと様々です。

②他の開発者が作ったものを使う

有志の開発者が、自分の作成したモジュールをgitHubなどで公開するといった動きも近年活発になっているため、ライセンスを遵守したうえで公開されているモジュールを使わせてもらうことも可能です。

③自作する

マーケットプレイスやGitHubで目的の機能のモジュールを見つけられなかった場合、モジュールを自作することができます。詳しい作り方については後述しますが、特別なライセンスを必要とせず、通常の開発環境で作ることができます。

購入できるモジュールについて

ここでは購入できるモジュールについて実際に紹介しながら、プロジェクトへの適用までの流れを記載します。

モジュールの紹介

マーケットプレイスのモジュールを幾つか紹介します。

モジュール名 作者 価格 説明
paint Appcelerator公式 無料 いわゆるホワイトボード機能を提供する
GameKit Appcelerator公式 月$9.99 GameCenterに接続し、ソーシャルゲーミング機能を追加する
PayPal Appcelerator公式 無料 PayPalを使ったアプリ内決済機能を提供する
Airprint サードパーティ 無料 iOSデバイスからAirPrintを可能にする
PassBook サードパーティ $10 iOS6の新機能「PassBook」を使えるようにする

購入したモジュールの使い方

ここでは上表1段目のpaintモジュールを例に、実際にモジュールをプロジェクトに組み込む方法について説明します。

①モジュールを入手・配置

モジュールは、Appceleratorのマーケットプレイスから入手することができます。ダウンロードしたモジュールは、$HOME/Library/Application Support/Titanium/modules(※環境によって変化する場合あり)の配下に配置します。

②プロジェクトに組み込む

TitaniumStudioでプロジェクトを作り、tiapp.xmlを開きます。Modules一覧で「ti.paint」を追加すると、プロジェクト内で使うことができるようになります。

③実際に利用する

実際にpaint moduleを使って、ホワイトボードを提供するためのサンプルコードが以下になります。

var win = Ti.UI.createWindow({
  backgroundColor : '#FFFFFF'
});

var paint = require('ti.paint');
var paintView = paint.createPaintView({
  width : Ti.UI.FILL,
  height : Ti.UI.FILL,
  backgroundColor : '#FFFFFF',
  strokeColor : '#FF0000',
  strokeAlpha : 255,
  strokeWidth : 5
});

win.add(paintView);
win.open();

実際の画面は以下のようになります。

paintモジュール

このサンプルは単純に赤いペンでお絵かきをするだけのものですが、他の機能についてはモジュール内のexampleでより詳しいサンプルを見ることができますので、是非お試しください。

モジュールを自作する

次に、自分でモジュールを作る方法について記載します。

モジュールは、先述の通りネイティブモジュールとJavaScriptのモジュールに分けることができます。ここでは、Objective-Cのネイティブモジュールの作り方と、JavaScriptモジュールの作り方について説明します。

Objective-Cモジュールの作り方

ネイティブモジュールは、Titanium Studioから作ることができます。今回は、沢山の用途があるモジュールの中でも、カスタムViewを返すようなモジュールの作り方をご紹介します。

①プロジェクトを作る

Titanium Studioで、New>Titanium Module Projectを選び、必要事項を入力します。今回は、モジュールIDを「jp.co.dnp. SampleDev1」にしています。プロジェクトが作られると、xcodeプロジェクトが自動で生成されます。

②プロジェクトの確認

生成されたプロジェクトをxCodeで開くと、Classesフォルダの下にいくつかファイルが生成されているのが分かります。決まり事として、ここで自動的に作られるこれらのクラスには、接頭辞としてモジュールIDのドットを抜いてキャメル記法にしたものが付きます。たとえば、今回の場合の接頭辞は「JpCoDnp SampleDev1」になります。

③カスタムViewを作る

TitaniumにカスタムViewを渡してやるためには、TiUIViewとTiUIViewProxyを継承したクラスを作る必要があります。TiUIViewは画面の表示や振る舞いの制御、TiUIViewProxyはJavaScriptとネイティブコードのバインディングを行ないます。なお、TiUiView作成時には「接頭辞+View」、TiUiViewProxy作成時には「接頭辞+ViewProxy」とクラス名を付けます。

今回、下のような画面を出すために以下の様なコードを書きました。

【JpCoDnpSampleDev1View.m】

- (void)layoutSubviews{
  [super layoutSubviews];

  self.backgroundColor = [UIColor redColor];

  UILabel *label = [[UILabel alloc] init];
  label.text = @"Hello!";
  label.frame = CGRectMake(0, 0, 200, 200);
  label.backgroundColor = [UIColor blueColor];
  label.textColor = [UIColor whiteColor];
  label.textAlignment = UITextAlignmentCenter;

  [self addSubview:label];
  [self bringSubviewToFront:label];
}

モジュールをインポートしたプロジェクト側には、以下のようなコードを記述します。

【app.js】

var win = Ti.UI.createWindow({
    backgroundColor:"ffffff"
}); 

var SampleDev1 = require('jp.co.dnp.SampleDev1');
var view = SampleDev1.createView();

win.add(view);
win.open();

④実際に動かす

作ったモジュールを動かしてみましょう。ターミナルでモジュールのフォルダに移動し、
titanium run
と入力すると、iOSシミュレータで実装内容を確認することができます。この場合ですと、以下の様な画面が出力されます。

Obj-CカスタムView

⑤パブリッシュ

TitaniumStudioでモジュールのプロジェクトを選び、Publish>Package-iOS Moduleを選択し、出力します。zipファイルが生成されるので、あとは購入したモジュールと同様の手順を行います。

JavaScriptモジュールの作り方

JavaScriptモジュールは名前の通りJavaScriptで作るモジュールで、TitaniumのAPIを利用することができます。ここでは、ネイティブモジュール同様にカスタムViewを返すようなJavaScriptモジュールを作ります。

①プロジェクトを作る

プロジェクトの作り方自体はネイティブモジュールの時と変わりありません。JavaScriptのコードを追加するには、生成されたプロジェクトファイル内のassetsフォルダの下にモジュールID+.jsという名前のJSファイルを作る必要があります。今回はモジュールIDを「jp.co.dnp.SampleJS」にしたので、JSファイル名は「jp.co.dnp.SampleJS.js」となります。

②カスタムViewを作る

①で作ったjsファイルに、以下の様なコードを記載します。ご覧のとおり、中身のJavaScriptはTitaniumAPIを使って自由に記述することができます。

jp.co.dnp.SampleJS.js】

exports.createView = function(){
    var view = Ti.UI.createView({
        backgroundColor : "yellow",
        width : Ti.UI.FILL,
        height: Ti.UI.SIZE
    });
    var lbl = Ti.UI.createLabel({
        text : "JSモジュール",
        width : Ti.UI.SIZE,
        height: Ti.UI.SIZE
    });
    view.add(lbl);
    return view;
};

モジュールをインポートしたプロジェクト側には、以下のようなコードを記述します。

【app.js】

var win = Ti.UI.createWindow({
        backgroundColor:"ffffff"
});
var SampleJS = require('jp.co.dnp.SampleJS');
var view = SampleJS.createView();

win.add(view);
win.open();

③実際に動かす~パブリッシュ

動かし方やパブリッシュもネイティブと同様の手順で行います。実行すると、以下のような画面が描画されます。

JSカスタムView

まとめ

今回は、Titaniumのモジュールについて種類や入手方法、作り方などをご紹介しました。Titaniumのモジュール追加は、他のクロスプラットフォームツールにはない魅力の一つだと思いますので、ぜひチャレンジしてみてください。
CodeStrong!