ノラプログラマーの技術メモ

ネットで調べても出てこなかった情報を載せていきたい技術系ブログ。

Flash CS6 AIRで作ったアプリにNend広告を表示する方法

概要

adobeflash cs6 airでアプリを作ると、androidにもiphoneにもワンソースでOKだから便利だ。でもどうせならnend広告も載せてみたい。

nendの対応状況を見てみると以下の通り。
・FlashBuilder 4.7
Flex SDK 4.6
AIR SDK 3.7

FlashBuilderかー。それにFlexSDKかー。持ってないなー。ということで、FlashCS6に書き直してみた。

環境

adobe flash cs6
windows 8.1 64bit

手順

「assets」フォルダを作成し、その中に「nend.html」ファイルを新規作成する。サンプル通りだけど中身はこんな感じ。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" >
		<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
	</head>
	<body style="margin:0px;background-color:#000000" >
		<script type="text/javascript" >
			var nend_params = {"media":82,"site":2425,"spot":3172,"type":1,"oriented":2};
		</script>
		<script type="text/javascript"src="http://js1.nend.net/js/nendAdLoader.js"></script>
	</body>
</html>

Air for Androidの設定で、含めるファイルに「nend.html」を追加しておく。

f:id:kawai_norimitsu:20140717141403p:plain

あと外部サイトにアクセスできるようにINTERNET権限を追加しておく。

f:id:kawai_norimitsu:20140717141456p:plain

最後にアクションスクリプトを以下のように書く。ちなみにwebView.viewPortで広告の表示位置やサイズを変更できる。

package
{
	import flash.display.MovieClip;
	import flash.net.navigateToURL;
	import flash.net.URLRequest;
	import flash.events.*;
	import flash.media.*;
	import flash.filesystem.*;
	import flash.system.*;
	
	public class Main extends MovieClip
	{
		public var webView:StageWebView = new StageWebView();

		//
		// コンストラクタ
		//
		public function Main()
		{
			this.addEventListener(Event.ADDED_TO_STAGE , handleLoad);
		}
		
		//
		// nend広告を表示する
		//
		public function handleLoad(e:Event):void
		{
			var os:String = flash.system.Capabilities.os;
			var path:String;
			var filePath:String = "/assets/nend.html";

			// 広告サイズ
			var width:Number = 360;
			var height:Number = 50;

			// WebView設定
			webView.stage = this.stage;
			webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, onLocationChanging);
			webView.viewPort = new Rectangle(0, 0, width, height);
			
			if (os.indexOf("iPhone") != -1) {
				// iPhone
				path = new File(new File("app:"+filePath).nativePath).url;
			}else {
				// Android
				path = "file:///android_asset"+filePath;
			}
			webView.loadURL(path);
		}

		//
		// 広告がクリックされた
		//
		public function onLocationChanging(e:LocationChangeEvent):void
		{
			// アドレス変更をキャンセル
			e.preventDefault();

			// ブラウザ起動
			navigateToURL(new URLRequest(e.location));
		}
	}
}

以上、実機で実行してみる。nend広告の表示イメージはこんな感じ。

f:id:kawai_norimitsu:20140717140420p:plain

iOSも同じ感じでいけます。

最後にgithubにソースを置いておきましたので、よければどうぞー。

とは言っても、アプリ開発者はcocos2d-xに流れてるようなので今更こんな情報が役に立つかどうか疑問ですが…。

追記:

画面遷移などで広告を消す場合は以下のコードを挿入。

webView.dispose();