記事一覧

nendでバナー広告を表示する方法 -Android編- | Xamarin.Forms


今回はXamarin.Androidの開発環境でnendのSDKを使用してバナー広告を表示する方法についてご紹介いたします。
nendは日本でのスマホ専用広告配信ができるパートナー様ですが、広告を表示する為のSDKがXamarinの正式対応をしておらずAndroidのaarファイルのバインドなど大変苦労しましたが、なんとか広告が表示できましたのでご紹介したいと思います。
尚、Xamarin.iOSでバナー広告を表示する方法は次の記事「nendでバナー広告を表示する方法 -iOS編-」をご参考ください。


ExplorerDx
xamarin_nend_01.png
ContactFriends
xamarin_nend_02.png



前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.3.0.795 (NuGet Xamarin.Forms 2.3.4.247)



1.nendの登録

以下のサイトで登録できます。
https://www.nend.net/
全て日本語なので登録しやすいですね。

xamarin_nend_03.png


(1)広告枠の管理からAndroidアプリを登録します。

(2)アプリが登録できたらアプリに広告枠を追加します。
タイプ:バナー
広告枠名:任意
広告枠の形式:インライン フッター
広告枠のサイズ:320×50

尚、広告枠は作成毎に審査があります。
2営業日程待たなくてはいけません。

(3)SDKをダウンロードします。
https://www.nend.net/m/sdk

(4)NendSDK_Android-3.3.1.zipファイルを解凍すると
nendSDK-3.3.1.aarというファイルが取得できます。



2.SDKの組み込み方法

(1)Visual Studioでバインドライブラリプロジェクトを作成します。
jarファイルやaarファイルはバインドライブラリのプロジェクトを使用すると簡単にJavaからC#に変換できます。

xamarin_nend_04.png


(2)ソリューションエクスプローラを開き、バインドライブラリ内のJarsフォルダに解凍した「nendSDK-3.3.1.aar」ファイルをドラッグ&ドロップします。

(3)ビルドアクションを 「LibraryProjectZip」に変更します。

xamarin_nend_05.png


(4)Androidプロジェクトのプロパティを変更します。
Android Class Parser : class-parse
Android Codegen Target : XAJavaInterop1

xamarin_nend_07.png


(5)NuGetパッケージをインストールします。
以下のパッケージが必要です。
Xamarin.Android.Support.v4
Xamarin.Android.Support.Percent
Xamarin.Android.Support.v7.CardView
Xamarin.Android.Support.v7.RecyclerView
Xamarin.GooglePlayService.Ads

xamarin_nend_06.png


(6)Metadata.xmlに追加する
以下のようにxmlに設定を追加します。
ビルド時にjavaからC#に変換する際に競合する変数を識別するための設定です。
これが無いとビルドしてもnendSDKの全てのクラスライブラリを使用することができません。

Nend.Droid\Transforms\Metadata.xml
<metadata>
  <attr path="/api/package[@name='net.nend.android']/
        interface[@name='NendAdNativeListListener']/method[@name='onDisplayAd']"
        name="argsType">NativeListListenerDisplayAdEventArgs</attr>
  <attr path="/api/package[@name='net.nend.android']/
        interface[@name='NendAdNativeListListener']/method[@name='onReceiveAd']"
       name="argsType">NativeListListenerReceiveAdEventArgs</attr>
  <attr path="/api/package[@name='net.nend.android']/
        interface[@name='NendAdNativeListener']/method[@name='onClick']"
       name="argsType">NendAdNativeListenerClickEventArgs</attr>
</metadata>


(7)BindLibraryプロジェクトをビルドしてAndroidプロジェクトに参照設定します。

※BindingLibraryのビルドは必ずしも成功するとは限りません。
原因は不明ですが、何度かリビルドしたり、一度参照設定を外してみたりと試行錯誤するとビルドできたりします。私も何度もビルドしていますが、成功するときとしないときとがありますので、そこだけ難点ですね。。。



3.広告を表示


Androidプロジェクト内ににレンダラーを作成して表示します。
AdBannerクラスはXamarin.Forms.Viewを継承して作成したクラスをPCLのXAMLまたはC#などで画面に配置してください。

AdBannerRenderer.cs
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Android.Gms.Ads;
[assembly: ExportRenderer(typeof(AdBanner), typeof(AdBannerRenderer))]
namespace AppName.Droid.Renderer
{
    public class AdBannerRenderer : ViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.View> e)
        {
            base.OnElementChanged(e);
            if (Control == null)
            {               
                //nend
                this.ShowNendBanner(999999, ”9999999a99999999aa9999a999”);
            }
        }

        /// <summary>
        /// nendによる広告を表示する
        /// </summary>
        /// <param name="spotID">spotID</param>
        /// <param name="apiKey">apiKey</param>
        private void ShowNendBanner(int spotID, string apiKey)
        {
            //nend
            //画面サイズを取得
            var metrics = Xamarin.Forms.Forms.Context.Resources.DisplayMetrics;
            int width = metrics.WidthPixels;

            // 1 NendAdView をインスタンス化
            Net.Nend.Android.NendAdView nendAdView =
                new Net.Nend.Android.NendAdView(Xamarin.Forms.Forms.Context,
                                                spotID,
                                                apiKey);

            nendAdView.SetMinimumHeight(AdSize.Banner.Height);
            nendAdView.SetMinimumWidth(width);
            nendAdView.SetBackgroundColor(Color.White.ToAndroid());

            //// 中央下部表示の場合
            //rootLayout.SetGravity(Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM);
            //// 2 NendAdView をレイアウトに追加
            //rootLayout.AddView(nendAdView, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

            base.SetNativeControl(nendAdView);

            // 3 広告の取得を開始
            nendAdView.LoadAd();
        }
    }
}

※spotIDとapiKeyは以下のURLから取得できます。
https://www.nend.net/m/adspot
SDKボタンから確認できます。



4.注意点

(1)nendは日本語の広告のみ対応です。
海外の広告は対応していません。
多言語化(ローカライズ)しているアプリでは、設定している言語が日本語の場合のみに表示をした方が良いでしょう。

(2)nendはスマホ専用です。
PCや他のデバイスで閲覧した場合は広告が表示されません。

(3)バインドライブラリを参照設定してもオブジェクトブラウザに名前空間以降が表示されない場合やソースコードでエラーが出る場合はDLLを直接参照設定することで改善される場合があります。



最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
http://itblogdsi.blog.fc2.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。