Flash Builder Burritoで作ったアプリにAdmobの広告を無理やり表示させてみる

スマートフォンアプリの広告といえばAdmobが有名じゃないでしょうか。
それぞれの用途に合わせたSDKやコードも準備されていて、使用言語以外に特に無駄な知識はいりません。
しかし、AndroidアプリケーションのSDKはJAVA用のプラグインでFlash Builder Burritoを使用していてもAdmobの広告を貼り付けることができません。
なので、SmartphoneWebのコードを使用して無理やり広告を表示させる方法を紹介します。
※本来の目的はアプリケーションのために出す広告であって、この方法がAndroidアプリに貼り付ける適切な方法であるとは言えません。自己責任でお願いします。

HTMLファイルの作成

まずはバナーを表示するためのHTMLを作成します。
AdmobのSmartphoneWebへ登録して、パブリッシャーコードを取得してください。


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>admob</title>
<style type="text/css">
*{margin:0; padding:0; border:0;}
</style>
</head>

<body>
<script type="text/javascript">
var admob_vars = {
 pubid: 'xxxxxxxxxxxxxxx', // publisher id
 bgcolor: '000000', // background color (hex)
 text: 'FFFFFF', // font-color (hex)
 ama: false, // set to true and retain comma for the AdMob Adaptive Ad Unit, a special ad type designed for PC sites accessed from the iPhone.  More info: http://developer.admob.com/wiki/IPhone#Web_Integration
 test: true // test mode, set to false to receive live ads
};
</script>
<script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>
</body>
</html>

pubidには個別のパブリッシャーIDを入れます。実際の広告を表示させる場合はtest:trueをtest:falseに変更する必要があります。
HTMLファイルをsrc/assetsへadmob.htmlという名前で保存します。

Androidアプリケーションの作成

次にFlash Builderを起動してAndroidアプリケーションの作成をします。

まずはinitializeイベントを登録してStageWebViewにローカルのHTML配置してみましょう。
initializeイベントではStageが取得できないため、少し変わった書き方になっています。実際に、ここのコードを外してもらうとStageWebViewが表示されないことが確認できます。

private var webView:StageWebView;
public static const ADMOB_URL:String = "file:///android_asset/assets/admob.html";
protected function view1_initializeHandler(event:FlexEvent):void
{
  var target:DisplayObject = this;
  while(target.parent){
    target = target.parent;
  }
  var s:Stage = target as Stage;
				
  webView = new StageWebView();
  webView.stage = s;
  webView.viewPort = new Rectangle(0,s.stageHeight - 72,s.stageWidth,72);
  webView.loadURL(ADMOB_URL);
}

ローカルのファイルを読み込むには”file:///android_asset/”+ファイルまでパスを書くことで表示させることができます。
高さが72になっているのはAdmobのバナーを見ながら微調整した結果です。
Admobのバナーはスマートフォンかどうかの判定を行い、表示させるかさせないかを判断するため、エミュレータでは確認できませんので、端末にて確認してください。端末で表示されなければ、単純にAdmobの広告表示率が悪いだけなので、時間を置いて確認してみてください。

広告のリンク先をブラウザで開くようにする

実際にここでクリックしてみても、StageWebView内でページ遷移が行われて何がなんだかわからない状態なので、クリックした時にブラウザで開くように書き換えます。

protected function view1_initializeHandler(event:FlexEvent):void
{
  var target:DisplayObject = this;
  while(target.parent){
    target = target.parent;
  }
  var s:Stage = target as Stage;
				
  webView = new StageWebView();
  webView.stage = s;
  webView.viewPort = new Rectangle(0,s.stageHeight - 72,s.stageWidth,72);
  webView.loadURL(ADMOB_URL);

  webView.addEventListener(Event.COMPLETE,onComplete);
}

protected function onComplete(event:Event):void
{
  webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE,update);
}

protected function update(event:LocationChangeEvent):void
{
  if(webView.location != ADMOB_URL){
    event.preventDefault();
    navigateToURL(new URLRequest(event.location));
  }
}

initializeイベントにLocationChangeイベントをaddEventListenerしてもいいように感じますが、まずStageWebViewを作成した時にloadURLでundefinedを読み込みADMOB_URLを読み込むので(憶測ですが)、すぐにLocationChangeイベントが発生するのを防ぐためです。

updateでは、広告をクリックして遷移先がADMOB_URLから離れる場合にevent.preventDefault();で、デフォルトで発生するイベントを解除します。ここでのデフォルトで発生するイベントとは、StageWebView内でのページ遷移になります。
キャンセルしたらnavigateToURL();でリンク先をブラウザで開くようにします。

navigateToURLは便利で引数の文字列に”sms:”でSMS、”mailto:”でメール、”tel:”で電話、”http://”が含まれているとブラウザ、”market://”が含まれているとマーケットで開くことができます。

これでAdmobの広告を配置できるようになりましたが、始めでも触れたように本来とは使用用途が異なっているため、このやり方が適切な方法とは言えません。実際に広告を組み込んだアプリをマーケットに出す際は自己責任でお願いします。

————————————————————————-

追記

コメントよりトライポットけんさんがこの記事を参考にAdMakerの広告を埋め込んでみたところ使用の許可が出たみたいです。
しかし、何かあったときに私は責任を負えませんので、ちゃんと確認を取ってからお願いします。

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

FlashProですが、このやり方を参考にして、広告を出してみました。

AdMakerさんの広告ですが、これでもOKだよって、了承がとれました。
すべての場合OKかどうかわからないので、人にはおすすめしにくいですが、とりあえずできました。

感謝!

虎卓 for Android
https://market.android.com/details?id=air.net.tripot.TigerCalc

トライポットけん2011年9月6日 11:37 AM

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ