WebView翻訳(自動翻訳)

現在、WOVN SDKはwebview_flutterパッケージを使用して作成されたWebViewのみをサポートしています。しかし、同様のアプローチを用いて他の種類のWebViewを翻訳することも可能です。別のライブラリを使用している場合は、サポートのためにお問い合わせください。

WebView翻訳の仕組み

WebViewを翻訳可能にするには、WOVNがWebViewにJavaScriptを注入する必要があります。WebViewがローカルコンテンツまたはオンラインコンテンツを読み込んでいるか、どのトークンを使用しているか、その他のパラメータによって動的に生成されたJavaScriptコードが挿入されると、このJavaScriptがWebViewで表示される言語を制御します。

webview_flutterパッケージのWebViewを翻訳する方法

1. 各WebViewには固有のcontrollerが必要です。Wovn().followWebViewController(controller)メソッドを用いて、このcontrollerをWOVN SDKに登録してください。

2. さらに、WebViewが読み込まれるたびにWovn().translateWebViews()を呼び出す必要があります。これは、WebViewが複数回読み込まれた場合でも正しく翻訳されるようにするためです。WebViewが一度しか読み込まれないことが保証されている場合は、この呼び出しを省略しても構いません。

完全なサンプル

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: (String url) {
            // ページが読み込まれたらWebViewを翻訳するためにWOVNを呼び出す
            Wovn().translateWebViews();
          },
        ),
      )
      ..loadRequest(
          Uri.parse('https://wovn-app.neocities.org/webview/android.html?token=${Wovn().token}')
      );

    // このcontrollerをWOVN SDKに登録
    Wovn().followWebViewController(_controller, shouldTranslateImmediately: false);
  }

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