Titaniumでiphone/android両方同時に作るコツ

新しいアプリをリリースしました。
覚えやすく比較的クラックしにくいであろうパスワードを生成してくれるアプリなんですが、
画面が2つだけと簡単なこともあって、一発で何とかできないかなと思って
今までいくつか作ってきたTitaniumの経験値を元にトライしてみました。

○Androidをベースにする
・とにかくTitaniumのAndroidは癖があります。なんともいえないんですが、
思うように動かないことが多いです。
なので、iphoneをとりあえず作ってそっから色々と考える。。。　みたいなことしてる人多いと思います。
逆にiphoneのほうは思ったような動きをしてくれるので、
androidで作ってiphoneで手直しする　っていう形にしてみました。

○使っちゃいけないやつ
Ti.UI.iPhone みたいなアレとか、複雑なアニメーションとかでしょうか。
特に複雑なアニメーションはどれだけ android 実機で再現できてるのか謎すぎます。
なので、なるだけ簡単なフェードアウトとかスライドインとかそういうのだけで構成するようにしました。
画面サイズとかはなるだけ Ti.platform.displayCaps.displayWidth / height を使ってます。

○tabgroup 使わない
tabgroupって楽だし便利なんですが、androidとiphoneで見え方も違うしandroidだと挙動が変なので、
あえて使っていません。全部 window に直でビューを add/remove して画面を構成しています。
こんなことまでしないといけないとかtitanium使う意味が。。　とか言わないでください。

○パスの書き方に注意
androidとiphoneでパスの処理の仕方が違います。
なので、 require(‘hoge/hage’).**() みたいなのは
require(‘/hoge/hage’).**() 頭にスラッシュを入れて、
フォルダの中に全部まとめて書いています。

ちなみにフォルダ構成はこんな感じです。

Resources
  android
  settings
    controllers
    includes
    styles
  app.js

で各データには require(‘/settings/controllers/test’).execute() みたいな感じです。
こうかけばiphone側でもそのまま動きます。

○個別でOSで切り替えは書かないようにする
基本CSS的なのは下のサンプルっぽく1番最初に書いて終わりにしてます。
createAlertDialogにtextfieldを追加する　みたいなOSごとに処理が違うやつの場合は、
完全に自作しちゃってます。（ビューに貼りつけてフェードインするだけだと思えば簡単です。）
（ちなみにjssは使っていません。）

var osName = 'android';
if (Ti.Platform.osname == "android") {
	if (Ti.Platform.displayCaps.platformWidth > 899 || Ti.Platform.displayCaps.platformHeight >= 899) {
		osName = 'tablet';

	}
} else if ((Ti.Platform.osname == "iphone")||(Ti.Platform.osname == "ipad")) {
	osName = Ti.Platform.osname;

}
var css = require('/settings/styles/' + osName  + '/main').css;

○結論
簡単なのアプリで土日で完成しましたが、iphone側の修正はマージンの調整くらいでほぼ手入れなしでリリースできました。
そういう意味ではかなり楽でしたが、
その代わりtextfieldつきのalertdialogが使えないとか（パスワード入力画面とかで。。）
そういう制限もあるのがネックですね。

複雑なアプリをtitaniumで作るということでなければ一考の価値はあるとは思います。

Tweet