【NativeScript-vue】WebViewを使ってアプリ側とデータのやり取りをする方法

  • このエントリーをはてなブックマークに追加

先日、NativeScript-vueで、WebViewとアプリ間でデータのやり取りってどうするんだろう?と疑問に思って実際に調査してみました。

今運営しているAnybookをアプリ化する時に、HTMLを利用したアイテム達をどうしても利用したいと考えていて、Webとアプリの間でデータ通信できたら便利だなぁという考えに至りました。(他にもいろいろ理由がありますが…)

2019年現在、NativeScript-vueの記事はとにかく少ない状況なので、上記のようなデータ通信をやりたい人の助けになればと思います。

WebViewタグでは難しい!?

NativeScriptにはWebページを表示させることができるWebViewタグというものが標準であります。

ですがこのWebViewタグだけでは、データ通信は少し難しいです。

localstorageSQLiteなどをまず考えましたが、以下の理由から実現不可能でした。

 

・localstorage

localstorageはそもそもブラウザにデータを保存させる為の技術で、ブラウザで表示しているわけではないのでデータはアプリ側では扱えません。

 

・SQLiteなどの内部データベース

次にデータベースを考えました。

アプリ側からはNativeScript-Sqliteのようなプラグインを利用すればSQLiteへの読み書きができるようですが、

WebView側(Webページ)はJavaScriptで読むことは出来ても、書きこむことが出来ません。

(厳密には出来るの方法があるのかもしれませんが…)

同じ理由でJSONファイルにデータ登録してのやり取りもボツで、Web側では書き込みが出来ません。

 

WebView拡張プラグインに頼ろう!

どうしても己の力では解決しそうになかったので、機能拡張プラグインを探すことに。

最初に「Nativescript-WebView-Interface」というWebView拡張で人気のあるらしいプラグインを見つけました。

しかし、Vue版はサポート対象外で、海外記事をあさりましたが「Vue版での使い方がわからない」という文献だけが沢山見つかるだけでした…涙

 

NativeScript WebView Interfaceを一度諦めて別のプラグインがないか調査していると、Vueもサポートしている「nativescript-webview-ext」というプラグインを発見しました。

結論から言いますと、このプラグインでWebView×アプリの疎通を取る事が概ね可能でした!

(概ねな理由は後述します)

 

nativescript-webview-extの使い方

インストール&準備

GitHubのREADMEの通り、下のコードでインストールします。

拡張されたUIを利用できるようにするため、main.jsに以下のコードを追加する。

参考:NativeScriptのプラグインを使う

 

App.vue(アプリページ)の設定

main.jsに設定した「WebViewExt」というタグを利用出来るようになります。

このタグは、GitHubのREADMEにあるような様々な関数やイベントを扱う事が出来ます。

「@eventTest」というイベントを入れていますが、このように自作したイベントを設定することでWebViewからのイベントを取得することが出来ます。

 

WebViewのイベントをアプリ側でキャッチする方法

前提としてApp.vueにこのようなWebViewExtタグを用意したとします。

「@eventTest」はイベント名で、WebView側のjavaScriptで使用します。

「”eventtest”」はApp.vueに作った関数名です。このイベントをキャッチした時に関数を起動させます。

【App.vue(アプリ側)】

【hoge.html(Web側)】

 

これでWebView内のhoge.htmlの「hoge_event」関数が呼び出されると、App.vueの「eventtest」関数が呼び出されるようになります。

下のように情報のやり取りが可能になります。

 

ちなみに、戻り値を設定出来るようですが、どうやってアプリ側で戻り値を取り出せばよいかわかっていません…。

これが上記した「概ね」の原因で、知っている方がいれば教えてほしいです!

 

アプリのイベントをWebView側でキャッチ

WebViewタグに対してJavaScriptコードを発行することが出来ます。

下のように情報の受け渡しが可能になります。

 

まとめ

どうにかNativeScript-VueでもWebView・アプリ間でデータのやり取りを行う事が出来そうでした。

しかし、NativeScript-Vueはまだリリース間もないこともあり参考記事が本当に少ないです。

ですが、Vueでネイティブのようなクロスプラットフォームアプリ開発が出来るのはかなり魅力的なので、日本でNativeScriptが盛り上がってほしいなと思います。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメント

  1. SkyWind より:

    データを取得する方法がわかりました。
    下記argsから取得できます。
    methods: {
    eventtest(args) {
    console.log(“WebViewからのイベント確認”);
    }
    }

    args.objectはWebViewExtのオブジェクトです。
    args.dataはwebViewから送られてくるデータです。

SkyWind へ返信する コメントをキャンセル

*