Titanium Mobile

～本当にあったこわい話～

自己紹介

日本シーエイダブリュウ株式会社原田　敦http://j-caw.co.jpBlog http://j-caw.co.jp/blog/?author=1

Twitter@harapanizm

スペック● IT 業界入ってから 5 年くらいずっと WEB エ

ンジニア（客先常駐）● 最近は iPhone ・ Android アプリとか作ってる

（自社受託 )

● WEB アプリケーション開発の画面側のJavaScript くらいは余裕でいける

● これといってすごいことを成し遂げているわけでもない普通の人

Titanium Mobile って？（さすがにもう知ってるんじゃね…）

Titanium Mobile とは

「 Write Once, Adapt Anywhere 」

一度ソースコードを書いてしまえば、最小のコードを付け加えるだけで iPhone でも Android でもその他のプラットフォームでも動かせるよ！

っていうありがたい技術。

えっ、なになに？ワンソースで iPhone でも Androidでも動かせる…？

同じコードを何本も作ったり、１箇所の仕様変更で何箇所も修正しなければならないストレスから解放されるのか…！

ざわ ...

ざわ ...

ざわ ... ざわ ...ざわ ...

ざわ ...

ざわ ... ざわ ...

有名な事例MogSnap zaim

有名な事例日刊ねこ新聞 ロケプラ

Titanium Mobile をもう少し kwsk

● 米 appcelerator 社が提供してるオープンソースのクロスプラットフォーム開発の技術

● JavaScript で開発できるため WEB エンジニアが参入しやすい

● Aptana ベースの Titanium Studio という専用 IDE を使って開発（ Aptana は Eclipse ベースの WEB オーサリングツール） Eclipse と操作方法が近いので WEB エンジニアはとっつきやすい

● Black Berry とか Windows Phone の対応も進めてるらし

続き● ネイティブの UI コントロールが使用できる（ Picker とか

TextField とかそういうの）

● Titanium Mobile SDK が提供する機能だけでは不足している場合、自分でモジュールを作ることもできる

● MVC フレームワークもあるらし（ Alloy, TiMVC, Carbon ）使わなかったからよく知らないけどね！

● テスティングフレームワークも使えるよ（ Jasmine とか）使わなかったからよくし（ ry

他にもクロスプラットフォーム技術

あったよね？

PhoneGap

● HTML5 + CSS3 + JavaScript で開発

● ネイティブ UI ではなくそれっぽい UI コントロールを使用する

● 既存の JavaScript ライブラリが使用できる（ jQuery とか mootools.js とか）

● WEB エンジニアの参入が容易

Flash

● ActionScript で実装

● Flash 技術をそのまま使用できるのでアニメーションなどが作りやすい

● Flash エンジニアの参入が容易

● ネイティブ UI は使用できない。 Flash のSDK が用意する UI コントロールを使用する

クロスプラットフォーム技術の比較メリット デメリット

Titanium Mobile ・WEBエンジニアが参入しやすい（学習コストが低い）・ネイティブ UIが使える・自作モジュールで機能拡張できる

・もっさり

・公式 APIがあるがなぜか載ってない機能があったりする

・アプリのタイプによって向き不

向きがある

PhoneGap ・WEBエンジニアが参入しやすい（学習コストが低い）・既存の JavaScriptライブラリが使用できる

・もっさり

・ネイティブの UIコントロールを使えないため、実現できる機能に制限がある

Flash ・ Flashエンジニアが参入しやすい

・アニメーションに強い・ Androidと iOSの違いを意識する必要がほとんどない

・超もっさり

・ Flashエンジニアってプログラマじゃないよね？

・タッチ感度が非常に悪い・ Air実行環境ごとビルドするのでアプリ容量がかさむ

こうして Titanium Mobile を選択した

このへんから本題

自分の事例「ぜい肉で育つダイペット」ダイエットをサポートする iPhone アプリ。毎日体重を入力して、やせた分の体重をエサとして与えることができる。順調にやせていくとペットが成長していく。https://itunes.apple.com/jp/app/id588284013

Titanium Mobile の恐怖その 1

画像の描画がすげぇ遅い

成長日誌画面

実はこの画面、数字や単位は全て画像。

かなり多くの ImageView を生成しており、 300 個以上生成する場合もある。

スペックの低い iPhone 3GS で比較してみるとどうなるか…

200 個の ImageView を生成してみるObjective-C Titanium Mobile

対策その1 画像を全部先読みする

var numImage = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "images/num01.png");

CreateImageView をする前に全画像ファイルを読み込んでおくようなコードを書いた。

体感ではほとんど効果なし… orz×

対策その 2 差分だけ読み込んで生成する

体重入力されたら体重一覧の画面も更新しなければならないので、画面表示毎に再ロードしていた。（これはWEBエンジニアならではの感覚？）

画面表示時に差分のみロードすることで、速度改善。初回表示時は致し方ないが、体感による動作遅延ストレスはだいぶ改善された。

Titanium Mobile の恐怖その 2

アニメーションに弱い

Objective-C の場合

Titanium Mobile の場合

原因● 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)});

対策● Titanium Mobile 用のゲームエンジンモジュー

ルがある。これを使ってアニメーションさせればスムーズに動くかも！

Infosia氏が開発している

「 QuickTiGame2d」を調査してみる

http://d.hatena.ne.jp/infosia/20120108/1326002975

対策 続きサンプルを組んでやってみる…

ただの WEB エンジニア。ゲームなんか作ったことないし、 enchant.js も知らなければ、 OPEN/GL もさわったことがない。

結論。マスターするのに時間かかりそうなので、現行のやり方でひたすらチューニングする（事実上の無策）。

Titanium Mobile の恐怖その 3

実行がやたら遅い

カジュアルに測定してみる

■ 前提Titanium Mobile 2.1.3IPhone4, iOS 6.0Xcode 4.6Titanium Studio 2.1.2

「ダイペット」のビルドから実機転送完了までを計測する。

測定結果

● Titanium Mobile による実機転送の結果

→1 分 33 秒● Xcode による実機転送

→0 分 6.2 秒（最速、 Titanium の 15倍）● おまけ。 Titanium Mobile によるシミュレータ転送の場合

→0 分 16.7 秒

みてわかるように実機転送に恐ろしく時間がかかる。

→シミュレータにたよった開発をしなければならならない

→実機で動かしてみると動かない

→またシミュレータで開発

時間のロスが大きい！

結論

View の作成時に結構ストレス…

Titanium Mobile の恐怖その他

■メモリオーバーフローでよく落ちるモバイル端末は PC 程スペックが高くないため落ちやすい。ある程度メモリの解放を考慮したコードを書く必要がある。にわか JavaScript使いだと結構ハマる。（例）明示的に null を代入する// 正面・左側の羽this.leftWing = null;// 正面・右側の羽this.rightWing = null;

Titanium Mobile の恐怖その他

■Android動かないとか…iPhone のみ動くとか、 Androidのみ動くとかっていうコードが結構ある。また、画面のアスペクト比とか解像度の問題もある。「ダイペット」は Androidネイティブで開発することに…

まとめTitanium Mobile の良いところ

● プログラム自体は Objective-C よりはるかに簡単。

● 公式ドキュメントも割と充実している。● 他のクロスプラットフォーム技術と比べて、

ネイティブの UI コントロールを使えるところは良い。

● 熟練すればそれなりに強力だと思ってる。

まとめTitanium Mobileの注意点その 1

● 実装者の JavaScript スキルレベルは足りているのか？

標準的（主観だけど）な WEB エンジニアのJavaScript スキルレベルだと結構ハマる。例えば以下の言葉を理解しているか？

クロージャ、ローカルスコープ、グローバル汚染、 prototype 、 JavaScript での継承、疑似的なクラスなど→実装者がどの程度のレベルか確かめよう！

まとめTitanium Mobileの注意点その 2

● 比較的スペックの高い新しい端末に限定するべし。

前述の動作比較で示したとおりスペックの低いとパフォーマンスチューニングのコストが増える。

ちなみに「ダイペット」は iPhone5 ならサクサク動く。→対応端末を制限しよう！

まとめTitanium Mobileの注意点その 3

● チーム開発は避けるべし。

【理由】

JavaScript は自由度が高い言語で、同じ機能要件でも実装方法が多岐に渡る。誰かのスキルレベルが低いと収拾がつかなくなる恐れがある。→実装者のレベルを確かめよう！

　規模によっては一人で作った方が良いかも！

まとめTitanium Mobileの注意点その 4

● クロスプラットフォーム対応をあてにしない。

熟練していない状態では、ネイティブ 2 本作るのと大して工数は変わらない。ノウハウを蓄積させてから臨むべし。

→自作アプリを何本か作ってみて

　ノウハウを蓄積しよう！

まとめTitanium Mobileの注意点その 5

● 作りたいアプリが Titanium Mobile で開発するのに適しているがどうかを知るべし。

ゲームとかアニメーションは比較的苦手。

ツール系アプリなら大体いけそう。

→本当に Titanium Mobile を使用するのが

　最善なのか慎重に考えよう！

それでもハマってしまったら…

すぐにネイティブ開発に切り替える

勇気を持とう！

ご清聴ありがとうございました