STARTUP ENGINEER

Webページを表示するモバイルアプリはよくありますよね。Flutterでは、ウェブページを表示するためのWebViewが用意されています。よく使われるWebViewパッケージや特徴、使い方について解説して行きます。

Flutterって何？

FlutterはGoogleが開発しているモバイルアプリ開発のためのフレームワークです。Dartというプログラミング言語を使って、iOSやAndroidアプリをハイブリッド開発することができます。2つのプラットフォームを1つのフレームワークで開発ができるので、アプリの開発序盤などにとても活躍します。

WebViewの出来ることや特徴

FlutterのWebViewでは、ウェブページを表示することができます。WebViewはパッケージとして用意され、Flutter開発チームが作っているものと、オープンソース開発されているものがあります。それぞれのパッケージによって、内部的な機能やできることが変わってくるので、用途によって使い分ける必要があります。

FlutterでWebViewを実現する方法

WebViewを利用するには、webview_flutterもしくはflutter_inappwebvieというパッケージを使うことが一般的です。目的によってどちらを利用するか変わってきます。それぞれの特徴について紹介して行きます。

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

webview_flutterの特徴や使い方は？

webview_flutterの特徴は以下の通りです。

• flutter.devで開発・メンテナンスされている
• 基本的なウェブビューの機能を利用できる
• AndroidやiOSの機能にアクセスするには対応するパッケージを入れる
• AndroidのWebView、iOSのWKWebViewを利用する

WebViewControllerとNavigationDelegateを利用してコントロールする

webview_flutterを利用する際に重要になってくるのが WebViewController と NavigationDelegate です。WebViewControllerはWebViewに対して、ページを読み込んだり戻ったりといった指示を出すために使います。NavigationDelegateは、ページを読み込んだ時などに完了や失敗などの通知を受け取るためのものです。

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

// WebviewControllerの初期化
controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))

  // NavigationDelegateの初期化
  ..setNavigationDelegate(
    NavigationDelegate(
      // 読み込みが進行状況を通知してくれるメソッド
      onProgress: (int progress) {},
      // 読み込みが開始する時に呼ばれるメソッド
      onPageStarted: (String url) {},
      // 読み込みが完了する時に呼ばれるメソッド
      onPageFinished: (String url) {},
      // 読み込みに失敗した時に呼ばれるメソッド
      onWebResourceError: (WebResourceError error) {},
      // リクエストをどう扱うかを決めるメソッド
      onNavigationRequest: (NavigationRequest request) {
        if (request.url.startsWith('https://www.youtube.com/')) {
          return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
      },
    ),
  )
  ..loadRequest(Uri.parse('https://flutter.dev'));

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Flutter Simple Example')),
    body: WebViewWidget(controller: controller),
  );
}

戻る機能の実装

NavigationControllerからgoBack呼び出すことで、前のページへ戻ることができます。

controller.goBack()

cookieの使い方

webview_flutterは基本的クッキーの値を取得する方法を提供してないため、JavaScriptでクッキーを取得するためのコマンドを実装する必要があります。

final cookies = await _webViewController.runJavascriptReturningResult(
  'document.cookie',
);
print(cookies);

キャッシュの削除

NavigationControllerからclearCacheを実行することで、ウェブページ内のキャッシュを削除することができます。

controller.clearCache();

flutter_inappwebviewの特徴や使い方は？

flutter_inappwebviewには、以下のような特徴があります。

• ウェブビューの設定を細かくカスタマイズできる
• Flutterとウェブコンテンツ間での相互作用もサポート
• AndroidでのWebRTCサポート
• インラインウェブビュー、ヘッドレスウェブビュー、アプリ内ブラウザウィンドウを開く機能をサポート

もっと詳しく知りたいという方は、下記の記事を参考にしてみてください。

Flutterでウェブ表示するflutter_inappwebviewの特徴とその使い方について解説！

InAppWebViewControllerでページ遷移などをコントロールする

flutter_inappwebviewを利用する際に重要になってくるのが InAppWebViewController です。InAppWebViewControllerはInAppWebView上でページを読み込んだり戻ったりといった指示を出すために使います。

ページを読み込んだ時などに完了や失敗などの通知はInAppWebViewが受け取ります。

InAppWebViewController? webViewController;
CookieManager cookieManager = CookieManager.instance();

InAppWebView(
  initialUrlRequest: URLRequest(url: WebUri("https://flutter.dev")),
  // ウィジェットが表示される際に呼ばれるメソッド
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
  // ページの読み込みを開始する時に呼ばれるメソッド
  onLoadStart: (controller, url) {
    setState(() {
      this.url = url.toString();
      urlController.text = this.url;
    });
  },
  // ページの読み込みが中断された時に呼ばれるメソッド
  onLoadStop: (controller, url) async {
    pullToRefreshController?.endRefreshing();
    setState(() {
      this.url = url.toString();
      urlController.text = this.url;
    });
  },
  // ページの読み込みにエラーがあった場合に呼ばれるメソッド
  onReceivedError: (controller, request, error) {
    pullToRefreshController?.endRefreshing();
  },
  // 読み込みが進行状況を通知してくれるメソッド
  onProgressChanged: (controller, progress) {
    if (progress == 100) {
      pullToRefreshController?.endRefreshing();
    }
    setState(() {
      this.progress = progress / 100;
      urlController.text = url;
    });
  },
)

戻る機能の実装

InAppWebViewControllerのgoBack変数を呼び出すことで、ページを戻ることができます。

webViewController?.goBack()

cookieの使い方

flutter_inappwebviewではcookieを取得するための機能が提供されています。

List<Cookie> cookies = await cookieManager.getCookies(url: url);
print(cookies)

キャッシュの削除

InAppWebViewControllerには、キャッシュを削除するメソッドも用意されています。clearAllCacheという関数を呼び出すことで全てのキャッシュを削除することができます。

webViewController?.clearAllCache()