2013年9月15日日曜日

AdDuplex (2/3) アプリへの埋め込み

前回の概要に続いて、今回の記事ではAdDuplex への登録、アプリへの埋め込みについて…引っ掛かるかも?という所を簡単に説明します。

前回紹介したイメージ画像ですが…股間が光り輝いているのは何の暗喩なのか
なお、この記事ではWindows 8, C#/XAML ストアアプリ での例を元に説明しています。


アプリの登録

画面の指示に従ってアカウントを作成し、アプリを登録します。
一通り登録が終わった所が下の画面です。

「App Details」画面

「App ID」は、AdDuplex によって振られるアプリのID です。これをアプリに埋め込む事になります。
「Status」は、最初…開発マシンで使っている間は「Inactive」、ストアアプリが実際にリリースされ、広告を出し始めると「Active」になります。

Inactive からActive への移行に当たって、特にAdDuplex ダッシュボード上で必要な作業はありません。各地であなたのアプリが使用され、広告が表示されるようになるとAdDuplex はそれを察知して勝手にActive になります。

「Package Family Name」は、ストア上のファミリーネームです。ソリューション内の「Package.appxmanifest」→「パッケージ化」タブに表示されている「パッケージ ファミリ名」を入力します。

パッケージ ファミリ名:「Package.appxmanifest」の「パッケージ化」に書いてあります

ここの「パッケージ ファミリ名」はアプリが開発者アカウントを使ってパッケージが作成されるまで確定しない(はず)です。頭にアカウント名が入っていない、GUID のような名前の間はAdDuplex のPackage Family Name に入力しても受け付けられません。

又、Package Family Name は一度ストアに登録すると変わるものでは無いので、バグ修正・機能追加などでストアアプリを更新したとしても、AdDuplex ダッシュボード上での作業は特にありません。

SDK のインストール

Windows8 版のAdDuplex SDK は、NuGet で配布されています。
埋め込むストアアプリのソリューションを開き、Visual Studio のメニュー 「ツール」→「ライブラリ パッケージ マネージャー」→「ソリューションの NuGet パッケージの管理」を選択すると、NuGet パッケージ管理画面が開くので、右上の検索窓から「AdDuplex」を検索し、「AdDuplex SDK for Windows 8」をソリューションに追加します。

NuGet を開いて

SDK をソリューションに追加

表示コードの追加

Namespace の追加

(ここ以降はDataTemplate/DataTemplateSelectorを使う普通の話で、AdDuplex Uniqueな話はあまり出てきません。)

ここでは、futa8 で使っている、GridView 上のアイテムとしてAdDuplex の広告を表示するコードを元に説明します。
アプリケーション上に固定の広告枠を持つタイプだと又方法が異なるかもしれません。

まず、表示するページのXAML・C# Code behind に Namespace の宣言を追加します。

Code behind に追加
XAML に追加

DataTemplate の作成


GridView に表示するので、DataTemplate 「FutaGridAdDuplexTemplate」を作成します。上の登録画面で貰ったAdDuplex のAppId はここに入ります。
futa8 では 「Microsoft Advertisement の広告が無かったらAdDuplex を表示する」というフォールバックを行うため、同じ大きさのMicrosoft Advertisement 用のDataTemplate 「FutaGridAdTemplate」も作成しています(以降、Microsoft Advertisement は、コードの中では「PubCenter」の表記になっています)。

XAML DataTemplate の作成

DataTemplateSelector の作成


futa8 では、レス一つ一つ・広告をそれぞれアイテムとして持つ ObservableCollection をデータとして持ち、それをGridView のItemsSource としてバインドすることでレス・広告の表示を行っています。
アイテムの内容によってDataTemplate を切り替える為、DataTemplateSelector を用意します。UniqueId に入っている文字列でDataTemplate を切り替える訳です。普通のレスの場合、UniqueId にはレス番が入ります。

XAML DataTemplateSelector の宣言

DataTemplateSelector の Code
item の追加はfutaba のHTML・4chan のjson をParse する際に行っています

……これで、「AdDuplex」をUniqueId に持つItem をObservableCollection に追加するとAdDuplex 広告が表示される、ようになりました。
なお、広告をクリックすると、Windows 8 の「ストア」が起動し、アプリの紹介ページが開きます。起動等はAdDuplex のコンポーネントが行うので特にアプリ側でコーディング作業は必要ありません。

フォールバックの仕掛けを作る


最後に、フォールバックの仕掛けを作ります。Microsoft Advertisement の広告が無い場合、Errcode.NoAdAvailable をパラメータとするイベント ErrorOccurred が発生します。
futa8 では、それを受けて、ObservableCollection からPubCenter アイテムを引っこ抜いて捨て、AdDuplex アイテムを追加するという(雑な)方法で広告を差し替えています。下の例では「fdt.Items」がObservableCollection です。このObservableCollection は GridView にバインドされているため、これだけで直ぐにUI に反映されます。

PubCenter Item を捨て、AdDuplex Item を挿入
GridView 上のアイテムとして表示

この状態で、お手元の開発マシンでは色々な他アプリの広告が表示されるようになっているはずです(が、AdDuplex Dashboard 上は inactive)。
このアプリをストアに送り、審査が通り、各地で使われるようになると晴れて Active となります。

しかし…最後に、もう一つやらねばならない「自アプリの広告作成」が残っています。
長くなってしまったので再び章を分けます。




0 件のコメント:

コメントを投稿