Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
Similar to HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜 (20)
More from Monaca
More from Monaca (20)
Recently uploaded
Recently uploaded (8)
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
- 2. 久保田光則 ‣ アシアル株式会社所属 ‣ UI/UXデザイナー兼エンジニア ‣ ハイブリッドアプリ開発や monaca開発に携わる 2
- 3. 今日話すこと
- 16. PhoneGap
- 17. PhoneGap(Cordova) 17 ‣ ハイブリッドアプリのためのフレームワーク ‣ monaca内部でも利用 ‣ 他にはTriaina、Trigger.ioなど
- 21. テクニック・ノウハウ
- 24. クリックイベントを使わない 24 ‣ a要素やclickイベントは300ms遅延が発生 ‣ tappableやfastclick使いましょう clickイベント a要素 touchイベントで処理
- 25. CSSアニメーションを使う 25 ‣ アニメーションにCSS Transitionを使う ‣ JavaScriptで直接やるよりはるかに速い ‣ setIntervalでアニメーションするのを置き換える
- 26. すぐわかるCSS Transition 26 .foobar { background-color: white; } .foobar:hover { -webkit-transition: background-color 1s linear; background-color: red; } .foobarクラスの要素 .foobarクラスの要素
- 28. 動作確認は遅い方に合わせる 28 ‣ WebViewはAndroidよりもiOSの方がはるかに速い ‣ 動作確認は遅い方のプラットフォームに合わせる ‣ 後からチューニングして修正するのは大変 1. 2. iOS
- 30. レンダリングの仕組み 30 ‣ DOMツリーとCSSをパース ‣ レイアウトを計算した後レンダリング ‣ リフローとは、レイアウトの再計算処理 CSSルール DOMツリー レイアウト 計算 描画
- 31. 何がリフローを引き起こす? 31 ‣ 内部テキストの変更、input要素への入力 ‣ DOMツリーの操作 ‣ width, height, margin, padding, border等の変更 ‣ クラス属性やスタイルシートの変更も含む ?
- 32. リフローのコストを 抑えるのも重要 32 ‣ アプリのインタラクションにDOM操作は必須 ‣ どうしてもリフローは起きる場合がある ‣ リフローのコストを下げる
- 34. 要素の縦横を固定する 34 ‣ リフロー時のコンテナの計算を抑制 100% 30px .foobar { width: 100%; height: 30px; }
- 35. position: absoluteを多用する 35 ‣ フローベースのレイアウトを使わない ‣ absoluteでレイアウトの計算を抑制 40px 30px .foobar { position: absolute; left: 40px; top: 30px; }
- 36. transformを使う 36 ‣ marginやpaddingや要素サイズ変更 => リフローを引き起こす ‣ その代わりにtransformを使う => リフローを引き起こさない .foobar { -webkit-transform: translate(20px, 10px); }
- 37. transformを使う 37 ‣ marginやpaddingなどを変えるとリフローを引き起こす ‣ その代わりにtransformを使う => リフローを引き起こさない .foobar { -webkit-transform: translate(20px, 10px); }
- 39. リフローを伴う アニメーションをさせない 39 ‣ CSSアニメーションでもリフローを起こすと遅くなる ‣ リフローを起こすアニメーションを避ける ‣ -webkit-transformを使う
- 40. GPUを活用する 40 .foobar { -webkit-transform: traslate3D(0px, 0px, 0px); } ‣ 特定の要素をGPUで描画する ‣ transitionアニメーションに効果大
- 41. DOMDocumentFragments を使う 41 ‣ DOM要素をくりかえしDOMツリーに挿入しない var fragment = document.createDocumentFragment();
- 42. 悪い例 42 var div = document.getElementsByTagName("div"); for (var i = 0; i < div.length; i++) { for (var e = 0; e < elems.length; e++) { div[i].appendChild(elems[e].cloneNode(true)); } } 繰り返しDOMツリーに挿入 http://ejohn.org/blog/dom-documentfragments/ より引用
- 43. DocumentFragmentsの例 43 var div = document.getElementsByTagName("div"); var fragment = document.createDocumentFragment(); for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } for (var i = 0; i < div.length; i++) { div[i].appendChild(fragment.cloneNode(true)); } 最後に一度だけDOMツリーに挿入 http://ejohn.org/blog/dom-documentfragments/ より引用
- 45. Onsen UIについて
- 47. Onsen UI ‣ ハイブリッドアプリ用UIフレームワーク ‣ Angular.jsベース ‣ 画面遷移の管理やUIコンポーネントを提供 ‣ http://onsenui.io 47
- 49. その他UIフレームワーク ‣ jQuery Mobile ‣ Sencha Touch ‣ Ionic ‣ Kendo UI 49
- 51. ご清聴ありがとうございました