【はじめてのAndroidアプリ開発】バナー広告の設定


【はじめてのAndroidアプリ開発】バナー広告の設定

Androidのアプリ開発をはじめようと考えている方、もしくははじめたばかりの方向けにお届けしている 【はじめてのAndroidアプリ開発】 シリーズ。 今回は 『バナー広告』の設定方法をご紹介。

Android Studio + AdMob という Google プラットフォームを利用することで、簡単にバナー広告をセットすることができます。

★本稿はこんな方に役立ちます★

  • Android アプリ開発初心者
  • AdMobを使いたい方
  • Android アプリで一儲けしたい方

★今回使用するエミュレーター環境★

  • Android 9 (Pie) API 28
目次
  1. 【はじめてのAndroidアプリ開発】バナー広告の設定
  2. 今回ご紹介するバナー広告設定の様子
  3. 広告の設定方法
  4. バナー用サンプルアプリの作成
  5. AdMobの初期設定
  6. バナー広告の表示設定
  7. バナー広告のプログラム
  8. AdMobの本番環境の設定
  9. 新規クラスの作成でAdMobテンプレート作成
  10. まとめ

【はじめてのAndroidアプリ開発】バナー広告の設定

今回ご紹介するバナー広告設定の様子

まずは本稿をご確認いただく前に、バナー広告をセットする様子を動画で確認してみてください 。 Google社が提供する Android Studio と AdMob というプラットフォームを利用することで、簡単にバナー広告を設定することができます。

それでは各ステップについてご紹介していきます。

広告の設定方法

AdMob を使った広告の設定方法は、大きく分けて 2通りあります。

AdMob から設定する方法は、広告に使用する ID を取得し、それから Android Studio への設定を行う手順。

Google Developer から設定する方法は、紹介されているステップを元に Android Studio で広告設定、その後に広告用 ID をセットするという手順。

今回はテスト用 ID が用意されている Google Developer を元に設定を進めていきたいと思います。

バナー用サンプルアプリの作成

image

まずは Android Studio を起動し、 「Start a new Android Studio project」 を選択。

image

Empty Activity を選択。

image

今回アプリ名は MyAdMob02、 プログラミング言語は Java をセット。あとは Google developer の作成手順に従って進めていきます。

AdMobの初期設定

image

Android Studio で AdMob を利用する最初の設定項目に、 SDK(Software Development Kit) のセットアップがあります。まずはプロジェクトレベルの build.gradle が上図のようになってるか確認しておきましょう。

image

次はアプリケーションレベルの build.gradle の設定。下記のコードを dependencies依存関係 内 に追記します(上図参照)。

implementation 'com.google.android.gms:play-services-ads:17.2.0' 

コードを入力した途端、画面上部にポップアップが表示。「設定が変わったのでもう一度読み込み直してください」という内容。表示されている 「Sync Now」 を左クリックします。

image

すると今後は、サポートに関するコードのところで赤色エラーが発生。どうも先ほど追加したdependencies依存関係のバージョンと最初からあった依存関係のバージョンで相違があるようで、同じレベルに合わせる必要があるとのこと。

赤色エラーが発生しているコードの上にカーソルを合わせて、Alt + Enterキーを押します。

image

いくつかの選択項目が表示されます。一番上の 「Suppress:Add // noinspection Gradle」 を選択。

image

すると再び画面上部に Gradle の読み込みアナウンスが出ますので、 「Sync Now」 をクリック。

image

これでアプリケーションレベルの build.gradle のエラーが消え、セットが完了しました。

image

SDK の設定が完了したら、次は AndroidManifest.xml の設定です。上図のように タグ内に AdMob 用のメタ情報を追記。

<!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="YOUR_ADMOB_APP_ID"/>

なお今回はテスト用広告になりますので、 android:value の YOUR_ADMOB_APP_ID は サンプル用の ca-app-pub-3940256099942544~3347511713 を使用。

image

次は MainActivity.java の方に AdMob の初期設定を行います。

【追加コード①】

import com.google.android.gms.ads.MobileAds;
【追加コード②】

// Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713
MobileAds.initialize(this, "YOUR_ADMOB_APP_ID");

こちらでも App ID をセットする必要がありますが、AndroidManifest.xml 同様にサンプルの App ID を使用。 MainActivity.java で使用する App ID と AndroidManifest.xml で使用する App ID は、同じということを知っておきましょう。

バナー広告の表示設定

image

AdMob 用の初期設定が完了したら、次はバナー広告を表示する設定手順を進めていきます。まずはレイアウトを司る activity_main.xml を開きます。

そして下記のバナー用レイアウトコードを追加。

<com.google.android.gms.ads.AdView
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:id="@+id/adView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    ads:adSize="BANNER"
    ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>

公式リファレンスにも書かれている上記コードを追加したところ、赤色のエラーが発生。どうもレイアウトに関するエラーのようですが、一度画面(Design)の方を確認してみます。

image

すると本来画面の下に表示して欲しいバナー広告が、画面の上に表示されています。これは画面レイアウトが AdMob に対応していないために発生するエラー。 画面レイアウトを RelativeLayout に変更するとエラーが解消されます。

image

画面レイアウトを RelativeLayout に変更する手順としては、activity_main.xml 2行目に書かれている

android.support.constraint.ConstraintLayout

RelativeLayout

に変更するだけ。

image

すると先ほどは画面上部にあった広告が、画面の下に表示されるようになりました。

バナー広告のプログラム

image

広告のレイアウト設定が完了したら、あとは ID でプログラムと接続すればバナー広告が稼働します。上図のようにclassクラスとプログラムをセットして、エミュレーターを実行してみましょう。

【追加コード①】

import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;
【追加コード②】

private AdView mAdView;
【追加コード③】

mAdView = findViewById(R.id.adView);
AdRequest adRequest = new AdRequest.Builder().build();
mAdView.loadAd(adRequest);

追加コード②でバナー広告のプロパティを設定。

追加コード③の1行目で、 UI 部品のバナー広告と ID を接続。そして2行目のコードでインスタントを生成し、3行目で広告の読み込みを実行、という流れになってます。

image

今回実行するエミュレーター環境は、 Android 9(Pie) を使用。

image

エミュレーター起動後、アプリを起動すると、3秒後ぐらいに画面下にバナー広告が表示されると思います。そしてバナーをタップすると広告画面に移動するでしょう。

現在の設定ではテスト用広告になっています。本番用の広告に変更するには、 AdMobから専用 ID を取得する必要が。

AdMobの本番環境の設定

image

サンプルで表示できたバナー広告を本番用のバナー広告に変更するには、まず AdMob に登録して ID 取得のステップを進める必要があります。

AdMob の公式ページ から専用 ID を取得できるのですが、この時に過去に Google アドセンスを利用していた場合は、設定がめんどう面倒に感じます。それは AdMob と Google アドセンスがリンクしているため。いくつか試した結果、新規で AdMob 用の Google アカウントを作成し、設定していく方が簡単と思いました。

専用 ID の作成手順は、手順通り進めていけば簡単に作成することができます。作成した各 ID は、管理画面から確認することが可能となっていますね。

image

image

尚、本番用の AdMob ID をテスト環境で利用すると、 不正とみなされる場合もあります。アプリの開発段階においてはテスト用の AdMob ID を使用することが推奨されていますね。

新規クラスの作成でAdMobテンプレート作成

image

今回は Google デベロッパーの公式チュートリアルを元に、 AdMob の表示方法をご紹介してきました。いくつかのコードを追加したりする必要があったのですが、 Android Studio の「新規クラス」作成で AdMob のテンプレート表示することも可能。

上図のように新規クラスの作成で AdMob のテンプレートを選択することができますが、デフォルトの状態では広告が稼働しません。いくつかの設定を行う必要があり、その設定手順はアプリ開発初心者にとってはわかりにくい内容。お時間ある方は、実際に AdMob クラスを作成して、実行してみてください。

Webサイト担当者としてのスキルが身に付く!!

無料カウンセリングはこちら

まとめ

アプリ開発を学習するモチベーションの大きな要因に、収益化があると思います。学習初期で AdMob の設定方法をおさえておくと、学習の励みにもなることでしょう。

しかし、「 Android アプリ開発の参考書を買ったけど全くわからない」「全くモチベーションが上がらない」という方も多いのでは。そんな時は一人で頑張ろうとせずに、自分の学習環境を見直してみるというのも一つの手だと思います。

アプリ開発の学習方法は、「独学」か「プログラミング・スクール」が代表的。「プログラミング・スクールはお金がかかるから.....」と躊躇ちゅうちょされている方もいらっしゃることでしょう。しかし、学習が止まっている時間の方がもったいないかもしれません。

CodeCamp では、安心してプログラミング・スクールを検討していただけるように「無料体験」も実施中。「時間」と「場所」の制約を極力減らした『オンライン』というスタイルに加えて、現役エンジニアが教えてくれるという安心感。まだの方は是非一度、お試しを検討してみてください。


関連記事

オシママサラ
この記事を書いた人
オシママサラ
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp