こんにちは、モバイルクライアントグループの明渡です。

8月31日、StudyplusのiOS版でダークモードに、Android版でダークテーマに対応したバージョンをリリースしました🎉

今回は、私も一部を担当したiOSアプリの実装の話を僅かに混えつつ、Studyplusのダークモード・ダークテーマ対応(以降はダークモード対応と表記)の進め方をご紹介します。

前提

方針

9割以上、ダークモード・ダークテーマへ最適化された状態を目指す
- できるだけ対応が漏れないよう善処はする
- 100％対応完了したと判断できるところまで時間をかけるより、少々の漏れがある状態でもリリースする方がユーザーにとって嬉しいはずと判断

7〜9月中にリリース目標
- 9月以降はiOS・Android共にOSのメジャーバージョンアップデート対応が多かれ少なかれ控えており、できれば8月中にリリースまでこぎつけたい

対応期間中、ダークモード対応と比較すると粒度が小さいが優先度の高いタスクが発生すればそちらを優先しています。以下のメンバーはMAXで動いていた際のものです。

なお、全メンバーリモート勤務です。

普段プロジェクトを進行する際行う開発にかかる工数見積もりは、諦めました。理由は以下の通りです。

影響範囲がアプリ全体に渡り、長年の歴史的経緯の都合でレイアウトの組み方・色の指定方法が入り混じっている状態を解消し切れていない
- 修正が必要な箇所の洗い出しは事前にできても、実際に着手してみないとかかる工数の読めないタスクが相当数発生する予測
上記の状態で正確な工数を見積もる場合、具体的に必要な作業の調査を細かくする必要があり時間を要する
- そこまで掘り下げて調査するくらいなら最早手を動かした方が良いだろうという判断

スケジュールは大まかな単位で対応目標期日のみ設定し、洗い出したタスクの進捗を定期的に確認したり、メンバーの休暇予定を鑑みたりして実態に合わせて少し調整しました。

「手出してみないと具体的にどのくらい時間かかるか全然分からないけど、とりあえずこのくらいの目標で進めますね！」という見様によっては雑と捉えられる場合がある進め方を、何の軋轢もなく許容してくれる環境で本当に良いなと思います。

iOS・Android共に以下の流れで進めました。

共通UIパーツを最初に対応すると、必然的に個別対応の必要な箇所が分かりやすくなるので早い段階で対応することにしました。

iOSの場合だと、枠線・塗りつぶしボタンやそのハイライト、キーボードのinputAccessoryViewなどがありました。

一部、全く同じ見た目かつソースコードも使い回されているUIが見つかり、切り出して共通化する対応も併せて行いました...

対応が必要な背景色やラベルなどの情報をチェックリストにして添えつつ、画面単位でタスクを起票しました。

アプリの全画面を網羅しているドキュメントなどは特に存在しないため、iOSについては見渡す限り片っ端から画面を開いて確認する形で進めました。

当然ながら、そんな作業で起票したタスクを元に実装を進めるともちらほら漏れがあり追加で対応しながら進めることになったので、このやり方をお勧めはできません...

以下の2種類に分けることができ、前者は実装タスクとして対応を粛々と進め、後者を検討タスクとして起票してデザイナーに依頼しておきます。

エンジニアの判断で対応を進められる
- OS標準色に準拠させると違和感が解消できる
  - iOSでいうところの、iOS 13以上向けに追加されているSystem Colors・Dynamic System Colors*1
  - AndroidではMaterialDesignComponentライブラリを利用しているため、MaterialDesignのカラーパレットや、The color system*2に則りパレットツールによる色の作成
デザイナーの判断を仰いでから対応を進める
- もともとこだわりの色指定をしているが、ダークモードでは違和感が出てしまう画面やUIパーツ