[レポート] LINEのダークモード対応、はじめました #linedevday_report

2019年11月20日(水)・21日(木)にLINEのデベロッパーカンファレンス「LINE DEVELOPER DAY 2019」が開催されました。本記事ではセッション「【セッションタイトル】」をレポートします。

【LINEのダークモード対応、はじめました】

2019年11月20日(水)・21日(木)にグランドニッコー東京 台場でLINEのデベロッパーカンファレンス「LINE DEVELOPER DAY 2019」が開催されました。

本記事は、ショートトラック セッション「LINEのダークモード対応、はじめました」をレポートします。

スピーカー

小俣仁美氏 LINE LINE iOS Team Software Engineer

セッション概要

iOS13のダークモードサポートに伴い、コミュニケーションアプリ「LINE」のiOS版でもダークモード対応作業が始まりました。「LINE」はこれまでにも多くの機能を取り入れてきました。それら既存の機能、デザイン、サービスに対して新たな要素を追加することは簡単ではありません。ダークモード用のデザインを用意するだけでなく、アプリの状態に見合った適切な対応が必要です。本セッションでは、「LINE」の現状を紹介し、ダークモード対応のためにどのような戦略や対策が必要か、そして今後の展望についてお話しします。

レポート

ダークモード対応

  • LINEは、ダークモード対応を開発中

リリースイメージの画面

What is Dark mode for "LINE"?

  • iOS 13からダークモードに切り替えることができる。
  • ユーザーは、「ライトモード」と「ダークモード」の切り替えができる。
  • なぜ2種類用意されたか?
    • 目に優しい
    • バッテリー持ち
    • ユーザーの好みに合わせて
  • LINEには、既に着せ替え機能がある
    • 好きな色、好きなキャラクターを切り替えることができる
  • iOS 13でダークモードが入る前からLINEは、対応できる
  • しかし、機能的にはコンフリクトしている
    • iOS は2択
  • ダークモード対応はLINEの開発体制に負担になる
  • それぞれ担当している人が違う
  • Apple公式の手順と合わない実装もある

Why to support Dark Mode

  • まず、最初に行うべきは、ライトモードとダークモードで使用するべきカラーの選定
  • そのためには、セマンティックカラーを用意する
  • そこからライトモード、ダークモードを用意する
  • まずは、これを整理整頓
  • 着せ替え対応で、ダークモードの前から色の整頓をしている
  • セマンティックカラーを決める

  • これにより、今までのように自由に色を決めることはできなが、パターンに当てはめることで対応は可能
  • 開発側がやるべきことは、着せ替え機能にダークモードを入れ込む
    • セマンティックカラーを導入
    • 着せ替え設定ファイルからダイナミックのカラーが読み出せるように変更
  • 全ては対応できないので、ハードコードの部分は、ライトモード固定
  • LINEアプリには沢山のViewがある
    • Viewヒエラルキーの上位を探す

iOS 13対応

  • OSの振る舞いが変わると、着せ替え機能が動かなくなる可能性がある
  • LINEは、独自のTintColerメソッドがある

Future tasks

  • 着せ替え機能のViewを増やす
  • これにより、自然にダークモード対応が増える
  • 最適化をしたいので、着せ替え機能を進化させる
  • 今後の着せ替え機能に期待してください!

まとめ

iOS 13からダークモード対応が可能になり、iOSの開発者はダークモード対応が必要になります。着せ替えモードにダークモード機能を取り込むことにより、どちらの対応も可能にしたのと同時に、LINEのView全ての対応を行うのは非常に忍耐のいる作業ではあるなと思いました。ダークモードに対応したLINEアプリを楽しみにしています!