Flutter Admobのデモ広告 （バナー）を表示させるまでの設定

## はじめに
久々にFlutterアプリを作り`Admob`を使おうとしたのだが、過去にも使ったことがあるのに少し時間がかかってしまった。
基本的には毎回ググるのでも問題ないのだが、毎回探すの少し面倒なので自分用メモとして端的に手順だけメモする。

## 環境
【PC】
　　MacBook Air (M1, 2020)

【各SWバージョン】
　・macOS Big Sur 11.6.1
　・Flutter 2.5.3　（dart 2.14.4）
　・Xcode 13.1
　・google_mobile_ads: ^1.0.1

## メモ内容

### ① 必要パッケージのインストール

pubspec.yaml に`google_mobile_ads`を追記。

```yaml:pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  google_mobile_ads: ^1.0.1
```

ターミナルで `flutter pub get` を実行


### ② Admob のサイトでアプリを追加する

　https://apps.admob.com/


### ③ 設定ファイルを編集

iOSでAdmobを使うための設定として、`iOS/Runner/Info.plist`を編集。

```plist:Info.plist
	<key>LSRequiresIPhoneOS</key>
	<true/>
ここから追記↓
	<key>GADApplicationIdentifier</key>
	<string>Admob上のアプリIDを入力</string>
	<key>SKAdNetworkItems</key>
	<array>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>cstr6suwn9.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>4fzdc2evr5.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>2fnua5tdw4.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>ydx93a7ass.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>5a6flpkh64.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>p78axxw29g.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>v72qych5uu.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>c6k4g5qg8m.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>s39g8k73mm.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>3qy4746246.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>3sh42y64q3.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>f38h382jlk.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>hs6bdukanm.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>prcb7njmu6.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>v4nxqhlyqp.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>wzmmz9fp6w.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>yclnxrl5pm.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>t38b2kh725.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>7ug5zh24hu.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>9rd848q2bz.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>n6fk4nfna4.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>kbd757ywx3.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>9t245vhmpl.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>4468km3ulz.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>2u9pt9hc89.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>8s468mfl3y.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>av6w8kgt66.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>klf5c3l5u5.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>ppxm28t8ap.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>424m5254lk.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>uw77j35x4d.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>578prtvx9j.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>4dzt52r2t5.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>e5fvkxwrpn.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>8c4e2ghe7u.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>zq492l623r.skadnetwork</string>
		</dict>
		<dict>
			<key>SKAdNetworkIdentifier</key>
			<string>3qcr597p9d.skadnetwork</string>
		</dict>
	</array>
```

AndroidでAdmobを使うためには、`android/app/src/main/AndroidManifest.xml`を編集する必要がある。

```xml:AndroidManifest.xml
   <application
        android:label="warikan_dev"
        android:icon="@mipmap/ic_launcher">
　　　↓ ここを追記！
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"　
            android:value="Admob上のアプリIDを入力" />
　　　↑↑↑↑↑↑↑↑↑↑↑↑
        <activity
          ----------省略---------------
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
    </application>
```
※ `<application>`の直下に記述すること。


### ③ デモ広告の実装

**main関数内に初期化処理を記載**

```dart:main.dart
void main() {
  WidgetsFlutterBinding.ensureInitialized(); // 初期化処理
  MobileAds.instance.initialize(); // 初期化処理
  runApp(const MyApp());
}
```

**ウィジェットビルドの前にインスタンス化**

```dart:main.dart
class _MyHomePageState extends State<MyHomePage> {
  // バナー広告をインスタンス化
  final BannerAd myBanner = BannerAd(
    adUnitId: 'ca-app-pub-3940256099942544/2934735716',
    size: AdSize.banner,
    request: AdRequest(),
    listener: BannerAdListener(),
  )..load();
```
※上記で使っているUnitIDはiOS用のデモ用ID
Android用のデモ用バナー広告のIDは `ca-app-pub-3940256099942544/6300978111` だが、このUnitIDは知らない内に変更されるかもしれないので、使う際は一応チェックした方が良い。


**ウィジェットビルドのどこかにAdmobウィジェットを追加**

```dart:main.dart
  Container(
    height: 50.0,   //バナー広告のサイズ 320×50 なので
    width: double.infinity,
    child: AdWidget(ad: myBanner),
  ),
```

以上でデモ広告が表示される様になる。