pixivコミックのLiquid Glass対応

Transcript

1. pixivコミックのLiquid Glass対応 2026/04/23 @atomic
2. atomic • 2024年4月Androidエンジニアとしてピクシブに新卒入社 • 同年7月からiOSに転向 • 現在 pixivコミックSection iOSエンジニア 2
3. 3 Before After Liquid Glass 対応版 リリースしました 🎉
4. アジェンダ • 全画面に影響するデザイン変更をどう進めていったのか？ • 限定的なケースでしか発生しないであろう問題の対応集 4
5. どう進めていったのか？ 5
6. Liquid Glass対応の期限 • Xcode 26では無効にするオプションが用意されている • Xcode 27から強制適用が想定されるため、それまでに対応が必要 ◦ Xcode 27のリリースが2026年9月ごろ ◦ Xcode 27へのアップデート期限が2027年4月ごろ 6
7. スケジュール 7 8月末 iOS陣でLiquid Glass対応をどう始めるか相談 PdM・デザイナー向けに情報をまとめ共有 9, 10月 工数の洗い出し・リリーススケジュールの決定 11月 ~ 3月 実装 3月末 Liquid Glass対応版リリース 🎉
8. Liquid Glass対応への基本スタンス • 致命的なレイアウト崩れの修正を優先 ◦ オプトアウトを解除して壊れた箇所の修正がメイン ◦ カスタムビューに Liquid Glass effect をつけることはしない ◦ Liquid Glass のために画面構成を変えたりはしない • コミックに最適なデザインの見直しは行った ◦ ナビゲーションバーからブランドカラーが無くなるので、それに合わせたデザインにした 8
9. タスク洗い出し • Liquid Glassを適用した状態のアプリをチーム内で配信し、PdM・デザイナー含め て触ってもらい対応が必要な箇所を洗い出した • 気になる箇所を書き出し、それぞれ対応するか判断し工数を見積もった 9
10. タスク洗い出し • ナビゲーションバー・タブバーの対応については各画面の構成をパターン化し、そ れぞれで工数を見積った 10
11. スケジュール決め • それぞれでの工数見積もりの結果、1人50営業日（約2.5ヶ月）かかるという結論に なった ◦ iOSエンジニア2名で開発をしている ◦ pixivコミックは 2012年6月6日 から続けているサービスで、画面数も80近くあり規模が大きい • 2026年4月30日リリースを目標に決まった ◦ 差し込みのタスクを考慮して余裕を持ったスケジュールにしていたが、実際にはほとんど差し込みは入ら なかったのに、ほぼ目標通りのスケジュールになったため見積もりの1.5倍ほどの時間がかかった ◦ ナビゲーションバーの色を無くす、ビューアとその他画面で色の傾向が逆、後述するレアケースな問題の 対応により想定より時間がかかった 11
12. 限定的なケースでしか発生しない問題の対応集 12
13. 注意 • 紹介する事例は、特定の画面や実装に依存する「極めて限定的なレアケー ス」が中心です • そのため、根本解決ではなく「暫定的なワークアラウンド」としての対応が 多く含まれます • 情報の少ない課題に対し、知見を共有することで誰かの参考になることを目 的としています 13
14. iPadでタブバーが機能しなくなる 14 ❌ ✅
15. iPadでタブバーが機能しなくなる 前提 • iPadOS18でタブバーの位置が変わってしまうため、従来通り下に配置するためタ ブの要素をコピーしたタブバーを使っていた • iPadのときは既存のタブバーは非表示にし、アイテムや高さをコピーしたタブバー をaddSubViewする形 15
16. iPadでタブバーが機能しなくなる • 原因 ◦ selectedItemの同期をviewWillSubviewsでしか行なっていなかった • 解決策 ◦ UITabBarControllerDelegateでもselectedItemの同期をしてあげる必要があった ◦ 元々はviewWillSubviewsで記述するだけで、勝手に機能してくれていたがiPadOS26からは機能しなく なった 16
17. アイコンが動的なテーマ切り替えに追従しない 17 ❌ ✅
18. • 原因 ◦ Image.xcassetsでライト・ダークテーマ用のそれぞれのアイコンを設定している ◦ 通常は動的にどちらのアイコンを使うかを選んでくれるが、TabBarItemの画像をStoryboardで設定せず にコードで指定していた場合、動的切り替えが機能しない アイコンが動的なテーマ切り替えに追従しない 18
19. アイコンが動的なテーマ切り替えに追従しない • 解決策 ◦ 1. コード指定をせずStoryBoardで設定する ◦ 2. .withTintColor(_ color: )で色を指定する ▪ アイコンは切り替わらないが、指定したカラーがダーク・ライトで変わるなら正しく動く 19
20. ナビゲーションバーのブラーがかからない 20 ❌ ✅
21. ナビゲーションバーのブラーがかからない • 原因 ◦ UIScrollViewを継承していない場合、ブラーがかからない ◦ ただのUIViewをconstantやtransformで動かしているだけ ◦ 例えば、TableView + Headerの画面構成で Headerは TableViewの方のスクロールに合わせて constant を動かす場合 • 解決策 ◦ 1. 画面全体をTableViewやCollectionViewで書き換える ◦ 2. constantで動かすUIViewをUIScrollViewにする ▪ 全体をScrollViewにするのが難しい場合 ▪ ただブラーが遅れてくる問題がある。可能なら1.で修正したい 21
22. アクセサリビューがキーボードに食い込む（UIKit） 22 ❌ ✅
23. アクセサリビューがキーボードに食い込む（UIKit） • 原因 ◦ inputAccessoryViewにUIToolbarを直接渡していた • 解決策 ◦ 上方向に少し浮かせる拡張を作る 23
24. アクセサリビューがキーボードに食い込む(SwiftUI) 24 ❌ ✅
25. アクセサリビューがキーボードに食い込む(SwiftUI) • 原因 ◦ .toolbarにToolBarItemGroup(placement: .keyboard)で配置していた • 解決策 ◦ .safeAreaBar(edge: bottom)にして中身のButtonに.padding(.bottom, )をつける 25 ❌ ✅
26. アクセサリビューがキーボードに食い込む(SwiftUI) • 注意点 ◦ .toolbarのままpaddingをつけない ▪ ボタン自体が伸びてしまうため ◦ .buttonBorderShape(.circle)をつける ▪ 楕円になってしまうため ◦ .safeAreaBarの中でbuttonStyle(.glassProminent)のボタンを使う場合、.foregroundStyleをつける ▪ ダークモードにしても画像の色が変わらないため 26
27. ScrollViewのsubviewが透けてしまう問題 27 ❌ ✅
28. ScrollViewのsubviewが透けてしまう問題 • 原因 ◦ タブバー付近でsubViewが透けてしまい、ScrollViewが見えるが、 ScrollViewが透明でさらに後ろのViewまで見えていた • 画面構成 ◦ ScrollViewは親viewの全体に制約がついている ◦ ScrollViewのbackgroundColorは透明でsubViewがない部分は 親Viewのコンテンツが見えている 28
29. ScrollViewのsubviewが透けてしまう問題 • 解決策 ◦ 1. ScrollViewの背景をsubviewの背景色にする ▪ 親Viewを見せる必要がない場合 ◦ 2. subviewの後ろに背景色を持ったUIViewを配置する ▪ 親Viewを見せる必要がある場合 29
30. pixivコミックのLiquid Glass対応 2026/04/23 @atomic