iOS 13ダークモードにアプリを対応させる方法：開発者向け実装ガイド

Appleは2019年9月19日、過去4年以内に発売されたすべてのiPhone（iPhone 6s以降）を対象に、待望のiOS 13アップデートを世界中でリリースしました。

このアップデートの最大の目玉機能のひとつが、システム全体に適用されるiOS 13のダークモードです。スマートフォンのディスプレイが発する白い光による目の疲れを軽減できることが期待されています。

この機能はAppleデバイスのエンドユーザーにとって嬉しいものですが、iOS開発者にとっては、iOS 13ダークモードに対応したアプリを準備するという課題でもあります。

iOS 13ダークモードにアプリを対応させるには？

開発者の皆さんの参考として、既存のiOSアプリをiOS 13ダークモードに対応させるための有用な情報と手順をご紹介します。

• システム全体に及ぶ大規模な変更ですが、iOS 13ダークモードの実装はそれほど難しくありません。
• 最新のiOS 13 SDKのおかげで、既存アプリでダークモードを有効にする作業もシンプルになっています。

最新バージョンでiOS 13ダークモード向けのアプリをビルドすると、OSが自動的にスイッチ、ボタン、テーブルビューなどのシステムコントロールを更新してくれます。ただし、画像やテキストの色は自動的に調整されない点には注意が必要です。

とはいえ、ダークモードのようなシステム全体の変更がこれほど簡単に実装できるのは驚きです。コードの変更量は少なく、浮いた時間でダークモード対応に関連する他の作業をより多く進められます。

iOS 13ダークモードに合わせたカラーの調整方法

まずは、iOS 13ダークモード用のシステムカラーの変更から始めましょう。

UIColorには新しいシステムカラーが追加されており、そのひとつがラベルカラーです。これらの新しいカラーを使用することで、iOS 13のダークモードやハイコントラストモードへの対応が容易になります。

label.color = UIColor.secondaryLabel

一般的には、iOS 13ダークモードにはシステムカラーを使用するのがおすすめです。システムカラーはインターフェースの変化に自動的に適応し、アプリ間の一貫性を維持してくれます。ただし、開発者がカスタムカラーでダークモードを実装することも可能です。

iOS 11で導入されたアセットカタログのカラー機能を使えば、カスタムカラーセットのダーク版を追加するだけで、ダークモード対応が格段に簡単になります。

カタログから希望のカラーを選択し、Attributes Inspectorで「Appearances」を「Any, Dark」に変更するだけです。

これだけで完了です！これでモバイルアプリ用のカスタムiOS 13ダークモードの準備が整いました。

iOS 13ダークモードのトラブルシューティング

アプリがiOS 13ダークモードに正しく対応しない場合はどうすればよいのでしょうか。ここでは、問題を解決するための簡単な手順を紹介します。

ステップ1：アプリの更新状況を確認

まず、アプリが最新バージョンに更新されているかどうかを確認しましょう。

アプリがiOS 13ダークモードで動作しない、または対応していない場合は、App Storeからアプリを更新してください。

ステップ2：ダークモード設定の確認

iOS端末側でダークモードが有効になっているかどうかを確認します。

有効になっていない場合は、「設定」→「画面表示と明るさ」と進み、「ダーク」が選択されているか確認してください。

ステップ3：アプリ内設定の確認

アプリが完全に最新の状態でもiOS 13ダークモードで動作しない場合は、アプリ内の設定を確認してください。下記の画像を参照してください：

iOS 13ダークモードの設定についてさらにサポートが必要な場合は、専門の開発チームに相談するのがおすすめです。私たちも喜んでお手伝いいたします。

iOSでのモバイルアプリ開発に関するヒントも併せてご覧ください。この情報が皆さんのお役に立てば幸いです。

次に何をすべきか、見ていきましょう。

iOS 13ダークモードに合わせた画像の調整

ほとんどの画像はiOS 13ダークモードでも美しく表示され、場合によっては細部がかえって際立つこともあります。しかし、中にはダークモードで少し違和感のある画像や不向きな画像に出会うこともあるでしょう。

朗報なのは、画像もテキストと同じ方法でダークモードに調整できるという点です。

必要なのは、カタログで対象の画像を選択し、先ほどと同じようにAttributes Inspectorで属性を「Any, Dark」に変更することだけです。あとは画像のダーク外観を追加すれば完成です。

iOS 13ダークモードの変更をプログラムで検出する

開発者は、iOS 13ダークモードの外観変更をプログラムで処理する必要がある場面に直面することがあります。その実装方法は以下の通りです。

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) 
{
    super.traitCollectionDidChange(previousTraitCollection)

    let userInterfaceStyle = traitCollection.userInterfaceStyle // Either .unspecified, .light, or .dark
    // Update your user interface based on the appearance
}

traitCollectionDidChangeをオーバーライドすることで、外観の変更を検出できます。

あとはtraitCollection.userInterfaceStyleを参照するだけです。

新しく実装したメソッドで、現在の外観が変更されたかどうかを確認することもできます：

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)

    let hasUserInterfaceStyleChanged = previousTraitCollection.hasDifferentColorAppearance(comparedTo: traitCollection) // Bool
    // Update your user interface based on the appearance
}

ユーザーインターフェーススタイルのオーバーライド

アプリ全体を固定する場合

iOS 13.0以降のSDKに対してリンクされたアプリは、システムによって自動的にライトとダークの両方の外観に対応します。

アプリのダークモード対応により多くの時間が必要な場合や、アプリを単一のスタイルに保ちたい場合は、Info.plistファイルにUIUserInterfaceStyleキー（値はLightまたはDark）を追加することでオプトアウトできます。

このキーを設定すると、システムはユーザーの設定を無視し、常に指定した外観をアプリに適用します。

注意：iOS 13ダークモードへの対応は強く推奨されています。UIUserInterfaceStyleキーは、アプリのダークモード対応を改善している間の一時的な措置としてのみ使用してください。

特定の画面のみを固定する場合

iOS 13では、特定のビューやビューコントローラーに対してユーザーインターフェーススタイルを個別にオーバーライドできるようになりました。例えば、特定のビューコントローラーだけをダークモードにし、アプリの他の部分はライトモードのままにしたいといったケースが考えられます。

ユーザーインターフェーススタイルをオーバーライドするには、最上位のビューまたはビューコントローラーでこの変数をオーバーライドするだけで、サブビューにも設定が伝播します。

// Inside a UIViewController
override func viewDidLoad() 
{
    super.viewDidLoad()

    // Always adopt a dark interface style.    
    overrideUserInterfaceStyle = .dark
}

まとめ

記事をお読みいただきありがとうございました！今回は、iOS 13ダークモードにアプリを対応させる方法について詳しく解説しました。

iOS 13ダークモードは、スマートフォンをストレスなく快適に使うための新しい選択肢をもたらします。将来的には、白背景のデフォルトモードに代わってダークモードが主流になるかもしれません。

本記事で紹介したコーディングガイドラインとヒントに従えば、iOS 13のダークモードにアプリを簡単に対応させることができます。

専門家のサポートが必要な場合は、iOS 13ダークモードに関するご質問をお気軽にiOS開発チームまでお問い合わせください。

最新情報はTwitterでも配信しています：
https://twitter.com/ValueCoders