多言語対応アプリの負債返済 -文字列管理の見直しで得た学び-

Transcript

1. © 2024 Wantedly, Inc. 文字列管理の見直しで得た学び 多言語対応アプリの負債返済 Nov. 27 2024 - Yuya Harada
2. © 2024 Wantedly, Inc. 名前 Wantedly 入社 ポジション 趣味 : 原田 祐也 : 2024 7月 : iOS エンジニア : バドミントン
3. © 2024 Wantedly, Inc. 本⽇の内容について 内容 • 負債返済日の取り組みでの学び ◦ 文字列の管理方法を改善するためのリファクタを行った 伝えたいこと • 小さな改善でも今後の開発で効果を生むこと
4. © 2024 Wantedly, Inc. Wantedly Visit (iOS) のオンボーディングフロー
5. © 2024 Wantedly, Inc. 各画⾯のタイトル部分をリファクタした話
6. © 2024 Wantedly, Inc. オンボーディングのタイトル部分の仕様 日本語と英語に対応する 1. テキストの一箇所にグラデーションをかける 2.
7. © 2024 Wantedly, Inc. どう文字列が管理されていた？
8. © 2024 Wantedly, Inc. SwiftGenのLocalizable.stringsでの⽂字列管理⽅法
9. © 2024 Wantedly, Inc. SwiftGenのLocalizable.stringsでの⽂字列管理⽅法
10. © 2024 Wantedly, Inc. SwiftUIでの実装 グラデーションの位置が変わるため、Localeで切り分けてViewを実装
11. © 2024 Wantedly, Inc. 補⾜: なぜそのような実装になっていたか？ 初期 • オンボーディング画面が今ほど多くなかった • デザインを実現する上でミニマムな実装を行っていた 以降 • オンボーディング画面が 1画面ずつ増えていった • 同じ実装を行っていき、負債となっていった
12. © 2024 Wantedly, Inc. 何が課題だったか？ 文字列の管理方法が複雑だった • ユーザーの設定言語によって、不必要な文字列が出てきてしまう • リファクタの理想 ◦ 全体（あなたの居住地を教えてください）とグラデーション部分（居住地）の 2つを それぞれの言語で管理する 1. Localeで分岐させてViewを実装していた • 各言語用のViewを毎回用意する必要がある • リファクタの理想 ◦ ユーザーの設定言語に関わらず、 Viewを一つにまとめたい 2.
13. © 2024 Wantedly, Inc. ⽂字列管理のリファクタ ✅ タイトル部分とグラデーション部分の文字列を作成
14. © 2024 Wantedly, Inc. View側のリファクタは試行錯誤…󰷺
15. © 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア1: グラデーションテキスト部分をうまいこと配置する あなたの 居住地 を 教えてください • Textを2つ用意する ◦ グラデーションさせた「居住地」 ◦ グラデーション部分を透明化した 「あなたの居住地を教えてください」 • 「居住地」部分のテキスト位置を調整
16. © 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ ❌ グラデーション部分のoffsetの指定が難しく断念
17. © 2024 Wantedly, Inc. offsetを使わずに同じ文字を重ねてみるか🤔
18. © 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア2: 同じテキストを重ね合わせる • Textを2つ用意する ◦ グラデーション部分を透明化させた 「あなたの居住地を教えてください」 ◦ グラデーションをかけた 「あなたの居住地を教えてください」 • 2つのテキストを重ね合わせる
19. © 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ ❌ 正しいグラデーションがかけられず断念 󰢐正しいグラデーション 󰢄誤ったグラデーション ※ あなたの〜ください全体にグラデーションがかかっている
20. © 2024 Wantedly, Inc. 特定位置にだけグラデーションをかけたい…😖
21. © 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア3: グラデーション部分以外を透明化する • Textを2つ用意する ◦ グラデーション部分以外を透明化させた 「あなたの居住地を教えてください」 ◦ グラデーション部分を透明化させた 「あなたの居住地を教えてください」
22. © 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア3: グラデーション部分以外を透明化する • Textを2つ用意する ◦ グラデーション部分以外を透明化させた 「あなたの居住地を教えてください」 ▪ 居住地の部分にグラデーションをかける ◦ グラデーション部分を透明化させた 「あなたの居住地を教えてください」 • 2つのテキストを重ね合わせる
23. © 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 😳 うまくいった… (透明化した部分にはグラデーションがかからなかった)
24. © 2024 Wantedly, Inc. 最終結果 ✅ タイトル部分とグラデーション部分の文字列のみを管理
25. © 2024 Wantedly, Inc. 最終結果 ✅ Localeの分岐をなくし、各画面で一つのコンポーネントを呼ぶ
26. © 2024 Wantedly, Inc. 無事にマージされ、リファクタ完了 🎉🎉🎉 最終結果 ※ 補足 • 今回の実装はグラデーションが一箇所のみの場合に有効 • OSバージョンの制限がなければiOS17+のforegroundStyleを使って実装可能
27. © 2024 Wantedly, Inc. 今後オンボーディングで画⾯が追加される場合… 文字列は2つだけ用意する • テキスト全体 • グラデーションさせたいテキスト タイトルテキストのViewはコンポーネントを呼び出す • Localeでの分岐は必要ない
28. © 2024 Wantedly, Inc. 本⽇の内容について 内容 • 負債返済日の取り組みでの学び ◦ 文字列の管理方法を改善するためのリファクタを行った 伝えたいこと • 小さな改善でも今後の開発で効果を生むこと
29. © 2024 Wantedly, Inc. 😊ご清聴ありがとうございました😊 : @yuya_h_x : @yuya-h-29 X GitHub