ionicアプリにAdMobを挿入する


ionicで作成したHTML5アプリにAdMobを挿入しました。
導入でかなりハマってしまったので、手順をまとめておきます。

# 環境
* ionic 1.1.0
* ionic-cli 1.7.8
* cordova 5.5.3
* Mac OS X El Capitan

# AdMobプラグインのインストール
[cordova-admob-pro](https://github.com/floatinghotpot/cordova-admob-pro)というプラグインを使用します。次のコマンドでプラグインをインストールします。

```
$ ionic plugin add cordova-plugin-admobpro
```

# Android SDK Toolsのインストール

[公式ページのインストール手順](https://github.com/floatinghotpot/cordova-admob-pro#installation)にも書いてますが、いくつかAndroid SDK Toolが必要なようです。私はこんな感じのインストール状況でいけました。ここに挙げているもの全部が必要かは分かりませんが、少なくともGoogle Play系は要りそうな気がする。。

![スクリーンショット 2015-11-10 19.23.07.png](https://qiita-image-store.s3.amazonaws.com/0/32136/4d5e7047-936c-124d-585f-defb1dc8ab3c.png "スクリーンショット 2015-11-10 19.23.07.png")

あ、ちなみにこれはMac版Android Studioの画面です。

# セットアップ

こちらも[公式ページ](https://github.com/floatinghotpot/cordova-admob-pro#usage)にサンプルコードが載ってましたが、AngularJSらしくインジェクションするようにしてみました。

こんな感じのコードをどっかに置きます。なお、`banner`と`interstitial`にはAdMobで発行される各広告用のキーを記述してください。（なお、Interstitial広告を使用してなかったら、`interstitial`周りの記述は必要ありません。）

```CoffeeScript:admob.coffee
'use strict'

@app
.factory 'AdMobManager', ->
  admobid =
    if /(android)/i.test(navigator.userAgent)
      banner: 'ca-app-pub-xxxxx',
      interstitial: 'ca-app-pub-yyyyy'
    else if /(ipod|iphone|ipad)/i.test(navigator.userAgent)
      banner: 'ca-app-pub-xxxxx',
      interstitial: 'ca-app-pub-yyyyy'
    else
      banner: 'ca-app-pub-xxxxx',
      interstitial: 'ca-app-pub-yyyyy'

  initApp = ->
    if typeof AdMob == 'undefined'
      console.log 'AdMob plugin is not ready.', admobid
      return

    AdMob.createBanner
      adId: admobid.banner
      isTesting: true # とりあえずテスト用の広告
      overlap: false
      offsetTopBar: false
      position: AdMob.AD_POSITION.BOTTOM_CENTER
      bgColor: 'black'

    AdMob.prepareInterstitial
      adId: admobid.interstitial
      autoShow: true

  factory =
    init: ->
      if /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent)
        initApp()
```

作成した`admob.js`を`index.html`で読み込みんだら、このファクトリを使って、AdMobを初期化するコードを`app.coffee`に記述します。

```CoffeeScript:app.coffee
'use strict'

@app = angular.module('MyApp', ['ionic'])
.run ($ionicPlatform, AdMobManager) ->
  $ionicPlatform.ready ->
    # Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    # for form inputs)
    if window.cordova && window.cordova.plugins.Keyboard
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true)
    if window.StatusBar
      StatusBar.styleDefault()

	# ↓↓↓この行を追加↓↓↓
    AdMobManager.init() 
```

# ビルドするがエラーでコケる

これで準備は完了のはずなので勢い良くビルドしてみましたが、何かエラーが出ました。

```
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':processDebugResources'.
> Error: more than one library with package name 'com.google.android.gms'
  You can temporarily disable this error with android.enforceUniquePackageName=false
  However, this is temporary and will be enforced in 1.0

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED
```

解決策は https://github.com/floatinghotpot/cordova-admob-pro/issues/199 に載ってました。どうやら、com.google.android.gmsで参照されるパッケージが複数あるから、らしいです。

不要なプラグインを削除します。

```
$ ionic plugin remove cordova-google-play-services
```

これにて「一応」作業完了のはず。`$ ionic run android`で実機で確認してみると・・無事、テスト用の広告が表示されました！ **（ブラウザ上では表示されませんのでご注意を）**

# 戻るキーで戻った時の挙動が変わった・・？

通常ionicでアプリを作成していると、ユーザーが端末の戻るキーを押した場合、前のURLに戻るはずなのですが、このプラグインを使用してから挙動が変わってしまいました。何故かアプリがクローズしてしまうのです。。。

調べたら、ありました。
https://github.com/floatinghotpot/cordova-admob-pro/issues/199

解決策は今のところ `platforms/android/CordovaLib/src/org/apache/cordova/CordovaActivity.java` を開き、次のように修正するしかないようです。暫定対応ですね。。

```Java:CordovaActivity.java
// import文が並んでいる箇所に追加
import android.view.KeyEvent;

...

// 最後にこのメソッドを追加
@Override
public boolean dispatchKeyEvent(KeyEvent event) {
    if (this.appView != null) {
    
        View webview = this.appView.getView();
        if (webview != null) {
            return webview.dispatchKeyEvent(event);
        }

        return true;
    }

    return false;
}
```

再度ビルドして、実機にapkをインストールして確認したところ、無事に戻るキーの挙動が元通りになりました！
ちなみにこのファイルは、`ionic platform remove android`をしてしまうと削除されてしまいますので、一度プラットフォームを破棄して再度`platform add`した際には、もう一度修正する必要がありますのでご注意を。

かなり時間がかかってしまいましたが、最低限の広告は表示できるようになりました。