Titanium と Aptana でモバイル開発

2010年11月3日 14 開発 , , , ,

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 が提供しているクロスプラットフォーム向けのフレームワークである。公式サイトは以下。

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

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

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

Android SDK と JDK の準備

Titanium をインストールする前に、Android SDK と JDK ( Java Development Kit ) を用意してパスを通す。

まずは Android SDK から。以下のページから SDK の ZIP ファイルをダウンロードする。

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 ボタンを押すとダウンロードページに移動する。

ダウンロードページには 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 の場合は以下を「システムの環境変数」に追加する。

変数名 備考
JAVA_HOME C:\Program Files\Java\jdk1.6.0_21 JDK のインストール先となるパス
Path ;%JAVA_HOME%\bin JDK 内の bin フォルダ。すでにある値の末尾に追加する

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

C:\>javac -version
javac 1.6.0_21

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

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 をインストールしたフォルダのパスを設定する。

Android 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 タブをクリックし、テスト実行用の画面を表示させる。

Test & Package

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

コントロール 役割
SDK SDK の種類を選択する
Screen エミュレータの画面種別を選択する
Filter 画面中央のコンソールに出力する情報の種類を選択する
Launch プロジェクトのビルドとエミュレータ上での実行をおこなう
Stop エミュレータやプログラムを停止させる

では早速、いま作成したプロジェクトを実行してみよう。

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 は安定版の 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 が安定版の最新となる。

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

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

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

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

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

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

日本語化された 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 を公開している。

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


TRACKBACKS

COMMENTS

  • 2011年3月14日 9:35 PM

    アカベコ様
    はじめまして。相澤と申します。
    TitaniumでのiOSアプリ開発を依頼することは可能でしょうか。
    もし可能であればメールにてご一報頂けますと幸いでございます。
    まず案件の委細をお伝えさせて頂きます。
    突然の依頼で申し訳ございません。
    Titaniumの開発者が少なく、検索エンジンで探した所、本ブログを見つけた次第です。
    ご検討の程、よろしくお願い致します。
    相澤謙一郎

  • 2011年3月14日 11:03 PM

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

  • 2011年3月15日 10:16 AM

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