Help us understand the problem. What is going on with this article?

Cordovaを4.0.0から5.2.0にしてみる

More than 3 years have passed since last update.

少し古めのアプリで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が気付かずエラーになります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away