Titanium Mobile ~本当にあったこわい話~
-
Upload
atsushi-harada -
Category
Business
-
view
24.708 -
download
0
Transcript of Titanium Mobile ~本当にあったこわい話~
![Page 1: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/1.jpg)
Titanium Mobile
~本当にあったこわい話~
![Page 2: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/2.jpg)
自己紹介
日本シーエイダブリュウ株式会社原田 敦http://j-caw.co.jpBlog http://j-caw.co.jp/blog/?author=1
Twitter@harapanizm
![Page 3: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/3.jpg)
スペック● IT 業界入ってから 5 年くらいずっと WEB エ
ンジニア(客先常駐)● 最近は iPhone ・ Android アプリとか作ってる
(自社受託 )
● WEB アプリケーション開発の画面側のJavaScript くらいは余裕でいける
● これといってすごいことを成し遂げているわけでもない普通の人
![Page 4: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/4.jpg)
Titanium Mobile って?(さすがにもう知ってるんじゃね…)
![Page 5: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/5.jpg)
Titanium Mobile とは
「 Write Once, Adapt Anywhere 」
一度ソースコードを書いてしまえば、最小のコードを付け加えるだけで iPhone でも Android でもその他のプラットフォームでも動かせるよ!
っていうありがたい技術。
![Page 6: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/6.jpg)
えっ、なになに?ワンソースで iPhone でも Androidでも動かせる…?
同じコードを何本も作ったり、1箇所の仕様変更で何箇所も修正しなければならないストレスから解放されるのか…!
ざわ ...
ざわ ...
ざわ ... ざわ ...ざわ ...
ざわ ...
ざわ ... ざわ ...
![Page 7: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/7.jpg)
有名な事例MogSnap zaim
![Page 8: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/8.jpg)
有名な事例日刊ねこ新聞 ロケプラ
![Page 9: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/9.jpg)
Titanium Mobile をもう少し kwsk
● 米 appcelerator 社が提供してるオープンソースのクロスプラットフォーム開発の技術
● JavaScript で開発できるため WEB エンジニアが参入しやすい
● Aptana ベースの Titanium Studio という専用 IDE を使って開発( Aptana は Eclipse ベースの WEB オーサリングツール) Eclipse と操作方法が近いので WEB エンジニアはとっつきやすい
● Black Berry とか Windows Phone の対応も進めてるらし
![Page 10: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/10.jpg)
続き● ネイティブの UI コントロールが使用できる( Picker とか
TextField とかそういうの)
● Titanium Mobile SDK が提供する機能だけでは不足している場合、自分でモジュールを作ることもできる
● MVC フレームワークもあるらし( Alloy, TiMVC, Carbon )使わなかったからよく知らないけどね!
● テスティングフレームワークも使えるよ( Jasmine とか)使わなかったからよくし( ry
![Page 11: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/11.jpg)
他にもクロスプラットフォーム技術
あったよね?
![Page 12: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/12.jpg)
PhoneGap
● HTML5 + CSS3 + JavaScript で開発
● ネイティブ UI ではなくそれっぽい UI コントロールを使用する
● 既存の JavaScript ライブラリが使用できる( jQuery とか mootools.js とか)
● WEB エンジニアの参入が容易
![Page 13: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/13.jpg)
Flash
● ActionScript で実装
● Flash 技術をそのまま使用できるのでアニメーションなどが作りやすい
● Flash エンジニアの参入が容易
● ネイティブ UI は使用できない。 Flash のSDK が用意する UI コントロールを使用する
![Page 14: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/14.jpg)
クロスプラットフォーム技術の比較メリット デメリット
Titanium Mobile ・WEBエンジニアが参入しやすい(学習コストが低い)・ネイティブ UIが使える・自作モジュールで機能拡張できる
・もっさり
・公式 APIがあるがなぜか載ってない機能があったりする
・アプリのタイプによって向き不
向きがある
PhoneGap ・WEBエンジニアが参入しやすい(学習コストが低い)・既存の JavaScriptライブラリが使用できる
・もっさり
・ネイティブの UIコントロールを使えないため、実現できる機能に制限がある
Flash ・ Flashエンジニアが参入しやすい
・アニメーションに強い・ Androidと iOSの違いを意識する必要がほとんどない
・超もっさり
・ Flashエンジニアってプログラマじゃないよね?
・タッチ感度が非常に悪い・ Air実行環境ごとビルドするのでアプリ容量がかさむ
![Page 15: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/15.jpg)
こうして Titanium Mobile を選択した
このへんから本題
![Page 16: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/16.jpg)
自分の事例「ぜい肉で育つダイペット」ダイエットをサポートする iPhone アプリ。毎日体重を入力して、やせた分の体重をエサとして与えることができる。順調にやせていくとペットが成長していく。https://itunes.apple.com/jp/app/id588284013
![Page 17: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/17.jpg)
Titanium Mobile の恐怖その 1
画像の描画がすげぇ遅い
![Page 18: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/18.jpg)
成長日誌画面
実はこの画面、数字や単位は全て画像。
かなり多くの ImageView を生成しており、 300 個以上生成する場合もある。
スペックの低い iPhone 3GS で比較してみるとどうなるか…
![Page 19: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/19.jpg)
200 個の ImageView を生成してみるObjective-C Titanium Mobile
![Page 20: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/20.jpg)
対策その1 画像を全部先読みする
var numImage = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "images/num01.png");
CreateImageView をする前に全画像ファイルを読み込んでおくようなコードを書いた。
体感ではほとんど効果なし… orz×
![Page 21: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/21.jpg)
対策その 2 差分だけ読み込んで生成する
体重入力されたら体重一覧の画面も更新しなければならないので、画面表示毎に再ロードしていた。(これはWEBエンジニアならではの感覚?)
画面表示時に差分のみロードすることで、速度改善。初回表示時は致し方ないが、体感による動作遅延ストレスはだいぶ改善された。
![Page 22: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/22.jpg)
Titanium Mobile の恐怖その 2
アニメーションに弱い
![Page 23: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/23.jpg)
Objective-C の場合
![Page 24: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/24.jpg)
Titanium Mobile の場合
![Page 25: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/25.jpg)
原因● 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)});
![Page 26: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/26.jpg)
対策● Titanium Mobile 用のゲームエンジンモジュー
ルがある。これを使ってアニメーションさせればスムーズに動くかも!
Infosia氏が開発している
「 QuickTiGame2d」を調査してみる
http://d.hatena.ne.jp/infosia/20120108/1326002975
![Page 27: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/27.jpg)
対策 続きサンプルを組んでやってみる…
ただの WEB エンジニア。ゲームなんか作ったことないし、 enchant.js も知らなければ、 OPEN/GL もさわったことがない。
結論。マスターするのに時間かかりそうなので、現行のやり方でひたすらチューニングする(事実上の無策)。
![Page 28: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/28.jpg)
Titanium Mobile の恐怖その 3
実行がやたら遅い
![Page 29: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/29.jpg)
カジュアルに測定してみる
■ 前提Titanium Mobile 2.1.3IPhone4, iOS 6.0Xcode 4.6Titanium Studio 2.1.2
「ダイペット」のビルドから実機転送完了までを計測する。
![Page 30: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/30.jpg)
測定結果
● Titanium Mobile による実機転送の結果
→1 分 33 秒● Xcode による実機転送
→0 分 6.2 秒(最速、 Titanium の 15倍)● おまけ。 Titanium Mobile によるシミュレータ転送の場合
→0 分 16.7 秒
![Page 31: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/31.jpg)
みてわかるように実機転送に恐ろしく時間がかかる。
→シミュレータにたよった開発をしなければならならない
→実機で動かしてみると動かない
→またシミュレータで開発
時間のロスが大きい!
結論
View の作成時に結構ストレス…
![Page 32: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/32.jpg)
Titanium Mobile の恐怖その他
■メモリオーバーフローでよく落ちるモバイル端末は PC 程スペックが高くないため落ちやすい。ある程度メモリの解放を考慮したコードを書く必要がある。にわか JavaScript使いだと結構ハマる。(例)明示的に null を代入する// 正面・左側の羽this.leftWing = null;// 正面・右側の羽this.rightWing = null;
![Page 33: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/33.jpg)
Titanium Mobile の恐怖その他
■Android動かないとか…iPhone のみ動くとか、 Androidのみ動くとかっていうコードが結構ある。また、画面のアスペクト比とか解像度の問題もある。「ダイペット」は Androidネイティブで開発することに…
![Page 34: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/34.jpg)
まとめTitanium Mobile の良いところ
● プログラム自体は Objective-C よりはるかに簡単。
● 公式ドキュメントも割と充実している。● 他のクロスプラットフォーム技術と比べて、
ネイティブの UI コントロールを使えるところは良い。
● 熟練すればそれなりに強力だと思ってる。
![Page 35: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/35.jpg)
まとめTitanium Mobileの注意点その 1
● 実装者の JavaScript スキルレベルは足りているのか?
標準的(主観だけど)な WEB エンジニアのJavaScript スキルレベルだと結構ハマる。例えば以下の言葉を理解しているか?
クロージャ、ローカルスコープ、グローバル汚染、 prototype 、 JavaScript での継承、疑似的なクラスなど→実装者がどの程度のレベルか確かめよう!
![Page 36: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/36.jpg)
まとめTitanium Mobileの注意点その 2
● 比較的スペックの高い新しい端末に限定するべし。
前述の動作比較で示したとおりスペックの低いとパフォーマンスチューニングのコストが増える。
ちなみに「ダイペット」は iPhone5 ならサクサク動く。→対応端末を制限しよう!
![Page 37: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/37.jpg)
まとめTitanium Mobileの注意点その 3
● チーム開発は避けるべし。
【理由】
JavaScript は自由度が高い言語で、同じ機能要件でも実装方法が多岐に渡る。誰かのスキルレベルが低いと収拾がつかなくなる恐れがある。→実装者のレベルを確かめよう!
規模によっては一人で作った方が良いかも!
![Page 38: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/38.jpg)
まとめTitanium Mobileの注意点その 4
● クロスプラットフォーム対応をあてにしない。
熟練していない状態では、ネイティブ 2 本作るのと大して工数は変わらない。ノウハウを蓄積させてから臨むべし。
→自作アプリを何本か作ってみて
ノウハウを蓄積しよう!
![Page 39: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/39.jpg)
まとめTitanium Mobileの注意点その 5
● 作りたいアプリが Titanium Mobile で開発するのに適しているがどうかを知るべし。
ゲームとかアニメーションは比較的苦手。
ツール系アプリなら大体いけそう。
→本当に Titanium Mobile を使用するのが
最善なのか慎重に考えよう!
![Page 40: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/40.jpg)
それでもハマってしまったら…
すぐにネイティブ開発に切り替える
勇気を持とう!
![Page 41: Titanium Mobile ~本当にあったこわい話~](https://reader033.fdocuments.net/reader033/viewer/2022052523/55660b80d8b42a06318b4801/html5/thumbnails/41.jpg)
ご清聴ありがとうございました