このページは Cloud Translation API によって翻訳されました。

iPhone X の広告レンダリング

このガイドでは、iPhone X で広告を正しくレンダリングできるようアプリのコードを記述するためのおすすめの方法を紹介します。

前提条件

スタートガイドの手順を完了していること。

バナー広告

バナー広告は、丸みを帯びた角、センサー筐体、ホームインジケーターによって隠れないように、「セーフエリア」に配置する必要があります。このページでは、制限を追加してバナーをセーフエリアの上部または下部に配置する方法の例を示します。iOS 9 以降および Xcode 9 以降をサポートする環境で、ストーリーボードとプログラムによる制約の両方のデモを確認できます。iOS と Xcode の以前のバージョンの回避策も記載されています。

ストーリーボード/インターフェースビルダー

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

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

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

これで、GAMBannerView の Top プロパティをセーフエリアの上部で制限することで、バナーをセーフエリアの上部に配置できるようになりました。

同様に、GAMBannerView の Bottom プロパティをセーフエリアの下部に制限することで、バナーをセーフエリアの下部に合わせることができます。

制約は以下のスクリーンショットのようになります（サイズや位置は異なる場合があります）。

ViewController

次のビューコントローラのシンプルなコードスニペットは、上記のストーリーボードで設定した GAMBannerView にバナーを表示するために必要な最小限の処理を行います。

Swift

class ViewController: UIViewController {

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

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "/6499/example/banner"
    bannerView.rootViewController = self
    bannerView.load(GAMRequest())
  }

}

Objective-C

@interface ViewController()

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

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

バナーをセーフエリアの端に配置する

全幅、左揃え、右揃えのバナーを配置する場合は、バナーの左端と右端をセーフエリアの左端または右端に制限します。スーパービューの左右端は制約しません。

[Use Safe Area Layout Guides] を有効にしている場合、インターフェースビルダーはデフォルトでビューに制約を追加する際に、セーフエリアの端を使用します。

iOS 8 以前のサポート

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

これで、（セーフエリアの上部ではなく）上部のレイアウトガイドの下部に制約を追加できるようになりました。

下部のレイアウトガイドの上部（セーフエリアの下部ではなく）にも制約を追加します。

全幅バナー（横向きのセーフエリアの影響のみ）については、これらのレイアウトガイドはありません。Interface Builder の安全なオプションは、次のように左右端の制約を余白に合わせて設定することです。

これにより、バナーの端がスーパービュー/セーフエリアの端から少しずらして、iPhone X で横向き時にバナーが隠れることがなくなります。目的の結果をプログラムで取得することもできます。

プログラマティック

アプリのプログラムでバナー広告を作成する場合は、制約を定義して、コード内でバナー広告を配置できます。この例（iOS バージョン 7.0 以降の場合）では、バナーがセーフエリアの下部で水平方向に中央揃えされるように制限しています。

Swift

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = GAMBannerView(adSize: kGADAdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "/6499/example/banner"
    bannerView.load(GAMRequest())
  }

  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) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

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

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest 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

上記の手法は、使用する属性とアンカーを変更することで、セーフエリアの上部に限定するために簡単に使用できます。

ネイティブ広告

アプリでネイティブ広告を画面の上部または下部に固定する場合は、バナー広告と同じ原則がネイティブ広告に適用されます。主な違いは、GAMBannerView に制約を追加するのではなく、GADNativeAppInstallAdView と GADNativeContentAdView（または広告を含むビュー）に制約を追加して、セーフエリアのレイアウトガイドを遵守する必要があることです。ネイティブビューの場合は、サイズの制限をより明示的に指定することをおすすめします。

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

インタースティシャル広告やリワード広告などの全画面広告フォーマットは、Google Mobile Ads SDK によってレンダリングされます。今後、Google Mobile Ads SDK のアップデートにより、閉じるボタンなどの広告要素が適切な場所に確実にレンダリングされるようになります。利用可能になり次第、リリースノートとこのドキュメントページを更新します。

iPhone X の広告レンダリング

前提条件

バナー広告

ストーリーボード/インターフェース ビルダー

ViewController

Swift

Objective-C

バナーをセーフエリアの端に配置する

iOS 8 以前のサポート

プログラマティック

Swift

Objective-C

ネイティブ広告

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

ストーリーボード/インターフェースビルダー