SlideShare a Scribd company logo

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

•
•
Atsushi Harada
Atsushi Harada
1 of 41
Downloaded 53 times
Titanium Mobile ～本当にあったこわい話～
自己紹介 日本シーエイダブリュウ株式会社 原田　敦 http://j-caw.co.jp Blog 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 エンジニアが参入しやす ・もっさり い（学習コストが低い） ・公式 API があるがなぜか載って ・ネイティブ UI が使える ない機能があったりする ・自作モジュールで機能拡張でき ・アプリのタイプによって向き不 る 向きがある PhoneGap ・ WEB エンジニアが参入しやす ・もっさり い（学習コストが低い） ・ネイティブの UI コントロールを ・既存の JavaScript ライブラリが 使えないため、実現できる機能に 使用できる 制限がある Flash ・ Flash エンジニアが参入しやす ・超もっさり い ・ Flash エンジニアってプログラ ・アニメーションに強い マじゃないよね？ ・ Android と iOS の違いを意識す ・タッチ感度が非常に悪い る必要がほとんどない ・ 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 画像を全部先読みする CreateImageView をする前に全画像ファイル を読み込んでおくようなコードを書いた。 var numImage = Ti.Filesystem.getFile( Ti.Filesystem.resourcesDirectory, "images/num01.png"); 体感ではほとんど効果なし… 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.3 IPhone4, iOS 6.0 Xcode 4.6 Titanium 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 を使用するのが 　最善なのか慎重に考えよう！
それでもハマってしまったら… すぐにネイティブ開発に切り替える 勇気を持とう！
ご清聴ありがとうございました

More Related Content

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

  • 3. スペック ● IT 業界入ってから 5 年くらいずっと WEB エ ンジニア（客先常駐） ● 最近は iPhone ・ Android アプリとか作ってる （自社受託 ) ● WEB アプリケーション開発の画面側の JavaScript くらいは余裕でいける ● これといってすごいことを成し遂げているわ けでもない普通の人
  • 4. Titanium Mobile って？ （さすがにもう知ってるんじゃね…）
  • 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 実行環境ごとビルドするので アプリ容量がかさむ
  • 15. こうして Titanium Mobile を選択した このへんから本題
  • 17. Titanium Mobile の恐怖 その 1 画像の 描画がすげぇ遅い
  • 18. 成長日誌画面 実はこの画面、数字や単位は全 て画像。 かなり多くの ImageView を生成 しており、 300 個以上生成する 場合もある。 スペックの低い iPhone 3GS で 比較してみるとどうなるか…
  • 19. 200 個の ImageView を生成してみる Objective-C Titanium Mobile
  • 20. 対策その 1 画像を全部先読みする CreateImageView をする前に全画像ファイル を読み込んでおくようなコードを書いた。 var numImage = Ti.Filesystem.getFile( Ti.Filesystem.resourcesDirectory, "images/num01.png"); 体感ではほとんど効果なし… orz
  • 21. 対策その 2 差分だけ読み込んで生成する 体重入力されたら体重一覧の画面も更新しなけ ればならないので、画面表示毎に再ロードして いた。 （これは WEB エンジニアならではの感覚？） 画面表示時に差分のみロードすることで、速 度改善。 初回表示時は致し方ないが、体感による動作 遅延ストレスはだいぶ改善された。
  • 22. Titanium Mobile の恐怖 その 2 アニメーションに弱い
  • 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 もさわったことがない。 結論。 マスターするのに時間かかりそうなので、現行のや り方でひたすらチューニングする（事実上の無 策）。
  • 28. Titanium Mobile の恐怖 その 3 実行がやたら遅い
  • 29. カジュアルに測定してみる ■ 前提 Titanium Mobile 2.1.3 IPhone4, iOS 6.0 Xcode 4.6 Titanium Studio 2.1.2 「ダイペット」のビルドから実機転 送完了までを計測する。
  • 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 を使用するのが 　最善なのか慎重に考えよう！