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

#はじめに
元々は[capacitor-admob](https://github.com/rahadur/capacitor-admob)を使っていたのだが、**このプラグインではどうやら[Capacitor2にアップグレード](https://ionicframework.com/blog/announcing-capacitor-2-0/)した場合、Androidでビルドできない問題が起きた！**（2020/8月現在）

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

iOSバージョンは比較的簡単に乗り換えれた。
と言う訳で、この記事はiOSバージョンで[capacitor-communityのAdMobプラグイン](https://github.com/capacitor-community/admob)に乗り換えた話。


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

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

#前提
・Angularを使用

・Capacitorのバージョンは2.X（2以上ってこと）
→ Capacitorのアップグレード方法は[こちら](https://ionicframework.com/blog/announcing-capacitor-2-0/)

・[capacitor-admob](https://github.com/rahadur/capacitor-admob)を使っていた（[capacitor-communityのAdMobプラグイン](https://github.com/capacitor-community/admob)とほぼ同じで、コードを編集する必要はほぼ無かった。）

もしAbMobプラグインの使用手順を１から知りたい人は、こちら:point_down:を参考に
[ionic capacitorのAdMobプラグインを使う（capacitor-admob）](https://qiita.com/kokogento/items/99cf7ba321b68aaad298)



#インストール
まずはプラグインを入れる

```console
npm install --save @capacitor-community/admob
```

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

```console
npm uninstall capacitor-admob
```

#プラグインの初期設定
ほぼuninstallしたcapacitor-admobと同じ

##AppDelegate.swift

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

```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`を開く

```xml
<key>GADIsAdManagerApp</key>
<true/>

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

「APP_IDって何やねん？」と言う方は:point_down:こちらを参考に
[ionic capacitorのAdMobプラグインを使う（capacitor-admob）](https://qiita.com/kokogento/items/99cf7ba321b68aaad298)

#app.component.tsで初期化

```typescript
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`を作っておく。（もう作ってある人は不要）

```terminal
ionic g service service/admob
```

```typescript: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);
      }
    );
  }
}
```

```typescript:home.page.ts
import { AdmobService } from '../service/admob.service';

constructor(private admobService: AdmobService) {}

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



#変わった点
`hasTabBar`と`tabBarHeight`がなくなり、`margin`になったぐらいかな？

[capacitor-admob](https://github.com/rahadur/capacitor-admob):point_down:

```typescript
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プラグイン](https://github.com/capacitor-community/admob):point_down:

```typescript
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
このページを丸々翻訳にかけると、ある程度は理解できるかと:wink: