O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
はやわかり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
‣ ハイブリッドアプリを作るためのフレームワークが
いくつかあります。
Cordovaについて
18
‣ http://cordova.apache.org
‣ 一番メジャーなハイブリッドアプリ開発フレームワーク
Cordova
フレームワークがやってくれる事
19
‣ HTML5とネイティブ間のブリッジ
‣ HTML5をアプリとして包む
アプリ
iOS / Android
フレームワーク
Cordovaの提供API
20
‣ さらにCordovaプラグインの

仕組みを使えばこれ以外のことも可能
ファイルストレージ、カメラ、コンパス
加速度センサー、コンタクトリスト、
位置情報取得、ネットワーク、Bluetooth通信、
And...
PhoneGapとの違い
21
‣ どちらも同じものと考えて差し支えない
‣ AdobeがCordovaを改変して配布しているのが
PhoneGap
22
×
フレームワークを
使わない選択肢
‣ 自前でWebViewをアプリに組み込む
‣ アプリの一部分のみをHTML5で記述する場合など
‣ 開発するアプリの要件に併せて検討
事例
Wikipedia Mobile
24
‣ iOS, Android両対応
クックパッド
25
‣ Android版のみ。
その他の事例
26
‣ PhoneGapのサイトに沢山事例が載ってます
‣ http://phonegap.com/app/
FAQ
遅くない?
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
ご清聴ありがとうございました
終わり
Próximos SlideShares
Carregando em…5
×

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

39.778 visualizações

Publicada em

Publicada em: Tecnologia
  • Seja o primeiro a comentar

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

  1. 1. はやわかりHTML5 ハイブリッドアプリ 開発事情 第48回HTML5とか勉強会 アシアル株式会社 久保田光則
  2. 2. 自己紹介
  3. 3. 久保田光則 ‣ a.k.a id:anatoo ‣ アシアル株式会社所属 ‣ UI/UXデザイナー兼
 ソフトウェアエンジニア ‣ 社内雑用係 3
  4. 4. 好評発売中!
  5. 5. 今日話すこと ‣ HTML5ハイブリッドアプリって何? ‣ MonacaとOnsen UIについて 5
  6. 6. HTML5ハイブリッドアプリって何?
  7. 7. ネイティブアプリ 7 ‣ Objective-CやJavaなど、そのOSの流儀で記述 ‣ いわゆる普通のアプリ Java or Objective-C Java or Objective-C アプリ
  8. 8. HTML5ハイブリッドアプリ 8 ‣ HTML5の画面を内包。通常のアプリと同様に動作。 アプリ ネイティブ層 HTML5
  9. 9. ハイブリッドアプリの仕組み 9 アプリ HTML 読み込み WebView
  10. 10. なぜハイブリッドアプリ?
  11. 11. クロスプラットフォーム性 11 Android iOS
  12. 12. ウェブ標準の知識を活かせる ‣ アプリ開発でもウェブ技術を活かせる 12
  13. 13. ネイティブの機能もJSから ‣ フレームワーク(後述)を使えばネイティブの機能も 13 Android / iOS OS API
  14. 14. 向いていない箇所 14 ‣ 3Dゲームなどの高速なグラフィック処理が必要な もの ‣ デバイスの機能を最大限引き出すようなこと ‣ 無限リスト
  15. 15. ハイブリッドアプリの作り方 ‣ 自分でWebViewを組み込む ‣ フレームワークを使う
  16. 16. フレームワーク? 16 ‣ ハイブリッドアプリを作るためのフレームワークが いくつかあります。
  17. 17. Cordovaについて
  18. 18. 18 ‣ http://cordova.apache.org ‣ 一番メジャーなハイブリッドアプリ開発フレームワーク Cordova
  19. 19. フレームワークがやってくれる事 19 ‣ HTML5とネイティブ間のブリッジ ‣ HTML5をアプリとして包む アプリ iOS / Android フレームワーク
  20. 20. Cordovaの提供API 20 ‣ さらにCordovaプラグインの
 仕組みを使えばこれ以外のことも可能 ファイルストレージ、カメラ、コンパス 加速度センサー、コンタクトリスト、 位置情報取得、ネットワーク、Bluetooth通信、 Androidのインテント、アプリ内ブラウザ、 GPS、NFC、etc…
  21. 21. PhoneGapとの違い 21 ‣ どちらも同じものと考えて差し支えない ‣ AdobeがCordovaを改変して配布しているのが PhoneGap
  22. 22. 22 × フレームワークを 使わない選択肢 ‣ 自前でWebViewをアプリに組み込む ‣ アプリの一部分のみをHTML5で記述する場合など ‣ 開発するアプリの要件に併せて検討
  23. 23. 事例
  24. 24. Wikipedia Mobile 24 ‣ iOS, Android両対応
  25. 25. クックパッド 25 ‣ Android版のみ。
  26. 26. その他の事例 26 ‣ PhoneGapのサイトに沢山事例が載ってます ‣ http://phonegap.com/app/
  27. 27. FAQ
  28. 28. 遅くない? 28 ‣ ウェブサイトみたいに作ると遅い ‣ Android2系だと特に遅い ‣ ちゃんとチューニングしましょう ‣ アプリの要件にあった開発方法を選びましょう
  29. 29. ∼という機能は作れる? 29 ‣ あらかじめ検証しましょう ‣ HTML5ハイブリッドアプリありきにならない ‣ PhoneGapプラグインがあるかどうか試そう ‣ PhoneGapプラグイン自作も検討する ‣ もちろんHTML5を使わない選択肢も
  30. 30. テクニック・ノウハウ
  31. 31. テクニック・ノウハウの必要性 31 ‣ 実際作ってみるといろんな問題が ‣ よくある問題 ‣ 反応やレンダリングが遅い ‣ アプリっぽくならなかったりする問題 ‣ チューニング方法を知っておくことが重要
  32. 32. 参考スライド 32 ‣ 後半に最適化テクニックを書き連ねています ‣ http://www.slideshare.net/monaca_mobi/hybridapp-tips
  33. 33. 立ち読みしましょう 33 ‣ 立ち読みしましょう
  34. 34. ツール・ライブラリ サービス
  35. 35. 各種ツール・サービス郡 ‣ ハイブリッドアプリを開発するためのツールやライ ブラリなども育ってきた 35
  36. 36. PhoneGap Build ‣ https://build.phonegap.com 36
  37. 37. Weinre ‣ http://people.apache.org/ pmuellr/weinre/docs/ latest/Home.html 37
  38. 38. jsHybugger ‣ https://www.jshybugger.com/ 38
  39. 39. 純正ウェブインスペクタ事情 ‣ iOS6からSafariのウェブインスペクタ利用可能 ‣ Android4.4からChromeのインスペクタが利用可能に ‣ weinreとjsHybugerはこれらが使えない時に利用 39
  40. 40. Telerik AppBuilder(旧Icenium) ‣ http://www.telerik.com/appbuilder 40
  41. 41. AppGyber Composer ‣ http://www.appgyver.com/composer 41
  42. 42. Monacaと Onsen UIについて
  43. 43. Monaca 43 ‣ ブラウザでコーディング・開発 ‣ Android, iOSでの実機確認無料 ‣ 2分でアプリ開発開始 ‣ http://monaca.mobi
  44. 44. 作られたアプリは2000以上! 44 ‣ 2000以上のアプリがすでにストアで公開 ‣ http://monaca.mobi
  45. 45. Onsen UI 45 ‣ Angular.jsを使ったUIフレームワーク ‣ モバイルアプリのUIを簡単に構築 ‣ http://onsenui.io
  46. 46. Onsen CSS Components 46 ‣ モバイルHTML5で利用できるCSSコンポーネント集 ‣ http://components.onsenui.io
  47. 47. カラーリングはカスタマイズ可能 47 ‣ デモ
  48. 48. HTML5 Japan Cupにも応募可能 48 ‣ Monacaを使って作ったアプリで、応募できます! ‣ https://5jcup.org
  49. 49. ご清聴ありがとうございました 終わり

×