TitaniumアプリにAdMob広告を表示する方法 - Android編

昨日は iPhoneアプリでAdMob広告表示できるようになったので、次はAndroidアプリでもチャレンジ。
まずはiPhoneアプリが動いた状態に何も手を加えないでAndroidエミュレータで動かしてみたら、ti.admobモジュールが見つからないって怒られたというところまで昨日のエントリーに書いた。

Uncaught Error: Requested module not found: ti.admob

そこでAndroid用のモジュールを追加してみる。

Titanium StudioにAdMobモジュールを追加する

≫appcelerator / titanium_modules
こちらの dist フォルダから ti.admob-android-2.x.x.zip をダウンロードする。iosと違って、直下になかったのでかなり探しまわった。。。

ダウンロードしたZIPファイルを解凍すると modules フォルダが生成されるので、フォルダまるごとTitanium Studioのフォルダにコピーする。これは iPhone版と同じ。

$ cp -R modules ~/Library/Application\ Support/Titanium/

~/Library/Application\ Support/Titanium/modules/android/ti.admob がAndroid用AdMobモジュールにあたる。

tiapp.xmlに設定を追加する

iPhoneアプリだけの時は次のように書いた。

  <modules>
    <module version="1.x.x">ti.admob</module>
  </modules>

でも、AndroidとiPhoneの両方をサポートするには、プラットフォーム毎に指定しないといけないっぽい。

  <modules>
    <module platform="android" version="2.x.x">ti.admob</module>
    <module platform="iphone" version="1.x.x">ti.admob</module>
  </modules>

これで動かしてみたら、Androidエミュレータ上でアプリは起動したけど、広告が表示されなかった。

コンソールの出力を確認してみたら次のような警告が出てた。

W/Ads     (  375): Not enough space to show ad! Wants: <480, 75>, Has: <320, 50>

サイズの指定が合ってないと表示できない？

画面サイズに応じた広告サイズを指定する

index.js で画面幅を取得して、動的に広告サイズを変更するようにした。

var win = Ti.UI.createWindow({
	backgroundColor: '#f4f4f4'
});
var view = Ti.UI.createView();
var admob = require('ti.admob');
var w = Ti.Platform.displayCaps.platformWidth;
var h = w * 5 / 32;
var adview = admob.createView({
    top:0,
    left:0,
    right:0,
    width:w,
    height:h,
    testing:true,
    publisherId:'hogehoge'
});

view.add(adview);
win.add(view);
win.open();

これでAndroidアプリでもAdMob広告表示ができた。