Xcodeを使い、ローカリゼーションに適したレイアウトを作る – WWDC2020

Sessions
目次

Session概要

世界各国のオーディエンスとあなたの作品を共有し、カルチャーや言語と結びつける素晴らしい方法は、アプリのローカライズです。アプリのレイアウトを慎重に構成することで1言語も翻訳することなくローカライズの準備ができるようになります。
XcodeでUIを構成する方法、言葉数が多く、右から左に書き進む言語によく見られる課題の特定、インタフェースを調整しつつ、誰にとっても最高の体験を提供できる方法について https://developer.apple.com/videos/play/wwdc2020/10219/

ローカライズにおける一般的なデザインパターン

  • 手動レイアウト、自動レイアウト、SwiftUIのどのレイアウトでも共通で使用可能なデザイン
  • テキストやコントロールは固定幅やフレームを避けるようにする
    • 手動レイアウトでは sizeToFitを呼び出して、自動レイアウトでは固定幅の制約を回避し、SwiftUIでは明示的なフレームを設定しないということ
    • 例えば、同じ内容の言葉でも言語によって文字列長が異なるため、適切なデザインやレイアウトにならないケースがある
      • このようなケースは、制約を固定幅ではなく「〜以上」のような制約を設定したり、UIStackViewを利用することで回避可能
  • 2つの離れたオブジェクト間では、 固定スペースを避けるようにする
  • 固定スペースに数多くのコントロールを配置しないこと
    • 代替レイアウトでアフォーダンス（そのものの扱い方を説明しているという考え方）が失われるため

固定幅の制約を避ける
２つの離れたオブジェクト間では、固定スペースの制約を避ける

Xcodeで提供されるローカリゼーションに適したレイアウトを開発する際のツール

  • Preview機能
    • buildなしで即時に確認可能
  • Schemeオプションでの確認
    • Edit SchemeのOptionsで、 App Language のポップアップから Double-Length Pseudolanguage（2倍長）などを使用して確認する
  • Accessibility Inspector
  • XcodeでのEnvironment Overrides機能
    • Dynamic TypeのウィジェットをiOSのコントロールセンターで追加し、Macに接続したデバイスで使用するようにする（Accessibility Inspectorも同様）

App Languageでの設定
Environment Overrides機能の使用

ローカライズ対応におけるユーザーテストの重要性

  • 実際のユーザテストでは、自動テストやFix-It（Xcodeの機能）では検出することのできない致命的な問題を発見することができる
    • 例えば、OSの用語と揃っていない箇所や非ネイティブ話者が気づかないテキストのはみ出しや途切れ、場違いな翻訳などがわかるようになります
  • 新たにローカリゼーションを行う時や、UIに大きな変更を加える時にチェックが必要
    • ユーザは自分が使用する言語にアプリが対応されていることを非常に嬉しく感じるため、アプリの評判を高める上では重要
最新情報をチェックしよう！