FrontPage

2011/07/31からのアクセス回数 4212

Titanium mobileを知って

技評のWeb版で紹介されている Titanium Mobileで作る! iPhone/Androidアプリ ですが、Titanium Studioのフリー版でdebug機能も使えるようになったので、試してみることにしました。 *1

Titanium Studioのインストール

Titanium Studioのインストールは、 Get Started Guide に従ってインストールします。

Titanium Studioのダウンロードには、ユーザ登録が必要です!

プロジェクトの作成

Titanium Studioは、EclipseベースのAptanaStudioが元になっているため、Eclipseユーザなら同じような感覚でプログラミングができます。

File->New->Titanium mobile projectを選択し、新規プロジェトDemoを作ります。

  • Project name: Demo
  • App Id: jp.co.pwv.Titanium.Demo ← 各自の環境に合わせて変更してください。
  • URL: http://www.pwv.co.jp ← 各自の環境に合わせて変更してください。

と入力すると、自動的に2つのタグウィンドウを持つ、アプリケーションのひな形が生成されます。

ここで、左のApp ExplorerのResourcesを右クリックし、Debug As->iPhone Simulatorを選択すると、 1分ほどでiPhoneシミュレータが起動し、以下の画面が表示されます。*2

iPhoneSimulator.png

これから作るデモプログラムは、日々の体重、体脂肪、万歩計の記録と日々の食事をFoodlogに登録する 機能を持ったものです。

tableview.png foodlog.png

WebViewでWEBページを表示する

最初に、Tab2のウィンドウにFoodlogのWEBページを表示してみましょう。

app.jsの

var label2 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 2',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});

win2.add(label2);

を以下のように書き替えます。

var webView = Ti.UI.createWebView({
	url: 'http://www.foodlog.jp/'
}
);
win2.add(webView);

urlに表示したいWebページのURLを指定するだけです(とても簡単!)。 iPhoneシミュレータが起動したら、画面右下のTab 2をクリックすると、 以下の画面が表示されます。

WebView.png

Windowの定義を別ファイルにする

Titaniumでは、Windowの定義を別ファイルにすることができるので、 画面の管理が楽になり、画面の再利用も楽になります。

先ほどのFoodlogのWebページ画面をfoodlog_window.jsに分けてみます。 foodlog_window.jsを次のようにします。

win = Ti.UI.currentWindow;

var webView = Ti.UI.createWebView({
	url: 'http://www.foodlog.jp/'
}
);
win.add(webView);

app.jsのwin2の定義では、先ほど入れ替えた部分を削除して、createWindowの引数にurlを追加します。

win2の定義は、以下のようになります。

var win2 = Titanium.UI.createWindow({  
	url: 'foodlog_window.js',
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

自動ログインを追加する

FoodLogのサイトにユーザ登録し、Sign inするとマイフード画面を表示することができます。

しかし、foodlog_windowの画面では、ログインしていないので「マイフード画面」が表示されません。

そこで、foodlog_window.jsに自動ログインの機能を追加します。

Titaniumには、WebサーバにアクセスするためのHTTPClientが用意されているので、これを使って HTTP要求を送ります。

foodlog_window.jsを以下のように変更します。

FoodLogのurlもマイページを表示するようにhttp://www.foodlog.jp/calendar/に変えます。

// 自動ログインの処理
var xhr = Ti.Network.createHTTPClient();
xhr.onload = function(e) { //handle response
	Ti.API.debug("Login OK");
};
xhr.onerror = function(e) {
	Ti.API.debug("Error:" + e.toString);
};
xhr.open('POST','http://www.foodlog.jp/account/login', false);
xhr.send({
	'login[account_code]': 'あなたのユーザID',
	'login[password]': 'あなたのパスワード'
});

// FoodLogのWebページを表示
win = Ti.UI.currentWindow;

var webView = Ti.UI.createWebView({
	url: 'http://www.foodlog.jp/calendar/'
}
);
win.add(webView);

タブからTab 2をクリックしてください。無事FoodLogのマイページが表示できたら完成です。

FoodCalendar.png

もし、iPhoneシミュレータが原因不明の障害で異常終了したら、 ProjectメニューからCleanを選択し、Demoプロジェクトを一度クリーンアップしてから、 再度実行してみてください。

プログラムソース

ここまでのプログラムソースは、

にまとめてあります。

コメント

選択肢 投票
おもしろかった 4  
そうでもない 0  
わかりずらい 0  

皆様のご意見、ご希望をお待ちしております。


(Input image string)


*1 javascriptはあまり馴染みがないので、デバッガが使えないと思うようにすすまないから
*2 画面のキャプチャーはcmd-shift-4を押しながらスペースキーを押して撮りました

添付ファイル: fileDemo.zip 337件 [詳細] fileFoodCalendar.png 390件 [詳細] fileWebView.png 385件 [詳細] filefoodlog.png 414件 [詳細] filetableview.png 397件 [詳細] fileiPhoneSimulator.png 379件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-12-03 (月) 01:05:29 (1665d)
SmartDoc