More Related Content
Similar to Titanium Mobile ～本当にあったこわい話～
Similar to Titanium Mobile ～本当にあったこわい話～ (20)
More from Atsushi Harada (8)
Titanium Mobile ～本当にあったこわい話～
- 3. スペック
●
IT 業界入ってから 5 年くらいずっと WEB エ
ンジニア（客先常駐）
●
最近は iPhone ・ Android アプリとか作ってる
（自社受託 )
●
WEB アプリケーション開発の画面側の
JavaScript くらいは余裕でいける
●
これといってすごいことを成し遂げているわ
けでもない普通の人
- 5. Titanium Mobile とは
「 Write Once, Adapt Anywhere 」
一度ソースコードを書いてしまえば、最
小のコードを付け加えるだけで iPhone で
も Android でもその他のプラットフォーム
でも動かせるよ！
っていうありがたい技術。
- 6. ざわ ... ざわ ...
ざわ ...
えっ、なになに？
ざわ ... ワンソースで iPhone でも Android
でも動かせる…？
同じコードを何本も作ったり、１ ざわ ...
ざわ ... ざわ
箇所の仕様変更で何箇所も修正し
...
なければならないストレスから解
放されるのか…！ ざわ ...
- 9. Titanium Mobile をもう少し kwsk
●
米 appcelerator 社が提供してるオープンソースのクロスプ
ラットフォーム開発の技術
●
JavaScript で開発できるため WEB エンジニアが参入しやす
い
●
Aptana ベースの Titanium Studio という専用 IDE を使って開
発（ Aptana は Eclipse ベースの WEB オーサリングツー
ル） Eclipse と操作方法が近いので WEB エンジニアはとっつ
きやすい
●
Black Berry とか Windows Phone の対応も進めてるらし
- 10. 続き
●
ネイティブの UI コントロールが使用できる（ Picker とか
TextField とかそういうの）
●
Titanium Mobile SDK が提供する機能だけでは不足している場
合、自分でモジュールを作ることもできる
●
MVC フレームワークもあるらし（ Alloy, TiMVC, Carbon ）使
わなかったからよく知らないけどね！
●
テスティングフレームワークも使えるよ（ Jasmine とか）使
わなかったからよくし（ ry
- 12. PhoneGap
●
HTML5 + CSS3 + JavaScript で開発
●
ネイティブ UI ではなくそれっぽい UI コ
ントロールを使用する
●
既存の JavaScript ライブラリが使用できる
（ jQuery とか mootools.js とか）
●
WEB エンジニアの参入が容易
- 13. Flash
●
ActionScript で実装
●
Flash 技術をそのまま使用できるのでアニメー
ションなどが作りやすい
●
Flash エンジニアの参入が容易
●
ネイティブ UI は使用できない。 Flash の
SDK が用意する UI コントロールを使用する
- 14. クロスプラットフォーム技術の比較
メリット デメリット
Titanium Mobile ・ WEB エンジニアが参入しやす ・もっさり
い（学習コストが低い） ・公式 API があるがなぜか載って
・ネイティブ UI が使える ない機能があったりする
・自作モジュールで機能拡張でき ・アプリのタイプによって向き不
る 向きがある
PhoneGap ・ WEB エンジニアが参入しやす ・もっさり
い（学習コストが低い） ・ネイティブの UI コントロールを
・既存の JavaScript ライブラリが 使えないため、実現できる機能に
使用できる 制限がある
Flash ・ Flash エンジニアが参入しやす ・超もっさり
い ・ Flash エンジニアってプログラ
・アニメーションに強い マじゃないよね？
・ Android と iOS の違いを意識す ・タッチ感度が非常に悪い
る必要がほとんどない ・ Air 実行環境ごとビルドするので
アプリ容量がかさむ
- 20. 対策その 1 画像を全部先読みする
CreateImageView をする前に全画像ファイル
を読み込んでおくようなコードを書いた。
var numImage = Ti.Filesystem.getFile(
Ti.Filesystem.resourcesDirectory, "images/num01.png");
体感ではほとんど効果なし… orz
- 21. 対策その 2 差分だけ読み込んで生成する
体重入力されたら体重一覧の画面も更新しなけ
ればならないので、画面表示毎に再ロードして
いた。
（これは WEB エンジニアならではの感覚？）
画面表示時に差分のみロードすることで、速
度改善。
初回表示時は致し方ないが、体感による動作
遅延ストレスはだいぶ改善された。
- 25. 原因
●
Titanium Mobile ではパーツごとにアニメー
ションする際、連続してコードを書いても実
行にズレが生じる（目視で明らかにわか
る）。
（例）
// 左側の羽を 15° 回転
leftWing.animate({delay:200, duration:250, transform:Ti.UI.create2DMatrix().rotate(15)});
// 右側の羽を -15° 回転
rightWing.animate({delay:200, duration:250, transform:Ti.UI.create2DMatrix().rotate(-15)});
// 左腕を 15° 回転
leftArm.animate({delay:200, duration:250, transform:Ti.UI.create2DMatrix().rotate(15)});
// 右腕を -15° 回転
rightArm.animate({delay:200, duration:250, transform:Ti.UI.create2DMatrix().rotate(-15)});
- 26. 対策
●
Titanium Mobile 用のゲームエンジンモジュー
ルがある。これを使ってアニメーションさせ
ればスムーズに動くかも！
Infosia 氏が開発している
「 QuickTiGame2d 」を調査してみる
http://d.hatena.ne.jp/infosia/20120108/1326002975
- 27. 対策 続き
サンプルを組んでやってみる…
ただの WEB エンジニア。ゲームなんか作っ
たことないし、 enchant.js も知らなけれ
ば、 OPEN/GL もさわったことがない。
結論。
マスターするのに時間かかりそうなので、現行のや
り方でひたすらチューニングする（事実上の無
策）。
- 30. 測定結果
●
Titanium Mobile による実機転送の結果
→1 分 33 秒
●
Xcode による実機転送
→0 分 6.2 秒（最速、 Titanium の 15 倍）
●
おまけ。 Titanium Mobile によるシミュレータ
転送の場合
→0 分 16.7 秒
- 32. Titanium Mobile の恐怖
その他
■ メモリオーバーフローでよく落ちる
モバイル端末は PC 程スペックが高くないた
め落ちやすい。ある程度メモリの解放を考慮
したコードを書く必要がある。
にわか JavaScript 使いだと結構ハマる。
（例）明示的に null を代入する
// 正面・左側の羽
this.leftWing = null;
// 正面・右側の羽
this.rightWing = null;
- 33. Titanium Mobile の恐怖
その他
■Android 動かないとか…
iPhone のみ動くとか、 Android のみ動くと
かっていうコードが結構ある。
また、画面のアスペクト比とか解像度の問題
もある。
「ダイペット」は Android ネイティブで開発
することに…
- 34. まとめ
Titanium Mobile の良いところ
●
プログラム自体は Objective-C よりはるかに簡
単。
●
公式ドキュメントも割と充実している。
●
他のクロスプラットフォーム技術と比べて、
ネイティブの UI コントロールを使えるところ
は良い。
●
熟練すればそれなりに強力だと思ってる。
- 35. まとめ
Titanium Mobile の注意点その 1
●
実装者の JavaScript スキルレベルは足りてい
るのか？
標準的（主観だけど）な WEB エンジニアの
JavaScript スキルレベルだと結構ハマる。例
えば以下の言葉を理解しているか？
クロージャ、ローカルスコープ、グローバル
汚染、 prototype 、 JavaScript での継承、疑
似的なクラスなど
→ 実装者がどの程度のレベルか確かめよう！
- 36. まとめ
Titanium Mobile の注意点その 2
●
比較的スペックの高い新しい端末に限定する
べし。
前述の動作比較で示したとおりスペックの低
いとパフォーマンスチューニングのコストが
増える。
ちなみに「ダイペット」は iPhone5 ならサク
サク動く。
→ 対応端末を制限しよう！
- 37. まとめ
Titanium Mobile の注意点その 3
●
チーム開発は避けるべし。
【理由】
JavaScript は自由度が高い言語で、同じ機能
要件でも実装方法が多岐に渡る。誰かのスキ
ルレベルが低いと収拾がつかなくなる恐れが
ある。
→ 実装者のレベルを確かめよう！
規模によっては一人で作った方が良いかも！
- 38. まとめ
Titanium Mobile の注意点その 4
●
クロスプラットフォーム対応をあてにしな
い。
熟練していない状態では、ネイティブ 2 本作
るのと大して工数は変わらない。ノウハウを
蓄積させてから臨むべし。
→ 自作アプリを何本か作ってみて
ノウハウを蓄積しよう！
- 39. まとめ
Titanium Mobile の注意点その 5
●
作りたいアプリが Titanium Mobile で開発する
のに適しているがどうかを知るべし。
ゲームとかアニメーションは比較的苦手。
ツール系アプリなら大体いけそう。
→ 本当に Titanium Mobile を使用するのが
最善なのか慎重に考えよう！
