LoginSignup
48
48

More than 5 years have passed since last update.

Cordovaを4.0.0から5.2.0にしてみる

Posted at

少し古めのアプリでCordova4.0.0で作っていたモノがあったので、5.2.0にしたときのメモ。
あくまでメモということで、間違いとか認識違いあればご指摘頂ければ。

4.0.0と5.2.0での違い(躓いたところ)

  • cordovaで提供されるプラグイン名が変っている
  • ホワイトリストの扱いが変更になっている
  • iOSにおいてContent Security Policy(CSP)の記述が必要

アップデート手順

  1. バックアップ
  2. そもそものCordovaを5.2.0にする
  3. platformをアップデート
  4. プラグインを入れ替え
  5. ホワイトリスト対策
  6. Content Security Policy(CSP)
  7. ビルド・確認

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が気付かずエラーになります。

48
48
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
48
48