1.
HTML5ハイブリッドアプリ開発の
ベストプラクティス
CORDOVAユーザー会 / アシアル株式会社 田中正裕

2.
自己紹介
» 田中正裕
» アシアル株式会社所属
» Twitter: @massie
» 職務: CEO (Chief ExectiveEngineering Officer)
» HTML5Expert.jpエキスパート
» Cordovaユーザー会、発起人
» Cordova（PhoneGap）歴 5年

3.
HTML5の弱点は「ハードウェアAPIへのアクセス」
ブラウザーエンジンの上で実行
ネイティブアプリとして実行
デバイスAPI使えない
デバイスAPI使える
ネイティブSDKのプラットフォームAPIの充実度は
HTML5の比ではない

4.
HTML5ハイブリッドアプリのおさらい
ネイティブアプリ WebアプリHTML5ハイブリッドアプリ
ほぼクロスプラットフォーム
Web技術と一部ネイティブ技術
クロスプラットフォーム
Web技術
シングルプラットフォーム
ネイティブ技術

5.
他のクロスプラットフォーム環境との違い
HTML5ハイブリッドアプリ vs.
Unity
Xamarin
Adobe AIRやFlash
Titanium Mobile
開発言語: HTML5とJavaScript それぞれの言語
実行環境: WebView
ネイティブコードの吐き出しや
仮想マシン実行など

6.
どうやって作るの？

7.
CORDOVA
• HTML5ハイブリッドアプリ開発のデファクト
• オープンソース
• 対応ライブラリが多い

8.
CORDOVAとPHONEGAP
2011年
Adobe社がNitobi社を買収
PhoneGapは「Cordova」に
2009年
Nitobi社がPhoneGapを開発
オープンソース製品
それから
多くの企業がCordova開発に参加
誕生!
PhoneGapは
Adobe社の
ディストリ
オープンソース化
各社が開発協力
Cordovaと命名
by

9.
CORDOVAの仕組み
JavaScript
ロジック
JavaScript
ロジック
JavaScript
ロジック
Nativeロジック Nativeロジック
Cordova JS
インタフェース
全プラットフォーム共通のAPIインターフェースを提供しており
プラットフォームに依存しない開発が可能
Cordova JS
インタフェース
Cordova JS
インタフェース
Cordova JS
インタフェース
Cordova JS
インタフェース

10.
CEASE TO EXIST
 CordovaはHTML5ブラウザーに実装されていないAPIを提供する
 すべてのブラウザーがフルのHTML5機能を備えたら、Cordovaの存在意義はなくなる
”いずれ消えゆくもの”
PhoneGap Beliefs, Goals, and Philosophy by Brian LeRoux
http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/
私の意見としては、ネイティブとのギャップを
永遠に埋め続けるだろうと思っています

11.
CORDOVAのシェア
出典: AppBrain Stats
0% 5% 10% 15%
ビジネス
金融
医療
ヘルスケア
スポーツ
ショッピング
トラベル
ライフスタイル
ニュース
教育
全Androidアプリの5.96%に採用
Cordova /
PhoneGap
5.83%
Unity 3D 4.11%
Adobe AIR 2.87%
Titanium
Mobile
1.01%
Xamarin 欄外
ツール別のアプリシェア

12.
CORDOVAのシェア
出典: AppBrain Stats
0% 5% 10% 15%
ビジネス
金融
医療
ヘルスケア
スポーツ
ショッピング
トラベル
ライフスタイル
ニュース
教育
全Androidアプリの5.96%に採用
Cordova /
PhoneGap
0.90%
Unity 3D 7.14%
Adobe AIR 1.57%
Titanium
Mobile
0.08%
Xamarin 欄外
インストールベース

13.
開発をはじめる前に検討してほしい５つのこと

14.
その１：本当にHTML5ハイブリッドアプリで大丈夫？
OKな依頼： 「個別カスタマイズよりも共通化処理を優先したいのでハイブリッドで！」
厳しい依頼：「iOSとAndroidそれぞれの持てる機能を最大限使って欲しい。」
「HTML5ハイブリッドアプリだとしても、OS別にロジックを切り替えられるよね。」
「ユーザーエクスペリエンスを徹底的に追求したい。」
「このネイティブアプリを、そのままハイブリッドにしてほしい。」

15.
その２：IOSとANDROIDの対応バージョンを考える
App Storeでの統計（2015年1月19日）
https://developer.apple.com/support/appstore/
7.8%
(2.3.3-2.3.7)
Google Playストアでの統計（1月5日までの7日間）
https://developer.android.com/about/dashboards/index.html
(2.2)
(4.4)
(4.1-4.3) (4.0.3-4.0.4)
39.1%
46.0%

16.
その３：WEBVIEWの方式を検討する
iOS Android
UIWebView
WKWebView
Android WebView
Chromium WebView (Crosswalk Engine)
CordovaのデフォルトWebView
すべてのiOSで利用できる。
iOS 8から登場したWebView。
Cordova 4から利用できる（予定）。
JIT有効で4倍スピードアップ。
CordovaのデフォルトWebView
すべてのAndroidで利用できる。
3rdパーティWebView
オープンソース、Chromiumがベース
Android 4以降で利用できる。ハイブリッドアプリの動作性能を飛躍的にアップさせる
iOS 8の新ブラウザエンジンを検証する Codezine
Android 4.3以前は
メンテナンス終了!?

17.
その４：UIのルック＆フィールを検討する
iOS Android中間
jQuery Mobile Ionic Onsen UI
不動産検索アプリをさまざまなUIフレームワークで作る
http://propertycross.com/
自動的にUIを切り替えてくれる

18.
その５：何を学んでおくべきか？
 プログラミング
 Cordovaのドキュメント
 ある程度のネイティブ開発の知識
 Intent、Activity、ViewControllerなどの各OSフレームワークの基礎知識
 AndroidManifest、Info.plistなどのコンフィグレーション
 Cordovaがネイティブを呼び出す方法
 HTML5やCSS3におけるパフォーマンスチューニングに関する知識
 デザイン
 各OSのUIガイドライン（特にAppleは審査で落とされないように）

19.
着手前の検討事項

20.
CORDOVAプラグインを選定する
 Battery Status
 Camera
Capture a photo using the device's camera.
 Console
Add additional capability to console.log().
 Contacts
Work with the devices contact database.
 Device
Gather device specific information.
 Device Motion (Accelerometer)
Tap into the device's motion sensor.
 Device Orientation (Compass)
Obtain the direction that the device is pointing.
 Dialogs
Visual device notifications.
 FileSystem
Hook into native file system through JavaScript.
 File Transfer
Hook into native file system through JavaScript.
 Geolocation
Make your application location aware.
 Globalization
Enable representation of objects specific to a locale.
 InAppBrowser
Launch URLs in another in-app browser instance.
 Media
Record and play back audio files.
 Media Capture
Capture media files using device's media capture applications.
 Network Information (Connection)
Quickly check the network state, and cellular network information.
 Splashscreen
Show and hide the applications splash screen.
 Vibration
An API to vibrate the device.
 StatusBar
An API for showing, hiding and configuring status bar background.
Cordovaコアプラグイン
Cordova Plugin Registryにある600以上のプラグイン
＋
必要なプラグインを検索することができる

21.
開発に使うフレームワークを選定する
モバイルUIを持つフレームワークSPAフレームワーク
• Single Page Appアーキテクチャー
• データバインディング
• テンプレート
• オブジェクト指向開発の支援
• Custom Elements
• モデルの定義
• モバイルUIのコンポーネントの提供
• トランジションなどのページ管理
• クロスプラットフォーム開発支援
• アプリのパッケージ化や制作ツールの提供

22.
開発環境を構築する
cordova
PhoneGap
Build
Monaca
Visual Studio 2013
+ Cordova Extension
入手方法 npm install cordova Adobe Creative Clouds http://monaca.io Microsoft MSDN Webサイト
ローカル開発 コマンドライン Dreamweaverに組み込み
別のエディタやIDEと
組み合わせる
Visual Studioに組み込み
クラウド開発 × × クラウドIDE ×
リモートビルド × ○ ○ ×
料金 無料（オープンソース） 無料から 無料から 要VSライセンス
デバッガー なし PhoneGap Developer App Monaca Debugger なし

23.
CORDOVAを使う上でのヒント

24.
USBリモートデバッグ
• ブレークポイント
• ステップ実行
• プロファイリング
• タイムライン
USBを経由してChrome Dev ToolsやSafariインスペクターを使うことができます。
必要な環境
Android 4.0以降のCrosswalk WebViewもしくはAndroid 4.4以降 + Chrome Dev Tools
iOS + Safariインスペクター

25.
（補足）WINDOWSをお使いの方
GapDebugを使うと、WindowsからもSafariインスペクターが利用できます
https://www.genuitec.com/products/gapdebug/

26.
開発体制を考える
UIエンジニア・デザイナー
フロントエンドエンジニア
iOSエンジニア
Androidエンジニア
必要な役割
20～40%
50～70%
5～20%
5～20%
ウェイト
ワイヤーフレームの作成、ビジュアルデザイン
プロトタイプの開発協力など
HTML5/JavaScript側アプリ開発
iOSビルド、プラグイン開発など
Androidビルド、プラグイン開発など

27.
CORDOVAアプリのセキュリティ
③ アプリロジックの隠蔽② XSS① CordovaやWebViewのバグ
対策
• 最新のフレームワークにアップデート
• 古い端末向けにはリリースしない
• Crosswalk WebViewを使う
対策
• DOMを直接扱わない
• 入力データのバリデーション
• 通信先の限定
対策
• ソースコードを圧縮する
• MonacaやWorklightなどのツー
ルはコード暗号化機能を持つ
Android、iOS、Cordovaなどのフレーム
ワークに脆弱性が発見されるケースがあ
ります。セキュリティ情報を管理する
JPCERTなどの情報を参考にしましょ
う。
クロスサイトスクリプティング対
策の必要性はWebアプリと同様で
す。CordovaではCORS制約がない
代わりに、通信先を設定で制限で
きます。
ストアからダウンロードしたパッ
ケージを解凍するとHTMLや
JavaScriptコードが容易に閲覧でき
てしまいます。

28.
その他の話題

29.
どんな課題がある？
１）開発スキル、チーム体制に関する課題
 Webアプリ開発とは違うノウハウが必要になる
 ネイティブアプリ開発経験もあまり参考にならず
２）メンテナンスに関する課題
 バージョンの変化にキャッチアップする必要がある
 来年の今頃どうなっているか・・・分かりません
３）情報不足に関する課題
 HTML5ハイブリッドアプリ開発の情報が少なすぎる

30.
ぜひ始めてみましょう！
HTML5ハイブリッドアプリ関連書籍
Cordovaユーザー会
毎月勉強会をやってます

31.
ありがとうございました。
アンケートはこちら：
http://bit.ly/html5C201501
田中正裕
masahiro@asial.co.jp