Titanium Mobileで作るAndroidアプリケーション株式会社ドッグランオオイシナオヤ

Titaniumとは…iOS/ Androidのモバイルネイティブアプリケーションのマルチプラットフォームな開発環境です。

Javascriptで記述します。

appceleratorがSDKを提供しています。Aptana Studio3とTitanium Developerが統合されたIDEのTitanium Studioを利用できるようになったことでかなり扱い易くなりました。

AndroidよりiOSの方が進んでいるのかも…iOSで使えてAndroidで利用できないAPIがいろいろあります。

Androidアプリ “Magroid”を作ってみました。

・Titanium Mobileをつかって試しに何か作ってみようというAndroidアプリです。

・開発環境とプロジェクトの設定Titanium Studio 1.0 (Mac OS10.6)Titanium Mobiel SDK 1.6.2Google APIs Android2.2

・静岡駅南口のマグロ丼専門店「清水港みなみ」さんのご協力でみなみさんの日替わりランチメニューを配信するアプリとして作成しAndroid Marketで公開しています。”Magroid”で検索してみてください…

Magroidの構成エントリポイントのapp.jsにホーム画面のUIを記述し、各コンテンツはurlプロパティでjsファイルを指定し実行します。

Titanium.UI.ImageView +Titanium.UI.WebView

Titanium.UI.ScrollableView(Titanium.UI.Label + Titanium.UI.ImageView)

Titanium.Map

Titanium.UI.TableView

Titanium.UI.WebView

最初の画面の構成Android版のTitaniumはホーム画面をwindowにした場合[戻る]キーで普通に戻れないような仕様？です。（rootをTabGroupにするとこの問題は回避できます。）

windowのホーム画面に戻るために、root windowをopenしたイベントで新しくwindowを生成し、そこにボタンなどホーム画面のUIを配置します。また前画面にもどるために、次のwindowを開くときに{fullscreen:boolean}オプションを設定します。（理由不明）

mainwindow.addEventListener('open',function(e){ ̃ テーブルビューなどのオブジェクト生成 ̃ var newWindow =Titanium.UI.createWindow() ̃ ボタンなどUI を生成し、tableVewRow2に add ̃ tableViewRow2.add(view); datasource.push(tableViewRow2); var mainTable = Titanium.UI.createTableview({ data : datasource }) newWindow.add(mainTable); newWindow.open();})

Android版 TitaniumはToolbar に対応しておらずまたタブのスタイルを変更できないためTableViewで toolbar 的な見た目を作りました。

WebViewImageViewとWebViewでお店のプロフィール紹介のページを構成しています。

ホーム画面のボタンクリックで新しいwindowを開きます。

図では省略していますが、ImageViewで店舗のロゴを同様に配置しています。

button.addEventListener(’click’, function(){var win = Titanium.UI.createWindow({ title:' 店舗の詳細 ', url:'web.js', // 背景色など省略 })win.open({fullscreen:true});});

app.js　

web.js　var win = Titanium.UI.currentWindow;var web = Titanium.UI.createWebView({ top:220, height:300, html:'<p style="font-size:13"> 良質で新鮮なマグロが破格にて提供～</p>'})win.add(web);

MapViewAndroid Maps APIを利用するために、keytoolで証明書のMD5フィンガープリントを作成しGoogleによりAPI keyを取得する必要があります。http://code.google.com/intl/ja-JP/android/maps-api-signup.html

取得したAPI keyでtiapp.xmlのプロパティを変更します。<property name="ti.android.google.map.api.key.production">your api key</property>

開発環境でMapを表示する際はエミュレーター用のプロパティの設定も必要なようです

map.js　var win = Titanium.UI.currentWindow;var pin = Titanium.Map.createAnnotation({ latitude:34.971934, longitude:138.391454, image:'pin.png', leftButton:'mag.png'})var mapview = Titanium.Map.createView({ mapType: Titanium.Map.STANDARD_TYPE, region: {latitude:34.971804, longitude:138.391554, latitudeDelta:0.05, longitudeDelta:0.05}, regionFit:true, userLocation:true, annotations:[pin]});win.add(mapview);

ScrollableViewスワイプやボタンにより、スクロール可能なViewです。 var scrollView = Titanium.UI.createScrollableView({

views:[view1,view2,view3,view4],

showPagingControl:true,

});

win.add(scrollView);

TableView日替わりメニューの更新情報をWebよりRSSで取得しTitanium.Yahoo.yqlでFeedをパースしています。

Feedからタイトルとコンテントを抜き出してTableViewに表示、さらにリスト選択のイベントで新しいWindowを作りコンテントをWebViewに表示してます。

RSSの読み込みに時間がかかるため、ActivityIndicatorをデフォルトで表示し、yqlのコールバックで非表示処理を行います。

var actInd = Titanium.UI.createActivityIndicator();actInd.message = ' 最新データの読み込み中 ..';actInd.show();

var tableview = Titanium.UI.createTableView({ data:[]});～var query = 'select title,content.content from atom where url="XX/atom.xml?format=json"';

Titanium.Yahoo.yql(query, function(d){ var rows = [], i, atomEntry = d.data.entry for(var i=0; i<10; i++){ rows.push({ title:atomEntry[i].title }) } tableview.setData(rows); actInd.hide(); ～tableView のイベントハンドラ～})

改善して欲しいところレイアウト機能の充実

jssの対応具合が？？ドキュメントあったっけ？

マルチ端末に対応するために、相対レイアウトでレイアウト情報を記述できやすいと嬉しい、かも…

Android版でもAPIやプロパティをさらに対応してほしい

toolBar（API）、tab（スタイル関連のプロパティ）など