ヅラッシュ！ by NI-Lab.

Titnium Mobile だけでは実現できないことを、 Xcode + Objective-C で書いて Titanium Mobile から呼び出せるように作るのが Titanium Mobile のモジュールである Titanium Module (正式名称よくわからず)。

進めていくにあたって参考にしたのは主に次の2つのページ。

• Module Developer Guide for iOS (PDF版も配布されている)
• [Titanium] Titanium Module Development メモ - その2 - それはBlog

自分の環境では特にドキュメント通りに進めて問題なかったんだけど(たぶん)、 Titanium Mobileモジュール開発ドキュメント間違いの要点だけ | スマートフォン要点だけブログ には作業の流れが書いてあるので参考になった。
また、 Titaniumのモジュール作成にチャレンジ | ひげろぐ にも作業の流れが書いてあるので参考になる。

以下、ざっと Titanium Module のテンプレートを生成して、 Titanium Mobile プロジェクトから呼び出すところまで。

~/.bash_profile に

$ alias titanium='/Library/Application\ Support/Titanium/mobilesdk/osx/1.7.2/titanium.py'

を追加して

$ source ~/.bash_profile

で環境に反映(次回以降はログイン時に反映される)。

モジュールのテンプレートを生成する。
id=sample.test がモジュール内のクラスの SampleTest っていう接頭語になる。

$ titanium create --platform=iphone --type=module --dir=~/titanium_module/ --name=MySample --id=sample.test

試しに、モジュールのテンプレートをビルドしてみる。

$ ~/titanium_module/MySample/build.py

を実行して

** BUILD SUCCEEDED **

と表示されればOK.

$ titanium run

で iOS シミュレータを起動。起動するまでけっこう時間がかかる。 hello world って表示された。

$ open ./mysample.xcodeproj

で Xcode 3.2.6 を起動。

SampleTest_Prefix.pch, SampleTestModule.h, SampleTestModule.m, SampleTestModuleAssets.h, SampleTestModuleAssets.m, titanium.xcconfig の6ファイルがある。

モジュールをZIPファイルにパッケージングして、 /Library/Application Support/Titanium/ に置いて、 Titanium Mobile アプリから呼び出せるようにする必要があるので

$ ~/titanium_module/MySample/build.py

を実行して sample.test-iphone-0.1.zip を生成。

$ cp ~/titanium_module/MySample/sample.test-iphone-0.1.zip /Library/Application\ Support/Titanium/

でモジュール置き場にコピー。

/Library/Application\ Support/Titanium/ においたモジュールのZIPファイルは Titanium Studio が自動的に展開して削除してくれる。

次に、Titanium Studio を起動して、メニューから [File] -> [New] -> [Titanium Mobile Project] でプロジェクトを新規作成。

Titanium Studio で新規作成する Titanium Mobile プロジェクトはこんな感じでつくった。

Project name: AbcDef
App Id: foo.bar.hoge
Company/Personal URL: http://qrstu.vw.xyz/
Titanium SDK Version: 1.7.2

tiapp.xml の最後のほうにある <modules/> を <modules><module version="0.1">sample.test</module></modules> に置き換え。

app.js の最後に

var myModule = require('sample.test');
Ti.API.info("module is => " + myModule);

を追加。

左ペインのプロジェクト名"AbcDef"を右クリックして [Run As] -> [iPhone Simulator] ビルドして実行。

Console に

[INFO] Detected third-party module: sample.test/0.1

と

[INFO] module is => [object SampleTestModule]

が出力される。

これで、JavaScript のコードからモジュールが呼び出されていることになる。

次に、 Xcode を使ってモジュールの View と ViewProxy を作る。

クラスの命名ルールがあるらしい。

titanium create したときの id=sample.test が SampleTest っていう接頭語になっているので、クラス名の最初にはこれを付ける。
次にビューの名前は任意。ただし、 View と ViewProxy で同じ名前を使う。
最後に View または ViewProxy を付ける。

今回はビューをMyWebという名前にするので、

SampleTest + MyWeb + View => SampleTestMyWebView
SampleTest + MyWeb + ViewProxy => SampleTestMyWebViewProxy

というクラス名で作成する。

Xcode の左ペイン [グループとファイル] -> [mysample] で右クリックして [追加] -> [新規ファイル] にて [iOS] -> [Appcelerator] -> [TiUIView] を選択。

SampleTestMyWebView.m と SampleTestMyWebView.h を作成。保存場所は Classes 以下なので ~/titanium_module/MySample/Classes に変更。

SampleTestMyWebView.h に #import "TiUIWebView.h" を追加して、 TiUIView を継承していたのを TiUIWebView を継承するように修正する。

継承の部分の修正。 @interface SampleTestMyWebView : TiUIView を @interface SampleTestMyWebView : TiUIWebView に変更。

ソースコードはこんな感じ。

SampleTestMyWebView.h

#import "TiUIView.h"
#import "TiUIWebView.h"
@interface SampleTestMyWebView : TiUIWebView {
@private
}
@end

SampleTestMyWebView.m

#import "SampleTestMyWebView.h"
#import "TiUtils.h"
@implementation SampleTestMyWebView
@end

これで View ができたので、次は ViewProxy をつくる。

Xcode の左ペイン [グループとファイル] -> [mysample] で右クリックして [追加] -> [新規ファイル] にて [iOS] -> [Appcelerator] -> [TiViewProxy] を選択。

SampleTestMyWebViewProxy.m と SampleTestMyWebViewProxy.h を作成して Classes 以下に保存。

ソースコードは何もいじらない。

SampleTestMyWebViewProxy.h

#import "TiViewProxy.h"
@interface SampleTestMyWebViewProxy : TiViewProxy {
@private
}
@end

SampleTestMyWebViewProxy.m

#import "SampleTestMyWebViewProxy.h"
#import "TiUtils.h"
@implementation SampleTestMyWebViewProxy
@end

これでとりあえず ViewProxy はOK

View と ViewProxy がちゃんと動作するかどうか確認する。

モジュールのフォルダにある example/app.js を修正して動作確認する。

MySample/example/app.js

var window = Ti.UI.createWindow({
  backgroundColor:'white'
});
 
// モジュールをロード
var myModule = require('sample.test');
Ti.API.info("module is => " + myModule);
 
// View を生成
var myWebView = myModule.createMyWebView({url:"http://www.yahoo.co.jp/"});
 
// 親ビューにViewを乗せて、親ビューをオープン。
window.add(myWebView);
window.open();

モジュールのディレクトリ ~/titanium_module/MySample で titanium run を実行して、モジュールのビルドとサンプル表示。
これでちゃんとウェブサイトが表示されたし、操作もできた。iOSシミュレータ上でだけど。

以上のメモのいくつかは
・nilog: 無いログは振れない。 : 2011-09-09
・nilog: 無いログは振れない。 : 2011-09-15
のツイートから抽出。

この先の Titanium Module 開発は以下のサイトあたりが参考になりそう。

• [Titanium] Titanium Module Development メモ - その1 - それはBlog
• Titanium Mobileで画像の複数選択モジュールを作ってみた | KRAY Inc

tags: titanium_mobile xcode

Posted by NI-Lab. (@nilab)