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

27,913 views

Published on

Published in: Business

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

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

×