Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@hshimo

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

More than 5 years have passed since last update.

バージョン

  • 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

ちなみに、上記は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

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を利用している。


    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,

11
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
hshimo
ブロックチェーン専門企業、コンセンサス・ベイス代表、志茂 博の技術メモ。 興味ある方は、日本ブロックチェーンユーザ会へ。http://crypto-tech.jp/
consensus-base
ブロックチェーン技術の専門企業。大企業様を中心に国内有数の実証実験・開発の実績があり、様々な実装の経験・ノウハウがある。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?