*

nendのネイティブアドを初心者でもアプリに実装できる手順(準備編)

※当記事は、nendのネイティブアドをSDKで実装してみたい人のための記事です。

 

スマートフォン向けアドネットワーク「nend」、アプリ・Web両メディア向けにネイティブアドを提供開始

 

遂に2015/12/1からnendのネイティブアドが実装できるようになりました。ネイティブアドを使えば、よりアプリに馴染むように広告が実装でき、デザインを崩しません。

バナーでも無く、インターステイシャルでもないネイティブアドを試したい人もいると思います。私も現在開発中のアプリに使ってみようとnendの公式の手順書を読んでみたところ……

「難しい!!」

と思いましたので、その補足の意味をふまえて、同じように苦戦する人向けに書いてみます。

 

なお、バージョンなどは以下の通りとなっております。

Xcode:Version 7.1.1

nendSDK:iOS Ver3.0.1 (2015/12/11 (金))

注意1:初心者向けとはいいつつ、ある程度用語を理解している人を対象に作成しています。(全部は説明しません)

注意2:本記事はインフィード型(UITableViewの間に入れる広告)の実装には対応しておらずカスタム型にしか対応していませんので、あしからず。

注意3:Objective-cです。Swiftには対応してません!(読み替えて下さい……)

スポンサーリンク

実装手順

冒頭で説明したように、おおまかなステップは以下となっております。

nendのネイティブアドの実装手順

  1. nendへの広告枠の登録
  2. SDKのXcodeへの組み込み
  3. ネイティブアドのカスタマイズに関して
  4. 広告を実装するUIViewを作成
  5. ネイティブ広告のロードに関して
  6. ロードした広告をViewへ描画

1. nendへの広告枠の登録

早速説明しようと思ったのですが、1と2に関してはすでに公式のわかりやすいサイトがあるので、それぞれ参考にした方が早いと思いますので、下のサイトを参考にして下さい(え)

参考:

nendのネイティブアド導入までの流れ~STEP①新規広告枠を作成~

ちなみに読んでいくとわかりますが、これはwebサイトのネイティブアドの広告枠の登録ですので、適宜その部分は読み替えて下さい。

参考までに、アプリで新規広告枠を設定する際の選択を載せます。

nendの新規広告枠設定画面

広告画像選択は自分で編集可能なので、画像付きのものはどれを選んでも良いです。広告表示数は、一画面に何個も表示したい場合は選択するといいと思います(今回はとりあえず一つにしました)アプリのSDKで実装する場合はSTEP②まで行く必要はありません。

 

2. SDKのXcodeへの組み込み

今度はgithubにある下記手順書の「事前準備」と「SDKの組み込み」を完了させます。

参考:

ネイティブ広告実装手順

この辺は丁寧に説明してありますので、苦戦する事は無いと思います。

 

3. ネイティブアドのカスタマイズに関して

ここからようやく説明に入ります。まず、何故このネイティブアドの実装が難しいかというと、通常のnendのバナー広告であれば、実装したいUIViewControllerだけにコードを書けばいいのですが、ネイティブアドの場合、レイアウトをあらかじめ定義したビューを用意しないといけません。わかりやすく言うと、登場人物が多いのです。

ネイティブアドの実装に必要な登場人物

  1. 広告を表示したいUIViewControllerのヘッダファイル(MainViewController.h)
  2. 広告を表示したいUIViewControllerメソッドファイル(MainViewController.m)
  3. 広告のレイアウトを定めたUIViewのヘッダファイル(YourNativeAdView.h)
  4. 広告のレイアウトを定めたUIViewのメソッドファイル(YourNativeAdView.h)
  5. 広告のレイアウトを定めたxibファイル(YourNativeAdView.xib)

 

この関係性がわからないと、手順書を読んでいても混乱します。xibファイルとは、XML Interface Builderの略で、これを用いるとビジュアル的にレイアウトを設定できます(ストーリーボードと同じように)

では、呼び出し方法を簡単に図示します。

ネイティブアドの呼び出し方関連図

ネイティブアド関連図

 

このように、カスタムビューを作成して広告を表示したいUIControllerViewのコードからそれを呼びだします。初心者にとってはなかなかハードルが高いでしょうから、その辺を詳しく説明していきたいと思います。ですが、その前に重要な制限事項について説明します。

ネイティブアドの制限事項に関して

カスタマイズ性が高いので、自分の自由にレイアウトを変えられる反面、レイアウトしなければならないテキストなどのオブジェクトのルールがありますので、そこを先に説明します。必須項目をレイアウトしない場合、広告が表示されません。また、文字数などが足りてなければログで教えてくれます(後述)

必須

広告明示:「PR」等の広告だと明示するテキスト。これが無いと広告とユーザーにわからないのでダメです。(nativeAdPrTextLabel)

以下のいずれか一つ

広告見出し:15文字以上表示されるようにレイアウトする。記事で言うとタイトル(nativeAdShortTextLabel)

広告文:26文字以上表示されるようにレイアウトする。記事の簡単な説明。(nativeAdLongTextLabel)

プロモーション名:1文字以上表示されるようにレイアウトする。(nativeAdPromotionNameLabel)

広告画像を含む広告枠を選択した場合は必須

広告画像:80×80が基本の正方形のようです(nativeAdImageView)

任意

以下はいずれの場合も任意となります。(入れなくてもOK)

表示URL:サイトのURL(nativeAdPromotionUrlLabel)

アクションボタン:サイトへの誘導ボタン。ちなみにあろうがなかろうがビュー全体をクリックすれば飛びます(nativeAdActionButtonTextLabel)

ロゴ画像:サイズとかの制限はとくにない画像です(nativeAdLogoImageView)

4. 広告を実装するUIViewを作成

まずは自分の望むレイアウトの広告を定義するビューを作成します。

YourNativeAdView.xibの見た目

サンプルとして、現在私が開発中のSNS系アプリ「BillionFollowers」に似せて、上のように配置する事にします。左上から順番に、広告画像、広告見出し、広告明示、広告文、アクションボタンとなっています。もちろん、自分が配置したい構成を考えて作っても問題ありませんが、その際は制限事項に注意して下さい。後、サイズやAutoLayoutは適宜設定して下さい(問題があればログに出ますので)

手順1:YourNativeAdView.hとYourNativeAdView.mとYourNativeAdView.xibのファイルを追加する

今回のゴールは、以下のようにファイルを追加する事です。

xibファイルが追加された状態

まずは、左上のツールバーから、File→New→File…と選択して下さい。

ツールバーからUIViewファイルを追加

そして、Cocoa Touch Classを選択して、Nextを押します。

Cocoaファイルを追加する

「YourNativeAdView」と名前をつけ、SubclassはUIViewにしてNextを押します。

YourNativeAdView.hと名付ける

YourNativeAdView.hとYourNativeAdView.mが追加された事を確認したら、次はxibファイルを追加します。

同様に、左上のツールバーから、File→New→File…と選択して下さい。

ツールバーからxibファイルを追加

今度はUser InterfaceのViewを選択します。

xibファイルを追加選択する

名前も同様に「YourNativeAdView」とつけて、プロジェクトに保存します。

スクリーンショット 2015-12-16 1.29.44

これで、手順1は完了です!

手順2:xibにレイアウトを配置する

今回のゴールはxibにオブジェクトを貼り付ける事です。以下のようにレイアウトを配置します。

YourNativeAdView.xibのレイアウト

まずは、先ほど生成したYourNativeAdView.mとYourNativeAdView.xibをひも付けます。

ナビゲーターエリアからYourNativeAdView.xibを選択すると、いきなりどでかいビューが出てきます。自分の表示したいサイズに合わせるために、ビューを選択して、ユーティリティーエリアの設定を以下のようにします。(サイズは適宜変えてください)

ビューのサイズを変える

ビューのサイズを固定する

すると、以下のような丁度いいサイズに変わります。

xibのdocからオブジェクトを選択する

ではひも付けをします。上の図のように、dockからViewを選択し、右側のユーティリティーエリアからニュースサイトのようなタブを選択し、Custom Classに”YourNativeAdView”と入力します。

Custom Class

ドックのViewのクラスを定義する

「このビューは、YourNativeAdClassにひも付きますよ」、と明示してあげています。簡単ですね!では本命であるレイアウトを配置していきましょう。今回使うのは、以下の2つのオブジェクトです。

オブジェクトツリーのLabel:UILabel

オブジェクトツリーのUILabel

Image View:UIImageView

オブジェクトツリーのImage View

二つのオブジェクトを必要な分だけ、先ほどのビューへとドラッグ&ドロップします。

YourNativeAdView.xib完成図

このように配置できたら完了です。サイズや表記文字は適宜いじってください。

ただ、これで終わりではありません。なぜなら、普通のオブジェクトとは違い、ネイティブアドで表示するのはNADNativeViewRenderingに準拠しているビューだからです。これは簡単に言うと、

nend側で用意した(組み込んだ)色々なソースに従うビューを作ってよね!

という事ですので、ここは素直に従って配置するのはUILabelでもUIImageViewでもなく、

  • NADNativeLabel
  • NADNativeImageView

を配置します。xib上でそれぞれのオブジェクトを選択して、画像ならCustom ClassインスペクターのClassに、

NADNativeImageView

ラベルなら

NADNativeLabel

をそれぞれ設定して下さい。以上で、xibにレイアウトを配置するのは完了です。

手順3:xibとYourNativeAdView.mをひも付ける

レイアウトが完了しても、まだ終わりではありません。なぜなら、それぞれのパーツに名前をつけてYourNativeAdViewとひも付けしなければならないからです。というわけで、ビュー作成の締めくくりである、関連付けを行います。まずは、公式手順書に書かれているソースを改変して、以下のようにYourNativeAdViewに追記します。

参考:YourNativeAdView.mのコード

@propertyは自分がレイアウトした分だけでよいです。また、#pragma mark以降のIFもそれに対応した分だけで構いません。

ここで重要なのは、公式手順書に記載されていない(省略されてる?)

+(id)loadFromNib:他のクラスからも読み出せる、ビューの生成に必要なメソッド

を記述する事です。これがないと、ロードの時につまります。またロードする時に色々オブジェクトをいじりたい人は、

-(void)awakeFromNib:はビューがロードされた後に呼び出される処理

に色々と記述するといいでしょう。私の場合、広告画像に枠線と角丸をつけるコードを追記しています。

参考:

UIButtonを枠線や角丸にしてアプリをオシャレにする(Xcode)

 

クラスメソッドはヘッダファイルにも追加しましょう。(じゃないと呼び出せませんので)

参考:YourNativeAdView.h

では、下準備も終わった事ですので、これをxibとバシバシひも付けます。まずは、YourNativeAdView.xibをナビゲーターエリアから選択し、ツールバーの右上にある、アシスタントエディターの「二つの輪」を選択します。通称「二輪ピック」。これを用いれば二つのソースコードを比較できます。

二輪ピックを選択

アシスタントエディター

右側のソースコードに、先ほど記載したYourNativeAdView.mが来るようにし、@propertyをそれぞれのオブジェクトにドラッグ&ドロップでひも付けます。

こんな感じ

左にxib右にメソッドファイル

行番号の左にある黒ぽちから引っ張っていけば線がでますので、それをそれぞれのオブジェクトにひも付けます。これにてビューで必要な作業は完了です!

では、ようやく広告のレイアウトを定義するビューが完了したところで、次は広告を表示したいビューに移ります。

長くなりましたので一度中断して、続きは次回としましょう!

続き

dのネイティブアドを初心者でもアプリに実装できる手順(実装編)

 

スポンサーリンク

コード左

コード左

関連記事

電卓とお金

ソシャゲなどの課金ゲームでアプリ内課金をさせたくする方法

人間ってのは本能的に違和感を避けて、統一感を求める生き物だそうです。ええ、そうだと思います。

記事を読む

nendロゴ

nendのネイティブアドを初心者でもアプリに実装できる手順(実装編)

※当記事は、nendのネイティブアドをSDKで実装してみたい人のための記事です。  

記事を読む

iPhoneとキーボード

アプリのダウンロードを増やすために必要な「5感」

かれこれ2年以上もアプリ開発で失敗だらけの私が考える、 「アプリのダウンロード数を伸ばすために

記事を読む

ウザすぎる天使と死んだ僕のアイコン

実話や恋愛を元に泣ける話を作り、ユーザーの心を動かす方法

どこまでも論理的な人など存在せず、ザ・ロジカル人間と言われる人にも感情が宿っています。

記事を読む

Xcodeのアイコン

UIButtonに枠線や角丸を簡単につける方法(Xcode)

「神は細部に宿る」(God is in the detail) そんな事を言ったのは1930年代に

記事を読む

ゲームを遊ぶ女性

アプリ行動心理学〜部分強化効果でユーザーを中毒に〜

作ったアプリを継続してプレイしてもらいたい。アプリを作る人なら誰でも思う事だと思います。そん

記事を読む

キンググローリーのログインボーナス画像

ログインボーナスなどでモチベーションが下がってしまう理由

いつも評価されてたビジネスマンが上司が変わって評価されなくなる事ってありますよね。 「

記事を読む

ようこそGoogle商事へ

アプリでplistを使うなら是非とも使いたいエクセルの小技3選

plistファイルは便利ですが、大量の文章や、設定などを書き込む際は非常に大変です。 xcod

記事を読む

天を仰ぎ見るビジネスマン

ユーザーにアプリをダウンロードしてもらうための6つの基本(ASO)

せっかくアプリを作ったのにダウンロードされない。そんな経験をした事がある人は多いと思います。

記事を読む

草原に立つ木

アプリのマーケットを知ればターゲットは明確になる

「木を見て森を見ない」 仕事をしているとこんな言葉を聞いた事があるでしょうか? (ええ

記事を読む

Message

メールアドレスが公開されることはありません。

麻婆豆腐
コンビニの麻婆豆腐を食べ比べてみた

では、今回は大手コンビニである ファミリーマート、セブンイレブン、ロ

会議の資料
【仕事術】情報の共有には紙やホワイトボードの方がいい場合もある

お久しぶりです。 今抱えている案件がひとまず落ち着いたので、久しぶり

オートミール
ダイエットの救世主!オートミールの美味しい食べ方について

今回は個人的に最強のダイエット食材であると思われるオートミールをいかに

諸葛亮孔明の出師の表から学ぶ、誰かを説得する文章のコツ

今回は諸葛亮が北伐(魏への遠征)に向かう際に、皇帝の劉禅に向けた書いた

大きく手を丸にして承諾するビジネスマン
日本人がつくづくイエスマンだと思う理由

今日はふとした疑問からひょんなことを思いついたので書いていきます。

→もっと見る

  • 当ページの管理人のShaneです。元コンサルタント。今はしがないフリーランス。アプリ開発をしながら人々の役に立つ駄文を垂れ流してます。
PAGE TOP ↑