html5ハイブリッド...
DESCRIPTION
TRANSCRIPT
![Page 1: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/1.jpg)
HTML5ハイブリッド アプリ開発の実践
開発現場ですぐに活かせるコツを伝授!
2014年4月24日(木)
![Page 2: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/2.jpg)
久保田光則‣ アシアル株式会社所属 ‣ UI/UXデザイナー兼エンジニア ‣ ハイブリッドアプリ開発やmonaca開発に携わる
2
![Page 3: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/3.jpg)
今日話すこと
![Page 4: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/4.jpg)
今日話すこと
‣ HTML5ハイブリッドアプリって何? ‣ 開発で使えるノウハウ・テクニック
4
![Page 5: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/5.jpg)
HTML5ハイブリッドアプリって何?
![Page 6: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/6.jpg)
アプリの種類
6
Java or
Objective-C
アプリ アプリ
ネイティブアプリ ハイブリッドアプリウェブアプリ
![Page 7: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/7.jpg)
ネイティブアプリ
‣ いわゆる「普通のアプリ」
7
Java or
Objective-C
Java or
Objective-C
アプリ
![Page 8: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/8.jpg)
ウェブアプリ
‣ ブラウザ上で動くアプリ ‣ 要するにウェブページ
8
![Page 9: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/9.jpg)
HTML5ハイブリッドアプリ
‣ ウェブ技術+ネイティブのハイブリッド
9
アプリ
ネイティブ層
HTML5
![Page 10: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/10.jpg)
仕組み
‣ アプリ内にWebViewを表示 ‣ WebViewはパッケージ内のHTMLを読み込み
10
アプリ
HTML
読み込みWebView
![Page 11: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/11.jpg)
クロスプラットフォーム性
11
Android iOS
![Page 12: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/12.jpg)
ウェブ技術が使える
‣ 馴染みのあるウェブ技術で開発できる ‣ ウェブ技術のエコシステムを利用できる
12
![Page 13: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/13.jpg)
ストアで配布できる
‣ いわゆる「普通のアプリ」と同じように配布できる ‣ ブラウザを立ち上げる必要なし
13
![Page 14: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/14.jpg)
まとめ
‣ HTML5ハイブリッドアプリは、ネイティブとウエブの良い所を取り入れている
14
Java or
Objective-C
アプリ
アプリ
ハイブリッドアプリ
![Page 15: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/15.jpg)
疑問
‣ どうやって埋め込んでる?
15
?アプリ
ネイティブ層
HTML5
![Page 16: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/16.jpg)
PhoneGap
![Page 17: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/17.jpg)
PhoneGap(Cordova)
17
‣ ハイブリッドアプリのためのフレームワーク ‣ monaca内部でも利用
‣ 他にはTriaina、Trigger.ioなど
![Page 18: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/18.jpg)
PhoneGapの役割
18
‣ HTML5をアプリとして包み、HTML5側とOS側を繋ぐ
アプリ
OS API
PhoneGap
![Page 19: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/19.jpg)
JavaScriptから OSネイティブの機能が使える
19
Android / iOS
API
![Page 20: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/20.jpg)
PhoneGapの提供API
20
‣ PhoneGapプラグインの仕組みを使えばこれ以外のことも可能
ファイルストレージ、カメラ、コンパス 加速度センサー、コンタクトリスト、 位置情報取得、ネットワーク、Bluetooth通信、 Androidのインテント、アプリ内ブラウザ、 GPS、NFC、etc…
![Page 21: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/21.jpg)
テクニック・ノウハウ
![Page 22: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/22.jpg)
実際に開発を始めると 様々な問題が…
22
![Page 23: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/23.jpg)
よくある問題
‣描画や動作が遅い ‣アプリっぽくならない
23
![Page 24: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/24.jpg)
クリックイベントを使わない
24
‣ a要素やclickイベントは300ms遅延が発生 ‣ tappableやfastclick使いましょう
× clickイベント × a要素 touchイベントで処理
![Page 25: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/25.jpg)
CSSアニメーションを使う
25
‣ アニメーションにCSS Transitionを使う ‣ JavaScriptで直接やるよりはるかに速い ‣ setIntervalでアニメーションするのを置き換える
![Page 26: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/26.jpg)
すぐわかるCSS Transition
26
.foobar { background-color: white; } .foobar:hover { -webkit-transition: background-color 1s linear; background-color: red; }
.foobarクラスの要素 .foobarクラスの要素
![Page 27: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/27.jpg)
jQueryではなくZepto.js使う
27
‣ zepto.jsはモバイルに最適化 ‣ jQueryの互換APIを提供
![Page 28: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/28.jpg)
動作確認は遅い方に合わせる
28
‣ WebViewはAndroidよりもiOSの方がはるかに速い ‣ 動作確認は遅い方のプラットフォームに合わせる ‣ 後からチューニングして修正するのは大変
1. 2. iOS
![Page 29: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/29.jpg)
なるべくリフローを起こさない
29
‣ DOMツリーのレイアウトの再計算 ‣ リフローするごとに、画面全体のレイアウトの再計算処理が走る
![Page 30: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/30.jpg)
レンダリングの仕組み
30
‣ DOMツリーとCSSをパース ‣ レイアウトを計算した後レンダリング ‣ リフローとは、レイアウトの再計算処理
CSSルール
DOMツリー
レイアウト 計算 描画
![Page 31: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/31.jpg)
何がリフローを引き起こす?
31
‣ 内部テキストの変更、input要素への入力 ‣ DOMツリーの操作 ‣ width, height, margin, padding, border等の変更 ‣ クラス属性やスタイルシートの変更も含む
?
![Page 32: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/32.jpg)
リフローのコストを抑えるのも重要
32
‣ アプリのインタラクションにDOM操作は必須 ‣ どうしてもリフローは起きる場合がある ‣ リフローのコストを下げる
![Page 33: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/33.jpg)
リフローのコストを下げるには?
33
コストを下げる
‣ リフローが重いとどうなる? ‣ インタラクション・画面更新が遅くなる
![Page 34: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/34.jpg)
要素の縦横を固定する
34
‣ リフロー時のコンテナの計算を抑制
100%
30px
.foobar { width: 100%; height: 30px; }
![Page 35: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/35.jpg)
position: absoluteを多用する
35
‣ フローベースのレイアウトを使わない ‣ absoluteでレイアウトの計算を抑制
40px
30px .foobar { position: absolute; left: 40px; top: 30px; }
![Page 36: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/36.jpg)
transformを使う
36
‣ marginやpaddingや要素サイズ変更 => リフローを引き起こす ‣ その代わりにtransformを使う => リフローを引き起こさない
.foobar { -webkit-transform: translate(20px, 10px); }
![Page 37: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/37.jpg)
transformを使う
37
‣ marginやpaddingなどを変えるとリフローを引き起こす ‣ その代わりにtransformを使う => リフローを引き起こさない
.foobar { -webkit-transform: translate(20px, 10px); }
![Page 38: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/38.jpg)
リフローを確かめる
38
‣ Chromeのインスペクタを利用 ‣ Timelineタブより計測
![Page 39: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/39.jpg)
リフローを伴う アニメーションをさせない
39
‣ CSSアニメーションでもリフローを起こすと遅くなる ‣ リフローを起こすアニメーションを避ける ‣ -webkit-transformを使う
![Page 40: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/40.jpg)
GPUを活用する
40
.foobar { -webkit-transform: traslate3D(0px, 0px, 0px); }
‣ 特定の要素をGPUで描画する ‣ transitionアニメーションに効果大
![Page 41: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/41.jpg)
DOMDocumentFragmentsを使う
41
‣ DOM要素をくりかえしDOMツリーに挿入しない
var fragment = document.createDocumentFragment();
![Page 42: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/42.jpg)
悪い例
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/ より引用
![Page 43: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/43.jpg)
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/ より引用
![Page 44: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/44.jpg)
まとめ
44
‣ アプリとして軽快に動作する必要あり ‣ 最適化のテクニックを把握しておくことが重要
![Page 45: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/45.jpg)
Onsen UIについて
![Page 47: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/47.jpg)
Onsen UI
‣ ハイブリッドアプリ用UIフレームワーク ‣ Angular.jsベース ‣ 画面遷移の管理やUIコンポーネントを提供
‣ http://onsenui.io
47
![Page 48: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/48.jpg)
48
‣ monaca上ですぐに利用可能
![Page 49: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/49.jpg)
その他UIフレームワーク
‣ jQuery Mobile ‣ Sencha Touch ‣ Ionic ‣ Kendo UI
49
![Page 50: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/50.jpg)
好評発売中!
50
‣ ハイブリッドアプリ開発の包括的な知識を解説
![Page 51: HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜](https://reader030.vdocuments.mx/reader030/viewer/2022013121/5495488ab4795938368b45c4/html5/thumbnails/51.jpg)
ご清聴ありがとうございました