少し古めのアプリでCordova4.0.0で作っていたモノがあったので、5.2.0にしたときのメモ。
あくまでメモということで、間違いとか認識違いあればご指摘頂ければ。
4.0.0と5.2.0での違い(躓いたところ)
- cordovaで提供されるプラグイン名が変っている
- ホワイトリストの扱いが変更になっている
- iOSにおいてContent Security Policy(CSP)の記述が必要
アップデート手順
- バックアップ
- そもそものCordovaを5.2.0にする
- platformをアップデート
- プラグインを入れ替え
- ホワイトリスト対策
- Content Security Policy(CSP)
- ビルド・確認
WindowsとMacの両方で作業しているプロジェクトの場合、Windows環境でも出来ると思いますが、ファイルパーミッションとかを考慮するとMac環境で作業することをお勧めします。
アップデート手順詳細
バックアップ
cordovaプロジェクトそのものをバックアップ。
Gitなどバージョン管理を導入しているのであれば、それでも事足りる。
$ tar czf PROJECT.tgz PROJECT
そもそものCordovaを5.2.0にする
$ npm install -g cordova@5.2.0
グローバルのcordovaを変えたくないときは -g を付けない。
(プロジェクト毎にCordovaを分けるのは別で記事にしたい)
platformをアップデート
cordovaプロジェクトのディレクトリ(config.xmlがあるディレクトリ)に移動して、
$ cordova platform update android
$ cordova platform update ios
を実行。
この他のプラットフォームもある場合はすべて行う。
プラグインの入れ替え
Cordova 5.0から
- org.apache.cordova.PLUGINNAME
+ cordova-plugin-PLUGINNAME
という命名規則に変ったようで、 org.apache.cordova. で始まるプラグインは入れ替えたい。
(例 org.apache.cordova.console は conrdova-plugin-console に変っている)
ということで、
$ cordova plugin list
でインストールされているプラグインを確認し、 org.apache.cordova. で始まるプラグインを削除→インストール。
$ cordova plugin rm org.apache.cordova.PLUGINNAME
$ cordova plugin add cordova-plugin-PLUGINNAME
上記をプラグイン数分繰り返します。
ホワイトリスト対策
ホワイトリストについて詳しくは
Whitelist Guide - Apache Cordova API Documentation
を参照
cordova-plugin-whitelist を導入
$ cordova plugin add cordova-plugin-whitelist
config.xml に対して、以下の宣言を追加
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
本当は * とアスタリスクではなく、アプリから本当にアクセスする先を指定するのがベスト。
- アスタリスクはセキュリティ的にも邪道です。
Content Security Policy(CSP)
Content Security Policy Reference & Example
ここを見ながら、各HTMLファイルにmetaタグを記述。
この記述が無いとiOSにおいて外部との通信をしてくれなかった…。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src *; img-src *; frame-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval' 'unsafe-inline' *;">
上記の場合、
| Directive | Value | Note |
|---|---|---|
| default-src | 'self' | 基本 自身のホストからのみ |
| connect-src | * | AJAX すべてのホストへ接続可能 |
| img-src | * | imgタグ すべてのホストへ接続可能 |
| frame-src | * | frameタグ すべてのホストへ接続可能 |
| style-src | 'self' 'unsafe-inline' |
スタイルシート 自身のホストからのみ取得可能 インライン展開も可能 |
| script-src | 'self' 'unsafe-eval' 'unsafe-inline' * |
JavaScriptなどスクリプト 自身のホスト eval呼び出し インライン展開 すべてのホストからの読みこみが可能 |
という意味合いになる。
(script-src のところが、雑な気がしているが…こうしないとローカルのJavaScriptと外部ホストのJavaScriptの両方を読み込む事が出来なかった。)
ビルド・確認
今まで通りのビルドを実行して、何も起きなければそのまま実行できます。
Eclipseでビルドしている場合、プロジェクトの再読込を行わないとファイルが入れ替わったことにEclipseが気付かずエラーになります。