メインコンテンツへスキップ

概要

バナー広告は画面の一部に表示される矩形の広告です。XMLレイアウトとコードの両方で使用できます。

主な特徴

  • 画面の上部、下部、または中央に固定配置可能
  • 画像および動画広告に対応
  • XMLレイアウトとプログラム方式の両方に対応
  • リスナーによる広告イベント処理
開発環境ではテストユニットIDを使用してください:PUBLIC_TEST_UNIT_ID_320_100

XMLレイアウト実装

XMLレイアウトでAdropBannerを定義し、ActivityまたはFragmentからロードする方式です。

1. XMLレイアウト定義

FrameLayoutまたは他のコンテナにAdropBannerを配置します。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- メインコンテンツ -->
    <TextView
        android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="メインコンテンツ"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- バナー広告コンテナ -->
    <FrameLayout
        android:id="@+id/banner_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <io.adrop.ads.banner.AdropBanner
            android:id="@+id/adrop_banner"
            android:layout_width="320dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            app:adrop_unit_id="YOUR_UNIT_ID" />

    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

2. Activityからロード

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import io.adrop.ads.banner.AdropBanner
import io.adrop.ads.banner.AdropBannerListener
import io.adrop.ads.model.AdropErrorCode

class MainActivity : AppCompatActivity() {
    private var banner: AdropBanner? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 1. XMLで定義したバナービューを取得
        banner = findViewById(R.id.adrop_banner)

        // 2. リスナー設定
        banner?.listener = object : AdropBannerListener {
            override fun onAdReceived(banner: AdropBanner) {
                println("バナー広告の受信成功")
            }

            override fun onAdFailedToReceive(banner: AdropBanner, errorCode: AdropErrorCode) {
                println("バナー広告の受信失敗: $errorCode")
            }

            override fun onAdImpression(banner: AdropBanner) {
                println("バナー広告のインプレッション")
            }

            override fun onAdClicked(banner: AdropBanner) {
                println("バナー広告がクリックされました")
            }
        }

        // 3. 広告をロード
        banner?.load()
    }

    override fun onDestroy() {
        super.onDestroy()
        // 4. メモリ解放
        banner?.destroy()
        banner = null
    }
}

XML属性

属性説明必須
app:adrop_unit_id広告ユニットIDO
android:layout_widthバナーの幅 (dp)O
android:layout_heightバナーの高さ (dp)O

プログラム方式での実装

コードで直接AdropBannerインスタンスを作成してビューに追加する方式です。
import android.os.Bundle
import android.widget.FrameLayout
import androidx.appcompat.app.AppCompatActivity
import io.adrop.ads.banner.AdropBanner
import io.adrop.ads.banner.AdropBannerListener
import io.adrop.ads.model.AdropErrorCode

class MainActivity : AppCompatActivity() {
    private var banner: AdropBanner? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 1. バナーインスタンスを作成
        banner = AdropBanner(this).apply {
            unitId = "YOUR_UNIT_ID"

            // 2. リスナー設定
            listener = object : AdropBannerListener {
                override fun onAdReceived(banner: AdropBanner) {
                    println("バナー広告の受信成功")
                }

                override fun onAdFailedToReceive(banner: AdropBanner, errorCode: AdropErrorCode) {
                    println("バナー広告の受信失敗: $errorCode")
                }

                override fun onAdImpression(banner: AdropBanner) {
                    println("バナー広告のインプレッション")
                }

                override fun onAdClicked(banner: AdropBanner) {
                    println("バナー広告がクリックされました")
                }
            }
        }

        // 3. ビュー階層に追加
        val container = findViewById<FrameLayout>(R.id.banner_container)
        val params = FrameLayout.LayoutParams(
            FrameLayout.LayoutParams.MATCH_PARENT,
            FrameLayout.LayoutParams.WRAP_CONTENT
        )
        container.addView(banner, params)

        // 4. 広告をロード
        banner?.load()
    }

    override fun onDestroy() {
        super.onDestroy()
        // 5. メモリ解放
        banner?.destroy()
        banner = null
    }
}

AdropBannerの初期化

コンストラクタ

context
Context
required
ActivityまたはApplicationのContext
val banner = AdropBanner(context)

ユニットIDの設定

unitId
String
required
Adropコンソールで作成したユニットID
banner.unitId = "YOUR_UNIT_ID"

広告のロード

バナーを画面に追加した後、load()メソッドを呼び出して広告をリクエストします。
banner.load()
バナーが画面に表示されている時点でload()を呼び出してください。表示されていない状態でロードすると、インプレッションが正確に測定されない場合があります。

リスナーの実装

AdropBannerListenerインターフェースは広告のライフサイクルイベントを処理します。

onAdReceived(必須)

広告の受信に成功した時に呼び出されます。
override fun onAdReceived(banner: AdropBanner) {
    println("バナー広告の受信成功")
    // ローディングインジケーターを非表示にするなどの処理
}

onAdFailedToReceive(必須)

広告の受信に失敗した時に呼び出されます。
override fun onAdFailedToReceive(banner: AdropBanner, errorCode: AdropErrorCode) {
    println("バナー広告の受信失敗: $errorCode")
    // エラー処理および代替コンテンツの表示
}
errorCode
AdropErrorCode
エラーの種類を示すコード。詳細はリファレンスを参照してください。

onAdImpression(オプション)

広告が画面に表示された時に呼び出されます。
override fun onAdImpression(banner: AdropBanner) {
    println("バナー広告のインプレッション")
    // インプレッション分析ログなどの処理
}

onAdClicked(オプション)

ユーザーが広告をクリックした時に呼び出されます。
override fun onAdClicked(banner: AdropBanner) {
    println("バナー広告がクリックされました")
    // クリック分析ログなどの処理
}

コンテキストIDの設定

コンテキストターゲティングのためにコンテキストIDを設定できます。
banner.contextId = "article_123"
コンテキストIDは広告をロードする前に設定する必要があります。

ライフサイクル管理

destroy()

バナーを使用しなくなった時は、必ずdestroy()を呼び出してリソースを解放してください。
override fun onDestroy() {
    super.onDestroy()
    banner?.destroy()
    banner = null
}
destroy()を呼び出さないとメモリリークが発生する可能性があります。

広告サイズ

バナー広告はユニットに設定したサイズに合わせてビューのサイズを指定する必要があります。

一般的なバナーサイズ

サイズ用途
320 x 50小型バナー
320 x 100中型バナー
16:9比率動画バナー

XMLでサイズを指定

<io.adrop.ads.banner.AdropBanner
    android:id="@+id/adrop_banner"
    android:layout_width="320dp"
    android:layout_height="100dp"
    app:adrop_unit_id="YOUR_UNIT_ID" />

コードでサイズを指定

val params = FrameLayout.LayoutParams(
    dpToPx(320), // 幅
    dpToPx(100)   // 高さ
)
container.addView(banner, params)

// dpをpxに変換するユーティリティ関数
fun dpToPx(dp: Int): Int {
    val density = resources.displayMetrics.density
    return (dp * density).toInt()
}

テストユニットID

開発およびテスト時は以下のテストユニットIDを使用してください。
広告タイプテストユニットIDサイズ
バナー (320x50)PUBLIC_TEST_UNIT_ID_320_50320 x 50
バナー (320x100)PUBLIC_TEST_UNIT_ID_320_100320 x 100
カルーセルバナーPUBLIC_TEST_UNIT_ID_CAROUSEL可変
バナー動画 (16:9)PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_16_916:9比率
バナー動画 (9:16)PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_9_169:16比率

使用例

import io.adrop.ads.AdropUnitId

val banner = AdropBanner(this).apply {
    unitId = AdropUnitId.PUBLIC_TEST_UNIT_ID_320_100
}

ベストプラクティス

1. メモリ管理

ActivityやFragmentが終了する時は必ずバナーを解放してください。
override fun onDestroy() {
    super.onDestroy()
    banner?.destroy()
    banner = null
}

2. 画面の可視性

バナーが画面に表示されている時に広告をロードしてください。
override fun onResume() {
    super.onResume()
    banner?.load()
}

3. エラー処理

広告ロード失敗時の適切なエラー処理を実装してください。
override fun onAdFailedToReceive(banner: AdropBanner, errorCode: AdropErrorCode) {
    when (errorCode) {
        AdropErrorCode.ERROR_CODE_NETWORK_ERROR -> {
            println("ネットワークエラー:接続を確認してください")
        }
        AdropErrorCode.ERROR_CODE_NO_FILL -> {
            println("表示可能な広告がありません")
        }
        else -> {
            println("広告ロード失敗: $errorCode")
        }
    }
}

4. RecyclerViewでの使用

RecyclerViewでバナーを使用する時は、ViewHolderで適切に管理してください。
class BannerViewHolder(view: View) : RecyclerView.ViewHolder(view) {
    private val banner: AdropBanner = view.findViewById(R.id.adrop_banner)

    fun bind() {
        banner.listener = object : AdropBannerListener {
            // リスナー実装
        }
        banner.load()
    }

    fun recycle() {
        banner.destroy()
    }
}

// アダプター内で
override fun onViewRecycled(holder: BannerViewHolder) {
    holder.recycle()
}

完全な例

Kotlinの例

import android.os.Bundle
import android.view.View
import android.widget.FrameLayout
import android.widget.ProgressBar
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import io.adrop.ads.banner.AdropBanner
import io.adrop.ads.banner.AdropBannerListener
import io.adrop.ads.model.AdropErrorCode

class BannerActivity : AppCompatActivity() {
    private var banner: AdropBanner? = null
    private lateinit var progressBar: ProgressBar

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_banner)

        progressBar = findViewById(R.id.progress_bar)
        setupBanner()
    }

    private fun setupBanner() {
        // 1. バナーインスタンスを作成
        banner = AdropBanner(this).apply {
            unitId = "YOUR_UNIT_ID"

            // コンテキストID設定(オプション)
            contextId = "article_123"

            // 2. リスナー設定
            listener = object : AdropBannerListener {
                override fun onAdReceived(banner: AdropBanner) {
                    println("バナー広告の受信成功")
                    progressBar.visibility = View.GONE
                }

                override fun onAdFailedToReceive(banner: AdropBanner, errorCode: AdropErrorCode) {
                    println("バナー広告の受信失敗: $errorCode")
                    progressBar.visibility = View.GONE

                    // エラー処理
                    when (errorCode) {
                        AdropErrorCode.ERROR_CODE_NETWORK_ERROR -> {
                            showToast("ネットワーク接続を確認してください")
                        }
                        AdropErrorCode.ERROR_CODE_NO_FILL -> {
                            println("表示可能な広告がありません")
                        }
                        else -> {
                            showToast("広告を読み込めませんでした")
                        }
                    }
                }

                override fun onAdImpression(banner: AdropBanner) {
                    println("バナー広告のインプレッション")
                }

                override fun onAdClicked(banner: AdropBanner) {
                    println("バナー広告がクリックされました")
                }
            }
        }

        // 3. ビュー階層に追加
        val container = findViewById<FrameLayout>(R.id.banner_container)
        val params = FrameLayout.LayoutParams(
            dpToPx(320),
            dpToPx(100)
        )
        container.addView(banner, params)

        // 4. 広告をロード
        progressBar.visibility = View.VISIBLE
        banner?.load()
    }

    private fun dpToPx(dp: Int): Int {
        val density = resources.displayMetrics.density
        return (dp * density).toInt()
    }

    private fun showToast(message: String) {
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
    }

    override fun onDestroy() {
        super.onDestroy()
        // 5. メモリ解放
        banner?.destroy()
        banner = null
    }
}

Javaの例

import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ProgressBar;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import io.adrop.ads.banner.AdropBanner;
import io.adrop.ads.banner.AdropBannerListener;
import io.adrop.ads.model.AdropErrorCode;
import org.jetbrains.annotations.NotNull;

public class BannerActivity extends AppCompatActivity {
    private AdropBanner banner;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_banner);

        progressBar = findViewById(R.id.progress_bar);
        setupBanner();
    }

    private void setupBanner() {
        // 1. バナーインスタンスを作成
        banner = new AdropBanner(this);
        banner.setUnitId("YOUR_UNIT_ID");

        // コンテキストID設定(オプション)
        banner.setContextId("article_123");

        // 2. リスナー設定
        banner.setListener(new AdropBannerListener() {
            @Override
            public void onAdReceived(@NotNull AdropBanner banner) {
                System.out.println("バナー広告の受信成功");
                progressBar.setVisibility(View.GONE);
            }

            @Override
            public void onAdFailedToReceive(@NotNull AdropBanner banner, @NotNull AdropErrorCode errorCode) {
                System.out.println("バナー広告の受信失敗: " + errorCode);
                progressBar.setVisibility(View.GONE);

                // エラー処理
                if (errorCode == AdropErrorCode.ERROR_CODE_NETWORK_ERROR) {
                    showToast("ネットワーク接続を確認してください");
                } else if (errorCode == AdropErrorCode.ERROR_CODE_NO_FILL) {
                    System.out.println("表示可能な広告がありません");
                } else {
                    showToast("広告を読み込めませんでした");
                }
            }

            @Override
            public void onAdImpression(@NotNull AdropBanner banner) {
                System.out.println("バナー広告のインプレッション");
            }

            @Override
            public void onAdClicked(@NotNull AdropBanner banner) {
                System.out.println("バナー広告がクリックされました");
            }
        });

        // 3. ビュー階層に追加
        FrameLayout container = findViewById(R.id.banner_container);
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
            dpToPx(320),
            dpToPx(100)
        );
        container.addView(banner, params);

        // 4. 広告をロード
        progressBar.setVisibility(View.VISIBLE);
        banner.load();
    }

    private int dpToPx(int dp) {
        float density = getResources().getDisplayMetrics().density;
        return (int) (dp * density);
    }

    private void showToast(String message) {
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        // 5. メモリ解放
        if (banner != null) {
            banner.destroy();
            banner = null;
        }
    }
}

XMLレイアウト

activity_banner.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="バナー広告の例"
        android:textSize="24sp"
        android:textStyle="bold"
        android:layout_marginTop="32dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <FrameLayout
        android:id="@+id/banner_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

次のステップ