Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

40,020 views

Published on

Published in: Technology
  • Sex in your area is here: ♥♥♥ http://bit.ly/36cXjBY ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❶❶❶ http://bit.ly/36cXjBY ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

はやわかり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. ご清聴ありがとうございました 終わり

×