Start Developing iOS Apps Today(sup.10)〜アプリの国際化

2013. 01. 08
App Storeで多くの人気のあるアプリは複数の言語に対応しています。
これらの人気には多くの要因があるかもしれませんが、複数のローカリゼーションが利用できるということが要因の1つです。
貴方のアプリにはより多くの潜在的な購入者を持っており、その人々が理解し使用できるようにします。

アプリを複数言語で使用できるようにするためには、国際化しローカライズする必要があります。
国際化はアプリの実行時にリソースのユーザ設定を選択することができるようにするため、ローカライズされたリソースを構成する技術です。
ローカリゼーションは、テキストの表示や(VoiceOverなど)アプリによる発音を翻訳するものです。
またロケール固有の画像や他のリソースの追加も含めることができます。
(ローカリゼーションは、例えば簡体字(中国語)などの特定の言語とロケールによってローカライズされたリソースのセットを参照できることです。)

アプリはどのようにユーザインターフェイスのローカリゼーションを選択するのか:
設定アプリ(一般 > 言語環境 > 言語)で、ユーザはiOSデバイスでアプリのユーザインターフェイスとシステム自体に表示したい言語を選択します。
アプリは要求される言語として、ローカライズされたリソースへアクセスするためのキーとしてこの設定を使用します。

国際化の全ての面について学ぶには『Internationalization Programming Topics』を参照してください。



●このチュートリアルで行うこと

このチュートリアルでは、英語と中国語(簡体字)の2つのローカリゼーションをサポートするように、HelloWorldアプリを国際化します。
その後、以下のテキストをローカライズします。

  • 両方の言語のストーリーボード内のテキスト

  • アプリを構成する文字列と、ユーザがHelloボタンをクリックした時に表示する文字列

  • ユーザに表示するアプリ名

注:簡体字中国語は、このチュートリアルの例として使用する言語です。
貴方が中国語を理解していない場合は、ローカライズされたテキストの各項目について、このチュートリアルで示す中国語の文字をコピーし、プロジェクト内の適切な場所にペーストすることができます。
また希望する場合、追加するローカリゼーションに簡体字中国語以外の言語を使用することができます。

このチュートリアルでは、国際化のためにユーザインターフェイスとレイアウトの制約を修正します。

このチュートリアルでは、プロジェクトへの画像ファイルやサウンドファイルなどのローカライズされたリソースの追加については示していません。
それを行う方法については、『Internationalization Programming Topics』の適切な項を参照してください。

言語設定で簡体字中国語を選択し、国際化されたHelloWorldを起動するとアプリは次のようになります。

helloworld_chinese_2x.png



●Base Internationalizationの使用

Base InternationalizationはXcode 4.5で導入された機能で、アプリがサポートする各言語用にストーリーボードやnibファイルを修正する必要性を軽減するローカライザ(つまり翻訳者)です。
その代わりに、アプリは既定の言語にローカライズされたストーリーボードまたはnibファイルのセットを1つだけ持ち、このストーリーボードやnibファイルはBase Internationalizationと呼ばれます。
アプリにローカリゼーションを追加する場合、Xcodeは各ストーリーボードまたはnibファイルにアクセシビリティラベルまたはヒントとして、表示するまたは含まれている全てのテキストのためにstringsファイルを生成します。
Xcodeはストーリーボード名とstrings拡張子を与えます。
ストーリーボード名がMyStoryboard.storyboardの場合、生成されるstringsファイル名はMyStoryboard.stringsになります。

お分かりのように、stringsファイルはアプリのテキスト(値)と別の文字列(キー)を関連付けます。
ローカライザはユーザインターフェイス内のテキストの識別を助けるためにキーを使用し、それからテキストを変換します。
Base Internationalizationでアプリのユーザインターフェイスを構築する場合、それらのビューが変更される際に隣接するビューがそれに伴って位置やサイズを、表示する翻訳された文字列に適切に対応することを保証するため、Auto Layout機能を使用する必要があります。

Base Internationalizationの使い方
  1. XcodeでHelloWorldのPROJECTを選択し、Infoペインを表示します。

    internat_choose_base_2x.png

  2. Localizationsテーブル下のUse Base Internationalizationオプションを選択します。
    XcodeがBase Internationalizationを使用するストーリーボードの選択を尋ねるシートを表示します。

    internat_select_base_sb_2x.jpg

  3. MainStoryboard.storyboardが選択され、参照言語がEnglishであることを確認します。
    Finishボタンをクリックします。

  4. プロジェクトナビゲータでMainStoryboard.storyboard(Base)を選択します。

  5. ラベルオブジェクトが『Label』と表示されている場合、テキストを選択するためにダブルクリックし、削除してください。
  6. この最終工程はユーザに『Label』を見せる必要が無く、翻訳する必要が無いためです。

注:Xcode 4.5より前では、開発者と翻訳者がアプリのサポートする各言語毎にストーリーボードやnibファイルを修正する必要がありました。
ストーリーボードまたはnibファイルの可視/可聴テキストの翻訳だけでなく、翻訳後のビューのサイズや位置を調整する作業が必要でした。



●ローカリゼーションの追加

HelloWorldを作成した際、Xcodeは英語にローカライズされたリソース用に、Xcodeプロジェクトに自動的にフォルダを追加しました。
その後Base Internationalizationに要請し、貴方のプロジェクトに別のフォルダを追加しました。
Finderで貴方のプロジェクトファイルを見ると、Base.lprojという名前のフォルダとは別に(英語のローカリゼーション用の)en.lprojという名前のフォルダがあるはずです。
前者のフォルダ内にはストーリーボードファイルがあり、後者のフォルダにはInfoPlist.stringsファイルがあります。
(InfoPlist.stringsファイルについての詳細は『アプリ名のローカライズ』を参照してください。)
英語は貴方のプロジェクトのデフォルト言語です。
ローカリゼーションを追加したい場合は、Xcodeでそれらを追加する必要があります。

プロジェクトへのローカリゼーションの追加
  1. プロジェクト設定のInfoペインを選択します。

    internat_projectsettings_2x.png

  2. ローカリゼーションテーブルのプラスボタン(+)をクリックし、ポップアップメニューから簡体字中国語を選択します。
    簡体字中国語は言語ID zh-Hansによって識別されます。

    internat_selectLang_2x.jpg

  3. ファイルや参照言語の選択を尋ねるシートでは、下方に示される全ての設定と選択を確認してください。
    その後Finishボタンをクリックします。

この作業が完了すると、Xcodeは新しいローカリゼーションを表示するために、プロジェクトナビゲータを更新します。
MainStoryboard.storyboardの隣にある三角マークをクリックすると、そのファイルのローカリゼーションであるBase(英語)と簡体字中国語が表示されます。

internat_inProjNavigator_2x.png

貴方はおそらくプロジェクトナビゲータに2種類のstringsファイルがあることに気付いたことでしょう。
ローカリゼーションを追加すると、Xcodeはそれらの両方を生成します。
最初のstringsファイルはBase Internationalization(MainStoryboard.strings)に由来します。
これにはXcodeがストーリーボードファイル内で検出したテキストから自動的に生成した、1つ以上のキー値ペアが含まれています。
2つ目のstringsファイルはInfoPlist.stringsで、(アプリ名など)ユーザに表示されるアプリケーションのプロパティのローカライズに使用します。
これはコンテンツ無しで始まります。
以降の項でstringsファイルの両方のタイプについて詳細を学びます。

アプリケーションバンドル内のローカリゼーションフォルダ:

アプリケーションはバンドルで、バンドルは実行可能コードとコードが使用するリソースが含まれている構造化されたディレクトリです。
これらのリソースは、ローカライズまたは(全ての言語で共通の)非ローカライズすることができます。
ローカライズされたリソースは、code.lprojと名付けられたバンドル内にあるフォルダに入れられます。
codeは次に示す要素で構成されます。

  • 言語ID
    ISO 639-1(2文字)またはISO 639-2(3文字)の言語識別子です。
    (ISOは国際標準化機構の略です。)
    ハイフンで接尾辞を追加することで、例えば中国語の簡体字(-Hans)と繁体字(-Hant)など、言語の方言を指定することができます。

  • ロケールID
    オプションで指定するISO 3166-1のロケールまたは地域の識別子です。
    ロケールIDは2文字で、アンダースコア文字を使用して言語指定と連結される大文字のコードです。
    例えば、en_GB.lprojというIDは英語-イギリスを意味します。

これらの規則の例外は、ストーリーボードやnibファイルのBase Internationalizationを識別するBase.lprojです。



●正確な入力ソースの使用

簡体字中国語のローカリゼーションのために中国語の文字を入力する場合は、文字入力に適切な入力ソースが必要となります。
OS Xのシステム環境設定で、入力ソースを変更することができます。

簡体字中国語のために適切な入力ソースを選択する

システム環境設定アプリを起動し、『言語とテキスト』を選択します。

システム環境設定を起動するには、アップルメニューでシステム環境設定を選択します。
(これはXcodeの機能ではありません。)

『入力ソース』ビューを選択します。

入力ソースのリストから『Chinese - Simplified』を選択します。

input_source_pref_2x.png

『メニューバーに入力メニューを表示』オプションが選択されていることを確認してください。

アクティブな入力ソースを作成するために、メニューバーで簡体字中国語の入力ソースを選択することができます。

select_input_source_2x.png



●stringsファイルについて

stringsファイルにはキーとして使用される任意の文字列に対応した、特定言語にローカライズされたテキスト項目が含まれています。
ファイルはstrings拡張子を持っています。
デバイス上でアプリを実行した際、stringsファイル内でユーザが設定している言語の文字列を検索し、表示します。
(もちろん、アプリはその言語のローカリゼーションをサポートしている必要があります。)
iOSでは、国際化で3種の異なるstringsファイルを使用します。

  • XcodeがBase Internationalizationやnibファイルから自動的に生成するstringsファイル。

  • 情報プロパティリスト、表示するアプリ名など、アプリの情報プロパティリスト内のユーザ可視プロパティをローカライズするためのstringsファイル。

  • アプリのコードによって文字列の生成と表示を行うためのstringsファイル。

以降の項で、アプリを国際化する場合のこれらの各種stringsファイルを構成する方法を説明します。
全てのstringsファイルのエントリは、以下の基本形式を持っています。

/* Comment to localizers */
"Key" = "Value";

コメントはローカライズされた文字列のコンテキストを明確にすることによって、翻訳者を支援することを意図しています。
コメントの次に(独自の行として)、キー、等号、値、そして終端のセミコロンがあります。
値は常に引用符で囲まれた文字列です。
キーは通常引用符で囲まれた文字列ですが、グローバル文字列として宣言されたシンボルにすることもできます。



●ストーリーボードのテキストのローカライズ

各ローカリゼーションはアプリのプロジェクトに追加され、XcodeがStroryboardName.stringsという名前のBase Internationalizationのストーリーボードからstringsファイルを生成し、プロジェクト内に(zh-Hans.lprojなどの)ローカリゼーション用のフォルダを書き込みます。

簡体字中国語のstringsファイルを調べるには
  1. プロジェクトナビゲータでMainStoryboard.storyboardの隣にある三角マークをクリックし、その下の項目を開きます。

  2. MainStoryboard.strings (Chinese)という名前の項目を選択します。

  3. プロジェクトエディタにstringsファイルの内容が表示されます。

HelloWorldアプリでは、XcodeがBase Internationalizationから以下のstringsファイルを生成します。

/* Class = "IBUITextField"; accessibilityHint = "Type your name"; ObjectID = "PzI-FE-QQF"; */
"PzI-FE-QQF.accessibilityHint" = "Type your name";

/* Class = "IBUITextField"; placeholder = "Your Name"; ObjectID = "PzI-FE-QQF"; */
"PzI-FE-QQF.placeholder" = "Your Name";

/* Class = "IBUIButton"; normalTitle = "Hello"; ObjectID = "fYK-eX-amY"; */
"fYK-eX-amY.normalTitle" = "Hello";

ストーリーボード内の文字列毎に、Xcodeはテキスト表示オブジェクトの識別子からキーとピリオド、そして文字列が割り当てられているプロパティを連結します。
(等号の後ろにある文字列の)値はBase Internationalizationストーリーボードの可視または可聴文字列です。
翻訳者はこれらの文字列を変換します。
(各エントリのコメントはこの情報を繰り返しますが、Xcodeで知られているようにオブジェクトのクラスが追加されます。)
ユーザの設定言語がBase Internationalizationと異なる場合、アプリは実行時に現在のローカリゼーションのStoryboardName.stringsファイル内にある一致する文字列で、Base Internationalizationストーリーボード内の各文字列を動的に置換します。
図1-1にこの工程を示します。

図1-1 Base Internationalizationからの文字列のローカライズ

storyboard_strings_2x.png

簡体字中国語への文字列のローカライズ
  1. メニューバーから簡体字中国語の入力ソースを選択します。

    中国語キーボードが利用できる場合は使用可能です。
    (アメリカ英語などの)他のキーボードを代わりに使用する場合は、キーマッピングを知っている必要があります。

    以下の例から中国語文字をコピーして貴方のstringsファイルにペーストする(あるいは別の言語にテキストをローカライズする)場合は、この工程を省略することができます。

  2. プロジェクトエディタに表示するために、プロジェクトナビゲータでMainStoryboard.strings (Chinese)ファイルを選択します。

  3. 各値の文字列(つまり等号の右側にある文字列)を簡体字中国語に翻訳します。

    中国語をコピー&ペーストする場合は、以下で提供される文字をコピーしてください。

  4. ファイルを保存します。(File > Save)

HelloWorldのユーザインターフェイスはとても単純で、1つのストーリーボード、1つのシーン、そして3つの文字列だけです。
より複雑なユーザインターフェイスを持つアプリは多くのテキストを含むビューを持つことができるため、多くの文字列をローカライズすることになります。
Xcodeはキーに埋め込まれたオブジェクトIDを使用することによって、テキストを表示するビューを識別するのに役立ちます。
ストーリーボードのビュー(例えばHelloボタン)を選択し、Identityインスペクタを開きます。
このインスペクタのDocument欄のオブジェクトIDを見て、stringsファイル内のオブジェクトIDと照合します。

internat_objectID_2x.png

中国語のローカリゼーション用MainStoryboard.stringsファイルの内容は次のようになります。

/* Class = "IBUITextField"; accessibilityHint = "Type your name"; ObjectID = "PzI-FE-QQF"; */
"PzI-FE-QQF.accessibilityHint" = "键入您的姓名";

/* Class = "IBUITextField"; placeholder = "Your Name"; ObjectID = "PzI-FE-QQF"; */
"PzI-FE-QQF.placeholder" = "您的姓名";

/* Class = "IBUIButton"; normalTitle = "Hello"; ObjectID = "fYK-eX-amY"; */
"fYK-eX-amY.normalTitle" = "您好";



アプリ名のローカライズ

アプリのプロジェクトへローカリゼーションを追加する場合、デフォルトではXcodeによってInfoPlist.stringsという名前のファイルが生成され、ファイルシステム内に(zh-Hans.lprojなどの)ローカリゼーションフォルダに書き込まれます。
このファイルには最初は何も内容が無く、ユーザに表示される情報プロパティリスト内の文字列をローカライズするためのキー値ペアを含む必要があります。
HelloWorldアプリでは、このプロパティリストはHelloWorld-Info.plistです。

最も重要なユーザ可視プロパティは、これからローカライズするアプリの表示名です。
InfoPlist.stringsファイル内のキーは、情報プロパティリスト内で見つけることができるフレームワークで宣言されたシンボルです。

アプリ名のローカライズ
  1. HelloWorldのTARGETSを選択し、Infoビューを選択します。

  2. プロパティのテーブル内の任意の場所をControlを押しながらクリックし、コンテキストメニューから『Show Raw Keys/Values』を選択します。

    internat_showcfprops_2x.png

  3. (アプリの表示名を表すCore Foundationのシンボルである)CFBundleDisplayNameを探します。

  4. エディタにファイルを表示するために、プロジェクトナビゲータ内でInfoPlist.stringsファイルを選択します。

    これは簡体字中国語のローカリゼーションのためのファイルです。
    IdentityインスペクタのLocalozation欄で、選択されたファイルのローカリゼーションを照合することができます。

    internat_checkLocalization_2x.png

  5. InfoPlist.stringsファイルに以下の行を入力し、FileメニューでSaveを選択してファイルを保存します。

    /* The name of the app displayed on the device*/
    CFBundleDisplayName = "您好,世界";

    この場合、キーを引用符で囲む必要はありません。

情報プロパティリスト内のユーザ可視プロパティが既に英語なので、第一言語である英語のローカリゼーション用のInfoPlist.stringsファイルは編集する必要はありません。



●コードによる文字列表示のローカライズ

アプリのコードは多くの場合、実行時にテキストの文字列の生成と表示を行います。
HelloWorldプロジェクトでは、changeGreeting:メソッドにおいてプログラムで生成されたテキストが見られます。

- (IBAction)changeGreeting:(id)sender {
     self.userName = self.textField.text;

     NSString *nameString = self.userName;
     if ([nameString length] == 0) {
          nameString = @"World";
     }
     NSString *greeting = [[NSString alloc] initWithFormat:@"Hello, %@", nameString];
     // programmatically created
     self.label.text = greeting;
}

このメソッドはテキストフィールドから表示される名前を取得し、NSStringクラスのinitWithFormat:メソッドを使用して名前と文字列『Hello, 』を連結します。
このテキストを表示するには、組み立てられた文字列にラベルのtextプロパティを設定します。
ここでの国際化の問題は、アプリがサポートする各ローカリゼーション毎に単語『Hello』を翻訳する必要があるということです。
コードで生成される文字列をローカライズするため、iOSの国際化機能はstringsファイルとNSLocalizedStringマクロを提供しています。
以下の項で、このファイルとマクロを使用する方法について説明します。


Localizable.stringsファイルの設定

プログラムによって表示するテキストのローカライズされた文字列を含むstringsファイルの慣例的な名前はLocalizable.stringsです。
これらのファイルを1つは英語、もう1つは簡体字中国語用に2つ生成し、それらに適切なキー値ペアを追加します。

各ローカリゼーション用のLocalizable.stringsファイルの追加
  1. Xcodeのプロジェクトナビゲータで、Supporting Filesフォルダを選択します。

  2. File > New > File...を選択します。

  3. iOSのResourcesカテゴリでStrings Filesテンプレートを選択し、Nextボタンをクリックします。

    internat_addStrings_2x.jpg

  4. Save Asフィールドでファイル名をLocalizable.stringsに変更し、Createボタンをクリックします。

    (選択されているターゲットなど)デフォルトの設定は変更せず、そのままにします。

  5. プロジェクトナビゲータでLocalizable.stringsを選択し、Identityインスペクタで『Make localized』ボタンをクリックします。

    internat_addLocalizable_2x.png

  6. 確認ダイアログが表示されたら、プルダウンメニューでEnglishが選択されていることを確認し、Localizeボタンをクリックします。

    internat_localizable_en_2x.jpg

    この工程の後の『Make localized』ボタンは、現在のローカリゼーションの一覧表に置換されます。

  7. 簡体字中国語のローカリゼーションにLocalizable.stringsファイルを追加するには、Chineseチェックボックスを選択します。

これで両方のローカリゼーション用のLocalizable.stringsファイルを持つことになったので、これらにキー値ペアを追加します。

『Hello』文字列のローカライズ
  1. プロジェクトナビゲータでLocalizable.strings (English)を選択します。

  2. エディタで以下のテキストを入力します。

    /* The string displayed */
    "HELLO" = "Hello, %@";

    キーとして識別し易いように左側の文字列(『HELLO』)は大文字にしています。

  3. プロジェクトナビゲータでLocalizable.strings (Chinese)を選択します。

  4. エディタで以下のテキストを入力します。

    /* The string displayed */
    "HELLO" = "您好,%@";


NSLocalizedStringマクロの呼び出し

NSLocalizedStringマクロは、現在のローカリゼーション用のLocalizable.stringsファイルからローカライズされた文字列を取得します。
HelloWorldアプリでは、テキスト『@"Hello, %@"』を置換するためにこのマクロが必要になります。

コード内でのローカライズされた文字列の要求
  1. プロジェクトナビゲータでHelloWorldViewController.mを選択します。

  2. changeGreeting:メソッドで以下の文を修正します。

    NSString *greeting = [[NSString alloc] initWithFormat:@"Hello %@", nameString];

    次のように見えるようにします。

    NSString *greeting = [[NSString alloc] initWithFormat:NSLocalizedString(@"HELLO", @"The string displayed"), nameString];

マクロの最初のパラメータはstringsファイル内のキーを取得するもので、2つ目のパラメータは翻訳者に対するコメントです。
マクロは、ユーザが設定している言語に対応するローカリゼーションにおけるキーの値を返します。
この例で、マクロのパラメータとして翻訳者に対するコメントを含めることに疑問を感じるかもしれませんが、いずれにしても英語と中国語の両方のLocalizable.stringsファイル内でコメントは記述しています。

大規模なアプリケーションのプロジェクトでは多くの場合、genstringsという名前のコマンドラインのプログラムを使用して、貴方のコード内で検出した情報からstringsファイル(デフォルトではLocalizable.strings)を生成します。
ユーティリティはその都度NSLocalizedStringマクロを呼び出すように見えますが、(初期値でもある)キーとコメントを抽出し、それらの項目をstringsファイルに書き込みます。
その後、貴方のプロジェクトの各ローカリゼーションにstringsファイルを追加し、値を変換することができます。



●国際化のテスト

おめでとうございます。
貴方はアプリを国際化し簡体字中国語にローカライズすることができました。
それではユーザが簡体字中国語に言語を設定した場合にその文字列が表示されるか、アプリをテストしてみましょう。

簡体字中国語でのアプリのテスト
  1. iOSシミュレータを実行して設定アプリを起動し、言語設定として簡体字中国語を選択します。

    iOSシミュレータがHelloWorldまたは他のアプリを実行している場合は、ホームボタンをクリックしてください。

    SettingsアプリでGeneral > International > Languageを選択します。
    次に下図の例に示しているテーブルの行をクリックします。
    Doneボタンをクリックします。

    internet_test_language_2x.png

  2. Xcodeでアクティブなスキームが『iPhone version number Simulator』であることを確認し、Runボタンをクリックします。

    XcodeはiOSシミュレータでHelloWorldを実行します。
    下図のようになります。

    helloworld_zh_beforeal_2x.png

  3. メニューバーから入力ソースとして簡体字中国語を選択し、テキストフィールドにいくつかの中国語文字を入力してボタンをクリックします。

    アプリは『您好, characters typed』と表示するはずです。
    現在の言語に翻訳されていない文字列を見つけた場合には、stringsファイルでそれらを翻訳するようにしてください。

  4. ハードウェアメニューで『反時計回りに回転』または『時計回りに回転』を選択して向きの変更をシミュレートし、何が起こるかを確認してください。

  5. ホームボタンをクリックすることによってアプリを終了し、iPhoneでシミュレートしたアプリを見つけます。

    helloworld_zh_appname_2x.png

    アプリ名が簡体字中国語にローカライズされていることに注意してください。

もちろん、ほとんどの商用アプリはHelloWorldよりも多くのテキストを表示し、画像やその他のリソースが含まれている場合もあります。
そして、それらのアプリはいくつかのローカリゼーションを持っているかもしれません。
各ローカリゼーションでアプリを実行し、各画面やダイアログへ移動してテキストを表示し、ローカライズされていない文字列やリソースがあるかを確認する必要があります。

貴方のアプリがVoiceOver用に構成されている場合、アプリがアクセシビリティ用に適切にローカライズされていることを確認してください。
この目的のために、iOSシミュレータに組み込まれているAccessibility Inspectorを使用する手段もあります。
Accessibility Inspectorの詳細については『iOSアクセシビリティプログラミングガイド』を参照してください。



●国際化のためのAuto Layoutの使用

簡体字中国語のローカリゼーションでHelloWorldアプリのテストをした際に、向きの変更をシミュレートしました。
アプリは任意のローカリゼーションで適切になるような方法でテキストを表示しました。
テキストフィールドのテキストとプログラムで表示するラベルのテキストは、(顔面の幅を占有して)そのオブジェクトの中央に配置されるため、向きに関係無くあらゆる合理的な長さにすることができます。
そしてローカライズされた文字列に合わせてボタンのサイズが変更されます。

もちろん、オブジェクトが画面の中央に表示されて隣にオブジェクトの無い、HelloWorldのような単純なユーザインターフェイスを持つアプリは少数です。
ユーザインターフェイスでのテキストの一般的な設計は、テキストフィールドに付いているラベルです。
特定言語用のStoryboardName.stringsファイル内のラベルのテキストを翻訳する場合、ラベルは新しいテキストに合わせてサイズを変更する必要があります。
それと図1-2に示すように、新しいラベルサイズに合わせてテキストフィールドの幅も変更する必要があります。

図1-2 一般的なローカリゼーションパターンのAuto Layout

autolayout_example_2x.png

このチュートリアルの残りの部分では、iOSのAuto Layoutと、アプリの国際化に寄与するレイアウトの規則の指定に、どのようにXcodeのAuto Layout機能を使用することができるかについて少し学びます。
その後、ラベル-テキストフィールドのデザインを持つユーザインターフェイスへ修正し、図1-2に示すような動作をするように変更します。

Auto Layoutの詳細については『Cocoa Auto Layoutガイド』を参照してください。


XcodeでのAuto Layoutのツアー

iOSのAuto Layoutシステムはアプリのビューのレイアウトのための規則を定義することができ、あるビューがサイズや位置を変更した際に隣接しているビューは適切にサイズや位置を調整します。
Auto Layoutはデバイスの向きの変化に対応するための重要な機能です。
またBase Internationalizationを使用する場合は特に、アプリを国際化するための重要な機能です。

Auto Layoutでは、貴方のアプリのユーザインターフェイスをレイアウトする方法を記述するために、レイアウトの制約を使用します。
初めてのiOSアプリケーション』でHelloWorldのユーザインターフェイスを構成した際、例えばスーパービューに固定されているオブジェクトの縁に対して追従または追跡して、推奨されるオブジェクト間の間隔を使用し、Aquaのガイドラインに沿ったAuto Layoutシステムによって自動制約を受け入れていました。
ストーリーボードのシーン内にあるビュー周辺のレイアウトの細い青線は、自動制約を示しています。
今から、これらの制約を検討します。

レイアウト制約の検討
  1. プロジェクトナビゲータでMainStoryboard.storyboard (base internationalization)を選択します。

  2. Hello World View Controllerのアウトラインビューで、各制約項目の隣にある三角マークをクリックして内容を開示します。

    アウトラインビューは以下のようになります。

    internat_constraints_2x.png

  3. 制約(例えば、Horizontal Space - Label - View)を選択し、Attributesインスペクタを開きます。

    Attributesインスペクタは制約に関する情報を以下のように表示します。

    internat_constraints2_2x.png

    インスペクタ内の値はラベルのスーパービューを参照しています。
    Standardがチェックされている場合、制約が自動であることを意味し、つまりAuto LayoutシステムがAquaガイドラインに従ってオブジェクトをレイアウトしています。

    またXcodeは以下の工程で説明するように、特定のビューに関連付けられた全ての制約を表示することができます。

  4. テキストフィールドを選択し、Sizeインスペクタを選択します。

    制約を表示することに加えて、SizeインスペクタにはビューのContent HuggingとContent Compression Resistance Priority値を表示します。

    internat_constraintsPerView_2x.png

自動制約の設定を上書きし、それによってユーザ制約を生成することはできますが、それを行う必要はありません。
前述したように、HelloWorldの単純なユーザインターフェイスはローカリゼーションに適しています。
(プレースホルダテキストを伴う)テキストフィールドとラベルは画面全体に拡張し、事実上任意の長さの文字列にすることができます。
そしてHelloボタンはローカライズされた各タイトルにサイズを変更し、スーパービューの中心に配置されたままになります。


国際化のためのユーザインターフェイスの修正

アプリでより一般的なユーザインターフェイスであるラベル-テキストフィールドのペアに、HelloWorldのユーザインターフェイスを修正します。

HelloWorldアプリのユーザインターフェイスとレイアウト制約の変更
  1. テキストフィールドを選択し、Attributesインスペクタでプレースホルダの欄から『Your Name』を削除します。

  2. スーパービューの右半分を占めるように、テキストフィールドの幅のサイズを変更します。

  3. ユーティリティ領域のオブジェクトライブラリを開き、ストーリーボードのシーンにラベルオブジェクトをドラッグします。

    internat_dragLabel_2x.png

  4. ラベルを選択し、AttributesインスペクタでAlign Rightボタンをクリックします。

    internat_rightAlignLabel_2x.png

  5. テキストフィールドを選択し、Align Leftボタンをクリックします。

  6. ラベルのデフォルトのテキスト(Label)をダブルクリックして選択し、『Your Name:』に置換します。

  7. ラベルをテキストに合わせ、自動制約(細い青線)が有効になるまで、ラベルとテキストフィールドの位置とサイズを変更します。

    両方のオブジェクトを選択したユーザインターフェイスは次のようになります。

    internat_finalLabelField_2x.png

  8. 新しいラベルオブジェクトを選択し、SizeインスペクタでContent Hugging PriorityのHorizontalを1,000に設定します。

    internat_setContentHugging_2x.png

    Content Hugging Priorityはビューをどのくらい他のビューとの相対的な内容にしてサイズを調整する必要があるかを、Auto Layoutシステムに指示するものです。
    このラベルの場合、1,000という値は常に文字列を含むように自身のサイズを変更する必要があることを意味します。
    テキストフィールドのContent Hugging Priorityがデフォルト値である250のままであるので、ラベルの幅が変更された場合はそのオブジェクトの幅が変化します。

ラベル-テキストフィールドのペアが国際化されました。
ラベルのテキストとして『A Very Long Name』と入力しReturnを押すと、テキストフィールドは新しいラベル値を収容するために幅を短く表示します。
また英語ローカリゼーションでアプリを実行し、その後簡体字中国語ローカリゼーションで実行すると、動作の変化を確認することができます。



●ストーリーボードを変更した際の、ストーリーボードのstringsファイルの更新

先程完了したAuto Layoutの練習では、HelloWorldのユーザインターフェイスに新しいテキスト表示オブジェクトとして『Your Name:』ラベルを追加しました。
その結果、中国語のMainStoryboard.stringsファイルは、現在Base Internationalization(MainStoryboard.storyboard)との同期から外れています。
コマンドラインユーティリティibtoolを使用して、Base Internationalizationから新しいstringsファイルを生成し、それから既存のMainStoryboard.stringsファイルに新しいstringsファイルを追加します。

新しいユーザインターフェイスオブジェクトと既存の中国語MainStoryboard.stringsファイルとの結合
  1. ターミナルアプリを起動します。

    このアプリは『/アプリケーション/ユーティリティ』にあります。

  2. ターミナルのシェルで、貴方のプロジェクトフォルダ内のBase.lprojディレクトリに接続します。

    例えば、

    cd /Users/UserName/Projects/HelloWorld/HelloWorld/Base.lproj

  3. プロンプトの後に以下のコマンドを入力してください。

    ibtool MainStoryboard.storyboard --generate-strings-file NewStuff.strings

    出力ファイルには任意の名前(この例ではNewStuff.strings)を指定することができます。

  4. 生成された出力ファイルをXcodeで開き、新しいstringsファイルのエントリ(つまり"Your Name:"ラベル用のコメントとキー値ペア)を中国語のMainStoryboard.stringsファイルにコピーします。

  5. 新しい文字列値を翻訳します。



参考文献

Apple/Start Developing iOS Apps Today

Apple/Internationalize Your App

0 CommentsPosted in 資料





bose_soundlink_revolve
0 Comments
Leave a comment
管理者にだけ表示を許可する
Top
0 Trackbacks
Top
Calendar
03 | 2017/04 | 05
Sun Mon Tue Wed Thu Fri Sat
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
Recent Articles
iTunes


Swift
Categories
Tips
Profile

水月杏香

Author:水月杏香
永遠の初心者プログラマ。

Wish List
WACOM


ARC
Technical Q&A
情報プロパティリストキー
Start Developing iOS Apps Today
BOSE

bose_soundlink_revolve
Reference
NSApplicationDelegateプロトコル
NSArrayクラス
NSAutoreleasePoolクラス
NSBundleクラス
NSBundle UIKit追加分
NSCalendarクラス
NSCoderクラス
NSCodingプロトコル
NSCopyingプロトコル
NSDataクラス
NSDateクラス
NSDateFormatterクラス
NSDictionaryクラス
NSEntityDescriptionクラス
NSEnumeratorクラス
NSErrorクラス
NSExceptionクラス
NSFetchRequestクラス
NSFileHandleクラス
NSFileManagerクラス
NSIndexPathクラス
NSIndexPath UIKit追加分
NSKeyedArchiverクラス
NSKeyedUnarchiverクラス
NSKeyValueCodingプロトコル
NSLocaleクラス
NSManagedObjectクラス
NSManagedObjectContextクラス
NSManagedObjectModelクラス
NSMutableArrayクラス
NSMutableCopyingプロトコル
NSMutableDictionaryクラス
NSMutableSetクラス
NSNotificationクラス
NSNotificationCenterクラス
NSNullクラス
NSNumberクラス
NSObjectクラス
NSObject UIKit追加分
NSObjectプロトコル
NSPersistentStoreクラス
NSPersistentStoreCoordinatorクラス
NSPredicateクラス
NSPropertyListSerializationクラス
NSRunLoopクラス
NSSetクラス
NSStringクラス
NSString UIKit追加分
NSTimerクラス
NSTimeZoneクラス
NSURLクラス
NSURLProtectionSpaceクラス
NSURLRequestクラス
NSUserDefaultsクラス
NSValueクラス

UIActionSheetクラス
UIActionSheetDelegateプロトコル
UIActivityIndicatorViewクラス
UIAlertViewクラス
UIAlertViewDelegateプロトコル
UIApplicationクラス
UIApplicationDelegateプロトコル
UIBarButtonItemクラス
UIBarItemクラス
UIButtonクラス
UIColorクラス
UIControlクラス
UIDatePickerクラス
UIDeviceクラス
UIEventクラス
UIFontクラス
UIGestureRecognizerクラス
UIImageクラス
UIImageViewクラス
UIKit Function
UILabelクラス
UINavigationControllerクラス
UINavigationItemクラス
UIPickerViewクラス
UIPickerViewDataSourceプロトコル
UIPickerViewDelegateプロトコル
UIPinchGestureRecognizerクラス
UIResponderクラス
UIScreenクラス
UIScrollViewクラス
UISearchBarクラス
UISearchBarDelegateプロトコル
UISegmentedControlクラス
UISliderクラス
UISwipeGestureRecognizerクラス
UISwitchクラス
UITableViewクラス
UITableViewCellクラス
UITableViewControllerクラス
UITableViewDataSourceプロトコル
UITableViewDelegateプロトコル
UITapGestureRecognizerクラス
UITextFieldクラス
UITextFieldDelegateプロトコル
UITextInputTraitsプロトコル
UITextViewクラス
UITextViewDelegateプロトコル
UIToolbarクラス
UITouchクラス
UIViewクラス
UIViewControllerクラス
UIWebViewクラス
UIWebViewDelegateプロトコル
UIWindowクラス

AVAudioPlayerクラス
AVAudioPlayerDelegateプロトコル

CADisplayLinkクラス
CAEAGLLayerクラス
CALayerクラス

CGAffineTransform
CGBitmapContext
CGColor
CGColorSpace
CGContext
CGGeometry
CGImage
CGPath

EAGLContextクラス
EAGLDrawableプロトコル

Foundation Constants
Foundation Data Types
Foundation Functions

MPMediaItemクラス
MPMediaItemArtworkクラス
MPMediaPlaylistクラス
MPMediaPropertyPredicateクラス
MPMediaQueryクラス
MPMusicPlayerControllerクラス

Randomization Services

System Sound Services
Amazon


OpenGL ES
SQLite
Monthly Archives
Recent Comments
Recent TrackBacks
RSS Link
Visitors
QR Code
QR