Titanium Mobileを使ってiPhone版簡易GPSロガーを作る(1)

卒研の一環でスマホアプリを作らねばならなくなりました。制作を外注したらそれは卒研でなくなってしまうし、Objective-Cで書くのも、プログラミングが苦手な自分からしたら恐怖です。そんなとき、「Javascriptを用いてiPhone/Android両対応のアプリが作れる！」と謳われていたTitaniumに興味がわき、使ってみようと思った次第であります。

第1弾では、実際にサンプルアプリを作る段取りと、簡単なイベント駆動のコードを書いてみて終わろうかと考えています。

1. 目標

だらだらネット上の情報をみていても仕方ないので、以下の超適当仕様を満たすiPhoneアプリを数回に分けて制作し、Titaniumを理解しようと考えています。

アプリ名

GPSロガー(え...)

動作環境

iPhone(できたらAndroid端末も)

要件定義

• スタートボタンを押下してから、ストップボタンを押下するまでの位置情報を測定することができる。
• 測定中に、特定の場所で「写真を撮る」「つぶやく(メモを残す)」事ができる。
• 測定した活動を記録し、あとからそれらの閲覧することが出来る。

2. 開発環境

「Titanium Studio」というEclipseベースのIDEを使います。ネット上に素晴らしい導入記事がたくさんありますので、そちらを参考にしたほうが早いと思います(以下は一例です)。確か、iOS SDKのパスは指定しなくても勝手に認識するけど、Androidの場合はパスを指定してあげなければいけなかったきがします。

第16回 Titanium Studioの導入：Titanium Mobileで作る！ iPhone／Androidアプリ｜gihyo.jp … 技術評論社

3. Hello, Worldする

さて、開発環境が構築できたら、プロジェクトを作って開発していきます。Titanium Studioを起動し、新しいTitanium Mobile Projectを作成します。すると、以下の画面が出てくるかと思いますので、一通り入力します。そして「Finish」を押してしまいましょう。

AppIDは例に倣って適当に入力すればいいと思いますし、iPadは全く想定しないので、チェックは外しておきます。Androidについては、iPhone用に制作していき、Androidでも動いちゃったらラッキーという感じで。

実際にプロジェクトを作ると、すでに簡単なコードが書いてあり、おおまかな流れは以下のとおりです。(いろいろ省略していますが...)コレをビルドすると、コンピュータ上にエミュレータが現れて、プログラムが走ります。

// タブグループを作る(画面の下の領域にあるやつ！)
var tabGroup = Titanium.UI.createTabGroup();

// タブを作って、そのタブを押したときに表示されるウインドウを作って、タブに紐付ける
var win1 = Titanium.UI.createWindow({
    title:'Tab 1'
});
var tab1 = Titanium.UI.createTab({
      window:win1
});

// win1の画面上に表示するためのラベルを作って、紐付けている
var label1 = Titanium.UI.createLabel();
win1.add(label1);

...(中略)...

// タブグループにタブをくっつけて...
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);  

// ひらけっ！
tabGroup.open();

実際の画面との関係は以下のような感じです。適当でごめんなさい！

「Hello, World!」はわざわざやりませんが、labelのtextに書けば良いのではないでしょうか。

3. ボタン押下のイベントでアクションが起こるようにする

GPSロガーを制作するにあたり、 まずは「開始！」のボタンがないと始められないですよね^^ということで、ボタンを設置し、押下したときに何らかのアクションが起こるようにします。

ボタンやその他UIに関するAPIは、Titanium.UI以下にまとまっています。ボタンを作りたきゃぁcreateButtonとか使えばいいのでしょうね、きっと。これを、win1.add(label1); の下あたりにぺたっと貼っておきます。

var button = Titanium.UI.createButton({
  title: '押してくれ！',
  top: '50',
  height: '30',
  width: '120'
});
win1.add(button);

んで、ボタンオブジェクトにイベント定義するために、addEventListenerがあるじゃない！。とかAPIドキュメントとノリツッコミをしながら開発していく流れになるのだと思います。

Titanium 3.X Docs - Appcelerator Docs

さて、このメソッドは、第1引数はイベント種別、第2引数はイベントハンドラみたいです。これは、コードの一番下にしときましょう。1つのファイルにロジックをグダグダ詰め込むのはよろしく無いので、だんだんに切り分けていかなければなりませんね〜。

button.addEventListener('click', function(){
  Titanium.UI.createAlertDialog({
    title: '押したね？',
    message: 'あなたが落としたのは？',
    buttonNames: ['金の斧', '銀の斧']
  }).show();
});

これで、実際にボタンを押すと以下のような感じになります。

第1回目はここまでです。意外と簡単にプログラムが組めそうだなという雰囲気が伝わったのであれば幸いです。

番外編

ちなみに、Android用にビルドすると、以下のような感じになります。UI設計時に、デバイス間の差異は考慮しなければならないでしょうが、とりあえず作った部品はくっつかっています。あと、エミュレータの起動までが遅く感じました。