Download - 120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
自己紹介
田中正裕アシアル株式会社代表取締役
Twitter: @massie
E-mail: [email protected]
アシアル執筆の最近の書籍
2011年発刊、PhoneGap 0.9ベース
アシアル株式会社
事業内容HTML5アプリ開発、ハイブリッドアプリ開発、ネイティブアプリサーバーサイド(PHP)開発、インフラ、教育事業など
PhoneGap/Cordovaの会社
PhoneGapを用いたアプリ開発
Monaca
http://monaca.mobi/
Onsen UI
http://onsenui.io/
Monaca
クラウドベースのPhoneGap/Cordova開発環境(GUI)
iOS, Android, Windows 8対応
Firefox OS, Chrome Appsに近日対応予定
コマンドラインにも近日対応
無料~(商用利用でも)
デバッガーを組み込み
日本語サポート・ドキュメント
Windowsマシンでも開発OK
http://monaca.mobi/
Monacaのユーザー
2000アプリが既にリリース
200以上の法人アカウント
カジュアルアプリのデベロッパー
システムインテグレータの方
同じスキルでiOS、Androidいずれのアプリも開発可能
Cordovaとは?
?
ストリート名
Cordova通りの場所
Nitobi
Cordovaの歴史
NitobiがPhoneGapをつくる
AdobeがNitobiを買収
PhoneGapはAdobeの商標に
Apache FoundationにPhoneGapソースコードを移管
旧Nitobiチームは、ゆかりのある名前をつけたかった
「Cordova」に決定
CordovaとPhoneGapの違い
結論
同じ(APIレベルでは)
細かい違い①コマンドコマンド
コマンド
phonegapコマンドはcordovaコマンドを使用
細かい違い①コマンドコマンド サブコマンド cordova Phonegap 説明
create ○ ○ プロジェクトを作成する
serve ○ ○ローカルWebサーバーで起動(Developer App等で使用)
build ○ ○ ビルド
install ○ デバイスへのインストール
run ○ ○ デバイス上で実行
plugin ○ ○ プラグインの追加/削除/検索
prepare ○ ビルドイメージを作成
compile ○ コンパイルを実施
emulate ○ エミュレータ上で実行(run --emulatorと同じ)
remotelogin/logout/build/install/
run○ PhoneGap Build用コマンド
local build/install/run/plugin ○ ローカル開発用コマンド
細かい違い②config.xml
cordovaのデフォルトのconfig.xml
細かい違い②config.xml
phonegapのデフォルトのconfig.xml
その他の違い
使用できるバージョンが異なる
Cordova = 3.5
PhoneGap Build = 3.4
ネイティブコードの記述できる範囲が異なる
Cordova = 自由にネイティブ側に手を入れられる
PhoneGap Build = PhoneGapプラグインのみ
PhoneGapには追加機能が
PhoneGap Enterprise
PhoneGap Developer App等
Cordovaと、その一味
PhoneGap
Monaca
Ionic Framework
MS Visual Studio
Google Chrome Apps Mobile
IBM Worklight
全部、同じものがつくれる。
モバイルWebとの違い
モバイルブラウザー Cordova
ブラウザエンジン
iOS:SafariかUIWebView
Android:WebView、Chrome等
iOS:UIWebView (Nitro非対応)
Android:WebView
HTML5、CSS、JSの対応度 同じ
JavaScript APIの拡張 × ○
Same-Origin Policy CORSヘッダー適用されない
Access Originで制御
モバイルWebとの違い
結論
同じ(APIレベルでは)
よって
Webアプリ≒ハイブリッドアプリ
HTML5アプリ
と
ネイティブアプリ
の違い
ネイティブアプリとの比較作り方から動作の仕組みまで、全く異なる世界。
HTML5アプリの抱える課題
ユーザーインターフェース
ネイティブアプリのようなスムーズなUIの実現
実行パフォーマンス
ストレスのない画面描画
セキュリティ
HTMLやJavaScriptコードの漏洩を防止
デバイスAPI / ネイティブ機能
iOSやAndroidの全APIをHTML5から呼び出す
最近の動向
新しいブラウザーエンジンの登場
ChromiumベースのWebView互換エンジン
iOS 8で登場するWKWebView
モダンなUIフレームワークの登場
AngularJSベース:Ionic Framework、Onsen UI
CSS3への最適化:famo.us
Cordova Plugin Registryの充実
Android WebView
Intel Crosswalk Project
Chrominiumベースのブラウザーエンジン。
TizenとAndroidに対応。
Ludei WebView+ (Cocoon JS)
WebGLを有効にしたブラウザーエンジン。
3Dゲーム等に活用できる。
Amazon Silk
Kindle Fire向けのブラウザーエンジン。
現状はAmazon HTML5/Web Apps Storeのみで有効。
WebView内包アプリの利点
Androidデバイスにおける差異を吸収
Android 4.0以上であれば同じHTML5/CSS3/JS機能
デバッグのしやすさ
Chrome Dev Toolsを使ったUSBデバッグが有効に
端末依存が少ない(画面サイズのみ)
パフォーマンスの向上
最新のBlinkエンジンを利用できる
デメリット
ファイルサイズが大きく(8MB~15MB)
起動時間が長い
iOS 8のWKWebView
iOS 8
WKWebView
iOS 8
UIWebView
iOS 7
UIWebView
WebGL 3D Graphics ✓ ✓
IndexedDB ✓
HTML5 Coverage
Score440/555 427/555 410/555
SunSpider
Benchmark949.8ms 4249.6ms 3659.5ms
CSS Shapes ✓ ✓
モダンなJS UI Framework
Ionic Framework (http://ionicframework.com)
AngularJSベースのUIフレームワーク。
Onsen UI (http://onsenui.io)
日本製。タブレットとAndroid 2.3にも対応。
Famo.us (http://famo.us)
CSS3を用いて高速な描画を行うJSフレームワーク。
Cordova Plugin Registryhttp://plugins.cordova.io/
Cordova 3.4からコアとプラグインを分離
これまでのAPIは全てプラグイン形式で配布
npmのプラグイン版
cordova pluginコマンドでインストール
ユーザーがプラグインを投稿することも可能
時間があればMonacaのデモたぶん無くなる
ありがとうございました
P.S. 是非MONACAも使ってみてください。