Posts Cordova 3.5でAdmobのバナー広告を表示する
Post
Cancel

Cordova 3.5でAdmobのバナー広告を表示する

バージョン
Xcode 5.1.1
Cordova 3.5.0-0.2.4
Google Mobile Ads SDK iOS-6.9.2

PhoneGapでAdmob広告を追加する方法はこちらに書かれている。
http://qiita.com/hshimo/items/0229e03614d0843c8217

Admobの準備

Admobにアカウントを作り、アプリを登録後にバナーを作成する。
バナーを作ると広告ユニット IDが生成される。これを後で使う。

作成後、アプリを起動してもすぐにはバナーが表示されず、表示されるまで数時間かかったので、アカウントやバナーは先に作っておくと良いかもしれない。

Cordovaの準備

Cordovaをインストールしてプロジェクトを作成する。
以下を参考に。
http://cordova.apache.org/docs/en/3.5.0/guide_cli_index.md.html#The%20Command-Line%20Interface

以下は、MacでiOSのアプリをビルドするまでの例

$ sudo npm install -g cordova  
$ cordova create hello com.example.hello HelloWorld  
$ cd hello  
$ cordova platform add ios  
$ cordova build  

ビルドすると、platformsディレクトリ内のiosディレクトリにXcodeのプロジェクトファイル(〜.xcodeproj)ができる。

Cordovaにadmobプラグインを追加

cordova-plugin-admobを追加する。
https://github.com/aliokan/cordova-plugin-admob

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

Admob SDKのダウンロードと導入

生成されたXcodeのプロジェクトファイルを開いて、以下のスタート ガイドに従ってSDKを導入する。-ObjCは追加済みだった。
https://developers.google.com/mobile-ads-sdk/docs/?hl=en_US#ios

HTMLにAdmobプラグインを組み込む

今回は、以下のようにAdMobPlugin.js、index.js(プラグインのExampleフォルダに入っていたもの)を配置して読み込んだ。
その後、app.initialize();を実行している。
[javascript]

[/javascript]
indes.js内の「Ad unit ID」をAdmobで生成された広告ユニット IDに置き換える。

ビルド

cordovaのビルドをしてからXcodeでビルドする。
実機でもシミュレータでもバナーが表示された。

CakePHPをComposerでインストール

CurlFtpFSをCentOS6.5にインストール