Flutter アプリに AdMob 広告を追加する

作成するアプリの概要

この Codelab では、AdMob バナー、インタースティシャル広告、リワード広告を、「Awesome Drawing Quiz」というアプリ(絵の名前を当てるゲーム)に追加します。

この Codelab で問題(コードのバグ、文法的な誤り、不明確な表現など)が見つかった場合は、Codelab の左下隅にある [誤りを報告] をクリックして問題を報告してください。

学習内容

  • Flutter アプリ用の Firebase プロジェクトの設定方法
  • Firebase AdMob プラグインの設定方法
  • Flutter アプリでバナー広告、インタースティシャル広告、リワード広告を使用する方法

必要なもの

  • Android Studio 3.6 以上
  • Xcode(iOS の場合)

AdMob の使用経験についてお答えください。

初心者 中級者 上級者

この Codelab で学びたいことは次のどれですか?

このトピックは初めて受講するので、簡単に概要を知りたい。このトピックについてはある程度知っているが、復習したい。プロジェクトで使用するサンプルコードを確認したい。特定の項目に関する説明を確認したい。

Flutter 開発環境をセットアップする

  1. flutter.dev のインストール手順に沿って、Flutter SDK をマシンにインストールします。
  2. Android Studio を開き、設定ページの手順に沿って、Android Studio 用の Flutter プラグインと Dart プラグインをインストールします。

コードをダウンロードする

この Codelab のすべてのコードを zip ファイルとしてダウンロードするには、次のボタンをクリックします。

ソースコードをダウンロード

zip ファイルからファイルを抽出します。これにより、admob-ads-in-flutter-master という名前のルートフォルダが展開されます。

または、コマンドラインから GitHub リポジトリのクローンを作成します。

$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter

リポジトリには次の 2 つのフォルダが含まれています。

  • android_studio_folder.pngstarter: この Codelab で作成するコードの基本となる開始用コード。
  • android_studio_folder.pngcomplete: この Codelab の完全なコード。

スターター プロジェクトをインポートする

  1. Android Studio を開きます。
  2. ウェルカム画面で、[Open an existing Android Studio project] を選択します。a3a1fa1afc967e37.png
  3. 前のステップでダウンロードしたコードから、android_studio_folder.pngstarter フォルダを開きます。

a879fa2385ba368f.png

  1. [Dart Analysis] タブに次のエラー メッセージが表示されることがあります。このエラーは、既存のプロジェクトを Android Studio にインポートするときに 1 回のみ発生します。これは、サンプル プロジェクトで使用されているパッケージがまだダウンロードされていないためです。

2b8fbccf84e1e8a5.png

  1. このエラーを修正するには、エディタペインの上部にある [Get dependencies] をクリックします。サンプル プロジェクトが依存するパッケージがダウンロードされます。

dc017166e44ac333.png

  1. ダウンロードが完了すると、[Dart Analysis] タブにエラーが表示されなくなります。これで、プロジェクトを開発する準備が整いました。

Firebase AdMob プラグインを使用して AdMob 広告を配信するための Firebase プロジェクトを設定する必要があります。

Firebase プロジェクトを作成する

  1. Firebase コンソールで [プロジェクトを追加] をクリックします。
  2. プロジェクト名として「Awesome Drawing Quiz」と入力します。
  3. プロジェクトで Google アナリティクスを有効にして、[続行] をクリックします。

87590d75b00db648.png

  1. プロジェクトに適用するアナリティクスの場所と設定を選択します。利用規約を読んだうえでこれに同意し、[プロジェクトを作成] をクリックします。

700c64d82fedbd0b.png

  1. 約 1 分後に Firebase プロジェクトの準備が整います。

アプリを Firebase に登録する

Firebase コンソールで、前のステップで作成した Awesome Drawing Quiz プロジェクトを選択します。

Android アプリを登録する

  1. プロジェクトの概要ページの中央で、Android アイコンをクリックして設定ワークフローを起動します。
  2. [Android パッケージ名] に「com.codelab.awesomedrawingquiz」と入力します。
  3. [アプリのニックネーム] に「Awesome Drawing Quiz (Android)」と入力します。
  4. [アプリの登録] をクリックします。
  5. 後で使用するために、google-services.json ファイルをダウンロードします。

iOS アプリを登録する

  1. プロジェクトの概要ページの中央で、iOS アイコンまたは「アプリを追加(+)」アイコンをクリックして、設定ワークフローを起動します。
  2. [iOS バンドル ID] に「com.codelab.awesomedrawingquiz」と入力します。
  3. [アプリのニックネーム] に「Awesome Drawing Quiz (iOS)」と入力します。
  4. [アプリの登録] をクリックします。
  5. 後で使用するために、GoogleService-Info.plist ファイルをダウンロードします。

Firebase 構成ファイルを追加する

以下の手順では、Android 用および iOS 用に Firebase を構成する方法を説明しています。

Android 用に構成する

  1. この Codelab の開発環境をセットアップするステップのスターター プロジェクトをインポートするセクションを参考にして、Android Studio のスターター プロジェクトを開きます。
  2. google-services.json ファイルを Awesome Drawing Quiz Flutter プロジェクトの android/app ディレクトリに移動します。

bd0729c424b0c79d.png

  1. ルートレベル(プロジェクト レベル)の Gradle ファイル(android/build.gradle)に、Google サービスの Gradle プラグインを含めるためのルールを追加します。Google の Maven リポジトリがあることを確認します。

android/build.gradle

buildscript {

    repositories {
      // Check that you have the following line (if not, add it):
      google()  // Google's Maven repository
    }

    ...

    dependencies {
      ...

      // TODO: Add Google Services plugin
      classpath 'com.google.gms:google-services:4.3.3'
    }
}

allprojects {
    ...

    repositories {
      // Check that you have the following line (if not, add it):
      google()  // Google's Maven repository
      ...
    }
}
  1. モジュール(アプリレベル)の Gradle ファイル(android/app/build.gradle)で、Google サービスの Gradle プラグインを適用します。

android/app/build.gradle

...

// TODO: Apply google-services plugin
apply plugin: 'com.google.gms.google-services'

android {
  ...
}

...

iOS 用に構成する

  1. この Codelab の開発環境をセットアップするステップのスターター プロジェクトをインポートするセクションを参考にして、Android Studio のスターター プロジェクトを開きます。
  2. ios ディレクトリの任意のファイルを開きます(例: ios/Runner/AppDelegate.swift)。
  3. [Open iOS module in Xcode] をクリックします。

b0e50d31ada7bf46.png

  1. Xcode で GoogleService-Info.plist ファイルを Runner ディレクトリにドラッグして、Xcode プロジェクトに構成ファイルをインポートします。

1f552ff12b67008.png

Flutter はマルチプラットフォーム SDK なので、Android と iOS の両方について、アプリと広告ユニットを AdMob に追加する必要があります。

始める前に、AdMob の次の用語を理解しておく必要があります。

広告ユニット

広告ユニットは、AdMob 広告コードにより表示される広告のセットです。広告ユニットは AdMob アカウントで作成し、カスタマイズできます。

各広告ユニットには、広告ユニット ID と呼ばれる一意の識別子があります。アプリに新しい広告ユニットを実装するときは、この広告ユニット ID を参照して、リクエストがあった際の広告の送信先を広告ネットワークに通知できるようにします。

バナー広告

バナー広告は、デバイス画面の上部か下部にアプリのレイアウト内の一部分を使用して表示されます。アプリの操作中は画面に表示され続けますが、一定時間が経過すると自動的に更新されるよう設定できます。

インタースティシャル広告

インタースティシャル広告は、ホストアプリのインターフェース上に全画面表示される広告です。通常は、次のアクティビティに移行する前や、ゲームレベルをクリアした後の合間など、アプリの操作中に画面が切り替わるタイミングで表示されます。

リワード広告

リワード広告は、ユーザーが広告を操作することと引き換えにアプリ内で報酬を獲得できる広告です。

Android 用に設定する

このセクションでは、AdMob に Android アプリと広告ユニットを追加する方法について説明します。

Android アプリを追加する

AdMob に Android アプリを追加する手順は次のとおりです。

  1. AdMob コンソールで、[アプリ] メニューから [アプリを追加] をクリックします。
  2. 「Google Play または App Store でアプリを公開したことがありますか?」というメッセージが表示されたら、[いいえ] をクリックします。
  3. [アプリ名] に「Awesome Drawing Quiz」と入力し、プラットフォームとして [Android] を選択します。

152e1694fd0ce870.png

  1. ユーザーに関する指標を有効にしなくてもこの Codelab を完了できますが、ユーザー行動の詳細な分析データを得ることができるため、有効にすることをおすすめします。[追加] をクリックして処理を完了します。

5204925f5c652b41.png

  1. 新しいアプリ ID(ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy)をメモします。広告を掲載するには、このアプリ ID をサンプル プロジェクトのソースコードに追加する必要があります。

広告ユニットを作成する

広告ユニットを AdMob に追加するには:

  1. AdMob コンソールの [アプリ] メニューから [Awesome Drawing Quiz(Android)] を選択します。
  2. [広告ユニット] メニューをクリックします。

[広告ユニット] メニューの指示に沿って、バナー、インタースティシャル広告、リワード広告のユニットを作成します。

バナー

  1. [広告ユニットを追加] ボタンをクリックします。
  2. 形式として [バナー] を選択します。
  3. [広告ユニット名] に「android-adq-banner」と入力します。
  4. [広告ユニットを作成] をクリックして処理を完了します。

インタースティシャル

  1. [広告ユニットを追加] ボタンをクリックします。
  2. 形式として [インタースティシャル] を選択します。
  3. [広告ユニット名] に「android-adq-interstitial」と入力します。
  4. [広告ユニットを作成] をクリックして処理を完了します。

リワード

  1. [広告ユニットを追加] ボタンをクリックします。
  2. 形式として [リワード] を選択します。
  3. [広告ユニット名] に「android-adq-rewarded」と入力します。
  4. [報酬の設定] はデフォルトのままにします。
  5. [広告ユニットを作成] をクリックして処理を完了します。

iOS 用に設定する

このセクションでは、AdMob に iOS アプリと広告ユニットを追加する方法について説明します。

iOS アプリを追加する

AdMob に iOS アプリを追加する手順は次のとおりです。

  1. AdMob コンソールで、[アプリ] メニューから [アプリを追加] をクリックします。
  2. 「Google Play または App Store でアプリを公開したことがありますか?」というメッセージが表示されたら、[いいえ] をクリックします。
  3. [アプリ名] に「Awesome Drawing Quiz」と入力し、プラットフォームとして [iOS] を選択します。

a8fa48af652021d8.png

  1. ユーザーに関する指標を有効にしなくてもこの Codelab を完了できますが、ユーザー行動の詳細な分析データを得ることができるため、有効にすることをおすすめします。[追加] をクリックして処理を完了します。

5204925f5c652b41.png

  1. 新しいアプリ ID(ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy)をメモします。広告を掲載するには、このアプリ ID をサンプル プロジェクトのソースコードに追加する必要があります。

広告ユニットを作成する

広告ユニットを追加するには:

  1. AdMob コンソールの [アプリ] メニューから [Awesome Drawing Quiz(iOS)] を選択します。
  2. [広告ユニット] メニューをクリックします。

[広告ユニット] メニューの指示に沿って、バナー、インタースティシャル広告、リワード広告のユニットを作成します。

バナー

  1. [広告ユニットを追加] ボタンをクリックします。
  2. 形式として [バナー] を選択します。
  3. [広告ユニット名] に「ios-adq-banner」と入力します。
  4. [広告ユニットを作成] をクリックして処理を完了します。

インタースティシャル

  1. [広告ユニットを追加] ボタンをクリックします。
  2. 形式として [インタースティシャル] を選択します。
  3. [広告ユニット名] に「ios-adq-interstitial」と入力します。
  4. [広告ユニットを作成] をクリックして処理を完了します。

リワード

  1. [広告ユニットを追加] ボタンをクリックします。
  2. 形式として [リワード] を選択します。
  3. [広告ユニット名] に「ios-adq-rewarded」と入力します。
  4. [報酬の設定] はデフォルトのままにします。
  5. [広告ユニットを作成] をクリックして処理を完了します。

事前構成された AdMob アプリと広告ユニットを使用する(省略可)

新しいアプリと広告ユニットを自分で作成せずに Codelab に従う場合は、この Codelab 用に準備された次の AdMob アプリ ID と広告ユニット ID を使用できます。

Android

Android 用のテスト AdMob ID:

項目

アプリ ID / 広告ユニット ID

AdMob アプリ ID

ca-app-pub-3940256099942544~4354546703

バナー

ca-app-pub-3940256099942544/8865242552

インタースティシャル

ca-app-pub-3940256099942544/7049598008

リワード

ca-app-pub-3940256099942544/8673189370

iOS

iOS 用のテスト AdMob ID:

項目

アプリ ID / 広告ユニット ID

AdMob アプリ ID

ca-app-pub-3940256099942544~2594085930

バナー

ca-app-pub-3940256099942544/4339318960

インタースティシャル

ca-app-pub-3940256099942544/3964253750

リワード

ca-app-pub-3940256099942544/7552160883

Flutter はプラグインを使用して、幅広いプラットフォーム固有のサービスへのアクセスを提供します。プラグインには、各プラットフォーム上のサービスと API にアクセスするためのプラットフォーム固有のコードが含まれています。

firebase_admob プラグインは、AdMob API を使用して、バナー広告、インタースティシャル広告、リワード広告の読み込みと表示をサポートします。

Flutter はマルチプラットフォーム SDK なので、firebase_admob プラグインは iOS と Android の両方に適用されます。そのため、Flutter アプリにプラグインを追加すると、Awesome Drawing Quiz アプリの Android 版と iOS 版の両方で使用されます。

Firebase AdMob プラグインを依存関係として追加する

Awesome Drawing Quiz プロジェクトから AdMob API にアクセスするには、プロジェクトのルートにある pubspec.yaml ファイルに、firebase_admob プラグインを依存関係として追加します。

pubspec.yaml

...

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

  # Add the following line
  firebase_admob: ^0.9.3

...

[Packages get] をクリックして Awesome Drawing Quiz プロジェクトにプラグインをインストールします。

d9fc62bf4054cea9.png

AndroidManifest.xml を更新する(Android)

  1. Android Studio で android/app/src/main/AndroidManifest.xml ファイルを開きます。
  2. AdMob アプリ ID を追加するには、<meta-data> タグを追加し、「com.google.android.gms.ads.APPLICATION_ID」と入力します。AdMob アプリ ID が ca-app-pub-3940256099942544~3347511713 の場合、次の行を AndroidManifest.xml ファイルに追加する必要があります。

android/app/src/main/AndroidManifest.xml

<manifest>
    ...
    <application>
       ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>

</manifest>

Info.plist を更新する(iOS)

  1. Android Studio で ios/Runner/Info.plist ファイルを開きます。
  2. GADApplicationIdentifier キーを追加して AdMob アプリ ID の文字列値を指定します。たとえば、AdMob アプリ ID が ca-app-pub-3940256099942544~1458002511 の場合、次の行を Info.plist ファイルに追加する必要があります。

ios/Runner/Info.plist

...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...

lib ディレクトリに ad_manager.dart という新しいファイルを作成します。次に、AdManager クラスを実装します。このクラスは、Android および iOS 用の AdMob アプリ ID と広告ユニット ID を提供します。

AdMob アプリ ID(ca-app-pub-xxxxxx~yyyyy)と広告ユニット ID(ca-app-pub-xxxxxxx/yyyyyyyy)は、前のステップで作成した ID に置き換えてください。

lib/ad_manager.dart

import 'dart:io';

class AdManager {

  static String get appId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_ADMOB_APP_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_ADMOB_APP_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_BANNER_AD_UNIT_ID";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_BANNER_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_INTERSTITIAL_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_INTERSTITIAL_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_REWARDED_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_REWARDED_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

この Codelab 用に事前構成された AdMob アプリ ID と広告ユニット ID を使用する場合は、次のコード スニペットを使用します。

lib/ad_manager.dart

import 'dart:io';

class AdManager {

  static String get appId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544~4354546703";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544~2594085930";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/8865242552";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/4339318960";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/7049598008";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/3964253750";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/8673189370";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/7552160883";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

広告を読み込む前に、AdMob SDK を初期化する必要があります。lib/home_route.dart ファイルを開き、ゲームが開始される前に SDK を初期化するように _initAdMob() を変更します。

lib/home_route.dart

// TODO: Import ad_manager.dart
import 'package:awesome_drawing_quiz/ad_manager.dart';

import 'package:awesome_drawing_quiz/app_theme.dart';

// TODO: Import firebase_admob.dart
import 'package:firebase_admob/firebase_admob.dart';

import 'package:flutter/material.dart';

...

class _HomeRouteState extends State<HomeRoute> {

  ...

  Future<void> _initAdMob() {
    // TODO: Initialize AdMob SDK
    return FirebaseAdMob.instance.initialize(appId: AdManager.appId);
  }
}

このセクションでは、次に示すようにゲーム画面の最上部にバナー広告を追加します。

580a296a77065928.png 6d6659121dbf382e.png

lib/game_route.dart ファイルを開き、次の行を追加して、ad_manager.dartfirebase_admob.dart をインポートします。

lib/game_route.dart

...

// TODO: Import ad_manager.dart
import 'package:awesome_drawing_quiz/ad_manager.dart';

// TODO: Import firebase_admob.dart
import 'package:firebase_admob/firebase_admob.dart';

class GameRoute extends StatefulWidget {
  ...
}

次に、_GameRouteState クラスに、次のメンバーとメソッドをバナー広告用に追加します。

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd _bannerAd;

  ...

  // TODO: Implement _loadBannerAd()
  void _loadBannerAd() {
    _bannerAd
      ..load()
      ..show(anchorType: AnchorType.top);
  }

  ...
}

initState() メソッドで BannerAd オブジェクトを作成し、バナー広告を読み込みます。320×50 のバナー(AdSize.banner)が表示されます。

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _bannerAd
  _bannerAd = BannerAd(
      adUnitId: AdManager.bannerAdUnitId,
      size: AdSize.banner,
  );

  // TODO: Load a Banner Ad
  _loadBannerAd();
}

最後に、dispose() コールバック メソッドで BannerAd.dispose() メソッドを呼び出して、BannerAd オブジェクトに関連付けられたリソースを解放します。

lib/game_route.dart

@override
void dispose() {
  // TODO: Dispose BannerAd object
  _bannerAd?.dispose();

  ...

  super.dispose();
}

これで完了です。プロジェクトを実行して、ゲーム画面の上部にバナー広告が表示されることを確認します。

d82f07411be93d37.png f221e4821191cf99.png

このセクションでは、ゲーム(合計 5 レベル)の終了後にインタースティシャル広告を表示します。

まず、インタースティシャル広告の次のメンバーとメソッドを _GameRouteState クラスに追加します。

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _interstitialAd
  InterstitialAd _interstitialAd;

  // TODO: Add _isInterstitialAdReady
  bool _isInterstitialAdReady;

  ...

  // TODO: Implement _loadInterstitialAd()
  void _loadInterstitialAd() {
    _interstitialAd.load();
  }

  // TODO: Implement _onInterstitialAdEvent()
  void _onInterstitialAdEvent(MobileAdEvent event) {
    switch (event) {
      case MobileAdEvent.loaded:
        _isInterstitialAdReady = true;
        break;
      case MobileAdEvent.failedToLoad:
        _isInterstitialAdReady = false;
        print('Failed to load an interstitial ad');
        break;
      case MobileAdEvent.closed:
        _moveToHome();
        break;
      default:
      // do nothing
    }
  }

  ...
}

次に、initState() メソッドで _isInterstitialAdReady_interstitialAd を初期化します。_onInterstitialAdEvent は、_interstitialAd の広告イベント リスナーとして設定されているため、_interstitialAd からのすべての広告イベントは _onInterstitialAdEvent メソッドに配信されます。

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _isInterstitialAdReady
  _isInterstitialAdReady = false;

  // TODO: Initialize _interstitialAd
  _interstitialAd = InterstitialAd(
    adUnitId: AdManager.interstitialAdUnitId,
    listener: _onInterstitialAdEvent,
  );
}

この Codelab では、ユーザーが 5 つのレベルを完了した後にインタースティシャル広告を表示します。不要な広告リクエストを最小限に抑えるために、ユーザーがレベル 3 に達した時点で広告の読み込みを開始します。

onNewLevel() メソッドに、次の行を追加します。

lib/game_route.dart

@override
void onNewLevel(int level, Drawing drawing, String clue) {
  ...

  // TODO: Load an Interstitial Ad
  if (level >= 3 && !_isInterstitialAdReady) {
    _loadInterstitialAd();
  }
}

ゲームが終了すると、ゲームスコアのダイアログが表示されます。ユーザーがダイアログを閉じると、Awesome Drawing Quiz のホーム画面に遷移します。

インタースティシャル広告は画面の遷移時に表示する必要があるため、ユーザーが [CLOSE] ボタンをクリックしたときにインタースティシャル広告を表示します。

onGameOver() メソッドを次のように変更します。

lib/game_route.dart

@override
void onGameOver(int correctAnswers) {
  showDialog(
    context: _scaffoldKey.currentContext,
    builder: (context) {
      return AlertDialog(
        title: Text('Game over!'),
        content: Text('Score: $correctAnswers/5'),
        actions: <Widget>[
          FlatButton(
            child: Text('close'.toUpperCase()),
            onPressed: () {

              // TODO: Display an Interstitial Ad
              if (_isInterstitialAdReady) {
                _interstitialAd.show();
              }

              _moveToHome();
            },
          ),
        ],
      );
    },
  );
}

最後に、dispose() コールバック メソッドで InterstitialAd.dispose() メソッドを呼び出して、InterstitialAd オブジェクトに関連付けられたリソースを解放します。

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose InterstitialAd object
  _interstitialAd?.dispose();

  ...

  super.dispose();
}

これで完了です。プロジェクトを実行して、ゲームの終了後にインタースティシャル広告が表示されることを確認します。

53f44b98e8a0c446.gif

このセクションでは、ユーザーに報酬として追加のヒントを提供するリワード広告を追加します。

まず、_GameRouteState クラスにリワード広告のメンバーとメソッドを追加します。なお、RewardedVideoAd はシングルトン オブジェクトであるため、RewardedVideoAd クラスのインスタンスを管理するためのメンバーは必要はありません。

RewardedVideoAdEvent.rewarded はリワード広告において最も重要な広告イベントで、ユーザーが特典獲得の条件(動画の視聴完了など)を満たしたときにトリガーされます。この Codelab では、RewardedVideoAdEvent.rewardedQuizManager.instance.useHint() メソッドを呼び出します。このメソッドにより、ヒント文字列の文字がもう 1 つ表示されます。

また、広告イベントに応じて、RewardedVideoAdEvent.rewarded_isRewardedAdReady の値を変更して UI を更新します。なお、_isRewardedAdReady は、ユーザーが広告を閉じたときに広告を再度読み込んで、広告をすぐに表示できるようにします。

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _isRewardedAdReady
  bool _isRewardedAdReady;

  ...

  // TODO: Implement _loadRewardedAd()
  void _loadRewardedAd() {
    RewardedVideoAd.instance.load(
      targetingInfo: MobileAdTargetingInfo(),
      adUnitId: AdManager.rewardedAdUnitId,
    );
  }

  // TODO: Implement _onRewardedAdEvent()
  void _onRewardedAdEvent(RewardedVideoAdEvent event,
      {String rewardType, int rewardAmount}) {
    switch (event) {
      case RewardedVideoAdEvent.loaded:
        setState(() {
          _isRewardedAdReady = true;
        });
        break;
      case RewardedVideoAdEvent.closed:
        setState(() {
          _isRewardedAdReady = false;
        });
        _loadRewardedAd();
        break;
      case RewardedVideoAdEvent.failedToLoad:
        setState(() {
          _isRewardedAdReady = false;
        });
        print('Failed to load a rewarded ad');
        break;
      case RewardedVideoAdEvent.rewarded:
        QuizManager.instance.useHint();
        break;
      default:
      // do nothing
    }
  }

  ...
}

次に、_isRewardedAdReady を初期化して、_onRewardedAdEvent を広告イベント リスナーとして設定します。その後、_loadRewardedAd() を呼び出してリワード広告をリクエストします。

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _isRewardedAdReady
  _isRewardedAdReady = false;

  // TODO: Set Rewarded Ad event listener
  RewardedVideoAd.instance.listener = _onRewardedAdEvent;

  // TODO: Load a Rewarded Ad
  _loadRewardedAd();
}

次に、ユーザーがフローティング操作ボタンをクリックすると、リワード広告を視聴できるようにします。このボタンは、ユーザーが現在のレベルでヒントを使用しておらず、リワード広告が読み込まれたときにのみ表示されます。

次のように、フローティング操作ボタンを表示するように _buildFloatingActionButton() メソッドを変更します。null を返すと、画面にボタンが表示されなくなります。

lib/game_route.dart

Widget _buildFloatingActionButton() {
  // TODO: Return a FloatingActionButton if a Rewarded Ad is available
  return (!QuizManager.instance.isHintUsed && _isRewardedAdReady)
      ? FloatingActionButton.extended(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('Need a hint?'),
                  content: Text('Watch an Ad to get a hint!'),
                  actions: <Widget>[
                    FlatButton(
                      child: Text('cancel'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    FlatButton(
                      child: Text('ok'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                        RewardedVideoAd.instance.show();
                      },
                    ),
                  ],
                );
              },
            );
          },
          label: Text('Hint'),
          icon: Icon(Icons.card_giftcard),
        )
      : null;
}

最後に、dispose() コールバック メソッドからリワード広告のイベント リスナーを削除します。

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Remove Rewarded Ad event listener
  RewardedVideoAd.instance.listener = null;

  ...

  super.dispose();
}

これで完了です。プロジェクトを実行してリワード広告を視聴し、ヒントが表示されることを確認します。

2a79a3db6b44dae9.gif

9db81af632cb2b15.png次のようなコンテンツができあがりました。

Codelab を完了しました。この Codelab の完全なコードは android_studio_folder.pngcomplete フォルダにあります。

詳細については、別の Flutter の Codelab をご覧ください。