Ionic AdMobのプラグインをcapacitor-communityのに乗り換えた話【iOSバージョン】

はじめに

元々はcapacitor-admobを使っていたのだが、このプラグインではどうやらCapacitor2にアップグレードした場合、Androidでビルドできない問題が起きた！（2020/8月現在）

なのでAdMobのプラグインを変更することにした。

iOSバージョンは比較的簡単に乗り換えれた。
と言う訳で、この記事はiOSバージョンでcapacitor-communityのAdMobプラグインに乗り換えた話。

iOSの方は簡単だった理由

理由はズバリ、Android X！
（詳しくはこの記事のAndroidバージョンで紹介したいが、、、）Capacitor 2.0以降はAndroidXを使うようになった。

「AndroidXって何やねん？」って感じだが、、まぁ詳しくは次の記事で書くとしよう。

前提

・Angularを使用

・Capacitorのバージョンは2.X（2以上ってこと）
→ Capacitorのアップグレード方法はこちら

・capacitor-admobを使っていた（capacitor-communityのAdMobプラグインとほぼ同じで、コードを編集する必要はほぼ無かった。）

もしAbMobプラグインの使用手順を１から知りたい人は、こちらを参考に
ionic capacitorのAdMobプラグインを使う（capacitor-admob）

インストール

まずはプラグインを入れる

npm install --save @capacitor-community/admob

そして以前まで使っていたプラグインを消す

npm uninstall capacitor-admob

プラグインの初期設定

ほぼuninstallしたcapacitor-admobと同じ

AppDelegate.swift

ios/App/App/AppDelegate.swiftを開く

// 追加
import GoogleMobileAds

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

// 多分一番上にある
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
   // 追加
    GADMobileAds.sharedInstance().start(completionHandler: nil)

Info.plist

ios/App/App/Info.plistを開く

<key>GADIsAdManagerApp</key>
<true/>

<key>GADApplicationIdentifier</key>
<string>[APP_ID]</string>

「APP_IDって何やねん？」と言う方はこちらを参考に
ionic capacitorのAdMobプラグインを使う（capacitor-admob）

app.component.tsで初期化

import { Plugins } from '@capacitor/core';

const { AdMob } = Plugins;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

export class AppComponent {
    constructor(){
     if (platform.is('ios')) {
       AdMob.initialize('YOUR APPID for ios');
    } else if (platform.is('android')) {
      AdMob.initialize('YOUR APPID for android');
    }
    }
}

バナー広告を出してみる

AdMob用のserviceを作っておく。（もう作ってある人は不要）

ionic g service service/admob

admob.service.ts

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { Plugins } from '@capacitor/core';
import { AdOptions, AdSize, AdPosition } from '@capacitor-community/admob';

const { AdMob } = Plugins;

@Injectable({
  providedIn: 'root',
})
export class AdmobService {
  constructor(private platform: Platform) {}

  iosOptions: AdOptions = {
    adId: 'ca-app-pub-XXXX',
    adSize: AdSize.SMART_BANNER,
    position: AdPosition.BOTTOM_CENTER,
    margin: 0,
  };

  androidOptions: AdOptions = {
    adId: 'ca-app-pub-XXXX',
    adSize: AdSize.SMART_BANNER,
    position: AdPosition.BOTTOM_CENTER,
    margin: 0,
  };

  showBanner() {
    if (this.platform.is('ios')) {
      // Show Banner Ad
      AdMob.showBanner(this.iosOptions).then(
        (value) => {
          console.log('iOS Banner: ' + value); // true
        },
        (error) => {
          console.error(error); // show error
        }
      );
    } else if (this.platform.is('android')) {
      AdMob.showBanner(this.androidOptions).then(
        (value) => {
          console.log('Android Banner: ' + value); // true
        },
        (error) => {
          console.error(error); // show error
        }
      );
    }

    // Subscibe Banner Event Listener
    AdMob.addListener('onAdLoaded', (info: boolean) => {
      console.log('Showing Banner AD.');
    });
  }


  hideBanner() {
    AdMob.hideBanner().then(
      () => {
        console.log('バナーhide');
      },
      (error) => {
        console.log(error);
      }
    );
  }

  resumeBanner() {
    AdMob.resumeBanner().then(
      () => {
        console.log('バナーresume');
      },
      (error) => {
        console.log(error);
      }
    );
  }
}

home.page.ts

import { AdmobService } from '../service/admob.service';

constructor(private admobService: AdmobService) {}

ionViewWillEnter() {
    this.admobService.showBanner();
  }

変わった点

hasTabBarとtabBarHeightがなくなり、marginになったぐらいかな？

capacitor-admob

options: AdOptions = {
    adId: "Your AD_Id",
    adSize: AdSize.SMART_BANNER,
    position: AdPosition.BOTTOM_CENTER,
    hasTabBar: false, // make it true if you have TabBar Layout.
    tabBarHeight: 56 // you can assign custom margin in pixel default is 56
  };

capacitor-communityのAdMobプラグイン

options: AdOptions = {
    adId: "Your AD_Id",
    adSize: AdSize.SMART_BANNER,
    position: AdPosition.BOTTOM_CENTER,
    margin: 0
  };

AdMobのバナー広告のサイズについて

https://developers.google.com/android/reference/com/google/android/gms/ads/AdSize
このページを丸々翻訳にかけると、ある程度は理解できるかと