HTML5ハイブリッドアプリ開発実践編

URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved.

アシアル株式会社久保田光則

HTML5ハイブリッドアプリ開発実践編クロスプラットフォーム開発でハマりがちなポイントを解説

1


自己紹介•久保田光則 @anatoo•アシアル株式会社•UI&UXデザイナー兼ソフトウェアエンジニア

2


会社紹介

•アシアル株式会社•HTML5、UI&UX、スマートフォン、PHP、etc...

3


今回の話

•HTML5で作るハイブリッドアプリって実際どうなの?

4


ハイブリッドアプリとは

• 通常のアプリと同様にストアからインストールできる•普通のアプリのように見えるが、中身の部分はHTML5で実装されている

5


ハイブリッドアプリ

6

アプリ

HTML5JavaScriptCSS

アプリ

ネイティブアプリハイブリッドアプリ

Objective-C or Java


どうして注目されているのか?

• iPhoneとAndroid、まじめに両プラットフォームに対応すると大変

7


AndroidとiOS両対応は大変

•プログラミング言語が違う•開発環境が違う•開発ノウハウが違う•用意されているUIが違う •両方できる開発者は希少

8


そこでハイブリッドアプリ

•HTML5でアプリ開発•ワンソースでクロスプラットフォーム

9


いいところ

•ウェブ開発者のノウハウが活かせる•ワンソースでマルチプラットフォーム対応 => 開発効率化•HTML5からネイティブの機能を呼び出せる

10


国内国外の事例

•cookpad•名刺管理アプリEight•Wikipedia•はてなスペース•LinkedIn•etc...

11


ハイブリッドアプリ興隆はこれから

•2016年には業務向けアプリの50%がハイブリッドアプリになるという予測も。•米Gartner調べ

12


ただし良いことばかりではない

•何も考えずにハイブリッドアプリを作ると・・・?

13


よくありがちな失敗

•なんかショボイアプリになった・・・•UIがイケてない・・・•反応速度が遅い・・・•なんか落ちる・・・

14


失敗例: Facebook

•HTML5で作っていたものをネイティブへ移行•動作が重かったり落ちたりと不評だった•「HTML5に賭けたのは失敗」• by ザッカーバーグCEO

15


失敗の理由•スキル・ノウハウの不足•ウェブサイトと同じように実装している•HTML5で実装すべきでないところを実装している•モバイル特有の事情を考慮していない

16


失敗パターンを避けるための

•前提、知識、ノウハウ、話します。

17


ハイブリッドアプリの作り方

18


ハイブリッドアプリの作り方

•フレームワークを利用•PhoneGap•MonacaFramework•Triana•Trigger.io•もしくは自前で用意

19


フレームワーク?

•HTML5で記述したものをAndroidやiOSのアプリとして包んでくれるもの

•JSからネイティブの機能を呼び出すインターフェイスを提供

20


フレームワーク?

21

HTML5

モバイルOS(iOS, Android

フレームワーク

ハイブリッドアプリ


フレームワークの選定ポイント

•ネイティブの機能をJSから使うか?• 具体的にどんなネイティブの機能を使うか?

•信頼出来ないHTMLを読み込むか?

22

今回はPhoneGapの場合をお話します


PhoneGap

• 最もメジャーなハイブリッドアプリフレームワーク

23


PhoneGapがやってくれること

•ファイルストレージ•カメラ、コンパス、加速度センサー•コンタクトリスト•位置情報取得•ネットワーク

HTML5から呼び出せるネイティブAPIの提供。

24


その他プラグイン

•Bluetooth通信•Androidのインテント•ChildBrowser - アプリ内ブラウザ•日付選択UI•GPS、NFC、SMS、Bonjour、etc...

プラグイン導入で、その他の機能も使える

25


さらに

•重たい処理はネイティブで書く•特定の画面はネイティブで書く

自分でPhoneGapプラグインを実装すると、

26


開発方針

27


どちらにまず合わせる?

• AndroidよりもiOSのほうがはるかに動きが滑らか&軽い

• まずは、Androidでまともに動くことを確認してiOSでも確認する• 逆だと、Androidで重すぎて使い物にならなくなる事態が発生する

28


何をどっちで実装する?•HTML5は万能ではない•パフォーマンス上無理っぽい所も。

•どんなものをHTML5で実装できる?•どんなものをネイティブで実装する?

29


これを判断するために

•あらかじめHTML5が不得意な部分を検証&理解しておく•不得意な部分はネイティブで実装して補う

30


長短

31

高度なグラフィック処理、リアルタイム処理、端末性能を活かす、メモリ節約、OS最新機能

開発速度、学習コスト、クロスプラットフォーム性

ネイティブ ◯ ×HTML5 × ◯


両方の長所をうまく活用する

•なんでもHTML5でやるのではない

•HTML5とネイティブの短所を上手く補いあう形にする

32


実際に開発する際のノウハウ

33


前準備は終わり

34

•ここからは、実装する際の細かいノウハウを話していきます


デバッグ

•Firebugみたいなインスペクタをモバイルで使うには?

35


iOSの場合

•Safariのリモートインスペクターを利用する

36


Androidの場合

•weinreを利用する

37


アニメーション

•JavaScriptで直接アニメーションすると大変遅い•CSSアニメーションを使う

38


CSSアニメーションのやり方

•dom.style.webkitAnimation•dom.style.webkitTransition•dom.style.webkitTransform

アニメーション関連のプロパティを

JavaScriptから操作する

39


注意点: iOSでは

• iOSでは、webkitTransformスタイルに、translate2dやtranslateXなどを使うとちらつくので、translate3dを使う

40


アニメーションにはGPUを活用

• 大切•描画の速さ・滑らかさが段違い•以下の呪文を使うとGPUでの描画が有効に• -webkit-transform-style: preserve-3d;

41


GPUが効いてるかどうか確かめる• iOSの場合•GPUオーバードローのオプションを付けてiOSシミュレータ起動

•Androidの場合•開発者向けオプションで「GPUオーバードローを有効にする」がついている端末を利用

42


例

43

$ export CA_COLOR_OPAQUE=1 $ open (iOS simulaterのパス)


ツールバーをネイティブにする

•ツールバーやタブバーなどはネイティブ•中身のみHTML5で記述する

•簡単にアプリっぽくなる

44


例

45

HTML5

ネイティブ

ネイティブ


遷移アニメーションはネイティブで

• 画面を遷移する際のアニメーションにもネイティブを使うとアプリらしくなる

• CSSアニメーションでやるとまだ若干重たい

46


MonacaFrameworkを使う

• PhoneGapを拡張したフレームワーク• ネイティブのUIをJSで制御• オープンソース• http://github.com/monaca

47

http://github.com/monaca

http://github.com/monaca


viewportを利用する

•モバイルでのHTML5特有の概念•どの端末でも同じような見た目にするのに必要

48

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">


タップイベントの扱い• モバイルでJavaScriptからclickイベントを利用すると、200ms程度の遅延が発生• Aタグでも同様なので使わないようにする

• tappable.jsのようなタップイベントを検知できるライブラリを使う

49

https://github.com/cheeaun/tappable




tappable.jsがやること• モバイルだと、タッチを扱うためのイベントが発行される• touchstart, touchmove, touchend

• tappable.jsではこれを補足してタップを関知

50


jQueryの代わりにzepto.jsを使う

• jQueryのAPIと互換性を持つ•モバイル用に最適化

51


画面の傾きを取る

•window.orientation•その時の画面の傾きが入る

52


画面の傾きを検知する

53

•window.orientationをsetIntervalで監視する• orientationChangeイベントはポータビリティが低い


JS/CSSは圧縮しておく

•CSSはYUI Compressor等使う•JSはUgilifyJS等使う

•圧縮して起動を早くする

54


気をつけるバグ

•orientationの扱い•Android4でcssのorientationがおかしい•Android4系でassetsから512回読み込みで落ちるバグ•開発してみて初めて遭遇するバグ

55


セキュリティ

•XSSには気をつける•ネイティブの機能を呼び出せるため• iframeで信頼出来ないURLを呼び出す際も気をつける

56


まとめ

57


ハイブリッドアプリは銀の弾丸ではない

•レスポンスの遅いアプリができあがる•よく落ちる不安定なアプリが出来上がる•開発効率が却って悪くなる

このような失敗パターンを避けるには?

58


実装の切り分け•何をHTML5で実装するべきか?•何をネイティブで実装するべきか?

•ネイティブとHTML5の欠点を補い合うようにする•HTML5だけでやらない

59


モバイル特有のノウハウを理解する

•PCには無い事情を把握する• viewport, タッチイベント, orientation

•貧弱なスペックでもなるべく軽く• GPUを活用, CSSアニメーション, リソースの節約

•各OSのバグを把握する

60


お知らせ

61


ブース紹介

•B-13でブースを出しています•話した技術やノウハウはMonacaで使われています。

62


エンジニア、デザイナー募集中！

• アシアル株式会社では、エンジニアやデザイナーを募集しています。•気になる人は僕かブースにいる人に声かけてください。

63

URL : http://monaca.mobi/ Copyright © Asial Corporation. All Right Reserved. 64

ご清聴ありがとうございました

Documents

HTML5ハイブリッド アプリ開発実践編

HTML5ハイブリッドアプリ開発実践編