はやわかり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 ‣ ハイブリッドアプリを作るためのフレームワークがいくつかあります。

Cordovaについて

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両対応

2048(パズルゲーム) 25 ‣ iOS、Android両対応

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

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

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

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

テクニック・ノウハウ

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

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

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

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

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

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

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

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

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

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

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

Monacaと Onsen UIについて

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

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

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

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

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

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

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

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

by monaca_mobi

on May 26, 2014

Statistics

Views

Actions

1 Embed 0

Accessibility

Categories

Upload Details

Usage Rights

Report content

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