Objective-CでのsafeArea取得のたったの7つの方法

はじめに

Objective-Cを学ぶ上で、モバイルアプリ開発において重要な概念の一つが「safeArea」の理解とその取得方法です。

この記事では、Objective-CにおけるsafeAreaの取得方法を、初心者の方にも分かりやすく解説していきます。

具体的なサンプルコードを用いながら、safeAreaの取得方法を7つ紹介し、それぞれについて詳細に解説していきます。

まずはObjective-CとsafeAreaについて基本的な知識を確認してから、具体的な実装方法に進んでいきましょう。

●Objective-CとsafeAreaについて

Objective-Cは、AppleのiOSやmacOSでのアプリ開発に広く使用されているプログラミング言語です。

C言語をベースにしており、Smalltalkスタイルのメッセージ指向の機能が追加されています。

これにより、オブジェクト指向プログラミングが容易になり、Appleのフレームワークとの連携もスムーズです。

Objective-Cの基本的な構文や特徴を理解することは、iOSアプリの開発において必要不可欠です。

特に、インターフェイスのデザインや機能実装において、Objective-Cの理解度が直接的にアプリの品質に影響を与えます。

○Objective-Cの基本

Objective-Cのプログラミングでは、C言語の基本的な文法に加えて、クラス、継承、ポリモーフィズム、カプセル化などのオブジェクト指向の概念が重要です。

また、Objective-Cでは、メソッドへのメッセージ送信という形式でオブジェクト間のコミュニケーションが行われます。

これにより、動的なプログラミングが可能となり、柔軟なコードの記述が実現します。

さらに、Appleが提供するCocoaフレームワークやCocoa Touchフレームワークとの親和性が高く、多くの標準ライブラリやAPIを利用することができます。

これらのフレームワークを活用することで、効率的にiOSアプリやmacOSアプリを開発することが可能です。

○safeAreaとは？

safeAreaは、iOS 11から導入された概念で、iPhone Xのノッチやラウンドコーナー、画面下部のホームバーエリアなどを考慮したUIの配置を行うための領域です。

これにより、異なるデバイス形状や特有の画面要素による表示の問題を回避し、各デバイスに適したUIを設計することが可能になります。

safeArea内でのUI要素の配置は、ユーザーにとって最も見やすく操作しやすいエリアとなります。

特に、ステータスバーやホームインジケーターの近く、または画面端に近い部分でのUI配置を行う際には、safeAreaの適切な取得と利用が不可欠です。

●safeAreaの取得方法

iOSアプリケーションの開発において、画面の最上部や最下部に配置されるノッチやホームバーなどの特別なUI要素を考慮して、コンテンツを表示する必要があります。

これを達成するために、Appleは「safeArea」という概念を導入しました。

このsafeAreaは、ユーザーコンテンツが安全に表示される画面の領域を表しています。

Objective-Cを用いて、このsafeAreaを取得する方法をいくつか解説します。

○サンプルコード1：基本的なsafeAreaの取得方法

Objective-Cを使用して、現在の画面のsafeAreaの情報を取得する基本的な方法を紹介します。

// ViewController.m
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // safeAreaの取得
    UIEdgeInsets safeAreaInsets = self.view.safeAreaInsets;

    // safeAreaの各辺の値をログに出力
    NSLog(@"上部：%f", safeAreaInsets.top);
    NSLog(@"下部：%f", safeAreaInsets.bottom);
    NSLog(@"左部：%f", safeAreaInsets.left);
    NSLog(@"右部：%f", safeAreaInsets.right);
}

@end

このコードでは、safeAreaInsetsを使って、現在のビューのsafeAreaの各辺の値を取得しています。

この例では、上部、下部、左部、右部のsafeAreaの値をログに出力しています。

このコードを実行すると、例えばノッチのあるiPhoneであれば、上部のsafeAreaの値がノッチ部分を考慮した値としてログに出力されることを確認できます。

○サンプルコード2：safeAreaの上部を取得する

特定の辺だけを取得したい場合もあるでしょう。

次に、safeAreaの上部だけを取得する方法を紹介します。

// ViewController.m
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // safeAreaの上部を取得
    CGFloat safeAreaTop = self.view.safeAreaInsets.top;

    // safeAreaの上部の値をログに出力
    NSLog(@"上部：%f", safeAreaTop);
}

@end

このコードでは、safeAreaInsets.topを使用して、現在のビューのsafeAreaの上部の値だけを取得しています。

この例では、上部のsafeAreaの値をログに出力しています。

このコードを実行すると、safeAreaの上部の値がログに正確に出力されることを確認できます。

これは特に、デバイス上部にノッチやセンサーが配置されている場合に有効な方法となります。

○サンプルコード3：safeAreaの下部を取得する

Objective-Cを用いて、iPhoneやiPadのデバイス上でアプリケーションを作成する際、画面下部のsafeAreaを正確に取得することは非常に重要です。

特に、ホームバーが存在する最新のデバイスでは、ユーザインターフェイスがホームバーに被らないようにするためには、このsafeAreaの下部を正確に知る必要があります。

それでは、具体的なサンプルコードを見ていきましょう。

// ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // safeAreaの下部を取得するコード
    if (@available(iOS 11.0, *)) {
        CGFloat safeAreaBottomInset = self.view.safeAreaInsets.bottom;
        NSLog(@"safeAreaの下部：%f", safeAreaBottomInset);
    } else {
        NSLog(@"safeAreaはiOS 11.0未満では利用できません");
    }
}

@end

このコードでは、@availableを使ってiOS 11.0以降のデバイスであるかを判断しています。

iOS 11.0以降であれば、self.view.safeAreaInsets.bottomを使用してsafeAreaの下部の値を取得しています。

この例では、取得した値をログに出力しています。

実行すると、ログには「safeAreaの下部：xx」という形式で、safeAreaの下部の値が表示されます。

たとえば、iPhone X系のデバイスであれば、この値は通常34.0となります。

○サンプルコード4：safeAreaの左部を取得する

続いて、画面の左側のsafeAreaを取得する方法について説明します。

画面の左側のsafeAreaは、特に言語や地域によって画面の表示が左から右になる場合（例：アラビア語などのRTL（Right To Left）言語）に、UI要素が適切に配置されるかを確認する際に役立ちます。

それでは、実際のサンプルコードを見てみましょう。

// ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // safeAreaの左部を取得するコード
    if (@available(iOS 11.0, *)) {
        CGFloat safeAreaLeftInset = self.view.safeAreaInsets.left;
        NSLog(@"safeAreaの左部：%f", safeAreaLeftInset);
    } else {
        NSLog(@"safeAreaはiOS 11.0未満では利用できません");
    }
}

@end

このコードでは、self.view.safeAreaInsets.leftを使用してsafeAreaの左部の値を取得しています。

取得した値は、ログに出力されます。

実行すると、ログには「safeAreaの左部：xx」という形式で、safeAreaの左部の値が表示されます。

大半のデバイスや設定でこの値は0.0となりますが、上記のような特殊な状況下では異なる値を取得することも考えられます。

○サンプルコード5：safeAreaの右部を取得する

Objective-Cを使用してiOSデバイスのsafeAreaの右部を取得する方法を解説します。

具体的には、UIViewControllerのviewのsafeAreaInsetsプロパティから右部のインセットを取得します。

// ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // safeAreaの右部を取得
    CGFloat rightSafeArea = self.view.safeAreaInsets.right;
    NSLog(@"safeAreaの右部：%f", rightSafeArea);
}

@end

このコードでは、UIViewControllerのviewのsafeAreaInsetsプロパティを使用して、safeAreaの右部のインセットをCGFloat型の変数rightSafeAreaに格納しています。

この例では、NSLogを使用して、コンソールにsafeAreaの右部のインセットの値を表示しています。

実行すると、コンソールに「safeAreaの右部：[数値]」という形式で、実際のインセットの値が表示されます。

この値は、デバイスや画面の向き、ノッチの有無などによって変動します。

○サンプルコード6：safeAreaの全ての辺を取得する

次に、safeAreaの全ての辺のインセットを一度に取得する方法を説明します。

こちらもsafeAreaInsetsプロパティを使用しますが、今回は各辺を個別に取得するのではなく、全ての辺を一度に取得します。

// ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // safeAreaの全ての辺を取得
    UIEdgeInsets safeAreaInsets = self.view.safeAreaInsets;
    NSLog(@"safeAreaの上部：%f", safeAreaInsets.top);
    NSLog(@"safeAreaの左部：%f", safeAreaInsets.left);
    NSLog(@"safeAreaの下部：%f", safeAreaInsets.bottom);
    NSLog(@"safeAreaの右部：%f", safeAreaInsets.right);
}

@end

このコードでは、safeAreaInsetsプロパティの各値を使用して、safeAreaの上部、左部、下部、右部のインセットをそれぞれ取得しています。

この例では、NSLogを使用して、コンソールに各インセットの値を表示しています。

実行すると、コンソールに各インセットの値が「safeAreaの上部：[数値]」などの形式で表示されます。

これにより、簡単に各辺のインセットの値を確認することができます。

○サンプルコード7：safeAreaとUIViewの関係を理解する

最後に、safeAreaとUIViewの関係性について理解しましょう。

safeAreaは、特定のデバイスのデザイン（例：ノッチ）により、画面の一部がコンテンツ表示に適していないエリアを表します。

UIViewはこのsafeAreaを考慮することで、ユーザー体験を損なうことなくコンテンツを表示することができます。

下記のコードは、safeAreaを考慮してUIViewを配置する例を表しています。

// ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    UIView *contentView = [[UIView alloc] initWithFrame:self.view.bounds];
    contentView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:contentView];

    if (@available(iOS 11.0, *)) {
        UILayoutGuide *guide = self.view.safeAreaLayoutGuide;
        [contentView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
        [contentView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;
        [contentView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES;
        [contentView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES;
    }
}

@end

このコードでは、UIViewのインスタンスcontentViewを作成し、そのビューをsafeAreaに合わせて配置しています。

これにより、デバイスのデザインや向きに関係なく、常にユーザーに最適な表示が行われます。

実行すると、画面全体に青色のcontentViewが表示されますが、ノッチやホームインジケータのエリアを避けて表示されることが確認できます。

このように、safeAreaを考慮することで、UIViewの配置やサイズ調整が容易になります。

●safeAreaの応用例

safeAreaは画面上でコンテンツが安全に表示される領域を表すものです。

しかし、このsafeAreaだけでなく、それを活用したUIデザインの応用例も多々存在します。

ここでは、Objective-Cを使ってsafeAreaを考慮したUI配置や、safeArea内でのスクロールビューの実装方法を紹介します。

○サンプルコード8：safeAreaを考慮したUI配置

Objective-Cを使ったsafeAreaを考慮したUI配置の例を紹介します。

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    UIView *myView = [[UIView alloc] initWithFrame:self.view.bounds];
    myView.backgroundColor = [UIColor blueColor];
    UIEdgeInsets safeAreaInsets = self.view.safeAreaInsets;
    CGRect safeFrame = CGRectMake(safeAreaInsets.left,
                                  safeAreaInsets.top,
                                  self.view.bounds.size.width - safeAreaInsets.left - safeAreaInsets.right,
                                  self.view.bounds.size.height - safeAreaInsets.top - safeAreaInsets.bottom);
    myView.frame = safeFrame;
    [self.view addSubview:myView];
}
@end

このコードでは、ViewController内で青色のビューを作成し、そのビューのサイズや位置をsafeAreaに合わせて調整しています。

この例では、safeAreaのインセット情報を取得し、それを使ってビューのサイズや位置を調整しています。

このコードを実行すると、safeArea内に青色のビューが表示されるようになります。

特にノッチやホームインジケータの存在するデバイスでは、それらの要素を避けてコンテンツが表示されることが確認できます。

○サンプルコード9：safeArea内でのスクロールビューの実装

safeAreaを活用して、その範囲内でのみスクロールが可能なスクロールビューを実装する方法を紹介します。

#import <UIKit/UIKit.h>

@interface ScrollViewController : UIViewController
@end

@implementation ScrollViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    scrollView.backgroundColor = [UIColor lightGrayColor];
    UIEdgeInsets safeAreaInsets = self.view.safeAreaInsets;
    scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentAlways;
    scrollView.contentInset = safeAreaInsets;
    scrollView.contentSize = CGSizeMake(self.view.bounds.size.width, self.view.bounds.size.height * 2);

    [self.view addSubview:scrollView];

    UIView *contentView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, scrollView.contentSize.width, scrollView.contentSize.height)];
    contentView.backgroundColor = [UIColor orangeColor];
    [scrollView addSubview:contentView];
}
@end

このコードでは、ScrollViewController内でスクロールビューを作成しています。

そして、safeAreaのインセット情報を取得し、スクロールビューのコンテンツインセットに設定しています。

この例では、safeAreaのインセット情報を活用してスクロールビューの内容がsafeArea内でのみスクロール可能となるようにしています。

このコードを実行すると、safeArea内でのみスクロールが可能なスクロールビューが表示されることが確認できます。

ノッチやホームインジケータを持つデバイスでは、それらの要素を避けた範囲でのみコンテンツがスクロールするのが確認できます。

●注意点と対処法

Objective-Cを使用してsafeAreaを取得する際、何らかの問題や課題が発生することが想定されます。

この章では、Objective-CでのsafeArea取得時に注意するべき点と、それに対する対処法について詳しく説明します。

○新しいデバイスやOSへの対応

Objective-CでのsafeArea取得は、iOSのバージョンやデバイスのモデルによって異なることがあります。

特に新しいデバイスやOSがリリースされるたびに、safeAreaの仕様が変わる可能性があるため、常に最新の情報をチェックし、アップデートに適応することが重要です。

このコードでは、現在のiOSのバージョンを取得して、そのバージョンに合わせたsafeAreaの取得方法を適用するコードを表しています。

この例では、iOS 13.0以降のデバイスでsafeAreaを取得する方法を示しています。

if (@available(iOS 13.0, *)) {
    // iOS 13.0以降のデバイスでのsafeArea取得方法
    UIEdgeInsets safeAreaInsets = self.view.safeAreaInsets;
} else {
    // iOS 13.0未満のデバイスでのsafeArea取得方法
    // 必要に応じて適切なコードを記述
}

上記のコードを実行すると、現在のiOSのバージョンに応じて適切なsafeArea取得方法が適用されます。

これにより、新しいデバイスやOSに迅速に対応することができます。

○safeArea外でのUI配置のリスク

safeArea外でのUI配置は、ユーザー体験を悪化させる可能性があります。

特に、ノッチや丸みを帯びたコーナーがあるデバイスでは、safeArea外に配置されたUI要素が正しく表示されない、または操作が困難になることが考えられます。

このコードでは、safeArea外にボタンを配置する際のリスクを表しています。

この例では、ボタンがsafeAreaの上部に配置され、ノッチによって部分的に隠れてしまう可能性を示唆しています。

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(10, 0, 100, 50); // safeArea外に配置
[self.view addSubview:button];

上記のコードを実行すると、safeAreaの上部にボタンが配置され、ノッチの存在によりボタンが部分的に隠れてしまいます。

このような配置は避けるべきであり、UI要素は必ずsafeArea内に配置することを推奨します。

●カスタマイズ方法

safeAreaはiOSデバイス上でコンテンツを表示するエリアを指定するためのものです。

この領域は画面上部のノッチや画面下部のホームインジケータによって影響を受ける場合があります。

そして、Objective-Cを使用してsafeAreaをカスタマイズする方法がいくつか存在します。

○safeAreaの色をカスタマイズする

Objective-Cを使用してsafeAreaの色をカスタマイズすることは、ビジュアルの観点からアプリの見た目を向上させる方法の1つです。

ここではsafeAreaの背景色を変更するサンプルコードを紹介します。

// AppDelegate.mまたは適切なViewControllerで下記のコードを記述
self.window.backgroundColor = [UIColor redColor]; // 背景色を赤色に設定

このコードでは、ウィンドウの背景色を赤色に設定しています。

この例では、safeAreaの背景色をカスタマイズしています。

赤色に設定することで、safeArea外の背景が赤くなります。

○safeAreaの形をカスタマイズする

safeAreaの形をカスタマイズすることで、特定のデザインニーズを満たすことができます。

例として、角を丸くする方法を紹介します。

// 適切なViewControllerで以下のコードを記述
self.view.layer.cornerRadius = 20; // 角を丸くする
self.view.clipsToBounds = YES;     // クリッピングを有効にする

このコードでは、ViewControllerのビューの角を丸くするために、cornerRadiusプロパティを使用しています。

この例では、ビューの角を丸くして、その結果としてsafeAreaも丸く表示されるようにしています。

まとめ

Objective-Cを利用してsafeAreaのカスタマイズを行うことは、アプリのデザインやユーザビリティを向上させる手段の一つとして非常に有効です。

背景色の変更や形のカスタマイズなど、さまざまな方法でsafeAreaを調整することが可能です。

ただし、新しいデバイスやOSのアップデートによる影響を考慮しつつ、定期的な確認と更新が必要となります。

アプリのデザインや機能に合わせて、最適なsafeAreaのカスタマイズを行い、ユーザー体験を最大限に引き出すよう努力しましょう。