【連載】攻略! ツール・ド・プログラミング [4] Web標準技術を活用したOSSのRIAプラットフォーム「Appcelerator Titanium」

【連載】

攻略! ツール・ド・プログラミング

【第4回】Web標準技術を活用したOSSのRIAプラットフォーム「Appcelerator Titanium」

[2009/04/22 09:00]杉山貴章ブックマークブックマーク

開発ソフトウェア

連載目次

最初前へ

次へ最後

Titaniumは"Webアプリをデスクトップに持ってくる"技術

今回紹介する「Appcelerator Titanium」は、Appcelerator社が開発しているオープンソースのRIAプラットフォームである。TitaniumがターゲットとしているのはローカルのPCにインストールして利用するデスクトップアプリケーションである。ただし、開発者がTitaniumアプリケーションを作成するためにデスクトップアプリケーション開発のための特別な知識を学ぶ必要はない。Webアプリケーションを作るのと同様の感覚、つまりHTMLやOSS、JavaScriptなどのWeb標準技術だけでデスクトップアプリケーションが構築できるのが同製品の大きな特徴だ。

Titanium本体はRubyで作られており、ベース技術としてWebKitやGears、Google Chromeなどを利用している。つまりWebブラウザ技術がユーザインタフェースの役割を果たし、GearsやHTML5が持つオフライン技術で本来のサーバ環境をローカルに構築する。これによってWebアプリケーションの動作環境をそのままデスクトップに持ってきたということだ。

Webアプリケーションと異なるのは、メニューやネイティブウィンドウの表示などが可能なほか、ローカルのリソースにもアクセスできる点である。ローカルに独自のストレージを持たせることも可能になる予定だが、PR版である現段階ではまだ実装されていない。ただし、HTML5のローカルストレージ機能は利用できる。その他、jQueryやdojo、YUI、Appcelerator Entourageなどの各種JavaScriptフレームワークもサポートされている。

Titaniumアプリケーションの作成

TitaniumはApache License 2.0のもとで公開されており、現在はWindows/Mac OS X/Linux向けのPreview Release版がこのサイトよりダウンロードできる。今回はWindows版の使用例を紹介する。これはSDKを兼ねたプラットフォームになっており、インストールして起動すると図1のように「Titanium Developer」という開発環境が立ち上がる。

図1 プロジェクト作成時には利用するJavaScriptライブラリを選択する

Titaniumで動作するアプリケーションを作成するには、まずここで使用したいJavaScriptライブラリを選択して[Create Project]をクリックする。続いて図2のようにプロジェクトの詳細情報を入力する。最後のアプリケーションアイコンのみ省略できる。本稿の例ではJavaScriptライブラリとしてAppcelerator Entourageを使い、プロジェクト名を「FirstTitaniumApp」、プロジェクトの場所を「C:\workspace」とした。

図2 プロジェクトの詳細情報を入力

続いてプロジェクトの一覧が表示されるので、今作成したプロジェクトを選択すると図3のように詳細がわかる。

図3 生成されたプロジェクト

この段階で「C:\workspace\FirstTitaniumApp」というフォルダが生成されており、その中のResourcesフォルダにトップページの雛型となるindex.htmlと必要なJavaScriptライブラリが配置されているはずだ。あとはこのフォルダに、通常のWebサイトを作る場合と同様に、HTMLやJavaScriptなどのファイルを配置していけばよい。今回はindex.htmlをリスト1のようにしてみた。この例ではAppcelerator Entourageで提供されるToolTipやData Pickerなどを利用している。

リスト1

<html>
<head>
        <meta http-equiv="content-type" content="text/html;charset=Shift-JIS">

        <style>
        body {
                background-color:#292929;
                color:white
        }
        .box {
                border:1px solid #ccc;
                width:400px;
                height:40px;
                color:#333;
                background-color:#eee;
                margin:10px;
                padding:10px;
        }
        </style>

        <script type="text/javascript" src="entourage-jquery-3.0.js"></script>
        <script type="text/javascript" src="yui-2.6.0.js"></script>

        <script>
    function registerToDo() {
                // do registeration...
        }

        </script>

        <title>FirstTitaniumApp</title>
</head>

<body>

        <h1>FirstTitaniumApp</h1>

        Name: <input type="text" id="name" value=""/><br/>
        ToDo: <input type="text" id="todo" value=""/><br/>
        Limit Date: <input id="date" control="jquery_datepicker[duration=slow]"/><br/>

        <input type="button" onClick="registerToDo()" value="Register">

        <div class="box" behavior="tooltip[id=name,delay=1000]">
            Input your name.
        </div>
        <div class="box" behavior="tooltip[id=todo,delay=1000]">
            Input your work.
        </div>
        <div class="box" behavior="tooltip[id=date,delay=1000]">
            Pickup limit date.
        </div>

</body>
</html>

アプリケーションを実行するには、Titanium Developerのプロジェクト詳細画面に戻って、プロジェクト名の右にある黄色い箱のアイコンをクリックする。すると図4のように表示されるので、ここで一番上の[Package and Launch]をクリックすればアプリケーションのパッケージが作成されてテスト実行することができる。本稿の例の場合図5のような感じで実行される。


この画面でテスト実行や配布パッケージ化が行える	テキストエリアをクリックするとツールチップが表示され、LimitDateの部分ではカレンダーが表れる

配布用のパッケージを作成するには、[Package for Distribution]をクリックする。図6のように表示されるので、ここで配対象とするOSと、必要なランタイムおよびオプションパッケージをローカル/ネットワークいずれから読み込むのかを選択する。また、[Make app public]にチェックを入れるとオンラインのTitaniumアプリケーション一覧に作成したアプリケーションが掲載されるようになる。

図6 配布用パッケージの作成

選択したら[Package]ボタンをクリックすればパッケージ化が開始される。この作業はオンラインで行われるため、PCがインターネットに接続されている必要がある。パッケージ化が完了すると図7のように各インストーラのURLが表示されるので、これをクリックしてダウンロードすればよい。

図7 インストーラはオンラインで作成され、DL用のURLが表示される

ダウンロードしたインストーラを実行すると、図8のように通常のデスクトップアプリケーションと同じ感覚でインストールできる。インストールが完了したら、それを起動すればテスト実行したときと同様に図9のように表示されるはずだ。


図8 作成したアプリケーションのインストーラを実行	図9 インストール後、実行した様子

まとめ

上記のほかに、Titanium Developerにはサンドボックス内でのJavaScriptのテスト実行や、オンラインで公開されているTitaniumアプリケーションの検索/一覧表示、IRCを利用した他の開発者とのチャット機能などがある。また、最新情報はTwitterおよびFriendFeedに投稿されており、それを見るためのビューワもTitanium Developerに統合されている。

TitaniumはRIAプラットフォームという観点ではAdobe AIRに近いものだが、ActionScriptではなく通常のHTMLやJavaScriptだけでアプリケーションが開発できるという点が興味深い。またオープンソースである上、基盤としている技術もよく知られたものなので、実行環境そのものを独自に拡張できる可能性も持っている。さらに今後はiPhoneやAndroidといったモバイル環境もサポートに加えていくとのことで、正式版に向けて大きく発展しそうな予感がする。