html5ハイブリッド アプリ開発実践編
DESCRIPTION
TRANSCRIPT
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
アシアル株式会社 久保田光則
HTML5ハイブリッドアプリ開発実践編クロスプラットフォーム開発でハマりがちなポイントを解説
1
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
自己紹介•久保田光則 @anatoo•アシアル株式会社•UI&UXデザイナー兼ソフトウェアエンジニア
2
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
会社紹介
•アシアル株式会社•HTML5、UI&UX、スマートフォン、PHP、etc...
3
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
今回の話
•HTML5で作るハイブリッドアプリって実際どうなの?
4
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリとは
• 通常のアプリと同様にストアからインストールできる•普通のアプリのように見えるが、中身の部分はHTML5で実装されている
5
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリ
6
アプリ
HTML5JavaScriptCSS
アプリ
ネイティブアプリ ハイブリッドアプリ
Objective-C or Java
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
どうして注目されているのか?
• iPhoneとAndroid、まじめに両プラットフォームに対応すると大変
7
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
AndroidとiOS両対応は大変
•プログラミング言語が違う•開発環境が違う•開発ノウハウが違う•用意されているUIが違う •両方できる開発者は希少
8
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
そこでハイブリッドアプリ
•HTML5でアプリ開発•ワンソースでクロスプラットフォーム
9
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
いいところ
•ウェブ開発者のノウハウが活かせる•ワンソースでマルチプラットフォーム対応 => 開発効率化•HTML5からネイティブの機能を呼び出せる
10
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
国内国外の事例
•cookpad•名刺管理アプリEight•Wikipedia•はてなスペース•LinkedIn•etc...
11
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリ興隆はこれから
•2016年には業務向けアプリの50%がハイブリッドアプリになるという予測も。•米Gartner調べ
12
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
ただし良いことばかりではない
•何も考えずにハイブリッドアプリを作ると・・・?
13
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
よくありがちな失敗
•なんかショボイアプリになった・・・•UIがイケてない・・・•反応速度が遅い・・・•なんか落ちる・・・
14
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
失敗例: Facebook
•HTML5で作っていたものをネイティブへ移行•動作が重かったり落ちたりと不評だった•「HTML5に賭けたのは失敗」• by ザッカーバーグCEO
15
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
失敗の理由•スキル・ノウハウの不足•ウェブサイトと同じように実装している•HTML5で実装すべきでないところを実装している•モバイル特有の事情を考慮していない
16
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
失敗パターンを避けるための
•前提、知識、ノウハウ、話します。
17
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリの作り方
18
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリの作り方
•フレームワークを利用•PhoneGap•MonacaFramework•Triana•Trigger.io•もしくは自前で用意
19
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
フレームワーク?
•HTML5で記述したものをAndroidやiOSのアプリとして包んでくれるもの
•JSからネイティブの機能を呼び出すインターフェイスを提供
20
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
フレームワーク?
21
HTML5
モバイルOS(iOS, Android
フレームワーク
ハイブリッドアプリ
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
フレームワークの選定ポイント
•ネイティブの機能をJSから使うか?• 具体的にどんなネイティブの機能を使うか?
•信頼出来ないHTMLを読み込むか?
22
今回はPhoneGapの場合をお話します
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
PhoneGap
• 最もメジャーなハイブリッドアプリフレームワーク
23
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
PhoneGapがやってくれること
•ファイルストレージ•カメラ、コンパス、加速度センサー•コンタクトリスト•位置情報取得•ネットワーク
HTML5から呼び出せるネイティブAPIの提供。
24
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
その他プラグイン
•Bluetooth通信•Androidのインテント•ChildBrowser - アプリ内ブラウザ•日付選択UI•GPS、NFC、SMS、Bonjour、etc...
プラグイン導入で、その他の機能も使える
25
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
さらに
•重たい処理はネイティブで書く•特定の画面はネイティブで書く
自分でPhoneGapプラグインを実装すると、
26
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
開発方針
27
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
どちらにまず合わせる?
• AndroidよりもiOSのほうがはるかに動きが滑らか&軽い
• まずは、Androidでまともに動くことを確認してiOSでも確認する• 逆だと、Androidで重すぎて使い物にならなくなる事態が発生する
28
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
何をどっちで実装する?•HTML5は万能ではない•パフォーマンス上無理っぽい所も。
•どんなものをHTML5で実装できる?•どんなものをネイティブで実装する?
29
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
これを判断するために
•あらかじめHTML5が不得意な部分を検証&理解しておく•不得意な部分はネイティブで実装して補う
30
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
長短
31
高度なグラフィック処理、リアルタイム処理、端末性能を活かす、メモリ節約、OS最新機能
開発速度、学習コスト、クロスプラットフォーム性
ネイティブ ◯ ×HTML5 × ◯
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
両方の長所をうまく活用する
•なんでもHTML5でやるのではない
•HTML5とネイティブの短所を上手く補いあう形にする
32
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
実際に開発する際のノウハウ
33
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
前準備は終わり
34
•ここからは、実装する際の細かいノウハウを話していきます
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
デバッグ
•Firebugみたいなインスペクタをモバイルで使うには?
35
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
iOSの場合
•Safariのリモートインスペクターを利用する
36
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
Androidの場合
•weinreを利用する
37
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
アニメーション
•JavaScriptで直接アニメーションすると大変遅い•CSSアニメーションを使う
38
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
CSSアニメーションのやり方
•dom.style.webkitAnimation•dom.style.webkitTransition•dom.style.webkitTransform
アニメーション関連のプロパティを
JavaScriptから操作する
39
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
注意点: iOSでは
• iOSでは、webkitTransformスタイルに、translate2dやtranslateXなどを使うとちらつくので、translate3dを使う
40
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
アニメーションにはGPUを活用
• 大切•描画の速さ・滑らかさが段違い•以下の呪文を使うとGPUでの描画が有効に• -webkit-transform-style: preserve-3d;
41
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
GPUが効いてるかどうか確かめる• iOSの場合•GPUオーバードローのオプションを付けてiOSシミュレータ起動
•Androidの場合•開発者向けオプションで「GPUオーバードローを有効にする」がついている端末を利用
42
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
例
43
$ export CA_COLOR_OPAQUE=1 $ open (iOS simulaterのパス)
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
ツールバーをネイティブにする
•ツールバーやタブバーなどはネイティブ•中身のみHTML5で記述する
•簡単にアプリっぽくなる
44
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
例
45
HTML5
ネイティブ
ネイティブ
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
遷移アニメーションはネイティブで
• 画面を遷移する際のアニメーションにもネイティブを使うとアプリらしくなる
• CSSアニメーションでやるとまだ若干重たい
46
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
MonacaFrameworkを使う
• PhoneGapを拡張したフレームワーク• ネイティブのUIをJSで制御• オープンソース• http://github.com/monaca
47
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
viewportを利用する
•モバイルでのHTML5特有の概念•どの端末でも同じような見た目にするのに必要
48
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
タップイベントの扱い• モバイルでJavaScriptからclickイベントを利用すると、200ms程度の遅延が発生• Aタグでも同様なので使わないようにする
• tappable.jsのようなタップイベントを検知できるライブラリを使う
49
https://github.com/cheeaun/tappable
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
tappable.jsがやること• モバイルだと、タッチを扱うためのイベントが発行される• touchstart, touchmove, touchend
• tappable.jsではこれを補足してタップを関知
50
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
jQueryの代わりにzepto.jsを使う
• jQueryのAPIと互換性を持つ•モバイル用に最適化
51
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
画面の傾きを取る
•window.orientation•その時の画面の傾きが入る
52
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
画面の傾きを検知する
53
•window.orientationをsetIntervalで監視する• orientationChangeイベントはポータビリティが低い
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
JS/CSSは圧縮しておく
•CSSはYUI Compressor等使う•JSはUgilifyJS等使う
•圧縮して起動を早くする
54
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
気をつけるバグ
•orientationの扱い•Android4でcssのorientationがおかしい•Android4系でassetsから512回読み込みで落ちるバグ•開発してみて初めて遭遇するバグ
55
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
セキュリティ
•XSSには気をつける•ネイティブの機能を呼び出せるため• iframeで信頼出来ないURLを呼び出す際も気をつける
56
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
まとめ
57
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリは銀の弾丸ではない
•レスポンスの遅いアプリができあがる•よく落ちる不安定なアプリが出来上がる•開発効率が却って悪くなる
このような失敗パターンを避けるには?
58
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
実装の切り分け•何をHTML5で実装するべきか?•何をネイティブで実装するべきか?
•ネイティブとHTML5の欠点を補い合うようにする•HTML5だけでやらない
59
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
モバイル特有のノウハウを理解する
•PCには無い事情を把握する• viewport, タッチイベント, orientation
•貧弱なスペックでもなるべく軽く• GPUを活用, CSSアニメーション, リソースの節約
•各OSのバグを把握する
60
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
お知らせ
61
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
ブース紹介
•B-13でブースを出しています•話した技術やノウハウはMonacaで使われています。
62
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.
エンジニア、デザイナー募集中!
• アシアル株式会社では、エンジニアやデザイナーを募集しています。•気になる人は僕かブースにいる人に声かけてください。
63
URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 64
ご清聴ありがとうございました