ネイティブアドのすゝめ(Android)


家族とMacとネット環境さえあれば、どこでも生きていける[@neiraza](http://blacksheep.hatenablog.com/)です。
今年の10月から[サイバーエージェント](https://www.cyberagent.co.jp/)のアドテク本部AdTech NativeUnitてとこで、iOSおよびAndroid向けの各広告プロダクトのSDKをつくってます。

[Android Studio](http://developer.android.com/sdk/installing/index.html?pkg=studio)のbetaがついに取れましたね。広告SDKを利用される方が、どんどんAndroid Studioに移行してくださると、仕事でも完全に移行できるのになーなんて、思ったりしてます。

最近、ネイティブアドのお仕事をしており、良い機会なので色々とまとめてみました。

さて、今回の内容ですが前半部分は[ネイティブアドのすゝめ(iOS)](http://qiita.com/neiraza/items/0b59f20eeeccaab2c0f7)で一部扱った内容なので、既にご覧になった方は申し訳ないですが、読み飛ばしちゃってください。

## ネイティブアドの概要

### @neiraza的な解釈

<b>「媒体に自然と表示し見せる、広告自体の呼び出し元となる枠」</b>
ネイティブアドにとって重要なのは、
それ単体で価値のある枠で、その枠をタップした先に利用者が求める答えがある、その答えこそが広告だった。
たぶん、そんな状態なんだと思います。

僕は今のところ、ネイティブアドと言われる広告を入れた日本のアプリしか見たことがないのですが、
これが成功する、カッコイイ、ネイティブアドだぜ！ってのは無いように思えます。
ずっと以前からネイティブアドと呼ばれずに存在していたタイプの広告に名前がついたくらいの状況かなと思ってます。

何か面白い案とか、ないすかね。

ちなみに僕は最初、ネイティブアドってネイティブ技術（モバイルの）でつくる広告だと思ってましたが、普通にJSでタグ埋め埋めな広告とかも指すので、結構範囲は広いです。

### 業界標準的なやつ

業界標準的な取りまとめは[米国のオンライン広告の業界団体IAB](http://www.iab.net/)や[一般社団法人 インターネット広告推進協議会（JIAA）](http://www.jiaa.org/index.html)などのサイトで、抑えたほうが良いと思います。

特に[THE ADVERTISING PLAYBOOK](http://www.iab.net/media/file/IAB-Native-Advertising-Playbook2.pdf)は一度、目を通した上で日本の商慣習、現状などを見ていったほうが良いと思います。

## ネイティブアドに触ってみよう

[MoPub Inc.](http://www.mopub.com/)が公開している[mopub-android-sdk](https://github.com/mopub/mopub-android-sdk)を適当に解説しつつ、動かしてみます。
MoPub?って人もいるかと思いますが、Twitterが昨年９月に４億ドルぐらいで買収したモバイル広告ネットワークをやっている会社です。

### 動かしてみよう

ソースは[mopub-android-sdk](https://github.com/mopub/mopub-android-sdk)です。

画面起動後に、NativeAd(TableView Manager)をタップする。
（下記画像を参照のこと）

![device-2014-11-26-133650.png](https://qiita-image-store.s3.amazonaws.com/0/4107/40742fc0-872e-3e57-aa15-e95f9af39491.png "device-2014-11-26-133650.png")

すると下みたいな表示が出てきます。
こいつはUITableView内の2行目だけをネイティブアドに差し替える実装をしています。ソースは[こちら](https://github.com/mopub/mopub-ios-sdk/blob/master/MoPubSampleApp/Controllers/MPNativeAdTableViewController.m)。

![device-2014-11-26-133722.png](https://qiita-image-store.s3.amazonaws.com/0/4107/502205c2-3264-05f2-f976-dd46afcb6e41.png "device-2014-11-26-133722.png")

Twitterでよくこんな感じの広告みますよね。

![device-2014-11-26-133730.png](https://qiita-image-store.s3.amazonaws.com/0/4107/8c7ebb2f-6344-22d1-f6ca-93686c7744c8.png "device-2014-11-26-133730.png")

### 実装をみてみよう

さて、スーパーざっくり解説を始めます。

[NativeListViewFragment](https://github.com/mopub/mopub-android-sdk/blob/master/mopub-sample/src/main/java/com/mopub/simpleadsdemo/NativeListViewFragment.java)が、ListViewを表示している画面です。
このListviewにsetAdapterするアダプターを工夫しています。
それが、[MoPubAdAdapter](https://github.com/mopub/mopub-android-sdk/blob/master/mopub-sdk/src/main/java/com/mopub/nativeads/MoPubAdAdapter.java)です。

広告以外の通常行は、ArrayAdapterにandroid.R.layout.simple_list_item_1をぶっこんでいます。
そのArrayAdapterを引数にMoPubAdAdapterのインスタンスを生成します。

`mAdAdapter = new MoPubAdAdapter(getActivity(), adapter);`

このインスタンスに対し、[MoPubNativeAdRenderer](https://github.com/mopub/mopub-android-sdk/blob/master/mopub-sdk/src/main/java/com/mopub/nativeads/MoPubNativeAdRenderer.java)を登録します。

MoPubNativeAdRendererに対し、[native_ad_list_item](https://github.com/mopub/mopub-android-sdk/blob/master/mopub-sample/res/layout/native_ad_list_item.xml)を設定しておくことで広告表示のレイアウトの準備完了です。

あとはListViewにセットしたMoPubAdAdapterが、通常のデータソースの挙動と同じく呼ばれるたびに、広告行か否かを判定し、広告行の場合はこのアダプター内の独自処理を呼び、そうでない場合はArrayAdapterの処理を明示的に呼び出す形で成立しています。

この辺の考え方は、HeaderViewListAdapterなどに近いと思います。
iOSに比べると、Androidらしい作りになっていると思います。

### 実装を読んだ感想

サンプルには[NativeGalleryFragment](https://github.com/mopub/mopub-android-sdk/blob/master/mopub-sample/src/main/java/com/mopub/simpleadsdemo/NativeGalleryFragment.java)というものもありますが、な[Gallery](http://developer.android.com/reference/android/widget/Gallery.html)（Deprecated since API level 16）のことではなく、[ViewPager](http://developer.android.com/reference/android/support/v4/view/ViewPager.html)（android.support.v4.view.ViewPager）のサンプルです。

しかし、MoPubAdAdapterは[BaseAdapter](http://developer.android.com/reference/android/widget/BaseAdapter.html)をベースにしているため、ListView以外の下記Viewに対するAdapterとしても使えると思います。広告を出したいかどうかは別として。

* [GridView](http://developer.android.com/reference/android/widget/GridView.html)
* [AdapterViewFlipper](http://developer.android.com/reference/android/widget/AdapterViewFlipper.html)
* [StackView](http://developer.android.com/reference/android/widget/StackView.html)
* [ExpandableListView](http://developer.android.com/reference/android/widget/ExpandableListView.html)
* [Spinner](http://developer.android.com/reference/android/widget/Spinner.html)

__動作は試していません__

## さいごに

2015年もネイティブアドに振り回されながら __「儲かるネイティブアド」__、 __「作っていて/利用していてネイティブアド」__ とかを見つけて、もっと楽しくお仕事が楽しくできたらなーと思っています。


#### エンジニアのネイティブ広告のアドテク社交場ってどこかあれば、おしえてください(T ^ T)