（Android, iOS両方対応）Flutter+AdMobで広告を表示する実装まとめ

はじめに

この記事ではFlutterにAdMobを導入して広告を表示するための実装方法をまとめます。表示する広告はバナー広告です。この記事ではAdMobのコンソールの使い方については触れませんのであらかじめご了承ください。

この記事のソースコードをコピペして、広告のApp IDと広告IDを差し替えるだけで動きます。ぜひ試してみてください。

前提

AdMobにアカウントがあり、すでにAppIDと広告IDがあること

環境

筆者は以下の環境で実装を行なっています。

MacOS BigSur 11.4
Flutter 2.5.3
Dart 2.14.4
google_mobile_ads 0.13.5

すること

ライブラリインストール
実装（Android用）
実装（iOS用）
実装（共通）

ライブラリインストール

FlutterでAdMobを実装するのに必要なライブラリをインストールします。

google_mobile_adsをインストールします。

https://pub.dev/packages/google_mobile_ads

以下のコマンドを実行します。

$ flutter pub add google_mobile_ads

これで pubspec.yamlにこんな風に追記されていたらOKです。（バージョンはその時々で変わります）

google_mobile_ads: ^0.13.5

実装（Android用）

Android用の実装は、Android Manifestの編集を行うだけです。

ここで必要なのは`App ID`です。事前にAdMobのコンソールで取得してください。

android/app/src/main/AndroidManifest.xmlに以下を追記してください。

         ...
         ...
         <!-- ここから -->
         <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="AdMobコンソールで取得したAPP IDをここに貼る"/>
         <!-- ここまでを追記 -->
    </application>
</manifest>

これでAndroid用の実装は終了です。次はiOSについて書きますが、不要な方は飛ばして下の `実装（共通）`まで進んでください。

実装（iOS用）

iOS用の実装は info.plistへの追記になります。

ここで必要なのはApp IDです。事前にAdMobのコンソールで取得してください。

SKAdNetworkIdentifierについてはこちらの公式サイトを参照ください。

https://developers.google.com/admob/ios/ios14?hl=ja

<key>GADApplicationIdentifier</key>
  <string>AdMobコンソールで取得したAPP IDをここに貼る</string>
  <key>SKAdNetworkItems</key>
    <array>
      <dict>
        <key>SKAdNetworkIdentifier</key>
	<string>cstr6suwn9.skadnetwork</string>
      </dict>
    </array>

これでiOS用の実装は完了です。続けてAndroid、iOS共通の実装をまとめていきます。

実装（共通）

初期化

まず、アプリ起動時にAdMobを読み込むようにします。ここではlib/main.dartを修正していきます。

main.dartの任意の箇所に以下を追記してください。

MobileAds.instance.initialize();

これでAdMobが初期化されて広告を読み込めるようになります。

bannerAdUnitIdには自身のバナー広告IDと差し替えてください。

AdManagerクラス

広告を管理するAdManagerクラスを作成していきます。（自前のクラスです）

import 'dart:io';
import 'package:google_mobile_ads/google_mobile_ads.dart';

class AdManager {

  AdWidget getBannerAdWidget(int width, int height) {
    AdSize adSize = AdSize(
      width: width,
      height: height
    );
    BannerAd bannerAd = BannerAd(
      adUnitId: bannerAdUnitId,
      size: adSize,
      request: const AdRequest(),
      listener: bannerAdListener(),
    );
    bannerAd.load();
    return AdWidget(ad: bannerAd);
  }

  BannerAdListener bannerAdListener() {
    return BannerAdListener(
      // success.
      onAdLoaded: (Ad ad) => print('Ad successfully loaded.'),
      // failed.
      onAdFailedToLoad: (Ad ad, LoadAdError error) {
        // Dispose the ad here to free resources.
        ad.dispose();
        print('Ad failed to load: $error');
      },
      // opened
      onAdOpened: (Ad ad) => print('Ad opened.'),
      // removed from the scene
      onAdClosed: (Ad ad) => print('Ad closed.'),
      // impression occurred
      onAdImpression: (Ad ad) => print('Ad impression.'),
    );
  }

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-xxxxxxxxx/yyyyyyyyyyy";
    } else if (Platform.isIOS) {
      return "ca-app-pub-zzzzzzzzz/aaaaaaaaaaa";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

これで広告ウィジェット作成処理は完了です。あとは広告を表示させたい箇所にgetBannerAdWidgetの戻り値をセットするだけです。例を示します。

  Widget adArea() {
    int width = MediaQuery.of(context).size.width.floor();
    int height = (MediaQuery.of(context).size.height * 0.1).floor();

    return SizedBox(
      height: height.toDouble(),
      width: width.toDouble(),
      child: Center(
        child: AdManager().getBannerAdWidget(width, height)
      )
    );
  }

これで任意の場所にバナー広告を表示させることができます。

まとめ

広告と聞くと実装が大変そうなイメージがありますが、Flutterではライブラリインストールしてちょこっとコード書くだけで自分のアプリに広告を表示させることができます。

みなさんもぜひやってみてください。

この記事の手法で広告を表示しているアプリの例としてこのアプリを紹介させてください。

ChordMixer – easy composition

作曲してみたいけど楽器持ってないしコードわからないし、、、という方におすすめのアプリです。ボタンをタップするだけでコードが鳴り、それを繋げることで世界で１つだけの曲が出来上がります。ぜひ使ってみてください。]

Android、 iOS 両方に対応しています。