PhoneGap 3.3 でAdmobの広告表示する方法



## バージョン

* PhoneGap:3.3.0
* Admob SDK のバージョン: GoogleAdMobAdsSdkiOS-6.8.0
* Xcode: 5.0.3

## Admob SDKのダウンロード

Admobに行って、最新のiOS用のSDKをダウンロードしておく。

## Admob SDK を Xcode で追加

Admob 公式ドキュメント通りにXCodeで追加する。
Viewの追加の方はしなくてよい

[Getting Started - Google Mobile Ads SDK — Google Developers](https://developers.google.com/mobile-ads-sdk/docs/?hl=en_US#ios "Getting Started - Google Mobile Ads SDK — Google Developers")


ちなみに、上記はXcode 4のスクリーンショットでわかりづらく、Xcode 5 での追加の仕方がすごくわかりづらいです。

どうやったか既にわかりませんが、アプリ名のトップの下に GoogleAdMobAdsSDKというディレクトリを作り、ファイルを入れました。

### やることの流れ

* Add-ons以外のファイルを Xcodeの Add Files...で追加
*  Build PhasesタブのLink Binary With Librariesドロップダウンで、 + ボタンを使って、下記frameworksを追加
 * AdSupport
 * AudioToolbox
 * AVFoundation
 * CoreGraphics
 * CoreTelephony
 * MessageUI
 * StoreKit
 * SystemConfiguration
* Other Linker Flags に -ObjC を追加(私の環境では既に追加されていた)


## admobプラグインを追加

以下、コマンドでAdmobプラグインを追加

```
phonegap local plugin add https://github.com/aliokan/cordova-plugin-admob
```

## Admobプラグインの設定

### まずは簡単に一連の設定の流れ

1. AdMobPlugin.js を www/ 以下のどこかに置く
2. index.html (など)から AdMobPlugin.js を読み込む
3. index.js に関数を追加して、起動時に広告読み込むようにする

下部に表示させるなどのhtmlの変更は不要のようだ。

## AdMobPlugin.js を配置

Admobプラグインにある AdMobPlugin.js を www/ 以下のどこかに置く

[cordova-plugin-admob/www/AdMobPlugin.js at master · aliokan/cordova-plugin-admob](https://github.com/aliokan/cordova-plugin-admob/blob/master/www/AdMobPlugin.js "cordova-plugin-admob/www/AdMobPlugin.js at master · aliokan/cordova-plugin-admob")


## index.html にAdMobPlugin.jsを追加

僕の場合、以下のような感じ。
index.jsで使うので、その前に読み込む。

```
   <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/AdMobPlugin.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" charset="utf-8">
        app.initialize();
    </script>
```

これで、グローバルな var admob が export されて以下の4つのfunctionが使えるようになる

* admob.createBannerView()
* admob.createInterstitialView()
* admob.requestAd()
* admob.killAd()


## index.jsを編集

Admobプラグインの Example/index.js を参考に下記のような function を追加する

recievedEvent に app.addBanner(); を追加するのを忘れないように注意。

ここで admob.* な functionを利用している。

```javascript

    receivedEvent: function(id) {
        app.addBanner();
        
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');
        
        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');
        
        console.log('Received Event: ' + id);
    }, 
    
    addBanner: function() {
        var successCreateBannerView = function() { console.log("addBanner Success"); admob.requestAd({'isTesting': true},success,error); };
        var success = function() { console.log("requestAd Success"); };
        var error = function(message) { console.log("Oopsie! " + message); };
        
        var options = {
            'publisherId': 'Ad unit ID',
            'adSize': admob.AD_SIZE.BANNER
        }
        admob.createBannerView(options,successCreateBannerView,error);
    },
    
    addInterstitial: function() {
        var successCreateBannerView = function() { console.log("addInterstitial Success"); admob.requestAd({'isTesting': true},success,error); };
        var success = function() { console.log("requestAd Success"); };
        var error = function(message) { console.log("Oopsie! " + message); };
        
        var options = {
            'publisherId': 'Ad unit ID'
        }
        admob.createInterstitialView(options,successCreateBannerView,error);
    },
    
    killAd: function() {
        var success = function() { console.log("killAd Success"); };
        var error = function(message) { console.log("Oopsie! " + message); };
        admob.killAd(success,error);
    }
```


上記をやったら、実機では広告が下部に表示されました。
iOSシミュレータでは表示されませんでした。

ドキュメントが本当になくて面倒でしたが、意外にさくっと行きました。

## コンパイル時にエラー

### エラー内容

```
warning: no rule to process file '/Users/hoge/app_name/platforms/ios/AppName/Plugins/com.google.cordova.plugin.AdMobPlugin/libGoogleAdMobAds.a' of type archive.ar for architecture armv7s
```

### 対応方法

個別に最新のAdmob SDKを入れているので、Admob Pluginの方は削除

Target -> Build phases のタブで

以下の2つの項目で
* Compile Sources 
* Link Binary With Libraries 

で、 libGoogleAdMobAds.a が赤くなっているので、 - で削除


## ドメイン・ホワイトリスティング問題?

以下の情報確証ないです。
僕の実機テストでは問題なかったようです。

ドメイン・ホワイトリスティング問題がないか念のため確認するために、＜access＞ element の origin 属性 を "*" に設定した方が良い?

www/config.xml の該当行を以下の様にするという意味だと思うが、セキュリティ的にどうなのか。

```
<access origin="*" />
```

## 検索用語

phonegap, cordova, admob, google, xcode, ios, iphone, ipad,