Titanium について理解する

Web 技術を利用してモバイル・アプリケーションやデスクトップ・アプリケーションを作成する

Appcelerator の Titanium を利用すると、JavaScript や PHP などの Web 開発言語の知識を活用してアプリケーションを作成することができます。この強力なツールを利用してデスクトップ・アプリケーションやモバイル・アプリケーションを作成するための基本を学びましょう。

Thomas Myer, Principal, Triple Dog Dare Media

author Thomas Myer はオースチンを拠点に活動するコンサルタントであり、著作者であり、講演者です。彼は Triple Dog Dare Media を運営しており、また Twitter では @myerman としてツイートしています。



2012年 1月 06日

この 5 年ほどの間に Web アプリケーション開発の世界は非常に急速に変化しました。それまで、確実な処理をするバックエンド・コードのみならず軽快な動きの UI も作成できる Web 開発者は非常に稀でしたが、Ruby on Rails や jQuery といった強力な開発フレームワークのおかげで、次第にそれがごく当たり前のことになりつつあります。同様に、CSS や HTML は、かつては Web ページの構造や配置を決定するための非常に単純なツールでしたが、多くの機能強化がなされ、柔軟で強力な環境に変化した結果、開発者は非常に魅力的なエクスペリエンスを作成できるようになっています。

そんな状況の中、その同じ開発者が、Web 上で動作する「だけの」アプリケーション以上のものを作成するように要求される場合があります (「だけの」としたのは、Web ソフトウェアを開発する人ならば誰もが知っているとおり、Web 上で動作するアプリケーションをきちんと作成するのは、それだけでも見た目以上に大変だからです。もちろん、中には簡単に仕上げてしまう人も必ずいます)。この急速に変化する世界では、アプリケーションは単に Web 上に存在するだけでは十分ではありません。モバイル・アプリケーションやデスクトップ・アプリケーションも必要なのです。

問題は、Python、JavaScript、PHP などのインタープリター型スクリプト言語の世界を経験してきた人の場合、Java 技術、C++、Objective-C 言語などへの移行はそれほど容易ではないことです。実際、そうした移行は極めて困難なものになる可能性があります。新しい世界では、何もかもが困難で、コードをコンパイルして扱わなければならなかったり、さまざまな機器をプロビジョニングしなければならなかったり、多種多様なプラットフォーム (Apple Macintosh、Windows、Linux など) でテストをしなければならなかったりします。おそらく、これまでとはまったく異なる方法で作業を始めなければなりません。

そのため、たとえ新しい言語 (例えば Apple の iPhone や iPad 向けのアプリケーションのコーディングをする場合には Objective-C など) を学んだとしても、さらにその上に、新しい環境に沿った作業方法を理解しなければなりません。Android フォンや iPhone 向けのアプリケーションのコーディングをする場合には、特定のステップに従って作業を進める必要があります。つまり開発者証明書の入手、ビルドの実行、機器のプロビジョニング、そしてその機器上で実行するコードのテストといった手順で作業を進め、最後にそのアプリケーションを提出して配布するためのプロセスに従う必要があります。

平均的な Web 開発者、つまり SFTP でテスト・サーバーにコードを転送し、さまざまなブラウザーでチェックを実行し、それをそのまま公開する、という手順に慣れた開発者にとって、アプリケーションの配布に至るまでに必要な上記の全プロセスには少し尻込みしたくなるかもしれません。

しかし、皆さんが既に習得している言語のスキルを活用できるとしたらどうでしょう?それらの言語を使用してデスクトップ・プラットフォームやモバイル・プラットフォーム用のネイティブ・アプリケーションを作成し、それらのアプリケーションをパッケージ化して配布し、使用するとしたら・・・?皆さんは、そのために最適な記事を読んでいます。なぜなら、そうした「・・・だとしたら」に対する答えが、Appcelerator が公開している無料でオープンソースの開発キット、Titanium だからです (「参考文献」を参照)。

Titanium とは何か?

簡単に言えば、Titanium は、HTML、JavaScript、CSS (とりあえず基本的なものを挙げます) を使用してデスクトップ・アプリケーションやモバイル・アプリケーションを迅速に開発するためのアプリケーション開発プラットフォームです。また Titanium では Python、Ruby、PHP も使用することができ、それらをフロントエンド技術と組み合わせることで、これまでアプリケーションの作成に使用してきたおなじみの技術を余すところなく使用することができます。

Titanium と似たようなプラットフォームは他にもありますが (Adobe AIR など)、Titanium が他と異なるのは、Titanium は無料で使えるオープンソースの Apache ライセンスの下で提供されていること、そして最初に Adobe Flash や ActionScript を学ぶ必要がないことです。基本的に、Titanium は独立した WebKit クライアントと充実した API であり、内部に SQLite データベースを含み、ファイルシステムへのフルアクセス機能を持ち (これらは機能のごく一部です)、それらの機能を独自のコード (CSS、JavaScript、HTML のコードやバックエンド・コード) と組み合わせることができます。さらに、デスクトップ通知、トレイ・アイコン、ウィンドウ・メニューを始めとするさまざまなウィジェットに対する一般的なラッパーも利用できるため、ほとんどの主要なオペレーティング・システムとアプリケーションとを自然に融合することができます。


Titanium をインストールする

Titanium を使い始めるためには、Appcelerator の Web サイトで「Download Titanium」をクリックします。パッケージをダウンロードしたら、そのパッケージをシステムにインストールします。Mac OS X では、単純に Titanium のアイコンを「Applications (アプリケーション)」フォルダーのアイコンにドラッグします。

Titanium をインストールしたら、まず始めに更新を実行してライブラリーを追加でダウンロードする必要があるはずです。更新が完了したら、その時点で初めて Titanium を起動します。(訳注: 最新の Titanium である Titanium Studio にはこの記述があてはまらない可能性があります。) すると、ウェルカム・ページが表示されるはずです。ログインするのに必要な e-メール・アドレスとパスワードを既に登録済みの場合は、それを使ってログインします。まだ登録していない場合は、少し時間を取って e-メール・アドレスとパスワードを登録してください。ウィキやサポート・ポータル、その他のリソース (クラウド・ベースの分析など) にアクセスするには、この e-メール・アドレスとパスワードを使用します。

登録を終えてログインすると、ウィンドウの左側にはプロジェクトの一覧が表示されるはずです。また、この同じウィンドウから、API ドキュメントやその他の有用な情報にアクセスすることができます (図 1 を参照)。これらの情報はいつでも自由に利用できますが、ここでは最初のプロジェクトの作成に取り掛かりましょう (この記事では、以前のリリースである Titanium Developer を使用して説明を進めます)。

図 1. Titanium Developer の Dashboard
ダッシュボードのスクリーン・ショットが表示されています。左側にプロジェクト・ペインがあり、右側のペインにはコード・サンプルやチュートリアルなど、さまざまなリソースへのクイック・リンクがいくつもあります。

最初の Titanium アプリケーションを作成する

Titanium で最初のアプリケーションを作成するためには、単純に最上部のツールバーで「New Project (新規プロジェクト)」をクリックして「New Project (新規プロジェクト)」ウィンドウを開きます。このウィンドウで、新しいアプリケーションに関する情報をいくつか入力します (図 2 を参照)。

  1. Project type (プロジェクト・タイプ)」では、「Desktop (デスクトップ)」を選択します。
  2. 「Name (名前)」には、アプリケーションの名前を入力します。
  3. 「App ID (アプリケーション ID)」では、アプリケーションに ID を付けます。通常、App ID はおなじみの com.<会社名>.<アプリケーション名> という形式です (com.example.sampleapp など)。
  4. 「Directory (ディレクトリー)」では、完成したコードを格納するディレクトリーを選択します。
  5. 「Company/Personal URL (会社/個人の URL)」では、皆さんの会社の URL、または皆さん個人の URL を入力します。
  6. 「Language Modules (言語モジュール)」では、新しいアプリケーションに含めたい言語モジュールにチェックを入れます (現在、Ruby、Python、PHP がサポートされています)。
  7. Create Project (プロジェクトを作成)」をクリックします。
図 2. 新規プロジェクトを作成する
新規プロジェクトを作成するウィンドウのスクリーン・ショットが表示されており、Ruby、Python、PHP を使用してデスクトップ・プロジェクトを作成する指定になっています。

Titanium は指定されたディレクトリー内に新しいアプリケーション用のフォルダーを作成します。このアプリケーション・フォルダーには、以下のような重要なファイルとディレクトリーが含まれています。

  • Resources ディレクトリーには、最終的にすべての画像、HTML ファイル、PHP ファイル等々が含まれます。このディレクトリーはアプリケーションの Web のルートと考えることができます。アプリケーションの中で、app:// という URL を使用することで、このディレクトリー内のファイルや資産を参照することができます。
  • tiapp.xml ファイルはアプリケーションの構成ファイルです。Titanium を使わずにこのファイルを編集することはないはずですが、もしそうする場合には、必ずドキュメントを読んでから作業を行ってください (「参考文献」を参照)。
  • LICENSE.txt ファイルには、このアプリケーションを使用する前にユーザーが同意する必要のあるライセンスが含まれています。
  • manifest ファイルにはアプリケーションに関する詳細が記述されています (アプリケーションのランタイムのバージョンなど)。このファイルを Titanium の実行中に編集するのは望ましくありません。
  • dist ディレクトリーは、アプリケーションの起動およびパッケージ化をする際に Titanium がそのアプリケーションを準備するための場所です。

この段階では、セットアップした最初のアプリケーションが有効で実際にパッケージ化できるかどうかを確認します。それをテストするためには、「Test & Package (テストとパッケージ)」タブをクリックし、続いて「Package (パッケージ)」タブをクリックします。

「Package (パッケージ)」タブでは、どのプラットフォームをサポートしたいかを選択し (単純に、現在使用しているプラットフォームを選択します)、インストーラーのタイプも選択します (ここでは「Bundled (バンドル)」を選択します)。残りの項目は図 3 のようにデフォルトのままにします (つまり、アプリケーションは非公開にし、ユーザーに対してリリースしない、という設定にします)。

図 3. アプリケーションをパッケージ化する
パッケージ化のオプションを選択する画面のスクリーン・ショット。プラットフォームの種類、インストーラーのタイプ、公開の有無、ユーザーに対するリリースの有無を選択することができます。

設定が済んだら、「Package Project (プロジェクトをパッケージ化)」をクリックします。数分すると、Appcelerator の Web サイトからダウンロードできる状態になったパッケージが完成するはずです (図 4 を参照)。

図 4. ダウンロード準備の整ったパッケージ
OSX 10.5 Intel パッケージが完成したことを示す画面のスクリーン・ショット。ダウンロードへのリンクも表示されています。

リンクをクリックしてパッケージをダウンロードし、インストールします。インストールしたアプリケーションを実行してみると、単なる空白の画面の最上部に「Welcome to Titanium (Titanium へようこそ)」という言葉が表示されるのみです。アプリケーションの Resources ディレクトリーにある index.html ファイルの内容はまさにそれしかないので、これは当然のことです。実際、index.html ファイルを開いてみると、リスト 1 のようなマークアップが表示されるはずです。

リスト 1. 最初の Titanium アプリケーションの基本的なマークアップ
<html><head></head>
<body style="background-color:#1c1c1c;margin:0">
<div style="border-top:1px solid #404040">
<div style="color:#fff;;padding:10px">Welcome to Titanium</div>
</div></body></html>

アプリケーションを編集する

最初のアプリケーションを作成しましたが、このアプリケーションはそれほど面白いものではありません。ほとんど何も表示せず、何も有用なことをしません。そこで、いくつかの要素を追加し、アプリケーションらしく見えるようにしましょう。

このアプリケーションが保存されているディレクトリーを開き、その中から Resources ディレクトリーを開きます。そして、皆さんのお気に入りの JavaScript フレームワーク (私の場合は jQuery です) をダウンロードし、そのファイルを使えるような状態で Resources ディレクトリーにコピーします。今度はエディターで index.html ファイルを開き、変更を加えます。

まず、<script> タグを使用して、ダウンロードしたフレームワークのファイルをアプリケーションのページに読み込みます。次に、Titanium に付属している余分なインライン・スタイルをすべて削除します。この時点で、HTML マークアップはリスト 2 のようになるはずです。

リスト 2. jQuery を追加する
<html>
<head>
<script type="text/javascript" src="app://jquery.js"></script>
</head>
<body>
</body>
</html>

ここでクライアント・サイドのコードをいくらか追加します (例えば、ページ上で何らかの動的なことをするボタンなど)。リスト 3 の例では、クリックすると <div> にコンテンツを追加するように jQuery に指示する単純なボタンを作成しています。

リスト 3. 動的なボタンを追加する
<html>
<head>
<script type="text/javascript" src="app://jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
	$("#mybutton").click(function(){
		var string = 'Hello there!';
		$('#mymessage').html(string);
	});
});
</script>
</head>
<body>
<button id="mybutton">click me!</button>
<div id="mymessage"></div>
</body>
</html>

これは単純な例ですが、選択肢はほとんど無限にあることがすぐにわかると思います (図 5 を参照)。他のクライアント・サイド・フレームワーク、CSS レイアウト、カスタム・コンテンツを追加すると、顧客に提供するためのアプリケーションを作成することができます。

図 5. Titanium で HTML と jQuery とを組み合わせた結果
サンプル・アプリケーションのスクリーン・ショット。「click me! (ここをクリック!)」ボタンと、「Hello there! (皆さん、こんにちは!)」というメッセージが表示されています。

Web サイトの場合とは異なり、更新したコンテンツを確認するためには「ビルド」をパッケージ化する必要があるため、少し計画的な作業が必要です。例えば、いったんディストリビューションをバンドルすると、コンテンツが変更されても簡単に更新することはできないため、パッケージの作成からパッケージのダウンロードが完了するまでの時間を見込んでおくのを忘れないでください。

例えば、前に戻り、リスト 4 のような CSS スタイルを追加するとします。

リスト 4. 単純な CSS
body {
	margin:0;
	padding:0;
	background:#ccc;
}

#wrapper{
	border:1px solid black;
	margin:10px auto;
	width:500px;
	background:#fff;
	padding:10px;
}

次に、少しばかりマークアップとして、wrapper という ID を持つ HTML の <div> を追加します (リスト 5)。

リスト 5. CSS を適用する
<html>

<style>
body {
	margin:0;
	padding:0;
	background:#ccc;
}

#wrapper{
	border:1px solid black;
	margin:10px auto;
	width:500px;
	background:#fff;
	padding:10px;
}			
</style>

<head>
<script type="text/javascript" src="app://jquery.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
	$("#mybutton").click(function(){
		var string = 'Hello there!';
		$('#mymessage').html(string);
	});
});
</script>

</head>

<body>

<div id="wrapper">
<button id="mybutton">click me!</button>
<div id="mymessage"></div>
</div>
</body>

</html>

すると、パッケージ化のプロセスを一通り行わない限り、新しいルック・アンド・フィールを確認することができません。コンテンツの更新を確認できるまでにかかる時間は、皆さんが慣れている Web サイトの開発手法に比べると少し長いかもしれませんが、自分が何をしているのかを理解してさえいれば問題はないはずです。

ここまではクライアント・サイドの説明でしたが、サーバー・サイドのコードもサポートされています。この HTML ファイルは PHP に変換して使用することもできます。そしてビルド対象のアプリケーションが PHP をサポートしていれば (つまり、プロジェクトを作成する時に「PHP」のチェックボックスを選択していれば)、PHP コマンドを挿入することができます。Titanium に組み込まれている SQLite データベースと PHP とを組み合わせると、ほとんどあらゆる種類の動的アプリケーションを作成することができます。次のセクションでは、これらの点についてもう少し詳しく説明し、PHP を使ったコードを追加します。


PHP を追加する

基本的なことは理解できたので、この新しいアプリケーションに対していくつかの高度なことをしてみましょう。Resouces ディレクトリーを開き、そこに保存されている index.html ファイルをエディターで開きます。PHP による作業を始める前に、phpinfo() を実行するPHP ファイルへのリンクを追加しておきましょう。こうしておけば、対象としている PHP 環境の設定を知ることができます。ここで PHP を選んだ理由は、私が最も使い慣れている言語が PHP だからです。Ruby や Python を使用することもできます。Titanium ではこれらの言語をサポートしています。

HTML ファイルの中で、ボタンを削除し、phpinfo.php という新しいファイルへのリンクを追加します (リスト 6 を参照)。

リスト 6. phpinfo.php にリンクする
<div id="wrapper">
	<a href="phpinfo.php">see PHP info</a>
</div>

phpinfo.php ファイルは基本的なファイルであり、phpinfo() を呼び出すための 1 行の PHP のみが含まれています。phpinfo() は Titanium の PHP 環境のすべての変数と設定をダンプ出力します (リスト 7 を参照)。この呼び出しを <pre> タグでラップすると、この情報を容易に処理することができます。

リスト 7. phpinfo.php ファイルを作成する
<?php
echo phpinfo();
?>

ソース・コードを作成したら、Titanium に戻り、更新パッケージを作成します。このプロセスが終了するのを待ってから、その更新パッケージをダウンロードしてインストールします。インストールしたら、この更新パッケージを実行します。すると、phpinfo.php ファイルへのリンクを表示する単純なページが表示されるはずです。そのリンクをクリックすると、図 6 のようなページが表示されるはずです。

図 6. phpinfo() コマンドを実行した場合の一般的な結果
PHP に関する情報をダンプ出力した画面のスクリーン・ショット。PHP のバージョン、カーネルのバージョン、ライブラリー等々が表示されています。

この実行結果を調べるとわかりますが、Titanium に表示されるページには、Titanium に設定されている PHP の構成がすべて含まれています。例えば、Session、SQLite、SimpleXML がサポートされています (その他にも有用なツールがサポートされています)。また Titanium はローカル環境に関する情報を (例えば、WebKit ライブラリーの場所や _ENV['HOME'] の設定など) 認識していることに注意してください。

phpinfo() を呼び出すことで PHP の構成情報を出力できることはわかりましたが、実際に PHP を使って何らかの処理を実行したい場合にはどうすればよいのでしょう?別の PHP ファイルを作成してそのファイルを呼び出すこともできますが、HTML ファイルの中に PHP を直接埋め込んだほうがはるかに簡単です。そのためには、(JavaScript の場合と同じように) <script> ブロックを作成し、type 属性として “text/php” を指定して PHP のコードを追加します。

例えば、2 つの数を加算し、先ほど作成した HTML ファイルの中に配置する単純な関数を作成したい場合には、その関数を JavaScript ブロックを利用して実行します (リスト 8 を参照)。

リスト 8. 基本的な PHP ブロックを作成する
<script type="text/php">

function php_sum($a,$b){
	return $a + $b;
}

</script>

<script>
	alert(php_sum(3,4));
</script>

図 7 を見るとわかるように、基本的な JavaScript のブロックから PHP コードを実行することができ、使用するデータも JavaScript と PHP の間で受け渡すことができます。おそらくこうした方法は、皆さんがこれまで Web 開発の世界では使ってこなかった方法のはずです。

図 7. 基本的な PHP ブロック
PHP コードを実行した場合の画面のスクリーン・ショット。テキスト領域に数字の 7 があり、また OK ボタンがあります。

当然ですが、別の方法として、PHP ブロックを別のファイルにまとめ、それらのファイルを一般的な <script> タグを使用して読み込む方法、あるいは <script> ブロック内で include コマンドを使用して読み込む方法があります。リスト 9 は <script> ブロック内で include コマンドを使用する方法を示しています。

リスト 9. PHP ソース・ファイルを読み込む
//you can use the script tag
//if you use this method, leave your PHP code bare, no <?php block
<script type="text/php" src="my_file.php"/>
 
//or you can use a PHP include command inside a script block
//if you use this method, surround your code with <?php block
<script type="text/php">
    include("source.php");
</script>

まとめ

ここまで来れば、独自の Titanium アプリケーションを作成するにはもう十分です。この記事では、Titanium のインストール方法、HTML を使用した基本インターフェースの作成方法、さらには PHP コードや CSS スタイルの追加方法まで学びました。これらを出発点に Web 開発者としてこれまで身につけたスキルを活用することで、他の機能を追加したり、スマートなモバイル・アプリケーションやデスクトップ・アプリケーションを作成したりすることができるはずです。

参考文献

学ぶために

製品や技術を入手するために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source
ArticleID=782589
ArticleTitle=Titanium について理解する
publish-date=01062012