第11回 アプリに広告を出す（後編： 実践編）：連載：Windowsストア・アプリ開発入門（1/2 ページ）

Windowsストアアプリに広告を実装してみよう。今回は、マイクロソフトの「Windows 8アプリ内広告」を組み込んでみる。

[山本康彦（http://www.bluewatersoft.jp/），BluewaterSoft]

powered by Insider.NET

連載目次

　前回はマネタイズの仕組みについて学んだ。今回は、広告の実装について説明する。なお、本稿のサンプルコードは「Dev Center - Windows Store apps サンプル： Windowsストア・アプリ開発入門：第11回」からダウンロードできる。

アプリに広告を付ける

　それでは、実際にアプリに広告を付けてみよう。

　マイクロソフトの「Windows 8アプリ内広告」では、アプリに付ける広告に必要な設定をpubCenterでやってもいいし、VS 2013からも行える。今回は、VS 2013から設定するやり方で説明する。

広告のスペック

　メイン画面の右端に、160×600ピクセルでニュースに関連した広告を出そう（次の画像）。

今回実装した広告を表示しているメイン画面（再掲）
デバッグ実行時の様子。テスト用の広告を表示しているため、ニュースと関係のない内容になっている。

　ただし、「Windows 8アプリ内広告」から広告が配信されてこないときは、次の画像のように＠ITへのリンクなどを表示することとしよう。

広告が配信されないときはこのようなコンテンツを表示する
広告が表示されるエリアだと分かるように領域の右上に「CM」と表示し、領域の下端には＠ITのサイトへのリンクを配置する。

　現在までのところ、広告のジャンルによる違いはあるのだろうが、「Windows 8アプリ内広告」はかなりの確率で配信されない。そこで、上のように自前のコンテンツを表示したり、他の広告配信サービスを表示したりといった工夫が欠かせない。

広告を実装する

　広告を実装するには、アプリで使う広告をpubCenterで作成して「ApplicationId」と「AdUnitId」を取得するステップと、それらを使って実際にコーディングするステップを踏む。

pubCenterで広告を作成する

　pubCenterで広告を作成するには、まず、VS 2013の「接続されたサービスのマネージャー」（「Connected Service Manager」、VS 2013上の表記は「接続済みサービス」または「サービス マネージャー」）を使ってpubCenterに接続する。その手順は、VS 2013のソリューションエクスプローラーでプロジェクトを右クリックし、出てきたメニューから［追加］−［接続済みサービス］を選ぶところから始まる（次の画像）。

VS 2013の「接続されたサービスのマネージャー」を開く

　続いて、表示された［サービス マネージャー］ダイアログの左側で、［Microsoft Ads］−［Microsoft Ads］を選び、その右に出てくる［サインイン］のリンクをクリックする（次の画像）。

VS 2013の「接続されたサービスのマネージャー」でpubCenterへのサインインを選ぶ

　初めての場合は次の画像のようにサインインダイアログが出てくるので、pubCenterへ登録済のマイクロソフトアカウントを入力する。

VS 2013の「接続されたサービスのマネージャー」でpubCenterへサインインする

　これで、VS 2013からpubCenterに接続された。続いて、広告の設定を新しく作っていく。

　サインインすると次の画像のように［アプリケーションの作成］リンクが表示されているので、それをクリックする。

VS 2013の「接続されたサービスのマネージャー」で［アプリケーションの作成］を選ぶ

　すると、次の画像のような［アプリケーションの作成］ダイアログが開く。ここで［アプリケーション名］を入力し、［カテゴリ］を選択し、［広告ユニット名］を入力してから［広告ユニットサイズ］を選んだら、［OK］ボタンをクリックして広告を作成する。

［アプリケーションの作成］ダイアログで広告の設定を作成する

　上で、［アプリケーション名］にはWindowsストアに登録するアプリ名を入力することになっているが、多少違っていても構わない*8。また、後から変えることもできる。［広告ユニット名］は任意だが、上の画像にあるように「＠IT_160x600」などと広告のサイズを入れておくと、pubCenterの実績レポートを見るときに分かりやすくなる。

*8　［アプリケーション名］入力欄は1つしかない。しかし、多言語化対応したアプリでは、アプリ名が複数ある。このことからも、厳密な一致が求められているわけではないことが分かるだろう。

　［OK］ボタンをクリックして［サービス マネージャー］ダイアログに戻ってくると、次の画像のように「アプリケーション」が増えている。後で広告ユニットを追加したくなったときは、アプリケーションを選んでから右側の［構成］リンクをクリックすれば、先ほどの［アプリケーションの作成］ダイアログと同様のダイアログが開くので、そこで作業すればよい。

VS 2013の「接続されたサービスのマネージャー」にアプリケーションが増えた

　さて、［アプリケーションの作成］ダイアログで広告を作ってから［サービス マネージャー］ダイアログを閉じると、プロジェクトの参照設定に「Microsoft Advertizing SDK for Windows 8.1」が自動的に追加され、また、プロジェクトの中に「AdSamplePage.xaml.txt」というファイルが作られている。このファイルに、今作った広告をアプリに組み込むサンプルコードが記述されている（次の画像）。

自動生成された「AdSamplePage.xaml.txt」ファイル

　上の画像で赤枠を付けた部分が、この後の実装で必要になる部分だ。なお、ApplicationIdとAdUnitIdは、pubCenterの［セットアップ］−［広告ユニット］のページに表示される広告ユニット名のリンクをクリックすることでも確認できる。