ホーム 変更履歴

Flutter WebView SDK ガイド

概要

AdMel WebView SDK (admel_webview_sdk) は、WebViewを使用するFlutterアプリ向けの拡張パッケージです。
admel_sdk をベースに、以下の機能を追加します：

  • BGMダッキング — 広告再生中にWebView内の <audio> 要素の音量を自動的に下げ、広告終了後に復元
  • WebViewHelper — メディア自動再生が有効化された WebViewController の作成

1. インストール

1.1. パッケージの追加

pubspec.yaml に admel_webview_sdk を追加します。 admel_sdk は推移的依存として自動的にインストールされるため、個別に追加する必要はありません。

dependencies:
  admel_webview_sdk: ^1.0.0
flutter pub get

1.2. 依存パッケージ

admel_webview_sdk は以下のパッケージに依存しています：

パッケージ 説明
admel_sdk AdMelコアSDK
webview_flutter Flutter WebViewプラグイン
webview_flutter_wkwebview iOS用WebView実装
webview_flutter_android Android用WebView実装

2. 基本的な使い方

2.1. 実装例

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

class GamePage extends StatefulWidget {
  const GamePage({super.key});

  @override
  State<GamePage> createState() => _GamePageState();
}

class _GamePageState extends State<GamePage> {
  final _admelSdk = AdMelSdk();
  late final AdMelWebViewSdk _webViewSdk;
  late final WebViewController _webController;

  @override
  void initState() {
    super.initState();

    // 1. AdMelWebViewSdkの初期化（BGMダッキングはデフォルトで有効）
    _webViewSdk = AdMelWebViewSdk(admelSdk: _admelSdk);

    // 2. WebViewControllerの作成（メディア自動再生対応）
    _webController = AdMelWebViewHelper.createController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://example.com/game'));

    // 3. WebViewControllerを登録
    _webViewSdk.setWebViewController(_webController);

    // 4. AdMel SDKの初期化と広告表示
    _initAd();
  }

  Future<void> _initAd() async {
    await _admelSdk.setMediaId('your_media_id');
    await _admelSdk.initialize(AdMelEnvironment.production);
    await _admelSdk.showAd('your_slot_id', position: 'top-right');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(controller: _webController),
    );
  }
}

3. AdMelWebViewSdk

コンストラクタ

AdMelWebViewSdk({
  required AdMelSdk admelSdk,
  double bgmDuckingVolume = 0.2,
})
引数 型 デフォルト 説明
admelSdk AdMelSdk (必須) コアSDKインスタンス
bgmDuckingVolume double 0.2 広告再生中のBGM音量（0.0〜1.0）

BGMダッキングはデフォルトで有効です。広告が再生されると、WebView内の全ての <audio> 要素の音量が bgmDuckingVolume に下げられ、広告停止時に 1.0 に復元されます。

setWebViewController(WebViewController controller)

void setWebViewController(WebViewController controller)

BGMダッキング対象の WebViewController を登録します。

引数 型 説明
controller WebViewController 対象のWebViewコントローラー

enableBgmDucking({double volume})

void enableBgmDucking({double volume = 0.2})

BGMダッキングを有効にします。

引数 型 デフォルト 説明
volume double 0.2 広告再生中のBGM音量

disableBgmDucking()

void disableBgmDucking()

BGMダッキングを無効にします。

pauseBgm()

void pauseBgm()

WebView内の全ての <audio> 要素をミュートします。
画面遷移時に呼び出してください（WebViewが表示されていない画面に移動する際）。

resumeBgm()

void resumeBgm()

WebView内の全ての <audio> 要素を通常音量に復元します。
WebView画面に戻った時に呼び出してください。

例：画面遷移時のBGM制御

void _onItemTapped(int index) {
  if (_currentIndex == 1) {
    // ゲーム画面から離れる → BGMをミュート＆広告を一時停止
    _admelSdk.pause();
    _webViewSdk.pauseBgm();
  }

  if (index == 1) {
    // ゲーム画面に戻る → BGMを復元＆広告を再開
    _webViewSdk.resumeBgm();
    _admelSdk.resume();
  }

  setState(() {
    _currentIndex = index;
  });
}

4. AdMelWebViewHelper

WebView のメディア自動再生を有効にするヘルパークラスです。

createController()

static WebViewController createController()

メディア自動再生が有効化された WebViewController を作成します。

プラットフォーム別の設定:

プラットフォーム 設定内容
iOS (WKWebView) mediaTypesRequiringUserAction を空に設定、インラインメディア再生を有効化
Android mediaPlaybackRequiresUserGesture を無効化

例

final controller = AdMelWebViewHelper.createController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse('https://example.com'));

AdMelWebViewHelper.createController() を使用しない場合、モバイルWebViewのデフォルト設定により <audio> / <video> の自動再生がブロックされることがあります。

5. アプリライフサイクル対応

アプリのライフサイクル変更時に、適切に再生制御を行うことを推奨します。

class _MyPageState extends State<MyPage> with WidgetsBindingObserver {

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.paused ||
        state == AppLifecycleState.inactive) {
      _admelSdk.pause();
      _webViewSdk.pauseBgm();
    } else if (state == AppLifecycleState.resumed) {
      _webViewSdk.resumeBgm();
      _admelSdk.resume();
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
}

6. パッケージ構成

admel_webview_sdk/
├── lib/
│   ├── admel_webview_sdk.dart       # パッケージのエクスポート
│   └── src/
│       ├── admel_webview_sdk.dart    # AdMelWebViewSdk クラス
│       └── admel_webview_helper.dart # AdMelWebViewHelper クラス
└── pubspec.yaml

7. 次のステップ