Slide 1

Slide 1 text

© 2024 Wantedly, Inc. 文字列管理の見直しで得た学び 多言語対応アプリの負債返済 Nov. 27 2024 - Yuya Harada

Slide 2

Slide 2 text

© 2024 Wantedly, Inc. 名前 Wantedly 入社 ポジション 趣味 : 原田 祐也 : 2024 7月 : iOS エンジニア : バドミントン

Slide 3

Slide 3 text

© 2024 Wantedly, Inc. 本⽇の内容について 内容 ● 負債返済日の取り組みでの学び ○ 文字列の管理方法を改善するためのリファクタを行った 伝えたいこと ● 小さな改善でも今後の開発で効果を生むこと

Slide 4

Slide 4 text

© 2024 Wantedly, Inc. Wantedly Visit (iOS) のオンボーディングフロー

Slide 5

Slide 5 text

© 2024 Wantedly, Inc. 各画⾯のタイトル部分をリファクタした話

Slide 6

Slide 6 text

© 2024 Wantedly, Inc. オンボーディングのタイトル部分の仕様 日本語と英語に対応する 1. テキストの一箇所にグラデーションをかける 2.

Slide 7

Slide 7 text

© 2024 Wantedly, Inc. どう文字列が管理されていた?

Slide 8

Slide 8 text

© 2024 Wantedly, Inc. SwiftGenのLocalizable.stringsでの⽂字列管理⽅法

Slide 9

Slide 9 text

© 2024 Wantedly, Inc. SwiftGenのLocalizable.stringsでの⽂字列管理⽅法

Slide 10

Slide 10 text

© 2024 Wantedly, Inc. SwiftUIでの実装 グラデーションの位置が変わるため、Localeで切り分けてViewを実装

Slide 11

Slide 11 text

© 2024 Wantedly, Inc. 補⾜: なぜそのような実装になっていたか? 初期 ● オンボーディング画面が今ほど多くなかった ● デザインを実現する上でミニマムな実装を行っていた 以降 ● オンボーディング画面が 1画面ずつ増えていった ● 同じ実装を行っていき、負債となっていった

Slide 12

Slide 12 text

© 2024 Wantedly, Inc. 何が課題だったか? 文字列の管理方法が複雑だった ● ユーザーの設定言語によって、不必要な文字列が出てきてしまう ● リファクタの理想 ○ 全体(あなたの居住地を教えてください)とグラデーション部分(居住地)の 2つを それぞれの言語で管理する 1. Localeで分岐させてViewを実装していた ● 各言語用のViewを毎回用意する必要がある ● リファクタの理想 ○ ユーザーの設定言語に関わらず、 Viewを一つにまとめたい 2.

Slide 13

Slide 13 text

© 2024 Wantedly, Inc. ⽂字列管理のリファクタ ✅ タイトル部分とグラデーション部分の文字列を作成

Slide 14

Slide 14 text

© 2024 Wantedly, Inc. View側のリファクタは試行錯誤…󰷺

Slide 15

Slide 15 text

© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア1: グラデーションテキスト部分をうまいこと配置する あなたの 居住地 を 教えてください ● Textを2つ用意する ○ グラデーションさせた「居住地」 ○ グラデーション部分を透明化した 「あなたの居住地を教えてください」 ● 「居住地」部分のテキスト位置を調整

Slide 16

Slide 16 text

© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ ❌ グラデーション部分のoffsetの指定が難しく断念

Slide 17

Slide 17 text

© 2024 Wantedly, Inc. offsetを使わずに同じ文字を重ねてみるか🤔

Slide 18

Slide 18 text

© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア2: 同じテキストを重ね合わせる ● Textを2つ用意する ○ グラデーション部分を透明化させた 「あなたの居住地を教えてください」 ○ グラデーションをかけた 「あなたの居住地を教えてください」 ● 2つのテキストを重ね合わせる

Slide 19

Slide 19 text

© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ ❌ 正しいグラデーションがかけられず断念 󰢐正しいグラデーション 󰢄誤ったグラデーション ※ あなたの〜ください全体にグラデーションがかかっている

Slide 20

Slide 20 text

© 2024 Wantedly, Inc. 特定位置にだけグラデーションをかけたい…😖

Slide 21

Slide 21 text

© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア3: グラデーション部分以外を透明化する ● Textを2つ用意する ○ グラデーション部分以外を透明化させた 「あなたの居住地を教えてください」 ○ グラデーション部分を透明化させた 「あなたの居住地を教えてください」

Slide 22

Slide 22 text

© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア3: グラデーション部分以外を透明化する ● Textを2つ用意する ○ グラデーション部分以外を透明化させた 「あなたの居住地を教えてください」 ■ 居住地の部分にグラデーションをかける ○ グラデーション部分を透明化させた 「あなたの居住地を教えてください」 ● 2つのテキストを重ね合わせる

Slide 23

Slide 23 text

© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 😳 うまくいった… (透明化した部分にはグラデーションがかからなかった)

Slide 24

Slide 24 text

© 2024 Wantedly, Inc. 最終結果 ✅ タイトル部分とグラデーション部分の文字列のみを管理

Slide 25

Slide 25 text

© 2024 Wantedly, Inc. 最終結果 ✅ Localeの分岐をなくし、各画面で一つのコンポーネントを呼ぶ

Slide 26

Slide 26 text

© 2024 Wantedly, Inc. 無事にマージされ、リファクタ完了 🎉🎉🎉 最終結果 ※ 補足 ● 今回の実装はグラデーションが一箇所のみの場合に有効 ● OSバージョンの制限がなければiOS17+のforegroundStyleを使って実装可能

Slide 27

Slide 27 text

© 2024 Wantedly, Inc. 今後オンボーディングで画⾯が追加される場合… 文字列は2つだけ用意する ● テキスト全体 ● グラデーションさせたいテキスト タイトルテキストのViewはコンポーネントを呼び出す ● Localeでの分岐は必要ない

Slide 28

Slide 28 text

© 2024 Wantedly, Inc. 本⽇の内容について 内容 ● 負債返済日の取り組みでの学び ○ 文字列の管理方法を改善するためのリファクタを行った 伝えたいこと ● 小さな改善でも今後の開発で効果を生むこと

Slide 29

Slide 29 text

© 2024 Wantedly, Inc. 😊ご清聴ありがとうございました😊 : @yuya_h_x : @yuya-h-29 X GitHub