120分聞けばドヤ顔で語れる apache cordova スーパー勉強会

Apache Cordvaの話

2014年6月10日

アシアル株式会社田中正裕

MASAHIRO@ASIAL.CO.JP

120分聞けばドヤ顔で語れる Apache Cordova スーパー勉強会

自己紹介

田中正裕アシアル株式会社代表取締役

Twitter: @massie

E-mail: masahiro@asial.co.jp

アシアル執筆の最近の書籍

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も使ってみてください。