FlutterにもWebViewを使うことができるWebView_Flutterという公式プラグインがあります。
この記事では、このプラグインを使ってアプリにWebサイトの表示とアプリの中に実装したローカルHTMLファイルを表示させる方法を紹介します。
pub.dev: https://pub.dev/packages/webview_flutter
ただ、WebViewを取り扱っている日本語ドキュメントが少なく、英文もしくは中国語ばっかりだったので（2019年現在）、私のできる範囲で調査した内容をこの記事で紹介します。
私のようにFlutterでWeb技術を搭載したいと考えている人の参考になればと思います。
目次
WebViewをプロジェクトに導入する
こちらの記事を参考にさせていただきました
Google公式Flutter用WebViewプラグインを一通り使ってみた
WebView_Flutterのインストール
上記したpub.devや解説動画にもある通りの手順で導入していきます。
まず、pub spec.yml（Flutterのプラグインなどを管理するファイル）にWebView_Flutterを追加します。
|
1 2 3 4 5 |
dependencies: flutter: sdk: flutter # webviewプラグイン ↓ここに記述します。インデントは上の「flutter」と同じ位置です webview_flutter: ^0.3.15+1 |
次に、「flutter pub get」をコマンドラインで実行とありますが、VisualStudio Codeを使用している場合、ymlファイルを上書き保存するだけで自動でこのコマンドを実行してくれます。
iOSでも有効化させる
iOSでも有効にするために、「ios/Runner/Info.plist」を開き以下のように記述を追加します。
|
1 2 |
<key>io.flutter.embedded_views_preview</key> <true/> |
import
最後に、WebViewを使用するDartファイルトップにimportします。
|
1 |
import 'package:webview_flutter/webview_flutter.dart'; |
WebViewプラグインを使ってWebサイトを開く
まずはGoogle検索ページを表示させてみます。
main.dartを以下のように変更を加えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text('Webテスト'), ), body: WebView( // ←WebViewプラグインのウィジェット //initialUrl: 呼び出すWebサイトのURLを文字列で渡す initialUrl: 'https://google.com', // JavaScriptを有効化させます javascriptMode: JavascriptMode.unrestricted, ), ), ); } } |
「WebView」というウィジェットが使えるようになっているので、このウィジェットで設定を行なっていきます。
ここでは下の二つの引数に値を渡しています。
| 引数 | 内容 |
|---|---|
| initialUrl: | 呼び出すWebサイトのURLを文字列で渡す |
| javascriptMode: | JavaScriptを有効無効を設定。
JavascriptMode.unrestricted 有効 JavascriptMode.disabled 無効 |
ここまで設定できたら、デバックモードでアプリを実行してみましょう。
Googleの検索ページをただ表示させているだけですが、アプリにWebページを埋め込むことができました。
ローカルHTMLファイルを読み込む
Webサイトのページを読み込む以外にも、ローカルHTMLファイルにアクセスすることも可能です。
今回読み込ませる「test.html」ファイルはこちら↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- ビューポートの設定 --> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <div>HELLO!!HTML!!</div> <div>HTMLファイルは無事読み込まれました</div> </body> </html> |
文字列を表示させるだけのシンプルなHTMLファイルです。
HTMLファイルを読み込ませるには、assetsフォルダー内にHTMLを格納してpubspec.ymlに宣言しておく必要があります。
↓こちらのサイトを参考にしました。
Flutter – Read text file from assets
まず、プロジェクトルート直下に「assets」というフォルダーを用意します。
その中に、「test.html」ファイルを設置します。
その後、pubspec.ymlに以下のように記述してフォルダー内のファイルの使用を宣言します。
|
1 2 3 4 5 6 |
# To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg assets: - assets/ |
これでtest.htmlファイルを利用する準備が出来たので、早速呼び出してみます。
先ほどのmain.dartを以下のように修正します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() => runApp(MyApp()); WebViewController _controller; // WebVewコントローラー class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text('Webテスト'), ), body: WebView( // onWebViewCreatedはWebViewが生成された時に行う処理を記述できます onWebViewCreated: (WebViewController webViewController) async { _controller = webViewController; // 生成されたWebViewController情報を取得する await _loadHtmlFromAssets(); // HTMLファイルのURL（ローカルファイルの情報）をControllerに追加する処理 }, javascriptMode: JavascriptMode.unrestricted, ), ), ); } /// HTMLファイルを読み込む処理 Future _loadHtmlFromAssets() async { // HTMLファイルを読み込んでHTML要素を文字列で返す String fileText = await rootBundle.loadString('assets/test.html'); // <WebViewControllerのloadUrlメソッドにローカルファイルのURI情報を渡す> // WebViewControllerはWebViewウィジェットに情報を与えることができます。 // <Uri.dataFromStringについて> // パラメータで指定されたエンコーディングまたは文字セット（指定されていないか認識されない場合はデフォルトでUS-ASCII） // を使用してコンテンツをバイトに変換し、結果のデータURIにバイトをエンコードします。 _controller.loadUrl( Uri.dataFromString( fileText, mimeType: 'text/html', encoding: Encoding.getByName('utf-8') ).toString()); } } |
少しややこしいですが、WebViewControllerというWebView情報を操作できるクラス型の情報をWebView生成時に呼び出されるonWebViewCreatedメソッドから取得しています。
onWebViewCreatedメソッド内で呼び出している_loadHtmlFromAssetsメソッドで、取得したControllerにローカルHTMLの情報を受け渡しています。
修正したら、実行してみます。
JavaScriptとDart間でデータの通信するには？
こちらのやり方は次の記事で紹介したいと思います。
iOSアプリを作成したときにアクセシビリティのVoiceOverを有効にした場合、
正しく読み上げがされない問題への対応を考えていました。
こちらで紹介されていましたWebViewを使うことで解決の糸口が掴めました。
そもそもWebViewの情報も少なかったのでありがたかったです。