2016/09/07　2016年9月定例会「クロスプラットフォーム開発最前線」の発表資料です。

1. Bringing More People To Apps
Cordovaの特徴と
開発手法概要
アシアル株式会社 生形 可奈子
1

2. Bringing More People To Apps
生形可奈子（うぶかたかなこ）
アシアル株式会社
Monacaエバンジェリスト
2
Cordova
の章

3. Bringing More People To Apps
Cordovaとは？
3

4. Bringing More People To Apps
HTML5アプリ用フレームワーク
Cordova
Apacheソフトウェア財団
PhoneGap
アドビシステムズ
4

5. Bringing More People To Apps
Cordova？PhoneGap？
 2008年、Nitobi社がPhoneGapを開発。
 2011年、Adobe社がNitobi社を買収。
PhoneGapはApache財団に寄贈され、名称を「Cordova」に変更。
同時に「PhoneGap」はAdobeの登録商標に。
5

6. Bringing More People To Apps
Cordovaコミッターの会合＠マイクロソフト 6

7. Bringing More People To Apps
Web標準技術（HTML/CSS/JavaScript）
でアプリ開発
 WebView上にHTMLをロードしてUIを作成するので、Web開
発と同じ方法でモバイルアプリ開発が可能
7

8. Bringing More People To Apps
Cordovaの仕組み 8
Cordova層
HTML5層
（WebView）
アプリ本体はHTML5で実装
CordovaがOSに合わせた
ネイティブコードを提供
OS
1. JavaScriptでAPI実行
2. Cordovaがネイティブ
機能を実行

9. Bringing More People To Apps
プラグインでネイティブ機能を拡張
 ネイティブの各種機能は、プラグイン形式で実装されている
 標準プラグインの他にも、第三者によって提供されたプラグインを
取り込んで機能を拡張できる
9
標準プラグイン
・カメラ
・位置情報
・電話帳
・加速度センサー
・ファイルアクセス
サードパーティ製
プラグイン
・Bluetooth
・プッシュ通知
・アプリ内課金
・バーコード読取
・IoT
自作プラグイン

10. Bringing More People To Apps
事例：タニタヘルスプラネット
▶ 体組成計連携の健康管理アプリを2ヶ月で開発
▶ Bluetooth、NFCを使って専用の体組成計、歩数計からデータを自
動で受け取ることが可能
10

11. Bringing More People To Apps
CordovaはCross PlatformツールNo.1 11
61%
35%
31%
18%
15%
13%
12%
9%
4%
3%
0% 10% 20% 30% 40% 50% 60% 70%
PhoneGap/Cordova
Xamarin
Unity
Qt
Adobe Air
Appcelerator
Corona
Marmelade
Codename One
Live Code
Using this tool
Vision Mobile Analysis of Cross-Platform Development, July 2015

12. Bringing More People To Apps
様々なソリューションがCordovaを採用 12

13. Bringing More People To Apps
Cordovaの課題？
13

14. Bringing More People To Apps
Cordovaの課題としてしばしば挙げられ
るもの
1. パフォーマンス
2. 脆弱性対策
14

15. Bringing More People To Apps
端末の大幅な進化
初代Xperia Xperia Z 5
発売日: 2010年4月
Android 1.6 (後に2.1)
1GHz シングルコアCPU
384MBメモリー
ベンチマークスコア: 3361
発売日: 2016年6月
Android 6.0
2GHz クワッド(8)コアCPU
3GBメモリー
ベンチマークスコア: 52084
5年間で20倍もの
スピードアップ
15

16. Bringing More People To Apps
HTML5アプリ向けUIフレームワークの登
場
16

17. Bringing More People To Apps
Onsen UI
 ハイパフォーマンスなUIを実現
 プラットフォームを判別して自動でスタイルが変化
17

18. Bringing More People To Apps
豊富なUIパーツを利用可能 18

19. Bringing More People To Apps
使い方は独自タグを記述するだけの簡単設
計
<ons-toolbar></ons-toolbar>
<ons-list-item></ons-list-item>
<ons-tabbar></ons-tabbar>
19

20. Bringing More People To Apps
様々なJSフレームワークとの組み合わせ
が可能
20

21. Bringing More People To Apps
事例：ジャパンネット銀行
残高確認アプリ
▶Onsen UIでネイティブと遜色ないUIを実現
21

22. Bringing More People To Apps
Cordovaの脆弱性に関する問題 22

23. Bringing More People To Apps
Cordovaアプリにおける脆弱性の種類 23
1. Cordovaに依存する脆弱性
▶ 最新バージョンのCordovaを利用する
2. アプリの実装に依存する脆弱性
▶ Webアプリと同様にXSS対策などが必要
3. WebViewに依存する脆弱性
▶ Android5.0以降はGoogle Playから随時アップデートされる

24. Bringing More People To Apps
古いWebViewが抱える問題
 Android4.4まではWebViewがOSに付属するため、アップデートは
メーカーから提供される（脆弱性放置の危険性）
 GoogleがAndroid4.3以前のWebViewに対するセキュリティパッ
チの提供を終了した
24

25. Bringing More People To Apps
Crosswalk使用通常のCordovaアプリ
Androidアプリ
 ChromiumベースのWebView
 アプリ内に埋め込んで配布することが可能
Androidアプリ
端末の
WebView
Intel Crosswalk 25

26. Bringing More People To Apps
Cordova開発におけるポイントまとめ
 Webの技術でクロスプラットフォーム開発
 Web技術者のスキルを活用
 既存システムの流用が可能
 Web技術でもネイティブ機能が利用可
 パフォーマンスやセキュリティ対策ツールも完備
 UIフレームワークやCrosswalkの導入はほぼ必須
26

27. Bringing More People To Apps
Monacaもよろしくお願いします！
 15万人が利用するCordova開発環境（IDE）
 実機によるリアルタイム検証が可能
 WindowsマシンでもiOSアプリ開発OK
https://ja.monaca.io/
27