iPhone X での広告表示

このガイドでは、iPhone X で広告を適切に表示するためのコードをアプリに設置するためのヒントを紹介します。

前提条件

  • Google Mobile Ads SDK バージョン 7.26.0 以降を 単独でインポートしているか、 Firebase の一部としてインポートしている必要があります。

バナー広告は、丸みのある隅やセンサーの表示エリア、およびホーム インジケータによって隠れないようにするため、「明確に見えるエリア」に配置する必要があります。このページでは、バナーが明確に見えるエリアの上部または下部に収まるように制限を加える方法について、例を挙げて説明します。iOS 9 以降と Xcode 9 以降がサポートされている環境で、ストーリーボードとプログラムの両方を使って制限を指定する方法を紹介します。iOS と Xcode のそれ以前のバージョン向けの回避策についても説明します。

ストーリーボードと Interface Builder

アプリで Interface Builder を使用している場合は、まず、明確に見えるエリアでレイアウト ガイドを有効にしていることを確認します。それには、Xcode 9 以降を実行していて、iOS 9 以降をターゲットに設定している必要があります。

Interface Builder ファイルを開いて、ビュー コントローラ シーンをクリックします。[Interface Builder Document] オプションが右側に表示されます。[Use Safe Area Layout Guides] チェックボックスをオンにして、最低条件として [iOS 9.0 以降] 向けに作成していることを確認します。

バナーは、幅と高さの制限を使って必要なサイズに収めることをおすすめします。

これで、GADBannerView の上部プロパティを明確に見えるエリアの上部に収めて、バナーの位置を明確に見えるエリアの上部に合わせられるようになりました。

同様に、GADBannerView の下部プロパティを、明確に見えるエリアの下部に収めるよう制限を加えて、バナーの位置を明確に見えるエリアの下部に合わせます。

制限は、以下のスクリーンショットのような形式で表示されます(サイズや位置は異なる可能性があります)。

ViewController

バナーを上のストーリーボードと同様の設定で GADBannerView に表示するために最低限必要とされるビュー コントローラの簡単なコード スニペットを次に紹介します。

Swift

class ViewController: UIViewController {

  /// The banner view.
  @IBOutlet var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
    bannerView.rootViewController = self
    bannerView.load(GADRequest())
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) IBOutlet GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  GADRequest *request = [GADRequest request];
  [self.bannerView loadRequest:request];
}

バナーを明確に見えるエリアの端に沿って表示する

バナーを左揃えまたは右揃えにする場合は、superview の左端または右端ではなく明確に見えるエリアの左端または右端に、バナーの左端または右端が収まるように制限を加えます。

[Use Safe Area Layout Guides] を有効にしている場合、Interface Builder では、ビューに制限を加えたとき、明確に見えるエリアの端に収まるようにデフォルトで設定されます。

iOS 8 以前をサポートする

Interface Builder を使って iOS 8 以前をサポートする場合は、Interface Builder ファイルとストーリーボードで [Use Safe Area Layout Guides] チェックボックスをオフにします。

次に、(明確に見えるエリアの上部ではなく)上部レイアウト ガイドの下部に収まるように制限を加えます。

また、(明確に見えるエリアの下部ではなく)下部レイアウト ガイドの上部にも収まるように制限を加えます。

全幅表示のバナー(横向きで明確に見えるエリアのみによる影響を受けます)については、このようなレイアウト ガイドがありません。Interface Builder では、余白との比較に基づいて左端と右端の制限を設定するのが安全です。

これにより、バナーの端が superview または明確に見えるエリアの端よりも少し内側になり、iPhone X を横向きにしてもバナーが隠れなくなります。プログラムを使ってご希望の配置を指定することもできます。

プログラムを使用した場合

バナー広告をプログラムで作成している場合は、制限を定義してバナー広告をコード内に配置できます。次の例(iOS バージョン 7.0 以降の場合)では、バナーが明確に見えるエリアの下部に中央揃えで横向きに表示されるように制限を加える方法を示しています。

Swift

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = GADBannerView(adSize: kGADAdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
    bannerView.load(GADRequest())
  }

  func addBannerViewToView(_ bannerView: UIView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    if #available(iOS 11.0, *) {
      positionBannerAtBottomOfSafeArea(bannerView)
    }
    else {
      positionBannerAtBottomOfView(bannerView)
    }
  }

  @available (iOS 11, *)
  func positionBannerAtBottomOfSafeArea(_ bannerView: UIView) {
    // Position the banner. Stick it to the bottom of the Safe Area.
    // Centered horizontally.
    let guide: UILayoutGuide = view.safeAreaLayoutGuide

    NSLayoutConstraint.activate(
      [bannerView.centerXAnchor.constraint(equalTo: guide.centerXAnchor),
       bannerView.bottomAnchor.constraint(equalTo: guide.bottomAnchor)]
    )
  }

  func positionBannerAtBottomOfView(_ bannerView: UIView) {
    // Center the banner horizontally.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .centerX,
                                          relatedBy: .equal,
                                          toItem: view,
                                          attribute: .centerX,
                                          multiplier: 1,
                                          constant: 0))
    // Lock the banner to the top of the bottom layout guide.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .bottom,
                                          relatedBy: .equal,
                                          toItem: self.bottomLayoutGuide,
                                          attribute: .top,
                                          multiplier: 1,
                                          constant: 0))
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Instantiate the banner view with your desired banner size.
  self.bannerView = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];
  [self addBannerViewToView:self.bannerView];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  GADRequest *request = [GADRequest request];
  [self.bannerView loadRequest:request];
}

#pragma mark - view positioning

-(void)addBannerViewToView:(UIView *_Nonnull)bannerView {
  self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:self.bannerView];
  if (@available(ios 11.0, *)) {
    [self positionBannerViewAtBottomOfSafeArea:bannerView];
  } else {
    [self positionBannerViewAtBottomOfView:bannerView];
  }
}

- (void)positionBannerViewAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Centered horizontally.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;
  [NSLayoutConstraint activateConstraints:@[
    [bannerView.centerXAnchor constraintEqualToAnchor:guide.centerXAnchor],
    [bannerView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor]
  ]];
}

- (void)positionBannerViewAtBottomOfView:(UIView *_Nonnull)bannerView {
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeCenterX
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeCenterX
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeBottom
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.bottomLayoutGuide
                                                        attribute:NSLayoutAttributeTop
                                                       multiplier:1
                                                         constant:0]];
}

@end

上記の手法を使用すると、使用する属性とアンカーを変更して、明確に見えるエリアの上部に収まるように簡単に制限を設定できます。

スマートバナー

特にスマートバナーを横向きで使用している場合は、制限を使って、バナーの端を明確に見えるエリアの左端と右端に合わせて表示することをおすすめします。

インターフェース ビルダーでは、上記のように [Use Safe Area Layout Guides] チェックボックスをオンにすると、 iOS 9 以降でスマートバナーがサポートされます。

コードでは、明確に見えるエリアのレイアウト ガイドとの比較に基づいて、端が収まるように制限を設定する必要があります(可能な場合)。ビューにバナービューを追加して、全幅表示のビューの下部に収まるように制限を加えるコード スニペットを次に示します。

Swift

func addBannerViewToView(_ bannerView: GADBannerView) {
  bannerView.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(bannerView)
  if #available(iOS 11.0, *) {
    // In iOS 11, we need to constrain the view to the safe area.
    positionBannerViewFullWidthAtBottomOfSafeArea(bannerView)
  }
  else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    positionBannerViewFullWidthAtBottomOfView(bannerView)
  }
}

// MARK: - view positioning
@available (iOS 11, *)
func positionBannerViewFullWidthAtBottomOfSafeArea(_ bannerView: UIView) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
    guide.leftAnchor.constraint(equalTo: bannerView.leftAnchor),
    guide.rightAnchor.constraint(equalTo: bannerView.rightAnchor),
    guide.bottomAnchor.constraint(equalTo: bannerView.bottomAnchor)
  ])
}

func positionBannerViewFullWidthAtBottomOfView(_ bannerView: UIView) {
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .leading,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .leading,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .trailing,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .trailing,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .bottom,
                                        relatedBy: .equal,
                                        toItem: bottomLayoutGuide,
                                        attribute: .top,
                                        multiplier: 1,
                                        constant: 0))
}

Objective-C

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  if (@available(ios 11.0, *)) {
    // In iOS 11, we need to constrain the view to the safe area.
    [self positionBannerViewFullWidthAtBottomOfSafeArea:bannerView];
  } else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    [self positionBannerViewFullWidthAtBottomOfView:bannerView];
  }
}

#pragma mark - view positioning

- (void)positionBannerViewFullWidthAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;

  [NSLayoutConstraint activateConstraints:@[
    [guide.leftAnchor constraintEqualToAnchor:bannerView.leftAnchor],
    [guide.rightAnchor constraintEqualToAnchor:bannerView.rightAnchor],
    [guide.bottomAnchor constraintEqualToAnchor:bannerView.bottomAnchor]
  ]];
}

- (void)positionBannerViewFullWidthAtBottomOfView:(UIView *_Nonnull)bannerView {
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeLeading
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeLeading
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeTrailing
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeTrailing
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeBottom
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.bottomLayoutGuide
                                                        attribute:NSLayoutAttributeTop
                                                       multiplier:1
                                                         constant:0]];
}

ネイティブ広告

アプリでネイティブ広告を画面の上部または下部に固定する場合は、バナー広告と同じ手法をネイティブ広告に適用できます。 主な違いは、明確に見えるエリアのレイアウト ガイドに合わせるため、GADBannerView に 制限を加える代わりに GADUnifiedNativeAdView(または広告が含まれるビュー)に 制限を加える必要があることです。ネイティブ ビューでは、 サイズの制限をより明示的に指定することをおすすめします。

インタースティシャル広告とリワード広告

Google Mobile Ads SDK のバージョン 7.26.0 では、iPhone X 向けのインタースティシャル広告およびリワード広告フォーマットが完全にサポートされています。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。