JavaScript

【Flutter】WebView_Flutterを使ってDartとJavaScript間でデータのやりとりをする方法

前回の記事でFlutterにWebViewを使うことができるWebView_Flutterという公式プラグインについてご紹介しました。

今回は、Webview_Flutterを使ってどうやってFlutterアプリ(Dart)とWebページ(JavaScript)間でデータ交換をするのかについて紹介していこうかと思います。

前回同様、あまり情報がなく基本的に私が試した内容を紹介する為、正確な方法なのか正しい認識なのかは少しわからない点もあります。

Webview_Flutterの導入と基本的な使い方については前回の記事をご覧ください。

【Flutter】WebViewを使ってWebサイトとローカルHTMLファイルを表示させる方法

 

データ交換のやり方

どうやってデータ交換するの?

データ交換というのは、「アプリ側でボタンをクリックした時にWebページのJavaScriptのこの関数を呼び出して」とか、「できればその関数に引数を渡してあげて」ということが出来ればDartの情報をJavaScriptに受け渡すことができそうです。

逆も然りです。

つまり、DartもJavaScriptも、自分がなんらかのイベントを取得したら、もう片方にイベントの発生を通知させるというやり方をとります。

 

下準備

データ交換について、こちらの記事を参考にしました↓

https://medium.com/@yubarajpoudel708/flutter-webview-8116f090e9de

 

上の記事を参考に今回テストデータとして、以下の内容のtest.htmlとmain.dartを用意しました。

 

htmlに配置したbuttonを押すと、中央のボックスの色がランダムに変化するというページを表示させています。

1. DartからJavaScriptの関数を呼び出す

まずは、DartからJavaScriptを操作する方法から。

FloatingActionButtonを画面下に配置させ、押すとWebページのボックスの色が変わるようにしてみます。

main.dartを以下のように修正します。

これで実行すると下のようになります。

Flutterアプリに配置したボタンを押してWebページのボックスの色が変化するようになりました。

これは、WebViewControllerクラスにある、「evaluateJavascript」関数を利用してJavaScriptの関数を呼び出しています。

使い方は、evaluateJavascript関数の引数に、呼び出したいJavaScriptの関数を文字列で渡してあげるだけです。

ただし、呼び出せる関数は読み込んだWebページ(HTMLファイル)で定義されているものに限ります。

ちなみに、引数を指定して渡すことも可能です。(おそらく文字列のみ)

 

2. JavaScriptからDartの関数を呼び出す

次はJavaScript→Dartの呼び出しを試してみます。

今回は、HTMLのbuttonタグが押されたら、アプリケーションバーのタイトルが変更されるようにしてみます。

main.dartとtest.htmlファイルをそれぞれ以下のように修正します。

Statelessウィジェットだと更新がかけられないので、MyAppをStatefulウィジェットに変更しています。

実行すると以下のようにボタンを押すとタイトルが変更されました

 

WebViewウィジェットの「javascriptChannels」という引数を指定することでJavaScriptからのイベントのキャッチと引数を受け取ることができるようになります。

イベントをキャッチするタイミングは、JavascriptChannelクラスの引数「name」に設定した名前と同じ名前のJavaScript変数と紐づいており、「変数.postMessage = “あいうえお”」のように「postMessage」に値が挿入されると、Dart側でトリガーとなり「onMessageReceived」内の処理が行われます。

onMessageReceivedの中に処理させたい関数を指定しておけば、JavaScript側から実質的にDart側の関数を呼び出すことができます。

また、onMessageReceivedには「JavascriptMessage result」という引数が用意されています。

「result.message」とすることで「変数.postMessage = “あいうえお”」のように指定した文字列を受け取ることができます。

(こちらもおそらく文字列のみの受け渡しです)

 

まとめ

少し長くなってしまいましたが、Flutterでも比較的簡単にWeb間とのデータ通信が行えることがわかりました。

私のようにFlutterでWebViewの導入を検討されている方の助けになれば幸いです!

【Flutter】WebViewを使ってWebサイトとローカルHTMLファイルを表示させる方法

FlutterにもWebViewを使うことができるWebView_Flutterという公式プラグインがあります。

この記事では、このプラグインを使ってアプリにWebサイトの表示とアプリの中に実装したローカルHTMLファイルを表示させる方法を紹介します。

pub.dev: https://pub.dev/packages/webview_flutter

 

ただ、WebViewを取り扱っている日本語ドキュメントが少なく、英文もしくは中国語ばっかりだったので(2019年現在)、私のできる範囲で調査した内容をこの記事で紹介します。

私のようにFlutterでWeb技術を搭載したいと考えている人の参考になればと思います。

続きを読む

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

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

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

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

続きを読む

NativeScript-vue入門!特徴と環境作成について

Web開発技術を利用したスマホ向けアプリのクロスプラットフォーム開発(1つのソースでAndroid / iOS両方のアプリを動かす開発方法)というと、CordovaMonacaionicなどのWebViewを軸にした開発方法を思い出しますが、今回紹介する、「NativeScript-vue」は少し異なった特徴を持っています。

続きを読む

【JS】オシャレで高機能なテキストエディタプラグインQuill.jsの使い方

JavaScriptにはブログのような記事を書くことができるWYSIWYG(カスタマイズ可能な高機能エディタ)エディタプラグインがいくつかありますが、私のおすすめ(これしか使ったことない…)のQuill.jsというプラグインの使い方を紹介します。

ちなみに無料・商用利用OKのプラグインです。

続きを読む