2020/06/10 KLab 福岡 Meetup 「ゲームを支える技術」

1. 永田 貴久
エンジニア
開発推進部 共通基盤G
KLab株式会社
国際化対応におけるUI実装で
気をつけるべきこと
~UIクライアント編~

2. 2
Klab株式会社 2017年入社
福岡事業所 所属
ゲーム開発プロジェクトのUI実装業務、
共通基盤業務を担当しています
永田 貴久
エンジニア
開発推進部 共通基盤G
KLab株式会社
自己紹介
ゲーム開発プロジェクトのUIクライアント業務（JP → GL）
最近のお仕事

3. 3
みなさん、
GL（グローバル）対応
してますか？

4. 4
GL版？
GL（グローバル）版 ＝ 海外に向けてリリースされるアプリ
KLabがリリースしているアプリには
海外向けに出しているアプリが多く存在します
複数言語に対応しているアプリもあり、
様々な国々の方に遊んでいただいております
ただ...対応自体は楽な道のりではありません...

5. 5
GL版って大変...
GL向けUI対応 = 大半がテキスト周りのレイアウト調整
UIやテキスト実装をするエンジニアの意識について話します
（特別な技術というより心構え寄りのお話？）
極力、汎用的に意識した方が良いことをまとめたつもり
JP版実装時に少しでも意識していられると
急なGL対応にも幸せな状態でUI実装できる（かもしれない…）内容を紹介
します

6. 6
前提

7. 7
前提
①JPと同プロジェクト、同リポジトリの開発/運用
基本的には同じプロジェクトで開発運用
そのため、良くも悪くも互いの対応が影響
デグレ、エンバグ注意！
日本語を表示しているテキストで
様々な言語を表示する必要あり！
ちなみに、開発エンジンはUnity

8. 8
前提
②辞書を使った多言語対応で翻訳文言を表示
各言語の辞書を作成。設定言語によって表示を切り替える
キー 日本語 英語
coin コイン Gold
exp 経験値 EXP
テキスト
翻訳コンポーネント
キーを設定
例）coin Gold
コイン
詳しくは 最新ゲームを支える文言(SlideShare)

9. 9
前提
②辞書を使った多言語対応で翻訳文言を表示
活用することで同プロジェクトでの言語表示切り替えは容易に！
しかし、
GL向けUI対応 = 大半がテキスト周りのレイアウト調整
という意味では、ここからが本番です...！
以上の前提を元に
レイアウト調整でどのような問題発生したか、対応を行なったかをお話し
させていただきます！

10. 10
1. ラベルサイズ問題

11. 11
1. ラベルサイズ問題
「ラベルサイズ問題」とuGUIのTextで表示してみましょう

12. 12
1. ラベルサイズ問題
「ラベルサイズ問題」と表示していたところに、
「Label Size Problem」と表示すると...

13. 13
1. ラベルサイズ問題
あれ？「Problem」はどこにいった？？？？？
表示したい文字が消えてしまった...泣
日本語では表示されていたのに
他の言語でおかしくなってしまった！
こんな状況がGL版開発では頻発します...

14. 14
1. ラベルサイズ問題
なんでこんなことになったの？
要因は２つあります
①ラベルの領域が足りていない
②Overflow設定がWrap/Truncateになっている

15. 15
1. ラベルサイズ問題
①ラベルの領域が足りていない
↑日本語ぴったりサイズ ↑英語になると右側の
スペースが足りず入らない...

16. 16
1. ラベルサイズ問題
②Overflow設定がWrap/Truncateになっている
じゃあ「Problem」はどこに行ったの？
HorizonalOverflow = Wrap (デフォルト)
→ 水平の端まで到達したら折り返されて下に表示
VerticalOverflow = Truncate (デフォルト)
→ 垂直の端までいったら切り捨て
Wrap + Truncate → 折り返し＋切り捨て = Problem 失踪！

17. 17
1. ラベルサイズ問題
②Overflow設定がWrap/Truncateになっている
VerticalOverflow(垂直)
→ Overflowに変更
HorizonalOverflow(水平)
→ Overflowに変更

18. 18
1. ラベルサイズ問題
じゃあOverflowにすれば解決？
→ 残念ながらそう簡単にはいきません...
もし、文字の横にアイコンがあったら...？

19. 19
1. ラベルサイズ問題
じゃあOverflowにすれば解決？
→ 残念ながらそう簡単にはいきません...
VerticalOverflow(垂直)
Overflowに変更
HorizonalOverflow(水平)
Overflowに変更

20. 20
1. ラベルサイズ問題
Overflowだと綺麗にレイアウトされる保証は無い...
テキスト量が多い場合では、
フォントサイズを小さくして対応することに
（uGUIのTextでいうところの Best Fit ）
ラベルの領域に収まるように
フォントサイズを小さくしています

21. 21
1. ラベルサイズ問題
Best Fitはパフォーマンス的にあまり良くないと
Unity公式のベストプラクティスでも話が上がっています
そのまま Best Fit を使用する際には、
パフォーマンス的に問題がない箇所か確認して使用しましょう
（KLabでは内製uGUI拡張コンポーネントを使用しています）
※参考
Optimizing Unity UI （Unity UI最適化）
5.Optimizing UI Controls
注意！

22. 22
1. ラベルサイズ問題
特殊な言語への対応（専門家ではないので触りだけ...）
タイ語など一部言語の文字では、日本語よりも縦幅が長いものがあります
あ ที่ ผู
Truncate（切り捨て） で表示できない場合、
Overflowにする or ラベルの領域を広めにとる 等の対応が必要
言語の特性に合わせて対応が必要になる場面もあるので、
対応言語の決定は慎重に行いましょう

23. 23
1. ラベルサイズ問題
一括対応では意図しない表示崩れが発生！
→ 対応内容も表示箇所で異なるため、個別対応を行う必要があると判断
①文字がはみ出す場合はフォントサイズを小さくする
②特殊な言語はレイアウト調整コンポーネントで個別対応
テキスト単位/特定言語で設定変更できるコンポーネントを作成
・フォントサイズを小さくする
・Overflow設定変更
解決策
なぜ個別対応？

24. 24
1. ラベルサイズ問題
どんな言語を表示するかで対応内容は変わります
・自動的にフォントサイズを下げるのか
・Overflow設定で良いのか
・特定言語だけ対応が必要なのか
・一括対応か、個別対応か
対応言語に合わせて適切な対応を行いましょう

25. 25
1. ラベルサイズ問題
実は「ラベルサイズ問題」が、テキスト周り対応の
8割を占めると言っても過言ではない！
(問題箇所の物量がとても多い...！)
残り2割のうち、数は少ないものの対応が大変なケースにつ
いて話していきます
まずはフォントサイズを
自動で小さくするが故の問題です...

26. 26
2. ラベル分割問題

27. 27
2. ラベル分割問題
項目名 : 値 (パラメーター表示でよくある表現)
下のイメージ通り、
領域に収まるようにフォントサイズが小さくなってほしい！

28. 28
2. ラベル分割問題
でも、翻訳文言を表示するとこんなことも...
● 項目名(左側)は小さい
● 値（右側）はそのままのサイズ
左右でフォントサイズが異なってしまった...

29. 29
2. ラベル分割問題
フォントサイズを下げた結果、項目名だけ小さくなっている状況
なぜ？
２つのラベルに分かれて実装されていたことが原因
項目名のラベル領域 値のラベル領域

30. 30
2. ラベル分割問題
解決策
当初のイメージ通りにしたい場合は、
分割せずに１つのラベルで実装しましょう

31. 31
2. ラベル分割問題
レイアウトによって重視するポイントは様々です
（ : がずれるのはNG 等々...）
正解は一つではありません
制作と適切な表現を相談して、対応しましょう
ラベルを一つに 翻訳文言を短く レイアウトから見直し
注意！

32. 32
3. 座布団問題

33. 33
3. 座布団問題
文字の後ろに色付き帯を重ねるデザインのこと
↑灰色部分のような色付きの帯を敷くことを
座布団を敷くと言ったりします
座布団とは？

34. 34
3. 座布団問題
デザインで座布団(文字後ろ色付き帯)を使用した場合や
ボタン等で起こる問題

35. 35
3. 座布団問題
そのまま英語に翻訳してみると...
あ、 g が枠をはみ出してしまっている...

36. 36
3. 座布団問題
言語によっては日本語よりも文字の縦幅が長くなります
（英語やタイ語など）

37. 37
3. 座布団問題
文字の表示領域＝座布団の表示領域 になっていたため
エンジニアが位置調整をするのが楽になるため、
文字を画像（座布団）と同じサイズにするのはあるある
なぜ？

38. 38
背景の画像と文字のバランスを考慮して
適切な表示領域を設定しましょう！
画像素材（ボタン）によっては影や枠を含んでいる場合があるので、余裕を
持って！
3. 座布団問題
解決策

39. 39
その他

40. 40
その他
1. ちゃんと翻訳されてる？日本語のままになっていない？
①ハードコーディング、Textコンポーネントへのベタ書き禁止
②検知機能を用意
例えば...
翻訳文言コンポーネントがアタッチ漏れしていないか
Prefabやコードに日本語がそのまま混ざっていないか
→ Scene、Prefab実装時のバリデーションで検知がおすすめ
（問題を先送りにしないために）
解決策

41. 41
その他
2. JP版に影響が出てませんか？（同一プロジェクトの場合）
①テストはしっかり！
②複数人でのレビューが大切
可能であれば、各言語チェックしましょう！
（最低限、表示が崩れやすい言語だけでも）
解決策
細かいことまで挙げだしたらキリがありませんが、
注意すべきことは色々あります！

42. 42
啓発活動

43. 43
啓発活動
これまでの内容は
GL版を対応する人だけ知ってれば良いんでしょ？？？？

44. 44
啓発活動
いやいや、待ってください...
これらの対応をGL対応時に一気にするにはとても大変...
GL対応スタート時に、
すでに実装されていたテキストの問題箇所を洗い出したところ...
・200件以上の文言キー設定漏れ（手動で設定し直し）
・1500件以上のコンポーネントの設定漏れ（ツール作成で解決）
↑の調査・対応だけで１ヶ月程度かかりきりに...

45. 45
啓発活動
運用が必要なゲームアプリの場合、
アップデートによる新規画面追加は避けられません！
全体の工数を減らすためにも、
極力、JP実装時に対応しておきましょう！

46. 46
啓発活動
実装を行うメンバーに
どのようなことを行うか、対応しないとどのような問題が発生するか
を意識してもらうことが大切
①ドキュメント作成:
どのような問題が起きるか、対応方法の書面化、手順書作成
②実装前のレクチャー: ①のドキュメントを共有
③レビュー: ②で共有した内容が反映されているかチェック
啓発活動手順（私の場合）
意識づけのやり方は組織に合ったやり方で！

47. 47
作成したツール群

48. 48
作成したツール群
①テキスト単位のレイアウト調整コンポーネント
テキスト表示の初期処理でパラメータやフォントサイズを調整
ラベルサイズ問題で大活躍
これがなければ対応は完了しなかった...
GL対応で活躍したツールたち

49. 49
作成したツール群
②文字溢れ検知
一つのテキストに対して各言語の翻訳文言が入る作り
実行時にしか確認できないため、完全に静的検知することが難しかった
開発環境上 + 実機テスト環境上（本番以外）で
実行時にエラー検知してくれるコンポーネントを作成
→ 対応漏れ激減！
GL対応で活躍したツールたち

50. 50
作成したツール群
③Scene、Prefabファイルのバリデーションリスト作成
+ 一括対応処理
Scene、Prefabのテキストに問題がないかバリデーション
UI作成時に使用しているPrefabを自動取得してリスト化
GL対応で活躍したツールたち
ファイル一覧表示

51. 51
まとめ

52. 52
まとめ
最初からGL版を意識しよう！

53. 53
まとめ
対応内容はプロジェクト状況・対応方針によって異なります
(発生する問題も含め)
開発初期段階で、
JP/GLどちらでも表示が崩れないよう意識する/対応する
ことは最終的に全体の工数削減に繋がります！

54. 54
まとめ
日本語がちゃんと表示されてるからOK!! だけではありません！
文章が長くなっても大丈夫かな？
違う言語でも綺麗に表示されるかな？
と、もう一歩先を意識して、

55. 55
まとめ
日本語がちゃんと表示されてるからOK!! だけではありません！
文章が長くなっても大丈夫かな？
違う言語でも綺麗に表示されるかな？
と、もう一歩先を意識して、
素敵なGLライフを送りましょう！