Titanium というクロスプラットフォーム向けフレームワークがある。

ではじめの頃にすこし触れてみたものの当時は使い道がなくすぐに飽きて、そのまま放置していた。しかし最近、仕事でスマートフォン アプリを手がける機会がありそうで、そうなればクロスプラットフォームが望ましいと考えていた。

そこで再び Titanium に白羽の矢を立てることになったのだが、環境構築にけっこう厄介な箇所があったり Titanium 自体にない編集機能を補う必要があるなど、開発の入り口に立つまでが大変だと思ったので私なりの手順をまとめておく。

なお完全なクロス開発をおこなう場合は Mac OS X が必要。しかし私は Mac を持っていないし Titanium のプロジェクトはプラットフォームに依存しないので、この記事では Windows と Android を対象とする。開発できるプロジェクトは Desktop、Mobile、iPad が用意されているのだが、今回は Mobile を選ぶ。

• 追記 : 2011/4/6
  • 噂の統合製品が Titanium Studio という名前でリリースされた
  • 現在はプレビュー版となっている
  • これは Aptana を Titanium 用にカスタマイズしたものらしい
  • ありがたいことに、エディタにおける Titanium 関連のインテリセンスが標準で有効になっている
  • インストール手順などは以下の記事にまとめてみた
  • Titanium Studio 1.0 Preview 版を入れてみた
• 追記 : 2011/1/19
  • この記事で紹介しているように、Titanium と Aptana を組み合わせている開発者に朗報
  • なんと Titanium が Aptana を買収し、2011 年 3 月に統合製品をリリース予定らしい
  • 統合により RAD 環境の整備にも期待できそうだ
  • TitaniumとAptanaが買収により統合へ － ＠IT

Titanium とは？

Titanium とは、Appcelerator が提供しているクロスプラットフォーム向けのフレームワークである。公式サイトは以下。

• Titanium Cross Platform Application Development

よく JavaScript や HTML/CSS で開発するという紹介を見かけるが、どうやらこれはデスクトップ開発を指しているらしい。モバイルの場合は JavaScript のみを利用するようだ。開発スタイルなどは以下が参考になる。

• titanium-mobile-doc-ja
  • 日本語で読める資料で、現在もっとも充実していると思われるもの
• Titaniumで始めるモバイルアプリ作成の基礎知識
  • @IT による分かりやすい入門記事
• Titanium - JavaScript で iPhone/Android アプリを作る
  • Titanium によるアプリ開発の体験記
• Titanium Mobile
  • Titanium の紹介プレゼン on SlideShare

JavaScript を利用するというあたりで WebView 的なコントロールで Web アプリをホストするものと勘違いしていたのだが実際にはネイティブなバイナリが生成される。

Titanium で Mobile プロジェクトを作成すると build というサブフォルダが生成され、その中に Android/iPhone ( OS) SDK 用の子プロジェクトが出力される。最終的にビルドされるのはこれらとなる。

Android SDK と JDK の準備

Titanium をインストールする前に、Android SDK と JDK (Java Development Kit) を用意してパスを通す。まずは Android SDK。以下のページから SDK の ZIP ファイルをダウンロードする。

• Android SDK

ZIP ファイルを展開すると、いくつかのフォルダと共に SDK Manager.exe というファイルがあるはず。これが SDK やエミュレータの管理プログラムとなる。SDK はバージョンごとに分かれており更新されるたびに新しいものが追加されてゆく。世代を重ねると結構な容量になるので空きに余裕のあるドライブに置くことをすすめる。

SDK Manager.exe を起動すると選択可能な SDK やツールなどがリストアップされる。画面の指示に従ってインストールする。面倒ならすべて入れてもよい。私はそうしている。

インストールが終わったら、Android SDK のパスを通す。OS によって方法が異なるのだが Windows 7 なら以下の手順を実行する。

1. コントロールパネルを開く
2. 「システムとセキュリティ」→「システム」を選択
3. ウィンドウ左から「システムの詳細設定」を選択してダイアログを表示する
4. 「詳細設定」タブを開き「環境変数」ボタンを押してダイアログを表示する
5. 「システム環境変数」欄から「Path」を選び「編集」ボタンを押してダイアログを表示する
6. 「変数値」欄の末尾に Android SDK フォルダの tools サブフォルダまでのパスを追加する
   • Android SDK を C:\app\Android に展開したならばパスは C:\app\Android\tools
   • Android SDK 2.3 以降へ更新した場合は C:\app\Android\platform-tools
   • Path には複数のパスを設定可能でそれらはセミコロンで区切られる
   • 仮に C:\app\Android\tools を末尾に追加するならば ;C:\app\Android\tools または ;C:\app\Android\platform-tools と記述する
7. OK ボタンを押してダイアログを閉じる
   • ここまで開いたダイアログすべてを OK で閉じてゆく
   • 変更した設定が保存される

手順を終えたら設定が正しく反映されていることを確認。コマンド プロンプトから adb help を実行すると以下のような感じでヘルプのテキストが表示されるはず。

<br />C:\>adb help
Android Debug Bridge version 1.0.26

 -d                            - directs command to the only connected USB device
                                 returns an error if more than one USB device is present.
...以下、略。

次は JDK。これは以下のページから入手する。Java Platform (JDK) と書かれている欄の JDK というリンク先で Download ボタンを押すとダウンロードページに移動する。

• Java SE ダウンロード

ダウンロード ページには Platform という欄があり、そこから OS の種類などを選ぶ。しかし JDK 64bit Android などでググると Windows 用 64bit 版の JDK では問題が起きるという話が散見される。たまたま私の環境が Windows 7 Professional 64bit だったのと問題が起きるというページでは現象について書かれていなかったので、どんなことが起きるのだろうと 64bit 版 JDK を試してみたのだが特に問題はなかった。

どうしても心配なら 32bit 版 (Windows とだけ書かれているもの) を選んでおく。こちらは少なくとも複数のブログに成功例が記録されている。

• 追記 : 2010/11/23
  • Windows 7 64bit で試したところ JDK/JRE は 32/64bit 版を共存可能なので両方いれておき、問題があるようなら 32bit 版のパスを指定する手もある
  • この記事を書いたときは 64bit 版で問題もなかったが、現在は心配なので 32bit 版を指定している

JDK のインストールが済んだら Android SDK と同様にこちらもパスを通しておく。環境変数の設定方法については前述しているのでそちらを参照のこと。JDK の場合は以下を「システムの環境変数」に追加する。

設定が反映されていることを確認。コマンドプロンプトから javac -version を実行すると JDK バージョンが以下のように出力されるはず。

C:\>javac -version
javac 1.6.0_21

これで Titanium から Andrloid を利用するための準備が整った。本項の手順を実行することで Titanium から Android SDK を利用したビルドやエミュレータ実行がおこなえるようになる。

Titanium のインストール

まずは以下のページからインストーラを入手。

• Download Titanium

インストーラは MSI 形式なのでダウンロードしたら起動するだけでセットアップが始まる。内容について特筆すべきところはない。そのまま最後まで問い合わせに答えてゆけばよい。

セットアップが完了して Titanium を起動したらサインアップかログインをおこなう。以下のような画面が表示されるので Titanium アカウントがあるなら Login に入力、なければ Sign Up 画面で登録する。

アカウント登録にはメールアドレスが必要だが、これは登録後に変更できないようなので注意する。Titanium 上のプロフィール画面からメール アドレスを変更しても反映されず Appcelerator サイトのアカウント管理用フォームではアドレス部分が編集不可なので、そういう仕様なのかもしれない。

ログインするとウィンドウ右上にある通知部分に Now Mobile SDK available (version XXXX) Click to download と表示される。

初期状態の Titanium には Mobile 用 SDK が組み込まれていないようなので、この通知の Click to download をクリックしてインストールをおこなう。

最後に Android SDK 参照を設定する。ウィンドウ左上に 3 つ並んだボタンの右 (人型のアイコン) をクリックするとプロファイル編集画面が開くので、ここの下部にある Android SDK 欄に SDK をインストールしたフォルダのパスを設定する。

設定するパスは SDK フォルダのルート。階層としては SDK Manager.exe が置かれている場所になる。サブ フォルダを設定すると Android プロジェクトのビルドやエミュレータ起動に失敗するので注意すること。

• 追記 : 2010/11/23
  • Android SDK 2.3 でフォルダ構成が変わり、adb.exe がルート直下の tools から platform-tools に移動されたため、ルートを指定しても
  • "Couldn't find adb.exe or android.bat in your SDK's "tools" directory. You may need to install a newer version of the SDK tools."
  • というエラーが出る。
  • また Titanium にパスを設定済みで Android SDK 2.3 に更新した場合、エミュレータが起動しなくなった
  • プロフィール画面に警告が出ないので、気づかなかった
  • ちょうど、Titanium を起動しようとすると install.exe が起動するようになる問題が起きていたので Titanium をアンインストールし、"C:\User\ユーザー名\Roming\Titanium" を削除してからインストールし直したところ、Android SDK パスの再設定で前述の警告が表示され、adb.exe の問題に気がついた
  • Appcelerator のブログで Titanium and Android SDK Tools r8 という記事があり、これによれば platform-tools から tools へ adb.exe をコピーして回避しなさい、とあるのでそうした
  • 結果、現在は無事にエミュレータが起動するようになった

Mobile プロジェクトの作成と実行

準備が整ったので、さっそく Mobile プロジェクトを作成してみる。

ウィンドウ上部の New Project ボタンを押すとプロジェクト作成画面が表示される。ここで Project Type を Mobile にしてから各種設定をおこなう。Android SDK の設定が適切なら、この画面の Installed Mobile Platform 欄に Android SDK found がチェックされているはず。

ちなみに Mac OS X で iOS SDK がインストールされている場合は Titanium が自動検出してくれて、iPhone SDK found がチェックされる。

設定が終わったら Create Project ボタンを押してプロジェクトを作成。そしてウィンドウ左上のトランクアイコンのボタンを押すと左にプロジェクト一覧、右にその内容が表示される。右側の上部から Test & Package タブをクリックし、テスト実行用の画面を表示させる。

この画面ではエミュレータの設定とテスト実行がおこなえる。設定の変更は画面下部に並んだコントロールを操作しておこなう。各コントロールの役割を表にまとめてみる。

作成したプロジェクトを実行してみよう。

Andrloid なら SDK を APIs 1.6、Screen は HVGA にすることをおすすめする。普及している Android バージョンの下限は 1.6 で解像度は HVGA と思われる。また Google Map などを使用する場合は APIs とついているものが必要となる。この構成にしておけば大抵の環境で動作するだろう。

Filter 欄はデフォルトで Info になっている。開発時は Debug か Trace にして出力される情報を増やすとよいだろう。この設定は他と異なりいつでも変更できる。

ひととおり設定を終えたら Launch ボタンを押してじっと待つ。プロジェクトのビルド、Android エミュレータの起動、ビルドされたバイナリのインストールなどの進捗がコンソール出力されてゆく。最終的には以下のようにプロジェクトが実行される。

Aptana のインストール

Titanium にはプロジェクトの編集機能が用意されていないので別途、編集用のツールを用意する必要がある。テキストエディタでもよいのだが私は入力補完やファイル管理機能などが欲しいので、Aptana というフリーの Web 系オーサリングツールを利用している。

このツールは JavaScrip の構文解析と入力補完が備わっており JavaScript ファイルを参照させることで補完を強化することもできる。標準で jQuery や Dojo に対応するうえ Titanium 用のファイルも有志によって作成されているので、導入すればプロジェクト編集がぐっと楽になる。

ということで Aptana のインストール手順を書く。まずは以下のページから Aptana Studio を入手。Aptana には Eclipse プラグイン版もあるのだがプロジェクト管理などがややこしくなるので、単体版となる Studio を選んだものとする。

• Aptana | Download Aptana Studio 2.0.5

Aptana は安定版の 2.0 系と最新の 3.0 系がある。しかし 3.0 系は Beta なので、今回は 2.0 系を使用する。インストール設定については、以下の 2 点を変更した。

1. インストール先
   • 標準では C:\Users\XXXX\AppData\Local\Aptana Studio 2.0 のようになる
   • すべてのユーザーで共有したいので Program Files 以下に変更
   • 私の環境は Windows 7 64bit なので C:\Program Files (x86)\Aptana Studio 2.0 にした
2. ファイルの関連づけ
   • 標準では CSS、JavaScript、ScriptDoc がチェックされている
   • すべてのチェックを外した
   • ツール専用のファイル以外、私は関連づけを利用しない派なので

インストールが完了したら日本語化する。これをおこなうと処理がすこし重くなるので英語で十分だと思うなら、この手順は飛ばしてもよい。

まず以下のサイトにある Pleiades 本体ダウンロード欄から安定版の ZIP ファイルを入手する。現時点では 1.3.2 が安定版の最新となる。

• Pleiades - Eclipse プラグイン日本語化プラグイン

ダウンロードした ZIP を展開し、その中にある plugins フォルダの中身を Aptana のインストール先にある plugins フォルダの中へコピーする。

次に Aptana インストール先の直下にある AptanaStudio.ini を開く。

Vista 以降の Windows では、Program Files 以下のファイルを編集する場合、管理者権限が必要なので、編集に使用するエディタ (メモ帳など) のショートカットを右クリックして「管理者として実行」を選び、起動する。また、保存時にも管理者権限に関する警告が表示されると思うので、承諾しておく。

ファイルを開いたら、末尾に以下の記述を追加して保存。

-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar=

この後に Aptana を起動すると、かなりの部分が日本語化される。

日本語化されていない場合やうまく起動しない場合は、以下の要因が考えられる。

• 日本語化する前に Aptana を起動していた
  • ワークベンチなどの設定がおかしくなっている
  • この状態になると起動しなくなる
  • Aptana を -clean オプション付きで起動することで修復可能
  • "C:\Program Files (x86)\Aptana Studio 2.0\AptanaStudio.exe" -clean という感じで
  • いちど修復したら、次から -clean オプションは不要
• ファイルのコピーに失敗している
  • Pleiades の中には plugins の他に features というフォルダがある
  • これらの中身は同名なので間違えやすい
• Aptana.ini の内容が不適切
  • 内容を確認して修正・保存する

Aptana に Titanium 用の JavaScript を追加 & テキスト形式を UTF-8 に統一

ありがたいことに James 氏が Aptana で Titanium のコード補完をおこなう方法と、そのための JavaScript を公開している。

• james david low / work / Titanium Autocomplete Eclipse

Aptana への設定方法は上記ページにある動画を見るのがわかりやすい。ねんのため本記事にも手順を書いておく。

1. James 氏のページにあるリンク先から Titanium 用の JavaScript を入手する
   • Installation 欄にある javascript header file がリンクになっている
   • timobile.js というファイル名でローカルに保存する
2. Aptana を起動する
3. 画面左の「参照」タブを開く
4. JavaScript をドロップせよと表示されているので、timobile.js をドロップする

これで timobile.js の内容を元に JavaScrip 内で補完が効くようになったはず。次項でプロジェクト編集をおこなうので、そこで効果のほどを確認してみる。

Titanium の構成ファイルでマルチバイト文字を使用したい場合はテキストのエンコードを UTF-8 にする。日本語でコメントを書くことも多いだろうから、ここで設定しておこう。

Aptana のメインメニューから「ウィンドウ」→「設定」を選び、ダイアログから「一般」→「ワークスペース」を開く。すると「テキスト・ファイルのエンコード」欄があるので、ラジオボタンを「その他」に変更して隣のドロップダウンから「UTF-8」を選ぶ。最後に「OK」ボタンを押してダイアログを閉じる。

以上で準備完了。

Aptana で Titanium プロジェクトを編集してみる

最後に Aptana で Titanium プロジェクトを編集してみる。Aptana を起動して Mobile プロジェクトの作成と実行で作成したプロジェクトを取り込む。手順は以下のようになる。

1. Aptana の画面左から「ファイル」タブを開く
2. 「プロジェクト」のコンテキストメニューから「新規」を選びダイアログを表示
3. 「一般」ツリーの「プロジェクト」を選び「次へ」
4. 「デフォルトロケーションを使用」のチェックを外し、「参照ボタン」を押す
5. Titanium プロジェクトのフォルダを選ぶ
6. プロジェクト名を TestApp にして取り込む

これで Titanium プロジェクトが Aptana 内に追加されたはず。

さきほど設定した入力補完が効いているかを確認するためにプロジェクトのResouces フォルダ内にある app.js を開き、適当な位置で Titanium.ui まで打ち込んでみよう。1 文字タイプした時点で補完が効き始め、入力をすすめると候補がどんどん絞り込まれてゆくことを確認できる。

ある程度の複雑さを持ったアプリのほうが慣れるのによいと思ったので Google Map を中央に添え、入力した住所への移動とマップ中央座標の住所を表示するサンプルを作ってみた。

Android の場合、Google Map を使用するためには API キーが必要となる。API キーのページで申請し、取得したものを Titanium プロジェクト内にある tiapp.xml に設定する。

<property name="ti.android.google.map.api.key.development">ここに API キーを指定</property>

おまけとしてサンプルアプリのプロジェクトを公開する。Google Map API のキーは個人で取得するものなのでサンプルの tiapp.xml では API キー部分を空欄にしてある。

• Titanium のサンプル

恐らくそのまま Titanium に読ませてもビルドできないと思うので、試す場合は作成済みのプロジェクトの app.js に、このプロジェクトの内容をコピペして tiapp.xml に Google Map API のキー指定を追加すること。

Comments from WordPress

• 相澤謙一郎 2011-03-14T12:35:46Z

  アカベコ様
  はじめまして。相澤と申します。

  TitaniumでのiOSアプリ開発を依頼することは可能でしょうか。
  もし可能であればメールにてご一報頂けますと幸いでございます。

  まず案件の委細をお伝えさせて頂きます。
  突然の依頼で申し訳ございません。

  Titaniumの開発者が少なく、検索エンジンで探した所、本ブログを見つけた次第です。
  ご検討の程、よろしくお願い致します。

  相澤謙一郎

• akabeko 2011-03-14T14:03:24Z

  @相澤様
  はじめまして。
  開発依頼なのですが、本業の副業規定や業務状況を考慮すると、お受けするのは非常に難しいと思われます。
  以上、よろしくお願いいたします。

• 相澤謙一郎 2011-03-15T01:16:31Z

  @akabeko 様

  早速、ご回答いただきありがとうございます。了解致しました。
  今後ともよろしくお願い致します。

  相澤謙一郎