読者です 読者をやめる 読者になる 読者になる

いものやま。

雑多な知識の寄せ集め

iAdを表示させる方法と画面サイズについて。

SoloXmasは無料で配信して、広告を表示させるつもりだったので、iAdを表示させる方法を調べ、実装した。
今日はその話を。

iAdを表示させる方法

といっても、iAdを表示させるだけなら、すごく簡単。

ViewControllerに次の一行を入れればいいだけ。

self.canDisplayBannerAds = true

これだけでiAdを表示することが出来るw

画面サイズをiAdに対応させる

でも、実際にはもうちょっとやることが。

というのも、iAdは広告の在庫具合によって、表示されたりされなかったりするから。
表示/非表示によってビューのサイズは動的に(もちろん、アプリ動作中も)変更されるので、それに対応する必要がある。

なお、AutoLayoutを使うアプリの場合、これについてはあまり考える必要はないかも。
というのも、画面サイズが変わったタイミングで、制約にしたがってレイアウトが調整されるだけだから。

けど、SpriteKitを使っている場合、ゲームの要素はシーン内で配置を行っているだろうから、注意が必要。
というのも、SKView自体は画面サイズの変更に伴って(制約にしたがって)サイズが変わるけど、SKSceneのサイズは変更されないから。
指定されているSKScene#scaleModeにしたがって、描画のスケールが変更されるだけ。
なので、何かしらの対策が必要になってくる。

一つの方法は、ビューのサイズが変更されたタイミングで、サイズが変わったことをシーンにも伝えて、再レイアウトを促すという方法。
ただ、ちょっと大変。

もう一つの方法は、あらかじめある程度のマージンを取っておくという方法。
そうすれば、広告が表示されたときにはそのマージンの部分が表示されなくなるだけで、コンテンツの表示には影響が出なくなる。
見栄えはあまりいいとは言えないけど、追加のコードをほとんど書く必要がないという意味では、簡単。

SoloXmasでは、後者の方法を使ってみた。

デバイスごとのマージンのサイズ

iAdで表示される広告のサイズはデバイスごとに違っていて、

デバイス 広告の高さ
iPhone 50 pt
iPad 66 pt

となっている。

いろんな画面サイズに対応する方法について。 - いものやま。で言及した方法を使っている場合、iPhoneでのSKSceneの論理サイズは2倍になるので、それぞれ上下に

|デバイス|マージンのサイズ| |iPhone|50 pt| |iPad|33 pt|

のマージンが必要ということになる。

なので、次のようにシーンにクラス変数を用意しておいて、デバイスに応じて設定するようにした。

// GameScene.swift

class GameScene: SKScene {
  static var adMargin: CGFloat = 0.0

  // 以下省略
}
// ViewController.swift

class ViewController: UIViewController {
  // 省略

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // 省略
    
    self.canDisplayBannerAds = true
    if UIDevice.currentDevice().userInterfaceIdiom == .Phone {
      GameScene.adMargin = 50.0
    } else {
      GameScene.adMargin = 33.0
    }

    // 省略
  }

  // 省略
}

そして、レイアウトを行うときには、GameScene.adMarginの値を使って上下にマージンをとるようにする。

これにより、表示は次のような感じになる。

iPhone(広告なし)
f:id:yamaimo0625:20151215193241j:plain:h600

iPhone(広告あり)
f:id:yamaimo0625:20151218045651j:plain:h600

iPad(広告なし)
f:id:yamaimo0625:20151220162859p:plain:h600

iPad(広告あり)
f:id:yamaimo0625:20151220164501p:plain:h600

広告なしのときには上下に余白が表示され、広告がある場合にはその余白が潰されていることが分かると思う。

今日はここまで!