Titanium Mobileで「IT 勉強会カレンダー for Android」を作りました！【GitHubでソースも公開中】

入社して早3ヶ月　アルバイトのtake(たけ)です。
この度は、Titanium MobileでAndroidアプリを作らせていただきました。

IT 勉強会カレンダー for Android

今回作らせていただいたアプリです

IT 勉強会カレンダー for Android | 株式会社インフィニットループ
 IT 勉強会カレンダーのAndroid用ビューアです。
ソースコードはGitHub: ilnt/IT-study-calendarで公開しています。

主な仕様

IT 勉強会カレンダーから1ヶ月毎にデータを取得し、リスト表示します。
地域(都道府県)でフィルタを掛けて、全国の勉強会を絞り込むことができます。
1ヶ月毎のタイトル検索ができます

Titanium Mobileとは

Appcelerator社がリリースしているJavaScriptを用いてAndroidやiOSのアプリを開発するためのプラットフォームです。

Javaを使ったことが無い私でもJavaScriptでAndroidアプリが作れる！ということで、開発中にハマったポイントをいくつかご紹介させていただきます。
Titanium Mobileの基本的なことについて知りたい方は、下記の記事が参考になります。
初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件

はじめてのAndroidアプリ開発

Titanium Mobileで開発するには、Titanium Studioと呼ばれる開発環境を導入します。
Titanium StudioはAptana Studioを元にしたIDEです。
Eclipseのプラグインとして導入することもできますが、ADT(Eclipseのプラグイン:Android Development Tools)と競合するなど開発環境を汚してしまうため、既存のEclipseとは別にスタンドアロンでインストールすることをお勧めします。
Android SDKが必要なので導入し、Titanium Studioでパスの設定をします。
Titanium Mobileを使うということ
Titanium Mobileでは、UI部分も全てJavaScriptなので、WebであればHTMLやCSSで記述する部分もJavaScriptで書きます。(JSSというCSSのようなものは使えるようです)
つまり、意識してUIとロジックを分離するようにしなければ、すぐにコードが煩雑になります。
このように、Titanium Mobileには癖がありますが、うまく使うことができれば、JavaとObjective-Cを習得する学習コストを考えると比較的簡単にアプリを作ることができます。
そこで、Titanium Mobileでハマったポイントと解決策を5つほど紹介します。

Titanium Mobileのハマりポイント

※Titanium SDK 2.1以下、Androidの場合
１．WindowやViewのサイズをautoにしていると、サイズが取得できない
WindowやViewのサイズが指定されていない場合やautoにしていされている場合は、その要素のサイズを取得すると0が返ります。→サイズは自動で取得不可能
解決案：端末のディスプレイサイズ(Ti.Platform.displayCaps)を分割して要素を配置します。

var search = Ti.UI.createSearchBar({
width: g.disp.width / 10 * 7,
left: 0,
showCancel: false,
hintText: '検索キーワード'
});
/* Resources/ui/SearchView.js */

２．ステータスバーの高さを取得する術が無い
ディスプレイのサイズを元に、画面を分割して要素を配置します。しかし、縦方向に30pxほどズレが生じます。なぜなら、さきほど取得したディスプレイサイズにはステータスバーが含まれているからです。→ステータスバーの高さを知る術はない
解決案：ステータスバーの高さは定数で指定し、ディスプレイの高さから引いておきます。

// Global object
var g = {
loadConfig: config.load,
gCal: {},
disp: {
width: Ti.Platform.displayCaps.platformWidth,
height: Ti.Platform.displayCaps.platformHeight - 27
},
/* Resources/app.js */

３．文字化けして、Ljava.lang.Object ~というエラーを吐く
Ti.APIを用いて出力させると文字化けしませんが、UIに描画すると文字化けを起こす場合があります。
解決案：String()を使い、Stringオブジェクトに変換してからUIへ描画させます。

var timeLabel = String(allday ? d.start[0] : d.start[0] + ' ' + d.start[1] + ' ~ ' + d.end[0] + ' ' + d.end[1]);
var title = label(o.title);
title.top = 3;
title.font = {fontSize: 18};
title.backgroundColor = '#f9f9f9';
var hr = Ti.UI.createView({
top: 3,
height: 3,
backgroundColor: '#177bbd'
});
view.add(hr);
var time = createTextLine('時間 :', timeLabel);
/* Resources/ui/EventDetailView.js */

４．実行中にデバッグメッセージを吐かずに落ちる
Titanium Mobileで想定されているエラーの場合は、端末側にデバッグメッセージがアラートされますが、予期せぬ例外が生じるといきなり落ちます。Titanium StudioにJavaのエラーが吐かれますが、JavaScriptしか書いていないのにJavaのエラーを見せられても対処に困ります。
解決案：Tiオブジェクトのメソッドに渡す引数の型や、メソッドの使い方を間違えていませんか。Tiが無言で落ちる場合は、Tiネイティブに近い部分のコードを疑うと良いです。
５．その他、注意する点
Viewのオブジェクトに任意のデータを持たせることはできない→無視される

Windowには可能です。別のコンテクストにデータを渡したい場合はWindowオブジェクト経由で渡します。

ViewがWindowに対して絶対的に配置される

ViewはデフォルトでWindowに対して絶対的な配置です。

layoutプロパティを使ってvertical, horizontalに指定することで、垂直・水平方向へ相対的に配置させることができます。

文字の量が可変になるLabelをViewの入れ子にすると、Viewのサイズに困る

例えば、LabelがViewの入れ子になっているものを縦に複数並べたい場合、Viewのサイズを可変にできないため、Labelのまま並べます。

Web開発者は一度Webを忘れる

Web開発でJavaScriptを扱っていると、古いブラウザの互換性(特にIE)を考慮したり、HTML(DOM)のことを考えたりしますが、Titanium Mobileでは一度忘れることをお勧めします。Titanium MobileにはIEもDOMもありません。あるのはTiオブジェクトとブラウザの数より多いAndroid端末だけです。

つまり、webkitで動くJavaScript 1.6が書けます。また、Titanium MobileでDOMの感覚のまま複雑で非同期な描画処理をさせると重すぎて動かなくなるため、できるだけTiネイティブで用意されている要素をそのまま使うと軽快に動作します。

※上記のコードはこの記事を書いた当時のもの(v0.1.1)です。

Titanium Mobileを用いたアプリ開発とは

Titanium Mobileは、Titaniumで用意されている部品をそのまま使用して実装できるシンプルなアプリの開発には向いていますが、複雑な描画や速度を求められる処理には向かないように感じました。
また、AndroidとiOSのアプリを同じ言語で開発することができますが、それは同じコードが動くという意味ではなく、UIなどの実装の差は開発者が埋めなくてはいけません。ですが、学習コストが少なくなることは事実です。
今後、Android, iOSの簡単なアプリを作ろうと考えた際に、使い勝手を覚えておくと便利なプラットフォームになると思います。