このガイドでは、iPhone X で広告を正しくレンダリングするようにアプリをコーディングする際のおすすめの方法を紹介します。
前提条件
- Google Mobile Ads SDK バージョン 7.26.0 以降を単独または Firebase の一部としてインポートします。
バナー広告
バナー広告は、角の丸み、センサー本体、ホーム インジケーターによって隠れないように、「セーフエリア」に配置する必要があります。このページでは、セーフエリアの上部または下部にバナーを配置するよう制限する方法の例を紹介します。
ストーリーボード/インターフェース ビルダー
アプリで Interface Builder を使用する場合は、まずセーフエリア レイアウト ガイドが有効になっていることを確認します。そのためには、Xcode 9 以降を実行し、iOS 9 以降をターゲットとしている必要があります。
Interface Builder ファイルを開き、ビュー コントローラ シーンをクリックします。右側に [Interface Builder Document] オプションが表示されます。[Use Safe Area Layout Guidelines] をオンにし、少なくとも iOS 9.0 以降向けに作成していることを確認します。
幅と高さの制約を使って、必要なサイズにバナーを制限することをおすすめします。
次に、GADBannerView の Top プロパティをセーフエリアの上部に制限することで、バナーをセーフエリアの上部に配置できます。
同様に、GADBannerView の Bottom プロパティをセーフエリアの下部に制限することで、バナーをセーフエリアの下部に合わせることができます。
制約は次のスクリーンショットのようになります（サイズ/位置は異なる場合があります）。
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];
}
セーフエリアの端にバナーを配置する
バナーを左揃えまたは右揃えにする場合は、バナーの左右端をスーパービューの左右端ではなく、セーフエリアの左端または右端に制限します。
[Use Safe Area Layout Guidelines] を有効にしている場合、インターフェース ビルダーはデフォルトで、ビューに制約を追加する際にセーフエリアの端を使用します。
プログラマティック
バナー広告をプログラムで作成する場合は、制約を定義して、バナー広告をコード内に配置できます。次の例は、セーフエリアの下部にバナーが水平方向の中央に配置されるよう制限する方法を示しています。
Swift
class ViewController: UIViewController {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// Instantiate the banner view with your desired banner size.
bannerView = GADBannerView(adSize: GADAdSizeBanner)
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:GADAdSizeBanner];
[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
上記の手法は、使用する属性とアンカーを変更することで、簡単にセーフエリアの上部に制限できます。
スマートバナー
スマートバナーを（特に横向きで使用する）場合は、バナーの端をセーフエリアの左端と右端に揃えるような制約を設定することをおすすめします。
インターフェース ビルダーでは、iOS 9 以降で [Use Safe Area Layout Guidelines] オプションをオンにすることでサポートされます（上記を参照）。
コードでは、可能であれば、セーフエリアのレイアウト ガイドを基準としてエッジ制約を設定する必要があります。次のコード スニペットは、バナービューをビューに追加し、ビュー下部の全幅に制約するコード スニペットです。
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 向けのインタースティシャル広告とリワード広告のフォーマットが完全にサポートされています。