Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
多言語対応アプリの負債返済 -文字列管理の見直しで得た学び-
Search
Yuya Harada
November 27, 2024
0
470
多言語対応アプリの負債返済 -文字列管理の見直しで得た学び-
Yuya Harada
November 27, 2024
Tweet
Share
More Decks by Yuya Harada
See All by Yuya Harada
日々の振り返りで パフォーマンスを向上させる
yuyah29
0
110
Introduction to Kotlin Multiplatform
yuyah29
0
470
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
3
120
Code Review Best Practice
trishagee
68
18k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Code Reviewing Like a Champion
maltzj
524
40k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
RailsConf 2023
tenderlove
30
1.1k
A better future with KSS
kneath
239
17k
Embracing the Ebb and Flow
colly
85
4.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
BBQ
matthewcrist
89
9.7k
Transcript
© 2024 Wantedly, Inc. 文字列管理の見直しで得た学び 多言語対応アプリの負債返済 Nov. 27 2024 -
Yuya Harada
© 2024 Wantedly, Inc. 名前 Wantedly 入社 ポジション 趣味 :
原田 祐也 : 2024 7月 : iOS エンジニア : バドミントン
© 2024 Wantedly, Inc. 本⽇の内容について 内容 • 負債返済日の取り組みでの学び ◦ 文字列の管理方法を改善するためのリファクタを行った
伝えたいこと • 小さな改善でも今後の開発で効果を生むこと
© 2024 Wantedly, Inc. Wantedly Visit (iOS) のオンボーディングフロー
© 2024 Wantedly, Inc. 各画⾯のタイトル部分をリファクタした話
© 2024 Wantedly, Inc. オンボーディングのタイトル部分の仕様 日本語と英語に対応する 1. テキストの一箇所にグラデーションをかける 2.
© 2024 Wantedly, Inc. どう文字列が管理されていた?
© 2024 Wantedly, Inc. SwiftGenのLocalizable.stringsでの⽂字列管理⽅法
© 2024 Wantedly, Inc. SwiftGenのLocalizable.stringsでの⽂字列管理⽅法
© 2024 Wantedly, Inc. SwiftUIでの実装 グラデーションの位置が変わるため、Localeで切り分けてViewを実装
© 2024 Wantedly, Inc. 補⾜: なぜそのような実装になっていたか? 初期 • オンボーディング画面が今ほど多くなかった •
デザインを実現する上でミニマムな実装を行っていた 以降 • オンボーディング画面が 1画面ずつ増えていった • 同じ実装を行っていき、負債となっていった
© 2024 Wantedly, Inc. 何が課題だったか? 文字列の管理方法が複雑だった • ユーザーの設定言語によって、不必要な文字列が出てきてしまう • リファクタの理想
◦ 全体(あなたの居住地を教えてください)とグラデーション部分(居住地)の 2つを それぞれの言語で管理する 1. Localeで分岐させてViewを実装していた • 各言語用のViewを毎回用意する必要がある • リファクタの理想 ◦ ユーザーの設定言語に関わらず、 Viewを一つにまとめたい 2.
© 2024 Wantedly, Inc. ⽂字列管理のリファクタ ✅ タイトル部分とグラデーション部分の文字列を作成
© 2024 Wantedly, Inc. View側のリファクタは試行錯誤…
© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア1: グラデーションテキスト部分をうまいこと配置する あなたの 居住地
を 教えてください • Textを2つ用意する ◦ グラデーションさせた「居住地」 ◦ グラデーション部分を透明化した 「あなたの居住地を教えてください」 • 「居住地」部分のテキスト位置を調整
© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ ❌ グラデーション部分のoffsetの指定が難しく断念
© 2024 Wantedly, Inc. offsetを使わずに同じ文字を重ねてみるか🤔
© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア2: 同じテキストを重ね合わせる • Textを2つ用意する
◦ グラデーション部分を透明化させた 「あなたの居住地を教えてください」 ◦ グラデーションをかけた 「あなたの居住地を教えてください」 • 2つのテキストを重ね合わせる
© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ ❌ 正しいグラデーションがかけられず断念 正しいグラデーション 誤ったグラデーション ※
あなたの〜ください全体にグラデーションがかかっている
© 2024 Wantedly, Inc. 特定位置にだけグラデーションをかけたい…😖
© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア3: グラデーション部分以外を透明化する • Textを2つ用意する
◦ グラデーション部分以外を透明化させた 「あなたの居住地を教えてください」 ◦ グラデーション部分を透明化させた 「あなたの居住地を教えてください」
© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 💡 アイディア3: グラデーション部分以外を透明化する • Textを2つ用意する
◦ グラデーション部分以外を透明化させた 「あなたの居住地を教えてください」 ▪ 居住地の部分にグラデーションをかける ◦ グラデーション部分を透明化させた 「あなたの居住地を教えてください」 • 2つのテキストを重ね合わせる
© 2024 Wantedly, Inc. Localeで分岐させることなく、テキスト部分を⼀つのViewにするリファクタ 😳 うまくいった… (透明化した部分にはグラデーションがかからなかった)
© 2024 Wantedly, Inc. 最終結果 ✅ タイトル部分とグラデーション部分の文字列のみを管理
© 2024 Wantedly, Inc. 最終結果 ✅ Localeの分岐をなくし、各画面で一つのコンポーネントを呼ぶ
© 2024 Wantedly, Inc. 無事にマージされ、リファクタ完了 🎉🎉🎉 最終結果 ※ 補足 •
今回の実装はグラデーションが一箇所のみの場合に有効 • OSバージョンの制限がなければiOS17+のforegroundStyleを使って実装可能
© 2024 Wantedly, Inc. 今後オンボーディングで画⾯が追加される場合… 文字列は2つだけ用意する • テキスト全体 • グラデーションさせたいテキスト
タイトルテキストのViewはコンポーネントを呼び出す • Localeでの分岐は必要ない
© 2024 Wantedly, Inc. 本⽇の内容について 内容 • 負債返済日の取り組みでの学び ◦ 文字列の管理方法を改善するためのリファクタを行った
伝えたいこと • 小さな改善でも今後の開発で効果を生むこと
© 2024 Wantedly, Inc. 😊ご清聴ありがとうございました😊 : @yuya_h_x : @yuya-h-29 X
GitHub