Xamarin での watchOS ローカリゼーションの作業

  • [アーティクル]

複数の言語への watchOS アプリの適応

ローカライズされたコンテンツが表示されている Apple Watch

watchOS アプリは、標準の iOS メソッドを使用してローカライズされます。

  • ストーリーボード要素への Localization ID の使用、
  • ストーリーボードに関連付けられた .strings ファイル、
  • コードに使用されているテキストの Localizable.strings ファイル。

既定のストーリーボードとリソースは、Base ディレクトリに配置されています。また、言語固有の翻訳やその他のリソースは、.lproj ディレクトリに格納されます。 iOS と Watch OS では、ユーザーの言語選択が自動的に使用されて、正しい文字列とリソースが読み込まれます。

Apple Watch アプリには、Watch App と Watch Extension という 2 つの部分があるため、ローカライズされた文字列リソースは、使用方法に応じて 2 か所で必要です。

ローカライズされたテキストとリソースは、ウォッチ アプリとウォッチ拡張機能では "異なります"。

Watch App

ウォッチ アプリには、アプリのユーザー インターフェイスを記述するストーリーボードが含まれています。 ローカライズをサポートするすべてのコントロール (Labelや Image など) には、Localization ID があります。

言語固有の .lproj ディレクトリには、各要素の翻訳 (Localization ID を使用) に加え、ストーリーボードで参照されている画像が含まれた .strings ファイルが含まれている必要があります。

Watch Extension

ウォッチ拡張機能では、アプリ コードが実行されます。 コードによってユーザーに表示されるすべてのテキストは、ウォッチ アプリではなく拡張機能でローカライズされている必要があります。

また、拡張機能には、言語固有の .lproj ディレクトリも含まれている必要がありますが、.strings ファイルに必要なのは、コードで使用されているテキストの翻訳のみです。

Watch Solution のグローバリゼーション

グローバリゼーションは、アプリケーションをローカライズ可能にするプロセスです。 ウォッチ アプリの場合、これは、テキストの長さが異なるストーリーボードを想定しながら設計し、表示されるテキストに応じて各画面レイアウトを適切に調整することを意味します。 また、ウォッチ拡張コードで参照されるすべての文字列が LocalizedString メソッドを使用して翻訳可能であることを確認する必要もあります。

Watch App

既定では、ウォッチ アプリはローカライズ向けには構成されていません。 既定のストーリーボード ファイルを移動して、翻訳用に他のディレクトリを作成する必要があります。

  1. Base.lproj ディレクトリを作成して、そこに Interface.storyboard を移動します。

  2. サポートする言語ごとに <language>.lproj ディレクトリを作成します。

  3. .lproj ディレクトリには、Interface.strings テキスト ファイルが含まれている必要があります (ファイル名はストーリーボードの名前と一致している必要があります)。 必要に応じて、ローカライズが必要な画像をこれらのディレクトリに配置できます。

これらの変更が行うと、ウォッチ アプリ プロジェクトは次のようになります (英語とスペイン語の言語ファイルのみ追加されています)。

英語とスペイン語の言語ファイルを含むウォッチ アプリ プロジェクト

ストーリーボード テキスト

ストーリーボードを編集するときは、各要素を選択して、Properties パッドに表示される Localization ID に注目します。

[プロパティ] パッドに表示されるローカライズ ID

Base.lproj フォルダーに、次で示すようにキーと値のペアを作成します。キーは Localization ID と、コントロール上でのプロパティ名で形成され、その間にドット (.) が付いています。

"AgC-eL-Hgc.title" = "WatchL10nEN"; // interface controller title
"0.text" = "Welcome to WatchL10n"; // Welcome
"1.text" = "Language settings are in Apple Watch App"; // How to change language
"2.title" = "Greetings"; // Greeting
"6.title" = "Detail";
"39.text" = "Second screen";

この例の Localization ID に、単純な数値の文字列 ("0"、"1" など) もあれば、より複雑な文字列 ("AgC-eL-Hgc" など) もあることに注目してください。 Label コントロールには Text プロパティが含まれ、Button には Title プロパティが含まれます。これは、ローカライズされたそれぞれの値の設定方法に反映されますが、上の例で示しているように、プロパティ名には必ず小文字を使用します。

ストーリーボードがウォッチにレンダリングされると、ユーザーが選択した言語に従って正しい値が自動的に抽出されて表示されます。

ストーリーボードの画像

このソリューションの例では、各言語フォルダーに gradient@2x.png 画像も含まれています。 この画像は言語ごとに異なる場合があります (たとえば、翻訳が必要な埋め込みテキストがある場合や、ローカライズされたアイコンが使用されている場合があります)。

ストーリーボードに画像の Image プロパティを設定するだけで、ユーザーが選択した言語に従って正しい画像がウォッチにレンダリングされます。

ストーリーボードで画像の画像プロパティを設定する

注: Apple Watch はすべて Retina ディスプレイが搭載されているため、@2x バージョンの画像のみが必要です。 ストーリーボードに @2x を指定する必要はありません。

Watch Extension

ウォッチ拡張機能では、ローカライズをサポートする同様のディレクトリ構造が必要ですが、ストーリーボードがありません。 拡張機能内でローカライズされている文字列は、C# コードで参照されるもののみです。

ローカライズをサポートするためのウォッチ拡張機能のディレクトリ構造

コード内の文字列

Localizable.strings ファイルには、ストーリーボードに関連付けられている場合とは少々異なる構造が含まれます。 この場合、任意の "key" 文字列を選択できます。Apple では、既定の言語で表示される実際のテキストを反映したキーの使用をお勧めしています。

"Breakfast time" = "Breakfast time!"; // morning
"Lunch time" = "Lunch time!"; // midday
"Dinner time" = "Dinner time!"; // evening
"Bed time" = "Bed time!"; // night

NSBundle.MainBundle.LocalizedString メソッドは、次のコードに示すように、文字列を対応する翻訳に解決するために使用されます。

var display = "Breakfast time";
var localizedDisplay =
  NSBundle.MainBundle.LocalizedString (display, comment:"greeting");
displayText.SetText (localizedDisplay);

コード内の画像

コードによって生成される画像は、2 つの方法で設定できます。

  1. Image コントロールを変更するには、その値を Watch App に既に存在している画像の文字列名に設定します。次に例を示します。

    displayImage.SetImage("gradient"); // image in Watch App (as shown above)

  2. FromBundle を使用して画像を拡張機能からウォッチに移動すると、アプリでは、ユーザーが選択した言語に適した画像が自動的に選択されます。 このソリューションの例では、言語フォルダーごとに画像 language@2x.png があり、次のコードを使用してこれが DetailController に表示されます。

    using (var image = UIImage.FromBundle ("language")) {
    displayImage.SetImage (image);
}

    画像のファイル名を参照するときに @2x を指定する必要はありません。

2 番目の方法は、リモート サーバーから画像をダウンロードしてウォッチにレンダリングする場合にも適用できます。ただし、この場合は、ダウンロードする画像がユーザーの設定に従って正しくローカライズされていることを確認する必要があります。

ローカリゼーション

ソリューションを構成したら、翻訳ツールで、サポートする言語ごとに .strings ファイルと画像を処理する必要があります。

必要な数だけ .lproj ディレクトリを作成できます (サポートされる言語ごとに 1 つ)。 名前は、en、es、de、ja、pt-BR (それぞれ、英語、スペイン語、ドイツ語、日本語、ポルトガル語 (ブラジル語)) などの言語コードを使用して付けられます。

添付されているサンプルでは、翻訳 (機械生成) を使用して watchOS アプリをローカライズする方法を示しています。

Watch App

これらの値は、ウォッチ アプリのストーリーボードに定義されているユーザー インターフェイスの翻訳に使用されます。 "キー" 値は、各ストーリーボード コントロールの Localization ID と翻訳中のプロパティを組み合わせたものです。

翻訳ツールによって翻訳の内容が認識されるように、元のテキストを含めたテキストをファイルに追加することをお勧めします。

es.lproj/Interface.strings

ストーリーボードのスペイン語の文字列 (機械翻訳) を次に示します。 Localization ID がその他に何を参照しているかを把握することは困難であるため、行ごとにコメントを追加すると便利です。

"AgC-eL-Hgc.title" = "Spanish"; // app screen heading
"0.text" = "Bienvenido a WatchL10n"; // Welcome to WatchL10n
"1.text" = "Ajustes de idioma están en Apple Watch App"; // Change the language in the Apple Watch App
"2.title" = "Saludos"; // Greetings
"6.title" = "2nd"; // second screen heading
"39.text" = "Segunda pantalla"; // second screen

Watch Extension

これらの値は、情報がユーザーに表示される前に翻訳されるように、コードで使用されます。 "キー" は、コードを記述するときに開発者が選択し、通常は翻訳対象となる実際の文字列が含まれます。

es.lproj/Localizable.strings ファイル

次のスペイン語の文字列 (機械翻訳) を示します。

"Breakfast time" = "la hora del desayuno"; // morning
"Lunch time" = "hora de comer"; // midday
"Dinner time" = "hora de la cena"; // evening
"Bed time" = "la hora de dormir"; // night

テスト

言語設定を変更する方法は、シミュレーターと物理デバイスによって異なります。

シミュレーター

シミュレーターで、言語を選択し、iOS の [設定] アプリ (シミュレーターのホーム画面に表示される灰色の歯車のアイコン) を使用してテストします。

iOS 設定アプリのローカライズ設定

ウォッチ デバイス

ウォッチでテストするときは、ペアリングされている iPhone の Apple Watch アプリでウォッチの言語を変更します。

ペアリングされた iPhone 上の Apple Watch アプリでウォッチの言語を変更する