「120分聞けばドヤ顔で語れる Apache Cordova スーパー勉強会」にて発表したCordovaに関する紹介です。 http://atnd.org/events/51539

1. Apache Cordvaの話
2014年6月10日
アシアル株式会社 田中正裕
MASAHIRO@ASIAL.CO.JP
120分聞けばドヤ顔で語れる Apache Cordova スーパー勉強会

2. 自己紹介
田中正裕
アシアル株式会社 代表取締役
Twitter: @massie
E-mail: masahiro@asial.co.jp
アシアル執筆の最近の書籍
2011年発刊、PhoneGap 0.9ベース

3. アシアル株式会社
事業内容
HTML5アプリ開発、ハイブリッドアプリ開発、ネイティブアプリ
サーバーサイド（PHP）開発、インフラ、教育事業など

4. PhoneGap/Cordovaの会社
 PhoneGapを用いたアプリ開発
 Monaca
 http://monaca.mobi/
 Onsen UI
 http://onsenui.io/

5. Monaca
 クラウドベースのPhoneGap/Cordova開発環境（GUI）
 iOS, Android, Windows 8対応
Firefox OS, Chrome Appsに近日対応予定
 コマンドラインにも近日対応
 無料～（商用利用でも）
 デバッガーを組み込み
 日本語サポート・ドキュメント
 Windowsマシンでも開発OK
http://monaca.mobi/

6. Monacaのユーザー
 2000アプリが既にリリース
 200以上の法人アカウント
 カジュアルアプリのデベロッパー
 システムインテグレータの方
 同じスキルでiOS、Androidいずれ
のアプリも開発可能

7. Cordovaとは？
?

8. ストリート名

9. Cordova通りの場所
Nitobi

10. Cordovaの歴史
 NitobiがPhoneGapをつくる
 AdobeがNitobiを買収
 PhoneGapはAdobeの商標に
 Apache FoundationにPhoneGapソースコードを移管
 旧Nitobiチームは、ゆかりのある名前をつけたかった
 「Cordova」に決定

11. CordovaとPhoneGapの違い
結論
同じ
（APIレベルでは）

12. 細かい違い① コマンド
コマンド
コマンド
phonegapコマンドはcordovaコマンドを使用

13. 細かい違い① コマンド
コマンド サブコマンド cordova Phonegap 説明
create ○ ○ プロジェクトを作成する
serve ○ ○
ローカルWebサーバーで起動（Developer App等で使
用）
build ○ ○ ビルド
install ○ デバイスへのインストール
run ○ ○ デバイス上で実行
plugin ○ ○ プラグインの追加/削除/検索
prepare ○ ビルドイメージを作成
compile ○ コンパイルを実施
emulate ○ エミュレータ上で実行（run --emulatorと同じ）
remote
login/logout/build/install/
run
○ PhoneGap Build用コマンド
local build/install/run/plugin ○ ローカル開発用コマンド

14. 細かい違い②config.xml
cordovaのデフォルトのconfig.xml

15. 細かい違い②config.xml
phonegapのデフォルトのconfig.xml

16. その他の違い
 使用できるバージョンが異なる
 Cordova = 3.5
 PhoneGap Build = 3.4
 ネイティブコードの記述できる範囲が異なる
 Cordova = 自由にネイティブ側に手を入れられる
 PhoneGap Build = PhoneGapプラグインのみ
 PhoneGapには追加機能が
 PhoneGap Enterprise
 PhoneGap Developer App等

17. Cordovaと、その一味
PhoneGap
Monaca
Ionic Framework
MS Visual Studio
Google Chrome
Apps Mobile
IBM Worklight
全部、同じものがつくれる。

18. モバイルWebとの違い
モバイルブラウザー Cordova
ブラウザエンジン
iOS:
SafariかUIWebView
Android:
WebView、Chrome等
iOS:
UIWebView (Nitro非対応)
Android:
WebView
HTML5、CSS、JSの対応度 同じ
JavaScript APIの拡張 × ○
Same-Origin Policy CORSヘッダー
適用されない
Access Originで制御

19. モバイルWebとの違い
結論
同じ
（APIレベルでは）
よって
Webアプリ≒ハイブリッドアプリ

20. HTML5アプリ
と
ネイティブアプリ
の違い

21. ネイティブアプリとの比較
作り方から動作の仕組みまで、全く異なる世界。

22. HTML5アプリの抱える課題
 ユーザーインターフェース
 ネイティブアプリのようなスムーズなUIの実現
 実行パフォーマンス
 ストレスのない画面描画
 セキュリティ
 HTMLやJavaScriptコードの漏洩を防止
 デバイスAPI / ネイティブ機能
 iOSやAndroidの全APIをHTML5から呼び出す

23. 最近の動向
 新しいブラウザーエンジンの登場
 ChromiumベースのWebView互換エンジン
 iOS 8で登場するWKWebView
 モダンなUIフレームワークの登場
 AngularJSベース：Ionic Framework、Onsen UI
 CSS3への最適化：famo.us
 Cordova Plugin Registryの充実

24. Android WebView
 Intel Crosswalk Project
 Chrominiumベースのブラウザーエンジン。
 TizenとAndroidに対応。
 Ludei WebView+ （Cocoon JS）
 WebGLを有効にしたブラウザーエンジン。
 3Dゲーム等に活用できる。
 Amazon Silk
 Kindle Fire向けのブラウザーエンジン。
 現状はAmazon HTML5/Web Apps Storeのみで有効。

25. WebView内包アプリの利点
 Androidデバイスにおける差異を吸収
 Android 4.0以上であれば同じHTML5/CSS3/JS機能
 デバッグのしやすさ
 Chrome Dev Toolsを使ったUSBデバッグが有効に
 端末依存が少ない（画面サイズのみ）
 パフォーマンスの向上
 最新のBlinkエンジンを利用できる
 デメリット
 ファイルサイズが大きく（8MB～15MB）
 起動時間が長い

26. iOS 8のWKWebView
iOS 8
WKWebView
iOS 8
UIWebView
iOS 7
UIWebView
WebGL 3D Graphics ✓ ✓
IndexedDB ✓
HTML5 Coverage
Score
440/555 427/555 410/555
SunSpider
Benchmark
949.8ms 4249.6ms 3659.5ms
CSS Shapes ✓ ✓

27. モダンな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フレームワーク。

28. Cordova Plugin Registry
http://plugins.cordova.io/
 Cordova 3.4からコアとプラグインを分離
 これまでのAPIは全てプラグイン形式で配布
 npmのプラグイン版
 cordova pluginコマンドでインストール
 ユーザーがプラグインを投稿することも可能

29. 時間があればMonacaのデモ
たぶん無くなる

30. ありがとうございました
P.S. 是非MONACAも使ってみてください。