1. はやわかりHTML5
ハイブリッドアプリ
開発事情
第48回HTML5とか勉強会
アシアル株式会社 久保田光則

2. 自己紹介

3. 久保田光則
‣ a.k.a id:anatoo
‣ アシアル株式会社所属
‣ UI/UXデザイナー兼
ソフトウェアエンジニア
‣ 社内雑用係
3

4. 好評発売中!

5. 今日話すこと
‣ HTML5ハイブリッドアプリって何?
‣ MonacaとOnsen UIについて
5

6. HTML5ハイブリッドアプリって何?

7. ネイティブアプリ
7
‣ Objective-CやJavaなど、そのOSの流儀で記述
‣ いわゆる普通のアプリ
Java
or
Objective-C
Java
or
Objective-C
アプリ

8. HTML5ハイブリッドアプリ
8
‣ HTML5の画面を内包。通常のアプリと同様に動作。
アプリ
ネイティブ層
HTML5

9. ハイブリッドアプリの仕組み
9
アプリ
HTML
読み込み
WebView

10. なぜハイブリッドアプリ?

11. クロスプラットフォーム性
11
Android iOS

12. ウェブ標準の知識を活かせる
‣ アプリ開発でもウェブ技術を活かせる
12

13. ネイティブの機能もJSから
‣ フレームワーク(後述)を使えばネイティブの機能も
13
Android / iOS
OS API

14. 向いていない箇所
14
‣ 3Dゲームなどの高速なグラフィック処理が必要な
もの
‣ デバイスの機能を最大限引き出すようなこと
‣ 無限リスト

15. ハイブリッドアプリの作り方
‣ 自分でWebViewを組み込む
‣ フレームワークを使う

16. フレームワーク?
16
‣ ハイブリッドアプリを作るためのフレームワークが
いくつかあります。

17. Cordovaについて

18. 18
‣ http://cordova.apache.org
‣ 一番メジャーなハイブリッドアプリ開発フレームワーク
Cordova

19. フレームワークがやってくれる事
19
‣ HTML5とネイティブ間のブリッジ
‣ HTML5をアプリとして包む
アプリ
iOS / Android
フレームワーク

20. Cordovaの提供API
20
‣ さらにCordovaプラグインの
仕組みを使えばこれ以外のことも可能
ファイルストレージ、カメラ、コンパス
加速度センサー、コンタクトリスト、
位置情報取得、ネットワーク、Bluetooth通信、
Androidのインテント、アプリ内ブラウザ、
GPS、NFC、etc…

21. PhoneGapとの違い
21
‣ どちらも同じものと考えて差し支えない
‣ AdobeがCordovaを改変して配布しているのが
PhoneGap

22. 22
×
フレームワークを
使わない選択肢
‣ 自前でWebViewをアプリに組み込む
‣ アプリの一部分のみをHTML5で記述する場合など
‣ 開発するアプリの要件に併せて検討

23. 事例

24. Wikipedia Mobile
24
‣ iOS, Android両対応

25. クックパッド
25
‣ Android版のみ。

26. その他の事例
26
‣ PhoneGapのサイトに沢山事例が載ってます
‣ http://phonegap.com/app/

27. FAQ

28. 遅くない?
28
‣ ウェブサイトみたいに作ると遅い
‣ Android2系だと特に遅い
‣ ちゃんとチューニングしましょう
‣ アプリの要件にあった開発方法を選びましょう

29. ∼という機能は作れる?
29
‣ あらかじめ検証しましょう
‣ HTML5ハイブリッドアプリありきにならない
‣ PhoneGapプラグインがあるかどうか試そう
‣ PhoneGapプラグイン自作も検討する
‣ もちろんHTML5を使わない選択肢も

30. テクニック・ノウハウ

31. テクニック・ノウハウの必要性
31
‣ 実際作ってみるといろんな問題が
‣ よくある問題
‣ 反応やレンダリングが遅い
‣ アプリっぽくならなかったりする問題
‣ チューニング方法を知っておくことが重要

32. 参考スライド
32
‣ 後半に最適化テクニックを書き連ねています
‣ http://www.slideshare.net/monaca_mobi/hybridapp-tips

33. 立ち読みしましょう
33
‣ 立ち読みしましょう

34. ツール・ライブラリ
サービス

35. 各種ツール・サービス郡
‣ ハイブリッドアプリを開発するためのツールやライ
ブラリなども育ってきた
35

36. PhoneGap Build
‣ https://build.phonegap.com
36

37. Weinre
‣ http://people.apache.org/ pmuellr/weinre/docs/
latest/Home.html
37

38. jsHybugger
‣ https://www.jshybugger.com/
38

39. 純正ウェブインスペクタ事情
‣ iOS6からSafariのウェブインスペクタ利用可能
‣ Android4.4からChromeのインスペクタが利用可能に
‣ weinreとjsHybugerはこれらが使えない時に利用
39

40. Telerik AppBuilder(旧Icenium)
‣ http://www.telerik.com/appbuilder
40

41. AppGyber Composer
‣ http://www.appgyver.com/composer
41

42. Monacaと
Onsen UIについて

43. Monaca
43
‣ ブラウザでコーディング・開発
‣ Android, iOSでの実機確認無料
‣ 2分でアプリ開発開始
‣ http://monaca.mobi

44. 作られたアプリは2000以上!
44
‣ 2000以上のアプリがすでにストアで公開
‣ http://monaca.mobi

45. Onsen UI
45
‣ Angular.jsを使ったUIフレームワーク
‣ モバイルアプリのUIを簡単に構築
‣ http://onsenui.io

46. Onsen CSS Components
46
‣ モバイルHTML5で利用できるCSSコンポーネント集
‣ http://components.onsenui.io

47. カラーリングはカスタマイズ可能
47
‣ デモ

48. HTML5 Japan Cupにも応募可能
48
‣ Monacaを使って作ったアプリで、応募できます!
‣ https://5jcup.org

49. ご清聴ありがとうございました
終わり