[Flutter] Admob

2021-05-03 hit count image

今回ブログポストではFlutterで生成したアプリにgoogle_mobile_adsパッケージを使ってAdmobの広告を表示する方法について説明します。

概要

このブログポストではgoogle_mobile_adsパッケージを使ってAdmobの広告を表示する方法について説明します。

このブログポストではAdmobのバナー広告を表示する方法について説明する予定です。ソースコードは下記のリンクで確認できます。

Admobの設定

FlutterプロジェクトでAdmobを使うためには、Admobのサービスを使う必要があります。

グーグルアドモブの会員登録

グーグルアドモブ(Google Admob)のサイトに移動して会員登録をします。一般的な会員登録やログインの手続きなので説明は省略します。

Admobの生成

グーグルアドモブ(Google Admob)の使い方についてみてみましょう。グーグルアドモブ(Google Admob)を使うために、グーグルアドモブ(Google Admob)のサイトに会員登録をしてログインをすると下記のような画面が確認できます。

signin google admob

下にあるGET STARTEDボタンを押してグーグルアドモブ(Google Admob)を使い始めます。

configure admob

既にアプリがマーケットに登録されたかを選べます。私たちはまだアプリを登録してない状態なのでNOを選択します。

configure app name on admob

グーグルアドモブ(Google Admob)を使うためアプリの名前を作成して使うプラットフォームを選択します。私たちはまず、iOSを選択して進めます。

completed to configure

グーグルアドモブ(Google Admob)の登録を完了しました。親切に下に次にやることについて説明が書いております。

  1. FlutterにAdmobを設定するため必要なApp IDをコピーします。
  2. 広告タイプ(ad unit)をグーグルアドモブ(Google Admob)で設定します。
  3. アプリをアプリストアに登録したらグーグルアドモブ(Google Admob)に連結する必要があります。

下にあるNEXT: CREATE AD UNITを押して広告のタイプを設定する画面に移動します。

select advertisement type

私たちは一旦バナー広告を使う予定です。Bannerの下にあるSELECTボタンを選択します。

input banner name

当該バナーの名前を設定します。グーグルアドモブ(Google Admob)のサービスで当該バナーを簡単に探すための名前なので、自分がわかりやすい名前で設定します。入力を完了したらCREATE AD UNITボタンを押して設定を完了します。

finished configuration

グーグルアドモブ(Google Admob)のバナーの設定を完了しました。次に出るApp IDとバナーのAd Unit IDをコピーしておきます。

アンドロイドも上と同じ方法でバナー広告を生成してApp IDとAd Unit IDを生成します。

プロジェクト生成

そしたらgoogle_mobile_adsパッケージを使ってAdmobの広告を表示するため、Flutterプロジェクトを新しく作ってみましょう。次のコマンドを実行してFlutterプロジェクトを生成します。

flutter create admob_example
cd admob_example

google_mobile_adsパッケージインストール

FlutterプロジェクトでAdmob広告を表示するためgoogle_mobile_adsのパッケージをインストールする必要があります。次のコマンドを実行してgoogle_mobile_adsをインストールします。

flutter pub pub add google_mobile_ads

App ID設定

次はgoogle_mobile_adsを使ってAdmobの広告を表示するため、iOS/AndroidにApp IDを設定する必要があります。

AndroidでApp IDの設定

アンドロイドでAdmobeのApp IDを設定するため、android/app/src/main/AndroidManifest.xmlファイルを開いて下記のように修正します。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.admob_example">
   <application
        ...>
        <meta-data
              android:name="com.google.android.gms.ads.APPLICATION_ID"
              android:value="[YOUR ANDROID APP ID]"/>
        ...
    </application>
</manifest>

iOSでApp IDの設定

iOSでAdmobのApp IDを設定するため、ios/Runner/Info.plistファイルを開いて下記のように修正します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  ...
  <key>GADApplicationIdentifier</key>
  <string>[YOUR iOS APP ID]</string>
  <key>LSRequiresIPhoneOS</key>
  <true/>
  <key>SKAdNetworkItems</key>
  <array>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>cstr6suwn9.skadnetwork</string>
    </dict>
  </array>
</dict>
</plist>

google_mobile_adsの使い方

次はgoogle_mobile_adsを使ってAdmobeの広告を表示するため、main.dartファイルを開いて下記のように修正します。

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

const Map<String, String> UNIT_ID = kReleaseMode
    ? {
        'ios': '[YOUR iOS AD UNIT ID]',
        'android': '[YOUR ANDROID AD UNIT ID]',
      }
    : {
        'ios': 'ca-app-pub-3940256099942544/2934735716',
        'android': 'ca-app-pub-3940256099942544/6300978111',
      };

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MobileAds.instance.initialize();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    TargetPlatform os = Theme.of(context).platform;

    BannerAd banner = BannerAd(
      listener: AdListener(
        onAdFailedToLoad: (Ad ad, LoadAdError error) {},
        onAdLoaded: (_) {},
      ),
      size: AdSize.banner,
      adUnitId: UNIT_ID[os == TargetPlatform.iOS ? 'ios' : 'android']!,
      request: AdRequest(),
    )..load();

    return Scaffold(
      appBar: AppBar(
        title: Text('Admob'),
      ),
      body: Center(
        child: Container(
          height: 50,
          child: AdWidget(
            ad: banner,
          ),
        ),
      ),
    );
  }
}

ソースコードを一つづつ詳しくみてみましょう。

import 'package:flutter/foundation.dart';

Admobの広告は開発環境の場合、自分のAD UNIT IDを使うとダメです。自分の開発環境で自分のAD UNIT IDを使う場合、実際の広告トラピックではなく不正トラピックになるので、いっぱい使うと広告掲載をブロックされる可能性があります。したがって、今回の例ではkReleaseModeを使って現在実行してる環境がdebugreleaseかを区別する予定です。kReleaseModeを使うためにはfoundation.dartを使う必要があります。

import 'package:google_mobile_ads/google_mobile_ads.dart';

google_mobile_adsを使うため、追加します。

const Map<String, String> UNIT_ID = kReleaseMode
    ? {
        'ios': '[YOUR iOS AD UNIT ID]',
        'android': '[YOUR ANDROID AD UNIT ID]',
      }
    : {
        'ios': 'ca-app-pub-3940256099942544/2934735716',
        'android': 'ca-app-pub-3940256099942544/6300978111',
      };

kReleaseModeを使って現在の環境がreleaseの場合、私たちが作ったAD UNIT IDを使えるように設定しました。そうでない場合は、Admobが提供するテスト用のAD UNIT IDを使えるようにしました。

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MobileAds.instance.initialize();

  runApp(MyApp());
}

google_mobile_adsを使ってAdmobの広告を表示するためMobileAdsを初期化する必要があります。WidgetsFlutterBinding.ensureInitialized();を使ってFlutterが初期化されたかを確認した後、await MobileAds.instance.initialize();をコールしてMobileAdsを初期化します。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
}

簡単なサンプルコードを作成するためStatelessウィジェットを生成しました。

次は実際バナー広告を表示するソースコードを詳しくみてみましょう。

@override
Widget build(BuildContext context) {
  TargetPlatform os = Theme.of(context).platform;

  BannerAd banner = BannerAd(
    listener: AdListener(
      onAdFailedToLoad: (Ad ad, LoadAdError error) {},
      onAdLoaded: (_) {},
    ),
    size: AdSize.banner,
    adUnitId: UNIT_ID[os == TargetPlatform.iOS ? 'ios' : 'android']!,
    request: AdRequest(),
  )..load();

  return Scaffold(
    appBar: AppBar(
      title: Text('Admob'),
    ),
    body: Center(
      child: Container(
        height: 50,
        child: AdWidget(
          ad: banner,
        ),
      ),
    ),
  );
}

各プラットフォームよりAD UNIT IDが違うので、現在のFlutterが実行されてるプラットフォームを識別する必要があります。このためTargetPlatformを使います。

TargetPlatform os = Theme.of(context).platform;

そしてgoogle_mobile_adsで提供されてるBannerAdクラスを使ってバナー広告を生成しましたし、Cascade operatorを使って生成と同時にload()関数を実行して広告を取ってきました。

BannerAd banner = BannerAd(
  listener: AdListener(
    onAdFailedToLoad: (Ad ad, LoadAdError error) {},
    onAdLoaded: (_) {},
  ),
  size: AdSize.banner,
  adUnitId: UNIT_ID[os == TargetPlatform.iOS ? 'ios' : 'android']!,
  request: AdRequest(),
)..load();

この時、AdListenerを使って広告に関するイベントにコールバック関数を登録することができまし、AdRequestの色んなパラメータを使ってもっと効率的な広告を表示することができます。

このように生成した広告をAdWidgetを使って画面に表示します。

AdWidget(
  ad: banner,
)

現在の例題は簡単に広告を表示する方法をStatelessウィジェットを使ってみてみました。もし、Statefulウィジェットを使ったら、次のようにウィジェットが消える時、広告も削除しなきゃならないです。

@override
void dispose() {
  super.dispose();
  _banner.dispose();
}

完了

これでgoogle_mobile_adsパッケージを使ってAdmobの広告を表示する方法についてみてみました。今から皆さんも、皆さんのアプリへ広告を追加して履歴をだしてみてください!

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

Posts