はやわかりHTML5ハイブリッドアプリ開発事情

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Wikipedia Mobile
24
‣ iOS, Android両対応

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

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

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

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

テクニック・ノウハウ

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

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

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

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

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

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

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

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

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

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

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

Monacaと
Onsen UIについて

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

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

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

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

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

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

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

はやわかりHTML5ハイブリッドアプリ開発事情

はやわかりHTML5ハイブリッドアプリ開発事情

More Related Content

What's hot

Similar to はやわかりHTML5ハイブリッドアプリ開発事情

More from Monaca

はやわかりHTML5ハイブリッドアプリ開発事情