Flutter WebViewでアプリ内にWebページを表示する方法

モバイル開発•2025/1/22

Flutter WebViewとは

FlutterはDartという言語を使ってモバイルアプリを作るフレームワークです。 iOSとAndroidの両方に対応している点が特徴ですね。その中でWebViewを使うと、アプリ内にWebページを表示できます。 React Nativeなどにも同様の仕組みがあるので、モバイルアプリでWebコンテンツを扱う方法のひとつといえます。

皆さんが既存のWebページを持っていて、アプリでも同じ内容を見せたい場面は多いでしょう。たとえば、外部のリンク先や内部用の管理画面などをアプリに統合したいことがあるかもしれません。そこで活躍するのがFlutterのWebViewです。ただ、ネイティブコードとWebの架け橋になる部分なので、慣れないうちは扱い方に戸惑うかもしれません。

アプリの利便性とWebの柔軟さを両立したいときにWebViewは役立ちます。ただし、利用する際には注意点もあるので、次のセクションから詳しくみていきましょう。

WebViewのメリットと実務での利用シーン

WebViewを使う最大の利点は、モバイルアプリ内でそのままWebページを開けることです。外部ブラウザへの遷移を減らし、ユーザーがアプリ内で完結しやすくなります。それによって離脱率を抑え、アプリの操作性を高めることが期待できます。

実務での利用シーンをイメージすると、会員サイトへのログインページや決済ページがわかりやすいかもしれません。既存のWebシステムを再開発するコストをかけず、アプリからWebシステムを呼び出すだけで機能を共有できます。また、外部サービスのマップや問い合わせフォームを、組み込み要素として利用するケースもあるでしょう。

UIをすべてFlutterで作るのではなく、一部だけWebViewに任せることで開発工数を削減できます。さらに、社内ポータルサイトのようなものを内製アプリで参照することも考えられます。 WebViewは多用途に使えますが、トラブルを避けるために利用手順をしっかり把握することが大切です。

WebViewを導入する基本手順

FlutterでWebViewを使うには、webview_flutterというパッケージを利用します。 pubspec.yamlに依存関係を追加し、インストールしてからコードで呼び出します。


dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0
  webview_flutter: ^4.0.0

dependenciesに上記のように指定したら、あとはFlutterプロジェクトでflutter pub getを実行します。これでWebView関連の機能をプロジェクトに組み込めます。 AndroidやiOSの設定が自動的に反映されるので、細かいネイティブ設定を意識する必要はあまりありません。

WebViewを使う前には、iOSの場合にInfo.plistへインターネットアクセス関連の設定を書き加える必要があります。ただ、Flutterプロジェクトを新規に作成している場合は、すでにインターネット接続が許可されている設定になっていることが多いです。次のセクションでコードの書き方をみていきましょう。

WebViewを表示するコード例

WebViewを表示するためには、WebViewウィジェットを画面に配置します。 StatelessWidgetかStatefulWidgetの中で使えますが、ページ遷移と一緒に使うことが多いので、基本的にはStatefulWidgetが多いでしょう。


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

class WebViewExample extends StatefulWidget {
  const WebViewExample({Key? key}) : super(key: key);

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController();
    _controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse("https://example.com"));
  }

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

ここでWebViewControllerを使い、表示するURLを指定しています。 JavaScriptを有効にするかどうかはsetJavaScriptModeで設定可能です。動作の細かな制御はコントローラで行います。

皆さんが独自のWebページを表示したい場合は、loadRequestのURLを変更しましょう。必要に応じて状態管理や読み込みの進捗を追跡できる仕組みを用意すると、ユーザー体験が向上します。

WebViewを使う上での注意点

WebViewはWebコンテンツをそのままアプリに表示しますが、いくつかの注意点があります。たとえば、ページによってはJavaScriptの実行が求められるため、JavaScriptMode.unrestrictedを設定するか検討してください。一方で、JavaScriptの取り扱いにはセキュリティリスクもあるので、信頼できるページだけに限定するほうが安全です。

また、外部サイトが重かったり、通信状況が悪いと読み込みに時間がかかることがあります。そのため、読み込み中にはプログレスインジケータを表示しておくと、ユーザーが状況を把握しやすくなります。どのタイミングで画面遷移が必要かなど、アプリ側のフローも整理しておきましょう。

さらに、iOSのバージョンによってはメモリ消費量が大きくなるケースがあります。アプリの動作をスムーズに保つためにも、必要以上にWebViewを多用しない工夫を検討してください。

WebViewでユーザーデータを入力させるときは、通信経路の安全性を確保してください。

実務で気をつけたいケース

アプリのログインが必要で、Webページ側も認証を求めるケースがあります。この場合は、WebView上でCookieを扱う場面が出てきます。ログイン状態を正しく維持できるかどうかをテストし、画面遷移でセッションが途切れないように留意が必要です。

決済ページをWebViewで表示するケースでは、決済サービスの提供元が推奨する使い方を確認することが重要です。なぜならば、WebView内での決済フローが規約に違反する可能性があるからです。自社と外部サービスをAPI連携する場合には、ブラウザではなくSDKを用意していることもあるため、WebView以外の手段が適切な場合もあります。

もうひとつ、社内システムなど外部からアクセスしにくいサイトを表示する場合は、ネットワーク設定やVPN接続が必須です。アプリをリリースしたあとも、ネットワーク構成が変わると表示できなくなるリスクがあるので、関係部署との調整が欠かせません。

パフォーマンスとUXのポイント

WebViewはブラウザエンジンの機能に依存します。そのため、ネイティブUIと比べて描画速度が遅くなるケースがあります。特にアニメーションが多いWebページだと、体感速度が落ちるかもしれません。

皆さんがアプリの一部だけWebViewにしたい場合、ユーザーが多くの操作を行うページをWebViewに任せると快適性に影響する可能性があります。なるべく操作回数が少なく、情報を閲覧する場面をWebViewにするのがおすすめです。また、スワイプ操作やスクロールの反応が遅れると、ネイティブ感が損なわれます。

ページ読み込みの途中でキャンセルされるような状況を想定し、ユーザーが操作しやすいUIを設計してください。ロードが長引く場合には再読み込みボタンを用意するなど、UX向上の工夫が大切です。

トラブルシューティングとデバッグ方法

WebViewが真っ白なまま表示される場合、URLの指定ミスやHTTP通信関連の問題が多いです。 HTTPSでなければアクセスをブロックするプラットフォームもあるので、通信プロトコルを再確認してみてください。 AndroidエミュレータとiOSシミュレータで挙動が違うケースもあるため、両方チェックすると原因がわかりやすいです。

JavaScriptが思うように動かない場合は、ブラウザのコンソールログを確認したいかもしれません。しかし、FlutterのWebViewでは直接ブラウザのデベロッパーツールが使えないので、printやログ出力を活用してください。必要に応じて、デバッグビルドで表示内容を詳しく把握する工夫をするのが近道です。

WebView内でのリダイレクトやポップアップが多いページだと、想定外の画面遷移が発生しがちです。

まとめ

Flutter WebViewは、既存のWebページをそのままアプリに取り込む仕組みです。モバイルアプリに外部ページを埋め込むときによく選択される手段ですが、JavaScriptの扱い方やパフォーマンス面など考慮すべき点は多いです。導入するときにはpubspec.yamlへの依存関係の追加、iOSやAndroidの設定チェック、そしてコントローラの設定を押さえておきましょう。

WebViewを使うかどうかは、実装コストやユーザー体験などで総合的に判断してください。アプリのUIの大部分をFlutterで構築して、一部をWebViewにする方法は学習コストが低く、既存のWeb資産を生かせます。一方で、通信速度やメモリ使用量にも気を配らなければなりません。

皆さんがFlutterで作るアプリをスピーディに開発するうえで、WebViewは選択肢になりやすい機能です。しかし、Webとネイティブの境界を意識しないと思わぬトラブルが起こりやすいので、今回紹介したポイントを押さえつつ、適切に利用してみてください。