【Windows8】HTML5/JavaScriptアプリに広告を表示する

2012年10月31日

【Windows8】HTML5/JavaScriptアプリに広告を表示する

今回はWindows 8アプリでHTML5/JavaScriptを使って書かれたアプリに
広告を表示する方法を翻訳していきます。

参考サイト : HTML 5 JavaScript | Microsoft Advertising Services
意訳ですので、自己責任でお願いします。

下記のステップはHTML5/JavaScriptで書かれたWindows 8アプリへの広告導入方法です。ディベロッパーはすでにアプリを書いたか、Windows 8スタイルのアプリのサンプルなどから書いている事を前提としています。

このトピックについて

HTML5/JavaScriptアプリへのAdControlの組み込み方法
HTML5/JavaScriptアプリへのAdControlのドラッグ・アンド・ドロップでする方法

HTML5/JavaScriptアプリへのAdControlの組み込み方法

始める前に

SDKを使い始める前に、Windows 8、Visual Studio 2012、広告SDKのインストールを終わらせておかなければいけません。詳細はGetting Startedを参考にしてください。

チュートリアル

Solution Explorerを開いて、package.appxmanifestファイルをダブルクリック。

Capabilitiesタブを開いて、Internet Clientがチェックされている事を確認。この許可が無いと、広告クライアントは広告の取得が出来ません。

Solution Explorerから、Referencesを右クリックし、Add Reference…を選択。

Windows→Extensionsとクリックし、Microsoft Advertising SDK for Windows 8 (JS)を選択してOKを押す。

参照先がちゃんと追加されているか確認。Solution Explorerは下の写真のようになっているはずです。

default.htmlを開く。(もしくは適切な他のHTMLファイルを開く。)
<head>セクションのdefault.cssとdefault.jsの参照リンクの後に、ads.jsの参照リンクを追加。

<!-- Microsoft Advertising required references -->
<script src="/MSAdvertisingJS/ads/ad.js" ></script>

注意事項:この部分はheadタグ内のdefault.jsの後に記述して下さい。それ以外の場所ですとエラーの原因になります。

default.htmlファイルのbodyタグ内を編集して下記を追加します。

<div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 250px; height: 250px; z-index: 1" 
     data-win-control="MicrosoftNSJS.Advertising.AdControl" 
     data-win-options="{applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab', adUnitId: '10043105'}">
</div>

アプリを実行し、広告が下記のように表示されているか確認。

広告導入済みのdefault.htmlサンプル

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My_Ad_Funded_Windows8_JS_App</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <!-- My_Ad_Funded_Windows8_JS_App references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>

    <!-- Microsoft Advertising required references -->
    <script src="/MSAdvertisingJS/ads/ad.js"></script>

</head>
<body>

    <div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 250px; height: 250px; z-index: 1" 
      data-win-control="MicrosoftNSJS.Advertising.AdControl" 
      data-win-options="{applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab', adUnitId: '10043105'}">
    </div>

    <p>Content goes here</p>

</body>
</html>

HTML5/JavaScriptアプリへのAdControlのドラッグ・アンド・ドロップでする方法

ad.jsファイルをProject Explorerからdefault.htmlのheadセクションにドラッグする事で、AdControl用のコードを自動的に追記する事が可能です。

チュートリアルの6、7をドラッグ・アンド・ドロップで実行する事が可能です。終わったら8番から続けて下さい。

もしくは、Blend for Visual Studioを使って、AdControlをアプリにドラッグ・アンド・ドロップする事が可能です。

上記チュートリアルの5まで従い、Visual StudioのProject Explorerでprojectを右クリックをして、メニューの下の方のOpen in Blendを選択。BlendのAssetsタブを開き、Advertisingを選択状態で、AdControlをデザインスペースにドラッグ・アンド・ドロップ出来ます。