2016年10月25日火曜日

Xcode7 で Firebase/AdMob を導入する方法

概要

Admob は Google が提供するアプリに広告を入れられるサービスです
Google が Firebase をモバイルのプラットフォームとして統合したことで Admob も Firebase と連携できるようになりました
Admob 単体でも組み込むことができるのですが、Firebase とリンクさせて使うことで Firebase の Analytics 機能も使えるようになります
また、後々を考えてプラットフォームは Firebase に統合されるのを見据えて今回は Firebase 版の Admob を使ってみたいと思います

環境

  • Mac OS X 10.10.5
  • Xcode 7.2.1
  • Cocoapods 1.0.1
  • Google-Mobile-Ads-SDK 7.9.1
  • Firebase/AdMob 3.4.0
  • Firebase/Core 3.4.0

ライブラリのインストール

まずは必要なライブラリをインストールします
最近では Cocoapods を使って簡単にライブラリをインストールできます

  • vim Podfile
pod 'Firebase/Core'
pod 'Firebase/AdMob'
  • pod install

で OK です
インストールされたバージョンは冒頭の環境に記載されているバージョンでした

Firebase にプロジェクトおよびアプリを作成する

Firebase のコンソール にアクセスします
すでに Admob アカウントを持っている場合はそのアカウントでアクセスすると後々の設定が楽になります

アクセスしたらプロジェクトを作成しましょう
Google プロジェクトがすでにある場合はそこからインポートしても良いです
プロジェクトが作成できたら作成したプロジェクトを選択して、そのプロジェクトの中にアプリを作成しましょう
アプリは iOS のアプリを作成します
firebase_admob_creating_app.png

アプリを設定する画面になったら公開しているアプリの情報を入力しましょう
iTunes Connect とかで確認できるので入力してください
今回はすでに公開している自分のアプリに対して Admob を設定するので、その情報を入れましたがまだ公開していないアプリに設定したいケースもあると思います
その場合は iOS バンドル ID だけ公開予定のものを入れておけば OK です
あとは省略してください
firebase_admob_setting_app.png

GoogleService-Info.plist を入手する

上記の情報を入力して「アプリの追加」をクリックすると GoogleService-Info.plist というファイルがダウンロードできます
これをプロジェクトの直下にコピーしましょう
以下のような感じで配置すれば OK です
firebase_admob_copy_info_file.png

ファイルの中身は Admob で使用するテスト用の広告ユニット ID が記載されている他、Push Notification (GCM) の情報やデータストアの情報など Firebase を利用するための情報が XML 形式で記載されています

AppDelegate.swift で Firebase の初期化をする

さて、ここからは Xcode でプログラミングをしていきます
まずは Firebase を使うための初期化です
これは簡単で AppDelegate.swift に以下の 2 つ追記するだけです

import Firebase

import 文は冒頭に追記してください

FIRApp.configure()

上記メソッドは didFinishLaunchingWithOptions 内のどこかで宣言してください
心配であれば return true の前に追記すれば OK です
これで Firebase を使う準備ができました

GADBannerView を追加する

Storyboard を使って View を追加していきます
View を一つ追加して、更にその上に View を追加しましょう
オートレイアウトは各人の環境に併せて適当に設定してください
バナーをこの View に表示するので最低でも 50 以上にしておいてください
firebase_admob_insert_bannerview.png

そして追加した 2 つ目の View を CustomClass で GADBannerView にすれば OK です
firebase_admob_setting_gadbanner.png

GADBannerView を IBOutlet としてコードに追加する

Storyboard で追加した View をコードに紐付けます
Xcode 上で画面分割モードにして GADBannerView を選択して Ctrl を押しながらコード側にドラッグアンドドロップすれば OK です

名前は bannerView にしましょう
以下のような感じで swift ファイル側に追加できれば OK です

@IBOutlet weak var bannerView: GADBannerView!

GADBannerView に広告ユニット ID を設定する

コード側に追加した bannerView に広告ユニット ID を設定しましょう
viewDidLoad に以下を追記しましょう

import GoogleMobileAds

は冒頭に追記してください

override func viewDidLoad() {
    super.viewDidLoad()
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
    bannerView.adSize = kGADAdSizeSmartBannerPortrait
    bannerView.rootViewController = self
    bannerView.loadRequest(GADRequest())
}

上記で設定した広告ユニット ID は Admob が提供しているテスト用の ID になります
なので、本番で利用する広告ユニット ID を Admob の画面から取得しておきます
テスト用のユニット ID だと広告のサイズがバナーになっていないためかうまく表示されないことがあったので、アプリ用の ID を取得しておきます (どうせ、公開するときには変更しなければいけないので)

Admob にアクセスしたらログインします
ログインするユーザは Firebase と同じ Google アカウントにしたほうが良いです
「新しいアプリを収益化」からアプリを作成します
するとアプリの情報を入力する画面になるので入力していきます
ここでもまだアプリを公開していない場合は「アプリを手動で追加」からアプリを追加してください
firebase_admob_creating_admob_app.png

ポイントは 2 つ目の広告ユニットの設定でここで必ずバナー広告を選択するようにしてください
firebase_admob_setting_admob_app.png

アプリを作成すると本番で使用する広告ユニット ID が払い出されるので、コード側の bannerView.adUnitID に設定しましょう

ちょっとおまけ

GADBannerViewDelegate を継承して以下のメソッドを追加しておくと広告が取得できなかったときやうまく取得できたときのイベントを追えるのでデバッグしやすくなるかもしれません

// Admob から広告が取得できなかったときに呼ばれます
func adView(bannerView: GADBannerView!, didFailToReceiveAdWithError error: GADRequestError!) {
    print("didFailToReceiveAdWithError")
}

// Admob から広告が取得できたときに呼ばれます
func adViewDidReceiveAd(bannerView: GADBannerView!) {
    print("adViewDidReceiveAd")
}

また、その場合は bannerView の delegate に self を設定してください

bannerView.delegate = self

動作確認

では、アプリを起動してみます
今回は広告のタイプをバナーでサイズを kGADAdSizeSmartBannerPortrait というものにしています
これは動的にサイズを変更してくれる設定でスマホを縦にしたり横にしたりしても適切なサイズの広告を毎回取得してくれます
以下のような感じで表示されると思います

縦
firebase_admob_ret_portrait.png

横
firebase_admob_ret_landscape.png

一応注意としては本番用の広告ユニット ID を使っているので、テストの状態で自分の実機などで広告をクリックするとアウトらしいので、クリックしないようにしてください

トラブルシューティング

  • STOP!! Will reset deviceID from memory.

となり広告が表示できないことがあった
対処方法としては Admob で広告を追加するときに広告タイプを「テキスト」「画像」の 2 つを表示しないとダメでした
はじめはテキストだけにしていたのですが、どうやらそれだと表示できないことがあるようです

  • NSLocalizedFailureReason=Request Error: No ad to show.

didFailToReceiveAdWithError メソッドがいつもコールされて広告が表示れない場合の対処ですが、コード上の設定や Storyboard 上の設定が何も間違っていなくそれでも上記のエラーが発生する場合は少し時間を置いて試してみましょう
Google Adsense 等もそうですが、広告がすぐに表示されないことがあります
自分の間隔だと 1 時間おけば確実に表示されます

最後に

iOS アプリに Firebase 版の Admob を導入する方法を紹介しました
基本つまづくことはなさそうですが、細かいところ (広告ユニットのサイズや広告ユニット ID を正しく設定するところなど) は若干ハマりそうな印象を受けました
それでも昔に比べたら格段に iOS アプリに広告を入れる方法は簡単になったと思います

あと、タイトルにもあるように今回は Xcode7 での手順です
Xcode8 だと追加の手順があるはずなので、それも検証して記事にできればと思います

参考リンク

時刻:
ラベル:

1 件のコメント:

  1. hawksnowlog2018年3月5日 14:19

    いつからかは不明ですが AppDelegate で

    GADMobileAds.configure(withApplicationID: "YOUR_ADMOB_APP_ID")

    という初期化も必要になったようなので注意してください

    返信削除

登録: コメントの投稿 (Atom)