【cordova】WKWebViewを使ってiOSアプリを劇的に軽くする方法

作成中のゲームを実機でテストプレイしてみたところ、めちゃくちゃ重い……。

マップをかなり小さくしないとFPSが30切ってしまい、カクカクでゲームになりません。

調べてみたところ、デフォルトで使われているUIWebViewというものをWKWebViewにすると軽くなるみたいなのでやってみたところ、FPSが20～30ほどあがって劇的に動作が改善されました。

cordovaのプラグインを2つ入れてconfig.xmlにちょこっと追加するだけなので、かんたんに導入できます。

手順を解説します。

cordovaプラグインを使ってWKWebViewを導入する

cordova-plugin-wkwebview-engineのインストール

ターミナルで以下のコマンドを入力し、Returnキーを押します。

cordova plugin add cordova-plugin-wkwebview-engine

cordova-plugin-wkwebviewxhrfixのインストール

cordova-plugin-wkwebview-engineだけだとローカルファイルが読み込めずアプリが起動しない問題があるので、修正プラグインも入れます。

ターミナルで以下のコマンドを入力し、Returnキーを押します。

cordova plugin add https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix

config.xmlの編集

Xcodeでプロジェクトを開き、config.xmlの <widget> タグの中に以下を追加します。

<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />  

わたしは </widget> の直前に入れてみました。

ビルド

プロジェクトを保存し、ターミナルからcordova buildでビルドして完了です。

参考にさせていただいたページ

• [RPGツクールMV] iOSアプリ化のためのWKWebView構築手順
• cordova-plugin-wkwebview-engineマニュアル（英語）
• WKWebView でローカルファイルにアクセスできないとき

まとめ

以上、WKWebViewを使ってiOSアプリを劇的に軽くする方法でした。

RPGツクールMVで作ったゲームで試してみたら50×50のマップサイズでイベント50個くらい置いても50FPSくらいでるので、わりと広いマップも作れそうです。