浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【Cordova】iOSでスワイプジェスチャーを有効にする

Cordova アプリを開発中、やっぱりスワイプバックはしたい!ということで、実装することにしました。
で、React での実装方法やら、フレームワークでの実装方法やらを調べて試してみたのですが上手くいかず…。
ですが、Cordova での実装方法を調べていた時に発見したプラグインで簡単に実装できることが判明しました!

それがこちら。
cordova-plugin-wkwebview-engine」というプラグインです。

GitHub – apache/cordova-plugin-wkwebview-engine: Apache Cordova wkwebview engine plugin
https://github.com/apache/cordova-plugin-wkwebview-engine

 

実装方法ですが、まず下記のコマンドでプラグインをインストールします。

cordova plugin add cordova-plugin-wkwebview-engine

こちらが完了したら、config.xml を開きます。
下記の 4行については、プラグインのインストール時に自動で追加されるはずですが、もし追加されていないようでしたら追加してください。

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

私は <platform name="ios"> タグ内に追加しました。

そして、合わせて下記も追加しておきます。

<preference name="WKWebViewOnly" value="true" />

こちらは、cordova-ios5.1.0 以上を使用している場合は、追加した方がいいとのことでした。

 

ここまでが事前準備です。
あとは、スワイプバックを有効にするために、下記の 1行を追加します。

<preference name="AllowBackForwardNavigationGestures" value="true" />

ちなみに、コードで追加する方法もあり、その場合は下記の 1行を任意の場所に追加してください。

window.WkWebView.allowsBackForwardNavigationGestures(true);

おそらく、deviceready が発火した直後辺りで実行すれば問題ないと思います。

追加するのはこれだけです!
実機で確認したところ、予想以上に自然なスワイプバックが実装できていました!

 

ですが、意外なところで問題が発生しております。
こちらのプラグインはアプリで使用する WebViewUIWebView から WKWebView に変更しているのですが、このとき CORS を有効にしないと、API などにアクセスすることができなくなってしまいます。
実際、今まで使用していたログイン機能でエラーが発生しています…。
この辺りの対策って苦手なのですが…何とか頑張ります!

 

以上、Cordova で開発した iOS アプリでスワイプバックを有効にする方法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)