![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
2011/08/08からのアクセス回数 7800
Android SDKをインストールする前に作成したTitaniumのプロジェクトは、 Resoruceファイル以下をバックアップして、作り直す必要があります。
TitaniumのAPIでデバイス依存するもの（「iOSのみ」と表記）を使用した場合、注意が必要です。 特に
には、デバイス毎に対応する必要があります。
iPhoneでよく使われるナビゲーションバーの左右のボタンは、Androidではメニューで代用するため、 実装がことなります。
そこで、以下のnavigation.jsファイルにデバイスの違いを吸収するコードをまとめました。
var Navigation = function() {
this.setup = function(nav) {
if (Ti.Platform.osname === 'android') {
var android = nav.android;
var activitiy = Ti.Android.currentActivity;
if (activitiy) {
activitiy.onCreateOptionsMenu = function(e) {
var menu = e.menu;
if (android && android.leftButton) {
var leftMenuItem = menu.add(android.leftButton);
leftMenuItem.setIcon(android.leftButton.icon);
leftMenuItem.addEventListener('click', android.leftButton.callback);
}
if (android && android.rightButton) {
var rightMenuItem = menu.add(android.rightButton);
rightMenuItem.setIcon(android.rightButton.icon);
rightMenuItem.addEventListener('click', android.rightButton.callback);
}
};
}
}
else {
var win = Ti.UI.currentWindow;
var iPhone = nav.iPhone;
if (iPhone && iPhone.leftButton) {
var leftButton = Ti.UI.createButton(iPhone.leftButton);
leftButton.addEventListener('click', iPhone.leftButton.callback);
win.leftNavButton = leftButton;
}
if (iPhone && iPhone.rightButton) {
var rightButton = Ti.UI.createButton(iPhone.rightButton);
rightButton.addEventListener('click', iPhone.rightButton.callback);
win.rightNavButton = rightButton;
}
}
};
};
使用する場合には、各ボタンのコールバック関数を別途定義し、以下のように使用します。
table_view.jsへの変更
var addCallback = function(e) {
var at = new Date();
var recordWindow = Ti.UI.createWindow({
url: 'record_window.js',
record: {weight:'', at: at.toDateString()},
func: 'insert_row',
backgroundColor:'#fff'
});
Ti.UI.currentTab.open(recordWindow);
};
var grpahCallback = function(e) {
if (records.length > 0) {
var weights = "[";
var ticks = "[";
for (i = records.length-1; i >= 0; i--) {
var at = new Date(records[i].at);
weights = weights + "[" + at.getTime() +","+records[i].weight+"],";
ticks = ticks + at.getTime() + ",";
}
weights = weights + "]"; ticks = ticks + "]";
var graphWindow = Ti.UI.createWindow({
url: 'plot_window.js',
weights: weights,
ticks: ticks
}
);
Ti.UI.currentTab.open(graphWindow);
}
};
var navi = new Navigation();
navi.setup({
iPhone: {
leftButton: {title: 'Graph', callback: grpahCallback},
rightButton: {systemButton: Titanium.UI.iPhone.SystemButton.ADD, callback : addCallback}
},
android: {
leftButton: {title: 'Graph', icon: 'dark_stats-bars.png', callback: grpahCallback},
rightButton: {title: 'Add', icon: 'dark_add.png', callback : addCallback}
}
});
setup関数で、iPhone、androidで使用するボタンのタイトル、アイコン、コールバック関数をセットするだけです。
Androidシミュレータでメニューボタンを押すと、以下のようになります。
iPhoneでのTableViewRowでのSwipeで削除する機能が使えないため、record_window.jsに削除メニューを追加することにしました。navigation.jsにデバイスの違いを吸収したので、Androidへの削除メニューの追加もとてもシンプルです。
record_window.jsの追加
var deleteCallback = function(e) {
Ti.App.fireEvent('delete_row', win.record);
win.close();
};
Ti.include('navigation.js');
var navi = new Navigation();
navi.setup({
android: {
rightButton: {title: 'Delete', icon: 'dark_x.png', callback : deleteCallback}
}
});
次にtable_view.jsでdelete_rowイベントを処理する部分を追加します。
table_view.jsの変更（deleteCallbackも変更しました）
function deleteCallback(record) {
db.deleteOne(record);
records = db.findAll();
updateRecord(records);
}
tableView.addEventListener('delete', function(e){
deleteCallback(records[e.index]);
});
Ti.App.addEventListener('delete_row', function(record) {
Titanium.API.debug("delete_row");
deleteCallback(record);
});
record_window.jsの画面は、以下のようになります。
iPhoneでは、すべてのアプリケーションでCookieを共有するため、FoodLogのようにCookieを使ってユーザ認証をするサイトの場合、HTTPClientでログインすれば良かったのですが、AndroidではWebView単位でユーザ認証するしなければなりません。*1
FoodLogでは、
これで、iPhone、Androidのどちらの場合も動作します。
foodlog_window.jsを以下のように変更します。
// FoodLogのWebページを表示
win = Ti.UI.currentWindow;
var webView = Ti.UI.createWebView({
url: 'http://www.foodlog.jp/account/login/'
}
);
webView.visible = false;
win.add(webView);
webView.addEventListener('load', function(){
var href = webView.evalJS('window.location.href');
// ログイン処理
if (href == 'http://www.foodlog.jp/account/login/') {
webView.evalJS('$(login_account_code).val("あなたのユーザID");');
webView.evalJS('$(login_password).val("あなたのパスワード");');
webView.evalJS('$("input[name=commit]").click();');
}
// /calendarに移動
else if (href == 'http://www.foodlog.jp/myfood/list' || href == 'http://www.foodlog.jp/') {
webView.evalJS('window.location="http://www.foodlog.jp/calendar";');
}
// ウィンドウを表示
else {
webView.visible=true;
}
});
最後にAndroidでのFoodLogのカレンダー画面をご覧頂きます。
ここまでのプログラムソースは、
にまとめてあります。
皆様のご意見、ご希望をお待ちしております。
Demo.zip