Titanium : 自作モジュールを作成して組み込むまでのスクリーンショット

スポンサーリンク

久々にTitaniumのMEMOです。

Titanium Mobileではモジュールを組み込むことで、Titanium Mobileが標準で持っている機能を拡張させることができます。
開発元であるAppceleratorのMarketplaceでは、さまざまな機能を持つモジュールを検索して無料で取得したり、購入することもできます。実際に組み込んで使っている方も多いのでは。

ここで見つからないような機能を自分のアプリに付けたかったりする場合、モジュールを自分で作ってみるというのもひとつの方法ではないでしょうか?ここでは、モジュールを自作する最短の流れ(モジュールを作成してサンプルのメソッドを呼び出すまで)をMEMOしておきます。

※iOSのみ対応のモジュールを作成する流れです。

00

Titanium Mobileのモジュールを自作する

Fileメニューから「New > Mobile Module Project」を選択。

01

適当なプロジェクト名をつけて、Module idを入れます。Module idは、あとで自分のモバイルアプリに組み込む際( require(‘com.mushikago.TestModule’);部分)に明記しますので、ユニークなidになるようにしましょう。大文字小文字も後から違いが出てきますので注意です。

02

次の画面では、詳細な情報を入力しておくべきですが、この例では自分しか使わないということで、特に気にせず空欄のままにしてしまいます。

03

指定した場所に、モジュールを作成するためのファイル一式が作られます。

04

Titaniumでは、特に何もいじることなく、ファインダーに切り替えます。ファインダーで「iphone」フォルダ内の「.xcodeproj」を見つけ、Xcodeで開いてください。(ここでは、現在の最新版 Xcode6.1.1で開いています。)

05

「Classes」フォルダを開いて、「〜Module.m」というファイルを開きましょう。
Module idで「com.mushikago.TestModule」というidをつけた場合は、「ComMushikagoTestModuleModule.m」のようなファイル名になっていると思います。

そのファイルの下の方「Public APIs」とされているところに、「example」「exampleProp」「setExampleProp」と3つのサンプルが用意されています。ここでは、この「example」メソッドを使って、Titanium Mobileアプリからパラメータを渡しつつ呼び出してみましょう。

06

「example」メソッドを次のように書き換えて、保存します。

何をしているかを簡単に書くと、exampleメソッドは「args」という引数を同時に受け取るようにしています。「ENSURE_SINGLE_ARG(args, NSDictionary);」でargsをNSDictionary(キー値と要素が対になっている配列)としています。なので、あとでアプリ側からexampleメソッドを呼び出す際は引数をオブジェクトリテラルの形で渡すように作ります。この辺は自分で勝手に決まりを作ってる感じです。testという文字列を格納する変数を作ってargs内にある「test」というキー値部分を取り出して、変数「test」に格納しています。引数のオブジェクトに「test」というキー値を作るのも自分の決まり事となりますね。NSLogで「test=XXX」を出力するようにしています。「return @”hello world”;」はデフォルトで書いてあったままですが、「hello world」を戻り値としてもどしています。

07

ターミナルに切り替えて、先ほどの「.xcodeproj」の入っている「iphone」フォルダに入ります。
そこで「./build.py」を実行します。モジュールを作成する際に未入力欄があったのでいくつか警告が出ますが、気にせず見届けると、

08

09

「 ** BUILD SUCCEEDED **」と出て、モジュールが作成されます。

10

作成されたファイルは、zip化されており、先ほどのModule idでは、「com.mushikago.testmodule-iphone-1.0.0.zip」のようなファイル名になっています。

11

自作したモジュールを組み込む

では次に、上記で作成したモジュールを組み込んで、exampleメソッドを呼び出してみます。
Titanium StudioのFile>New>Mobile App Projectを選び、新しくiPhoneアプリを作成します。

12

Single Window Applicationでいいでしょう。呼び出すテストをするだけです。

13

適当なプロジェクト名とApp idをつけましょう。ここでは「com.mushikago.TestSingleApp」としました。SDKは、現時点の最新「3.4.1.GA」を選んでいます。

14

プロジェクトが作成されたら、さっそくモジュールを組み込んでみます。「TestSingleApp」のプロジェクトのルートフォルダ(「Resouces」があるフォルダ)に先ほど作成したzip「com.mushikago.testmodule-iphone-1.0.0.zip」をコピーします。

15

zipをダブルクリックして解凍すると、「modules」フォルダが作成され、その中に適切な階層構造でモジュールが配置されます。ここの例では「modules/iphone/com.mushikago.testmodule/1.0.0/」の中にモジュールが作成されます。

16

次にTitanium Studioで「tiapp.xml」を開き、画面下のタブで「Overview」から「tiapp.xml」に切り替えましょう。作りたてのSingle Window Applicationでは、ここでは何もモジュールが組み込まれていない状態となっています。50行目あたりに「<module />」とだけ書かれた行があると思います。

17

この行を以下のようにします。

ここではzipを解凍した時の「modules/iphone/com.mushikago.testmodule/」で作られるフォルダ名「com.mushikago.testmodule」を書き込むようにしましょう。大文字小文字の区別に気をつけてください。

18

これでモジュールの組み込みができましたので、実際に利用してみます。

19

Single Window Applicationでは、iPhoneで起動すると「Resources/ui/common/FirstView.js」が開かれます。ここではテストをするだけなので、iPhoneでシミュレートすることを前提に、このファイルにexampleメソッドを呼び出す内容を書いてみます。「return self」のすぐ上あたりに書いてみましょう。

「require」でモジュールのインスタンスを作成して、そのインスタンスに対して「example」メソッドを投げています。その際に「{test:”あいうえお”}」というパラメータ(引数)をつけています。これがモジュールを作るときに決めたオブジェクトリテラルの形でキー値にtestを持たせているパラメータです。このパラメータがモジュール側で受け取れれば成功です。

20

Titanium StudioでiOS Simulatorを使ってデバッグしてみます。iPadではなくiPhoneを選びましょう。

21

コンパイルが終わりiOS Simulatorが起動し、「Welcome to Titanium」の文字が出てきます。これがSingle Window ApplicationのFirstView.jsです。

22

Titanium StudioのConsoleに「[INFO] test=あいうえお」が出力されれば成功です。これはモジュール内に設定したexampleメソッドに記述した「NSLog(@”test=%@”, test);」が出力したものです。

モジュールに対してアプリケーション側からデータを渡せたということは、アプリを使っている特定のタイミングでモジュールにアプリ側の情報を渡せるという事になります。あとは、受け取ったデータをモジュールがどのように処理するかですね。ここの例ではやりませんでしたが、「return @”hello world”」によって「hello world」という戻り値が戻ってきているはずなので、モジュール側からアプリ側に値を返すこともできていると思います。

とりあえず、簡単なモジュールとのやりとりができたと思いますので、あとはXcodeの機能とあわせてどんなことができるかを考えてみるといいと思います。

東京造形大学卒業後、マクロメディア(現アドビ システムズ)に入社。Quality AssuranceやテクニカルサポートマネージャーとしてFlash、DreamweaverなどのWeb製品を担当。独立後、虫カゴデザインスタジオ株式会社を設立。最近は、ZBrush、Xcode(Swift)、Firebase、Unity、Adobe Creative Cloud関連にフォーカスしています。モバイルアプリ開発情報を主としたブログ「MUSHIKAGO APPS MEMO」の中の人。