攻略! ツール・ド・プログラミング
- 開発ソフトウェア
- ● 関連キーワード
- アプリ開発プラットフォーム
- フレームワーク
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」という開発環境が立ち上がる。
Titaniumで動作するアプリケーションを作成するには、まずここで使用したいJavaScriptライブラリを選択して[Create Project]をクリックする。続いて図2のようにプロジェクトの詳細情報を入力する。最後のアプリケーションアイコンのみ省略できる。本稿の例ではJavaScriptライブラリとしてAppcelerator Entourageを使い、プロジェクト名を「FirstTitaniumApp」、プロジェクトの場所を「C:\workspace」とした。
続いてプロジェクトの一覧が表示されるので、今作成したプロジェクトを選択すると図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のような感じで実行される。
配布用のパッケージを作成するには、[Package for Distribution]をクリックする。図6のように表示されるので、ここで配対象とするOSと、必要なランタイムおよびオプションパッケージをローカル/ネットワークいずれから読み込むのかを選択する。また、[Make app public]にチェックを入れるとオンラインのTitaniumアプリケーション一覧に作成したアプリケーションが掲載されるようになる。
選択したら[Package]ボタンをクリックすればパッケージ化が開始される。この作業はオンラインで行われるため、PCがインターネットに接続されている必要がある。パッケージ化が完了すると図7のように各インストーラのURLが表示されるので、これをクリックしてダウンロードすればよい。
ダウンロードしたインストーラを実行すると、図8のように通常のデスクトップアプリケーションと同じ感覚でインストールできる。インストールが完了したら、それを起動すればテスト実行したときと同様に図9のように表示されるはずだ。
まとめ
上記のほかに、Titanium Developerにはサンドボックス内でのJavaScriptのテスト実行や、オンラインで公開されているTitaniumアプリケーションの検索/一覧表示、IRCを利用した他の開発者とのチャット機能などがある。また、最新情報はTwitterおよびFriendFeedに投稿されており、それを見るためのビューワもTitanium Developerに統合されている。
TitaniumはRIAプラットフォームという観点ではAdobe AIRに近いものだが、ActionScriptではなく通常のHTMLやJavaScriptだけでアプリケーションが開発できるという点が興味深い。またオープンソースである上、基盤としている技術もよく知られたものなので、実行環境そのものを独自に拡張できる可能性も持っている。さらに今後はiPhoneやAndroidといったモバイル環境もサポートに加えていくとのことで、正式版に向けて大きく発展しそうな予感がする。
※ 本記事は掲載時点の情報であり、最新のものとは異なる場合がございます。予めご了承ください。
連載目次
関連リンク
ダウンロードBOXに入れる
記事をダウンロードBOXに追加します。よろしいですか?
ブックマーク
記事をブックマークに追加します。よろしいですか?
-
[2021/03/05 08:00] サーバ/ストレージ
-
[2021/03/04 08:00] クラウド
-
$side_seminar_count = $i+1; ?>
-
2021年3月12日(金) 13:00 ~ 17:00 【第1部】13:00~13:50(基調講演) 【第2部】14:00~16:15 計12セッション 【ASK THE SPEAKER】16:30~17:00(講演者への質問コーナー)
KDDI SOLUTION DAY 2021 ~不確実性の高い時代のビジネス共創とDX~
$side_seminar_count = $i+1; ?>
-
2021年3月12日 金曜日 13:00 – 14:50
DXでさらに企業進化を AI+自動化でビジネスをパワーアップ
$side_seminar_count = $i+1; ?>
-
2021年3月15日(月)0:00~2021年3月31日(水)23:59
KDDI まとめてオフィスの学校向けオンラインセミナー ~これからの教育ICT推進に向けて~
$side_seminar_count = $i+1; ?>
-
2021年 3月 18日 (木) 13:00~18:20
マイナビニュース スペシャルセミナー 2021年の脅威に対峙する
$side_seminar_count = $i+1; ?>
-
2021年3月18日(木)15:00~16:00
5G時代のCDNに!コスト削減と顧客体験向上を両立させるCDNとは?
今注目のIT用語の意味を事典でチェック!