メインコンテンツまでスキップ

WebView 連携

Flutter SDK v4 は webview_flutter パッケージで作成した WebView の翻訳をサポートしています。各 WebViewController を SDK に登録すると、WOVN が必要なスクリプトを注入し、アプリの言語と WebView 内の言語を同期します。

仕組み​

  1. コントローラ登録 – Wovn().followWebViewController(...) で各 WebViewController を登録します。SDK が参照を保持し、JavaScript を準備します。
  2. 翻訳トリガー – WebView の読み込み完了時 (または任意のタイミング) に Wovn().translateWebViews() を呼び出し、遷移後も現在の言語を反映します。
  3. トークンの付与 – リモート URL を読み込む場合、必要に応じて ?token=${Wovn().token} のようにトークンをクエリに付与します。

実装例​

class WebViewWithWovnScriptScreen extends StatefulWidget {
  final String title;
  const WebViewWithWovnScriptScreen({super.key, required this.title});

  @override
  State<WebViewWithWovnScriptScreen> createState() => _WebViewWithWovnScriptScreenState();
}

class _WebViewWithWovnScriptScreenState extends State<WebViewWithWovnScriptScreen> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageFinished: (_) => Wovn().translateWebViews(),
        ),
      )
      ..loadRequest(
        Uri.parse('https://wovn-app.neocities.org/webview/android.html?token=${Wovn().token}'),
      );

    Wovn().followWebViewController(
      _controller,
      shouldTranslateImmediately: false,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: wovnAppBar(widget.title, context),
      body: WebViewWidget(controller: _controller),
    );
  }
}
WebView 翻訳の例

ヒント​

  • followWebViewController はコントローラ生成直後 (例: initState) に呼び出してください。
  • WebView の読み込みが 1 回だけの場合は shouldTranslateImmediately: true を使うと translateWebViews() を呼ばずに済みます。
  • ローカル HTML を表示する場合は、注入スクリプトが動作するよう JavaScript を許可してください。
  • 別の WebView パッケージを使う場合は WOVN サポートへご相談ください。同じ二段階 (登録 + 翻訳) の考え方で対応できることが多いです。