小さな Titanium Mobile の読み物

The Little Book on Titanium (Appcelerator Titanium)

JavaScript を使って iOS/Android などマルチプラットフォーム対応のネイティブアプリケーションを構築することができる Appcelerator Titanium についてまとめた非公式サイトです。

ページ1 | はじめに

  1. Appcelerator Titanium
  2. Write Once, Adapt Anywhere
  3. 使えるの?
  4. 苦手なものは何?

ページ2 | 開発ツール

  1. Titanium Studio
  2. Titanium CLI

ページ3 | 開発スタイル

  1. JavaScript
  2. Titanium Classic
  3. Alloy

ページ4 | アプリケーションの例

  1. プロジェクトを作る
  2. レイアウトを考える
  3. 土台を作る
  4. 細かい機能を実装していく
  5. 終わりに

ページ5 | Titanium を拡張する

  1. モジュール
  2. Titanium Cloud Services
  3. altJS

Titanium を拡張する

モジュール

iOS や Android は日々進化しており、新しいバージョンの OS が登場すると、新しいバージョンの SDK も提供され、新しい OS に搭載された新機能を開発するアプリケーションから呼び出すことができるようになります。

しかし、 Titanium はこれらの API へのブリッジとして動作するので、まずは Titanium 側に新しい API を呼び出すための機能が盛り込まれるのを待つ必要があります。 Titanium は精力的に開発が継続されているので比較的短期間で新しい機能に対応しますが、それでも全ての機能に対応するわけではありません。そこで、モジュールを使って自分でブリッジを書く事ができます。

ネイティブモジュール

ネイティブモジュールは Objective-C や Java を使って書く、プラットフォームに合わせた Titanium を純粋に拡張するためのものです。 Titanium が提供できていない機能を追加することができるので、 JavaScript だけではどうしても難しい処理などをネイティブモジュールで解決できることがあります。

例えば、 Instagram のようにエフェクトをかけた写真を取ったり、 Facebook や Path など多くのアプリケーションが採用しているスライド式のメニューを簡単に構築するためのモジュールがそれにあたります。

ただし、 Objective-C で書かれたモジュールは iOS 専用のものになりますし、 Java で書かれたモジュールは Android 専用のものになるので、1つのモジュールをそれぞれのプラットフォームに対応させることはできません。同様の機能をモジュールで解決したい場合は、プラットフォーム毎にモジュールを書く必要があります。

JavaScript モジュール

JavaScript モジュールは Titanium が提供する機能を使って一連の処理をモジュール化するものです。ネイティブモジュールと違い、 Titanium が提供する機能以上のことはできませんが、良く行う処理をモジュール化しておくことで、複数のプロジェクトで簡単に使い回しができるようになります。

JavaScript モジュールは開発スタイルのページで紹介した「CommonJS Modules」を使って書きます。アプリケーションに依存しない一連の処理、例えば、 HTTP 通信を行って何らかの結果を得たいといったものの場合に、毎回同じコードを書くのではなく、一度モジュールに分離しておいて複数のプロジェクトで読み込ませるということが考えられます。

getJSON.js
// URL と通信後に行いたい処理を引数に渡す
exports.getJSON = function (url, callback) {
    var http = Ti.Network.httpClient();
    http.open("get", url);
    http.onload = function () {
        callback({
            success: true,
            data: JSON.parse(http.responseText)
        });
    };
    http.onerror = function (e) {
        callback({
            success: false,
            data: e
        });
    };
    http.send(null);
};
app.js
var getJSON = require("getJSON").getJSON;
getJSON("http://example.com/sample.json", function (data) {
    if (data.success) {
        // 通信に成功したら行う処理
    } else {
        // 通信に失敗したら行う処理
    }
});

Open Mobile Marketplace

モジュールは自分で書く以外にも、既に世界中の開発者が作り、無償・有償で提供しているものが多数存在します。 GitHub や Bitbucket の中を Titanium などのキーワードで探すと多くモジュールがオープンソースで公開されていて、自分でビルドして組み込むことができるようになっています (ライセンスをキチンと確認しましょう) 。

これらオープンなリポジトリ以外にも Appcelerator が公式に Open Mobile Marketplace というマーケットを開いています。このマーケットには無償・有償問わず、 Appcelerator の審査を受けたモジュールが並んでおり、 Instagram のように画像にエフェクトをかけながら写真撮影を行うためのモジュール「Filterable Camera」などが並んでいます。機能拡張のためのモジュール以外にも、デザインパーツも並んでいますので、一度眺めてみると良いでしょう。

Titanium Cloud Services

Titanium Cloud Services (TCS) は Appcelerator が提供する mBaaS (Mobile Backend as a Service) です。 Backend as a Service (BaaS) とは、 提供された API を開発者が利用することでサーバサイドプログラミングを行うことなく、サーバサイドアプリケーションの機能を利用することができるサービスです。

例えば、 Twitter のようなサービスを始めようと思ったら、 Amazon EC2 や VPS のようなサーバを用意し、 OS のセットアップを行い、 必要なミドルウェアをインストールし、設定を行い、サーバサイドアプリケーションを書く…と、実現までに多くのステップを踏む必要があります。

BaaS を使うと開発者は「ユーザ登録のための API 」や「ユーザが画像を投稿する API 」をクライアントアプリケーションから呼び出すだけで良いのです。 TCS は mBaaS と呼んでおり、モバイル向けアプリケーションに最適な API が豊富に用意されています。

TCS は Titanium からシームレスに利用できるようになっており、モジュールをアプリケーションに組み込み、 JavaScript のコードを書くだけで利用が可能です。500万プッシュ通信、500万APIコール、20GBのストレージ、1万メール送信まで無償利用が可能なので、スタートアップのスモールスタートにも最適でしょう。

altJS

altJS は Titanium そのものを拡張するわけではありません。 JavaScript を使ってプログラミングを行う Titanium は、 JavaScript に不慣れなユーザにとっては難しく感じてしまう点があるのも事実です。そこで、 Alternative to JavaScript … コンパイルして JavaScript を出力するメタ言語を使って、 Titanium アプリケーション開発を行うという手段を取ることができます。

CoffeeScript

CoffeeScript は Python や Ruby に近い記法を使ってコードを書き、コンパイルすると JavaScript のコードが出力されるタイプのプログラミング言語です。 JavaScript はプロトタイプベースのオブジェクト指向言語ですが、 CoffeeScript を使うとクラスベースのようにラッピングしてプログラムを書く事ができます。

getJSON.coffee

上述の getJSON.js を CoffeeScript で書くとこのようになります。 Python のようにインデントを使うことが文法上必須になっています。また、 Ruby のように引数を取るメソッド呼び出しは括弧がいりません。

exports.getJSON = (url, callback) ->
    http = Ti.Network.httpClient()
    http.open "get", url
    http.onload = ->
        callback
            sccess: true
            data: JSON.parse http.responseText
    http.onerror = (e) ->
        callback
            sccess: false
            data: e
    http.send null

TypeScript

CoffeeScript 以外に使うことができる altJS としては TypeScript があります。 TypeScript は Microsoft が作っているプログラミング言語で、 JavaScript のスーパーセットとして機能します。クラスベースのオブジェクト指向プログラミングや、静的型付け、名前空間などの機能を持っています。

module myApps {
    class Window {
        private win : Ti.UI.Window;
        constructor(params) {
            this.win = Ti.UI.createWindow(params);
        }
        open() {
            this.win.open();
        }
    }
    private win = new Window({
        backgroundColor: "#FFFFFF"
    });
    win.open();
}