【Flutter】アプリ内にAdMob広告を表示する方法

Flutterアプリ内にAdMob広告を表示する方法についてまとめました。

【方法①】firebase_admobプラグインを使う

Flutterでadmob広告を表示させる方法としては、Flutter公式の「firebase_admob」プラグインを使うのが定番です。
このプラグインでは、Firebase API を使ってAdMobのバナー広告、インタースティシャル広告、報酬付きのビデオ広告(リワード広告)をアプリ内に表示させることができます。

利用するプラグイン
1 firebase_core
2 firebase_admob

① pubspec.yaml に「firebase_core」「firebase_admob」プラグインを追加し、「flutter packages get」で更新します。

■pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.4.0  # 追加
  firebase_admob: ^0.9.0  # 追加
  cupertino_icons: ^0.1.2

Androidアプリのみ

① Androidの場合、「AndroidManifest.xml」に以下の設定を追加します。

■/android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">

    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement
         FlutterApplication and put your custom class here. -->
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="app"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            <!-- This keeps the window background of the activity showing
                 until Flutter renders its first frame. It can be removed if
                 there is no splash screen (such as the default splash screen
                 defined in @style/LaunchTheme). -->
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- ここからアプリIDを追加 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
        <!-- ここまでアプリIDを追加 -->
    </application>
</manifest>

※activity 以下にあるスプラッシュスクリーンの <meta-data> と並べると起動しないため注意

iOSアプリのみ

① iOSアプリの場合、Info.plistに以下の設定を追加します。
■/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>[AdMob AppID をここに入れる]</string>
</dict>
</plist> 

②次に「Firebase console」で適当なプロジェクトを作成し、アプリの追加 -> iOS で追加設定の画面を開き、iOSアプリをFirebaseに追加します(iOS バンドルID等は適宜設定)。

③GoogleService-Info.plistファイルをダウンロードし、/ios/Runner.xcodeprojをXCodeで開いて、GoogleService-Info.plistをiOSアプリプロジェクトのルートに追加します。

バナー広告の設定

① バナー広告を表示させるコードを記述します。

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    // インスタンスを初期化(自分のアプリIDを挿入:今回はテスト用のアプリIDを利用)
    FirebaseAdMob.instance.initialize(appId: 'ca-app-pub-3940256099942544~3347511713');

    // バナー広告を表示する
    myBanner
      ..load()
      ..show(
        // ボトムからのオフセットで表示位置を決定
        anchorOffset: 0.0,
        anchorType: AnchorType.bottom,
      );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(title: Text('Firebase AdMob Demo')),
        body: Center(child: Text('バナー広告を表示')),
      ),
    );
  }
}

// 広告ターゲット
MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
  keywords: <String>['flutterio', 'beautiful apps'],
  contentUrl: 'https://flutter.io',
  birthday: DateTime.now(),
  childDirected: false,
  designedForFamilies: false,
  gender: MobileAdGender.male, // or female, unknown
  testDevices: <String>[], // Android emulators are considered test devices
);

BannerAd myBanner = BannerAd(
  // 広告ユニットID(テスト用のIDを使用、本番は自分の広告ユニットIDを利用)
  adUnitId: BannerAd.testAdUnitId,
  size: AdSize.smartBanner,
  targetingInfo: targetingInfo,
  listener: (MobileAdEvent event) {
    // 広告の読み込みが完了
    print("BannerAd event is $event");
  },
);

上記のコードでは、まずFirebaseAdMob のインスタンスを初期化し、そのあとに先ほど作成したバナー広告を追加しています。
そして、読み込み(load)を待ち、それを完了したら広告の表示(show)を行っています。
バナー広告はアンカーからのオフセットで表示位置を指定します(画面下部に固定するならオフセット0)。

関連記事
1 【Flutter入門】iOS、Android、Windowsアプリ開発
flutter
技術雑記

コメント

タイトルとURLをコピーしました