2019年 11月 の投稿一覧

【Rails】WindowsでRails5からRails6にバージョンアップさせる②

前回の記事の続きで、既存サービスをRails5からRails6へバージョンアップについてです。

前回はこちら↓

【Rails】WindowsでRails5からRails6にバージョンアップさせる

 

この記事では、Gemfile再構成~rails serverコマンドで起動まで紹介します。

 

今回修正する既存のアプリの元のバージョン

・Ruby 2.4.4

・Rails 5.2.1

続きを読む

【Rails】WindowsでRails5からRails6にバージョンアップさせる

Rails6が登場して、既存のアプリもいつかバージョン上げないとなと前から思っていたのですが、Flutterでアプリ開発を行う前にと思い、ついにバージョン上げの作業を開始しました。

私のローカル環境はWindowsでしたので、ここではWindowsでのやり方をメインに進めていきます。

少し長くなりそうなので、この記事ではRubyとRailsのバージョンアップまでを紹介して、それ以降はまたの記事で紹介します。

 

既存のアプリの元のバージョン

・Ruby 2.4.4

・Rails 5.2.1

続きを読む

【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の導入を検討されている方の助けになれば幸いです!