AIRアプリに広告をのせてみました。
自分が取った方法をここへ連ねます。※実際のアプリはまだリリースしてません。2012年4月下旬くらいかな。そのときにまたブログを更新します。
手順0：おおまかな仕組み
基本AIRは外部ファイルとの連携が可能なので、外部の広告が貼られたHTMLを読み込めばOK。Flashでは昔からLoadMovieとかLoadVarsなどの通信手段があったので調べなくても広告は貼れるだろうとタカをくくっていた。
手順1：AIRアプリを作る
FlashCS5.5を使って、AS3.0で作成しました。今回は知り合いのアプリに広告を引っ付けることにしました。
通信が必須になるのでパーミッションのINTERNETアクセスにチェックをいれてパブリッシュします。
手順2：広告会社のアカウント作成
AD系のアカウントを取っておきます。ここではAD-STAさんを例にしてみます。
WEBサイトとして登録し、HTMLのタグを取得します。また、色々なサイトでAIRで広告貼付けは広告会社の規約に反しているかグレーみたいな記述があるので、一応AD-STAさんにメールで確認を取りました。いまのところ、今回のようにHTMLの広告をネイティブアプリに貼付けてもいいよという了承が得られたのは他にAmoAdさんがありました。他も了承を得ていましたが、色々な意味で動作が安定していたのはこの２つです。
手順3：広告HTMLの作成
タグを取得したら、プレーンなHTMLを作ってサーバにUPします。HTMLは以下のようになります。
<html>
<head>
<script type="text/javascript">
※AD-STAから取得したscript
</script>
※AD-STAから取得したscript
</head>
<body style="background-color:#000000; " topmargin="0" leftmargin="0" >
<div style="text-align:center; ">
<div id="adslt1" class="adsta_adv slt1" ></div>
</div>
</body>
</html>
なんのことはない、プレーンなHTMLですが、ポイントはbodyタグになりますか。ここは見た目の問題であって技術的な所ではないのですが、まず、topとleftのmarginを０にしておきます。こうしないとスマホから広告がはみだします。また背景色を黒にしておくと画面が締まっていい感じになるよね(by 京子)
また、iOS版の場合は横320pxでレンダリングしない場合があるので
<meta name="viewport" content="width=320" />
これも追加しておきましょう。
※自分の場合はiOS版とandroid版で呼ぶHTMLを変えてます。
手順4：ASにてStageWebViewで広告HTMLを表示
AIRでHTMLを表示するにはStageWebViewを使います。こいつの挙動はクセがあるので注意が必要ですな。今回はアプリ立ち上げからずっと一番下に広告を常駐させるスタイルをとりました。
まずこいつはFlash上のレイヤーを完全無視して一番上に登場し、一度作った場合位置を変えることができません。位置を変えるときは一旦削除してもう一度作成するしかないようです。
var webView:StageWebView = new StageWebView();
var url:String = "※広告のURL";
public function ※ドキュメントクラスのコンストラクタ {
stageWebView();
}
public function stageWebView() {
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 720, stage.stageWidth+15, 100);
webView.loadURL( this.url );
webView.addEventListener(Event.COMPLETE,onComplete);
}
protected function onComplete(event:Event):void{
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE,update);
webView.removeEventListener(Event.COMPLETE,onComplete);
}
protected function update(event:LocationChangeEvent):void{
if(webView.location != this.url ){
event.preventDefault();
navigateToURL(new URLRequest(event.location));
this.stageWebView();
}
}
ドキュメントクラスにて実装しました。こんな感じでStageWebViewを使います。広告をクリックしたときにLocationChangeイベントが呼び出されますが、そこで得たURLを使って別windowが立ち上げます。かつ現在動作しているアプリに影響を与えたくないため、navigateToURLをしたあと、もう一度広告を表示させる関数を呼びます。
以上でAIRアプリに広告が貼り付きます。
.apkファイルはその知人が作るので、ここにはまだ掲載できませんが、.airファイルができたので
とりあえずPCのデスクトップ上で確認できます。
怒ラム缶PC版googlePlay :
怒ラム缶最後に
AIRで金稼ぎをする意味では広告が可能であります。また今後GREEさんやモバゲーさんがAIR SDKを公開しアプリ内課金もできるようになるはずなので、今は虎視眈々とAS3.0並びにサーバサイドの技術(JavaとかPHPとか)もすぐにできる体制を整えておきましょう。やるべきなのはAIRとサーバの通信なのです
 | 「デコポニテの魔女」の提供でこのブログは書かれております。
デコポニテの魔女はAndroid端末用簡易右スクロールシューティングゲームです。
Technology By: Adobe AIR & CakePHP |
