こんにちは、エンジニアの太田です。
「Fenrir Advent Calendar 2016」の 22日目です。
フェンリルに入社し間もなく３か月が経とうとしています。あっという間でしたが初めて業務で Apple TV 向けアプリを開発する等充実した日々を送れているかなと思います。
今回は tvOS 10 から新機能として追加された、アピアランス「ダークモード」にアプリを対応させる実装について記事を書かせていただきます。
ダークモードって？
tvOS 10 以上の Apple TV で設定可能な、OS 全体の表示を文字通りダークにするモードのことです。「システム環境設定 -> 一般 -> アピアランス」から設定できます。
画面全体の印象がガラッと変わります。
アプリで対応をしてみる
アプリでダークモードに対応させるには、info.plist 内の key “UserInterfaceStyle” を Automatic に変更します。 tvOS アプリではデフォルトの背景がスクリーンセーバーにブラーがかかったものとなっていますので、上記変更をするだけで Apple TV のアピアランスが反映されるようになります。
自前の画像にブラーをかけてみる
自前で用意した画像にブラーをかける場合は UIBlurEffectView を使用しますが、こちらも Apple TV のアピアランスに対応させてみましょう。 tvOS 10 から追加された「UIBlurEffectStyle.regular」と「UIBlurEffectStyle.prominent」を使用します。それぞれ下記のように表示されます。
・regular： OS のアピアランスに合わせて UIBlurEffectStyle の”light”と”dark”に対応（薄めのブラー）。
・prominent： OS のアピアランスに合わせて UIBlurEffectStyle の”extraLight”と”extraDark”に対応（濃いめのブラー）。
UIBlurEffect – UIKit | Apple Developer Documentation
UIBlurEffectStyle – UIKit | Apple Developer Documentation
ここではよくある SNS サイトのアカウントページのようなものを Storyboard で作ってみます。
まずは UIViewController の画面全体に ImageView を配置します。余白なく埋めるため、ImageView の ContentMode は AspectFill にします。
次に画面右下のオブジェクトライブラリから「Visual Effect View With Blur」を ViewController 画面上部にドラッグアンドドロップで配置します。 ブラービューのアトリビュートインスペクタから Blur Style 「Regular」を設定します。
同様に画面下部に「Visual Effect View With Blur」を追加します。 こちらはテキストが乗る予定ですので、見やすいように濃いめのブラーを設定します。 Blur Style 「Prominent」を設定しましょう。
最後に画面上部に ImageView、画面下部に TextView を組み込んで完成です。ほぼ全ての作業を Storyboard でできてしまいました！ ※ 完成品には ImageView にコード上で角丸処理を入れています。
完成品
ライトモード
ダークモード
少しお粗末な出来ですが、Apple TV のアピアランスに対応した画面を作ることができました！ ここでは触れませんが、アピアランスごとにフォントカラーの設定や、サイズの調整が Storyboard・コードのどちらからも可能です。更に細かい UI 調整をしたい場合は使用してみましょう。
おわりに
いかがでしょうか、ダークモードへの対応は意外と簡単にできることがお分かりいただけたかと思います。 個人的には、ダークモードは画面の発光が抑えられてなかなかお気に入りです。
OS の雰囲気に合わせることで、ユーザーにとってネイティブアプリのように親しみやすく、使いやすいアプリになるものと思いますので、 Apple TV アプリを開発する方は是非対応をご検討してみてはいかがでしょうか！
フェンリル採用チームの Twitter アカウントです。応募前のお問い合わせや、ちょっとした相談ごとなどお気軽にどうぞ！
関連記事
