ionic capacitorのAdMobプラグインを使う（capacitor-admob）

#はじめに
・この記事は[capacitor-admob](https://github.com/rdlabo/capacitor-admob)の使い方を解説します。

・AdMobのアカウント作成とアプリの登録は済んでいる前提で進めます。

・AdMobプラグインで有名？な[AdMob Free](https://ionicframework.com/docs/native/admob-free)についてではありません。
というか、**できるだけcapacitorのプラグインであるcapacitor-admobを使うことを推奨します。**

#なぜcapacitor-admobを使った方が良いのか？
**理由としは「UIWebViewは廃止予定」だとAppleが発表したからである。**

以下に詳細を載せておきます。
[Understanding ITMS-90809: UIWebView API Deprecation](https://ionicframework.com/blog/understanding-itms-90809-uiwebview-api-deprecation/)

[審査に出したiOSアプリが ITMS-90809 としてAppleから問題を指摘される話](https://qiita.com/YutoMizutani/items/2b5185c84c31edfdc2d4)

私も最初はAdMob Freeを使っていた。
しかし、以下の警告を通告されてしまった！！
>TMS-90809: Deprecated API Usage - Apple will stop accepting submissions of apps that use UIWebView APIs . See https://developer.apple.com/documentation/uikit/uiwebview for more information.

この警告を簡単に言えば**「廃止予定のUIWebViewが含まれているよ〜！！」**って感じ。
でも私はcapacitorで開発をしていたので、この警告は初めて見た。
**capacitorはこの問題には対処済みで、UIWebViewの次世代に当たるWKWebViewしか使っていないらしい。**

AdMob FreeはCordovaのプラグインである。そしてCordovaはUIWebViewをベースとしている。だからAdMob Freeを使うと警告が来たと思われる。

#アプリIDと広告ユニットIDを作る
**AがアプリID、Bが広告ユニットIDである。**
<img width="512" alt="4eb18b183093d97ef014fbf246286dd4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/1df30882-a0b9-5ba6-eeb7-309ee0e5fcc6.png">


#インストール
[公式ページ](https://github.com/rdlabo/capacitor-admob)をもとにやっていきます。
まずはインストール。

```terminal
$ npm install --save @rdlabo/capacitor-admob
```

インストールしたら同期させておきましょう。

```terminal
$ npx cap sync
```

#Androidの設定
##MainActivity.java
`android/app/src/main/java/**/**/MainActivity.java`に以下を追加

```java:MainActivity.java
this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
  [...]
  add(jp.rdlabo.capacitor.plugin.admob.AdMob.class);
  [...]
}});
```

##AndroidManifest.xml
`android/app/src/main/AndroidManifest.xml`に**App Id**を追加

```xml:AndroidManifest.xml
<manifest>
 <application>
 <!-- 省略 -->
<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="admob_app_id"/>
 <!-- 省略 -->
 </application>
</manifest>
```

##strings.xml
`android/app/src/main/res/values/strings.xml`に以下を追加

```xml:strings.xml
<string name="admob_app_id">[APP_ID]</string>
```

>Don't forget to replace [APP_ID] by your Facebook application Id.

~~理由はわかりませんが、ここに入れるIDは**Facebook application Id**だそうです。~~
**コメントでプラグインの作者さんからAdMob App Idだと教えてもらいました。**
（不具合なく動いていましたが、、笑）


#iOSの設定
##AppDelegate.swift
`ios/App/App/AppDelegate.swift`に以下を追加

```swift: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`を以下のようにする

```html
<key>GADApplicationIdentifier</key>
<string>App_Id</string>
```

<img width="411" alt="スクリーンショット 2019-11-18 17.58.58.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/ef9b79dd-36d3-4e7f-f054-e157a528152e.jpeg">

これでandroidとiOSでのプラグインを使うための設定は終わり。

#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');
    }
    }
}
```
iosとandroidの両方を書かなくても正常に動作したが、一応。

#バナー広告を出してみる
AdMob用の`service`を作っておく。

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

```typescript:admob.service.ts
import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { AdOptions, AdSize, AdPosition } from '@rdlabo/capacitor-admob';
import { Plugins } from '@capacitor/core';

const { AdMob } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class AdmobService {
  iosOptions: AdOptions = {
    // iOSの広告ユニットID
    adId: 'ca-app-pub-***',
    adSize: AdSize.BANNER,
    position: AdPosition.BOTTOM_CENTER
  };

  // androidの広告ユニットID
  androidOptions: AdOptions = {
    adId: 'ca-app-pub-***',
    adSize: AdSize.BANNER,
    position: AdPosition.BOTTOM_CENTER
  };

  constructor(private platform: Platform) {}

  showBanner() {
    if (this.platform.is('ios')) {
      AdMob.showBanner(this.iosOptions).then(
        value => {
          console.log('広告の表示成功！！ ' + value);
        },
        error => {
          console.log('表示失敗 ' + error);
        }
      );
    } else if (this.platform.is('android')) {
      AdMob.showBanner(this.androidOptions).then(
        value => {
          console.log('広告の表示成功！！ ' + value);
        },
        error => {
          console.log('表示失敗 ' + error);
        }
      );
    }

    AdMob.addListener('onAdLoaded', (info: boolean) => {
      console.log(info + 'Banner Ad Loaded');
    });
  }
}
```

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

constructor(private admobService: AdmobService) {}

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

とりあえずバナー広告を出すだけならこれでOK。

#最後に

まぁこれでAppleからの警告は回避できるかと。。