Xcode 11でローカライズされた高品質なAppを作成する

(音楽)

(拍手) どうも

おはようございます

ご参加ありがとうございます ローカリゼーション担当の クルプリートです のちほど ヴィヴィアンと アーサーも登場します

今日は新しいローカライズ方法の ご紹介です 後でXcode 11の新ツールも 説明します ローカライズ作業の向上や― 画像のローカライズ テストを用いた多言語の スクリーンショットの生成などです

今やユーザの70％以上が 米国外の人と推定されます

ローカライズすることで― アプリケーションの市場が 拡大します

世界中のユーザに すばらしい体験を提供したいものです 今年は国際的な 多言語ユーザ向けに― 新たな機能を追加しました 例えば― iOS 13のキーボードには 新たに38の言語を追加 母国語を探してみてください

多言語ユーザのために 言語の設定フローも作りました

中でも特に画期的な特長を 詳しくご紹介します

iOS 13では設定ページに 多言語向け設定が加わりました システム言語に関係なく アプリケーション言語が設定できます (拍手) Watchを接続すると 設定も同期します

Macでも“言語と地域”の設定で App言語を設定できます

多言語の地域では― ２つ以上の言語を使い分ける ユーザもいます 香港には中国語と英語を 場面に応じて使い分ける人がいます

インドでは学校で 英語を学びますが― 家庭ではヒンディー語を使います

アプリケーションは交流の窓口です 新たな機能により 言語を選べるようになりました

ローカリゼーション対応の 標準APIがあれば― 無料ですぐに設定可能です ただし いくつか注意点があります

まず自分でコードを書くのは やめましょう フォントフォールバックなどの処理は APIに任せます 言語変更オプションを 追加したい場合― Launch to Settingsで 変更可能にしましょう

ユーザが言語を変更すると―

変更後の言語で再ローンチされます シームレスな変更を 可能にするため― State Restoration APIを お勧めします

iOS 13には NSUserActivity搭載の 新しいAPIもあります 詳しくは 金曜日のセッションでどうぞ

最後にアプリケーション内で 言語を統一することが重要です カスタムまたはサーバ側で リソースをロードする場合― コンテンツ用の言語を決める 便利なAPIがあります 紹介しましょう

ユーザの言語および地域の特定には ロケールAPIです 言語をユーザの希望順に並べた リストを作成します 多言語向けのアプリケーションを 構築する場合― このリストは役立ちます 各言語対応のフォントなどの リソースが要るからです Locale.preferredLanguagesは ユーザ希望言語のリストを― Appバンドルのサポートに関係なく 返してきます 実行中のアプリケーションには 不向きです 実行中の言語には バンドルAPIが使えます 言語マッチングにも有用です Bundle.main.preferredLocalizationsは ユーザの希望言語と Appサポート言語を考慮します そしてサポート言語を ユーザの希望順に並べます

違う言語をサポートするサーバから コンテンツをロードする場合― Bundle.preferredLocalizations (from:が使えます サーバからの第３言語も 考慮されます

この機能が実際にどう動くか デモで見てみましょう (拍手)

昨年 “バケーション･プラネット”を 紹介しました 惑星間旅行の 予約アプリケーションです さらに詳細な予約を可能にしました “Discover”タブから お勧めを見ることができます 冥王星への宇宙船クルーズや

月面ヨガ

WWDCパーティなど 時期的なイベントもあります このコンテンツは サーバから取りました 画像と文章により 船内レストランCodableで― 初の惑星パーティが 開催されると説明しています この文章は サーバから引っ張ってきました 説明を読んで 行きたければ予約します WWDCの参加者は 世界中から出席するので― 予約に使う言語も多様です そこで“Profile”タブから― アプリケーション言語を見ます クリックすると― 設定画面で サポート言語のリストを閲覧可能です フランス語に変更します システムUIは英語のままですが― “バケーション･プラネット”は フランス語になりました (拍手) State Restoration APIのおかげで― 元の場所に すぐ戻れました

文字列も日付フォーマットも フランス語ですね でもサーバからのコンテンツは 英語のままです アプリケーション内の言語を 統一したいので―

問題を探してみましょう

CollectionViewControllerで 見ると― サーバからコンテンツを取る loadDiscoverItemsがあります ダウンロード時に言語を指定し― このコンテンツに使う言語を サーバに知らせます ここでは Locale.preferredLanguages.first このキーで アプリケーション言語に関係なく― ユーザの希望の言語が設定されます サポートしていないペルシア語も 大丈夫です サーバやAppバンドルが サポートする言語を― ユーザの希望順に 並べるのが理想です まずサーバのサポート言語を フェッチします ありました Bundle.preferredLocalizations (from:を使って― availableServerLocalizationsを 入れます 最初のエレメントが― サーバにコンテンツを要求する際に 使うべき言語です

再構築します

ローンチし直すと― すべてフランス語になりました いいですね 惑星パーティでお会いしましょう

まとめます 言語設定でアプリケーション言語が 選択できます

Launch to Settingsで 言語を変更可能にします

State Restorationで シームレスな変更にしましょう カスタムまたはサーバ側で リソースをロードする際は― 正しいバンドルまたは ロケールAPIを使いましょう

今年もすばらしい機能が 追加されました それを生かしたアプリケーションを 期待します 具体的な方法について ヴィヴィアンが説明します ヴィヴィアン (拍手) ありがとう Xcodeでのローカリゼーション ツールについて話します 皆さんの要望に沿って 改良したので― “欲しいものリスト”ですね まずはパフォーマンス ローカリゼーションの Interface Builderファイルを含む― プロジェクトのエクスポートが なんと15倍速くなりました (拍手) つまり １分かかっていた作業が― ４秒で完了します

文字列抽出プロセスを 再設計したのです Interface Builderファイル数が 多いほど― 多くの恩恵があるでしょう ワークフローの速度を 上げるために― genstringsやibtoolは 必要はありません xcodebuildやexportLocalizations importLocalizationsを用いて― 文字列ファイルを作成します さて iPadアプリケーションを― Macでも楽しめるようになりました ただし 適合しない文字列も あるでしょう Macでは“タップ”でなく― マウスで“クリック”します iPadでは設定でSiriを コントロールできますが― Macではアプリケーションの preferencesで設定します コード化された NSLLocalizedStringを― 呼び出すといいでしょう デバイス独自の文字列向けの stringsdictルールも追加されています これを複数形や可変幅の規則と 組み合わせます すでにstringsdictファイルにある 文字列も使えます

新たなルールは NSStringDeviceSpecificRuleType サポートされるデバイスは Apple TVと―

Apple WatchやiPad iPhone iPod そしてMacです Macだけに限定されません

stringsdictは このようになります １番上に既存の文字列キー 次に新ルール NSStringDeviceSpecificRuleType 辞書にはデバイス独自の文字列の インデックスが― デバイスキーで示されます このテーマは別のセッションで 詳しく説明する予定です

次はSettingsバンドルです

Localization Catalogに 含まれています バンドルも 簡単にローカライズできます

Xcodeローカリゼーションツールで 注目の改良点は― アセットのローカライズです これまで画像のローカライズは― 独立したファイルで行う 必要がありました つまりアセットカタログに ファイルがあっても― ローカライズしたものは 浮いていたのです 今後はアセットカタログ内で― 画像を直接ローカライズできます (拍手) ローカライズ可能なものは 画像セットや― Watchコンプリケーション Apple TVの画像スタック またSprite Atlasや― Game Center dashboardや leaderboard― およびシンボルです やり方を見てみましょう

アセットカタログエディタで 属性インスペクタの― サポートタイプを選択し “Localize”を出します クリックして 属性のローカライズを加えると― Localization Catalogを エクスポートできます マルチリンガルの人が 自分でローカライズする場合や― ローカライズ済み画像を アセットカタログに移す時もあります クリックするだけで プロジェクト内の― ローカライズ状況を示す ボックスが現れます チェックして―

アセットカタログエディタに ウェルを作成します そこにローカライズした画像を ドラッグできます 次にシンボルを見ましょう SF system symbolsは ローカライズ済みで作業不要

カスタムシンボルも ローカライズ可能です アラビア語やヘブライ語のように― 右から左へ読む言語には 方向性を設定します 画像と同じワークフローで― 属性インスペクタに “Localize”ボタンが出ます シンボルについては 後のセッションで詳しく話します

実際の作業をデモで見ましょう (拍手)

先ほど処理しなかった画像も ここでローカライズします Xcodeの― アセットカタログで ヨガの画像を修正します 精神的にも肉体的にも軽くなる 月面ヨガが紹介されています

属性インスペクタから― ローカライズと保存をクリックして 完了です 他の旅行の時と同じ作業ですね ローカライズ済みで― アセットカタログに 入れたい画像があります ダークモードの表示形態の 指定などの― 機能を利用するためです なんと元の画像を アセットカタログに入れるだけ 元のリソースと同じ名前も 付けてくれるので― Storyboardの変更も必要なく そのまま使えます “Localize”をクリックして 言語のチェックを外し―

新しいものをドラッグして入れます

そして保存 プロジェクトとデスクトップから 古いものを削除します これで すべて整いました Localization Catalogを エクスポートできます やり方はXcode 10と同じです “Project”から“Editor”で ローカリゼーションをエクスポート

今はフランス語だけを試します

エクスポート実行

どうでしょう？

このXcode Localization Catalogを 送って― ローカライザーを探します ローカライズ済みコンテンツの作業に すぐ取りかかれます xliffファイルがありました 文字列があるのは 知っていますが― 他には何が？ アセットカタログですね 完全形のアセットカタログです Xcodeの別プロジェクトでも 使用可能ですが― 今回はローカライザー向けに 絞り込みました ローカライズ可能なコンテンツで このロケールに限ります まだフランス語はありません 英語版の画像だけです ローカライザーが 編集しやすくするためです

前もってローカライザーに 頼んでおきました 返ってきたものは？ 私の好きなツールで カタログを開けます

英語とフランス語それぞれの―

ヨガの画像が並んで表示されました

これをインポートして Xcodeに戻ります Xcode 10と同様 プロジェクトを選択し― “Editor”で ローカリゼーションのインポート 処理済みのカタログを選択して “Import”をクリック

アセットカタログを見ます

２つのバージョンの画像が 同じ場所にあるのが分かりますね (拍手) アプリケーションを実行して 大きい画像を見ましょう

アプリケーションに戻ったら― 今度は すべてフランス語に なっているはずです

うまくいきました

(拍手) ではスライドに戻りましょう

Xcodeのローカリゼーション ツールで― エクスポートとインポートは より高速になりました

デバイス独自の stringsdictルールがあります

Settingsバンドルのローカライズも 容易になり―

シンボルも画像も アセットカタログで処理できます ローカリゼーションが済めば テストしたいですよね テストも簡単です アーサーに説明してもらいます (拍手) ありがとう

ローカリゼーションの UIテストの話をします

開発においてテストは重要です 手間はかかりますが 新機能追加時の不具合やバグを― リリース前に見つけるためです

複数言語をサポートする場合 すべてテストします 切れた文字列や不完全なコンテンツ

レイアウトの重なりや― 右から左に読む言語に 特有の問題などです

サポートする すべてのデバイスで―

全言語をテストします

繰り返しテストするので―

数千の異なる事例が得られます 全部を手動で行うのは 困難なので― プロジェクトにテストを含めて QAの負荷を抑えましょう

Xcode 11では―

Test Plansにより すべて自動化できます (拍手)

異なるコンフィギュレーションでの 複数回のテストに便利です Test Plansの詳細は― 木曜日のセッションでお話しします

今はローカライズ関連の部分を 説明します

まずテストが ローカライズ対応かを確認する方法

そしてTest Plansで スクリーンショットを生成する方法

最後にスクリーンショットの テスト以外での利用法を紹介します

まず すべての使用言語で テスト可能かを確認します

アクセシビリティ識別子の出番です この識別子は 一意で安定しており― 全言語でテスト可能と保証します

同じコードのプロパティで 簡単に設定可能です

Interface Builderを 使っていれば― Identity Inspectorで定義できます

簡単ですね このテストを使って― スクリーンショットを 生成する方法は？

Test Plansは複数の コンフィギュレーションに対応します

各コンフィギュレーションで― テスト時の言語と地域を 設定できます

UIテストのLocalization Screenshotsを オンにすれば― スクリーンショットが 作成されます

Test Plansがなければ― Scheme Editorでも取得できます

テストがスクリーンショット取得可能に なりました マーケティングにも有用です 販促チームに渡してもいいし― App Storeに載せてもいいでしょう

ドキュメントや チュートリアルにも使えます

より重要なことは― 必要なコンテキストを ローカライザーに渡すことです

例を見ましょう

“Start”という語は 動詞で“始める”ですが― “始まり”という 名詞の時もあります 微妙な違いですが 他言語では 大きくずれる場合があります

これは日付のラベルなので 名詞ですね

ローカライザーに 視覚的に伝えて― あいまいさを回避し 正確な処理を求めます

昨年はLocalization Catalogを 紹介しました

文字列と その他リソースの両方を― 通常は１ヵ所で ローカライズします

スクリーンショットなどの 情報を含む― Notesディレクトリも追加しました

さらに今年はカタログに スクリーンショットも入っています (拍手)

ローカリゼーションのエクスポート中に ワンクリックするだけです

Localization Catalog生成を 自動にすれば― includeScreenshotsの実引数を コマンドに追加するだけです

スクリーンショットの カスタマイズも可能です カタログにエクスポートした テスト対象や― デバイスや言語も 容易に特定できます

しかし UIの文字列を確認するには 数が多すぎるかもしれません そこでスクリーンショットと共に― 文字列を正確にマッピングする metadata.plistも生成します

このplistは Eclipseと同じIDと共に― 文字列の正確な場所を示す フレーム構成も含みます

これで文字列のマッピングが 容易になり― スクリーンショットで強調できます

カタログのエクスポートが 完了すれば― 新たなコンテンツが Notesに入ります metadata.plistは テスト対象に統合されます Xcode 11及びTest Plansでは― スクリーンショットを 簡単に動かせます (拍手) ヴィヴィアンに 実演してもらいましょう (拍手) アーサー　ありがとう ローカライズしたアプリケーションを テストしましょう

始めます 事前にUIのテストを いくつか作成しました 全部の画面を取り込むように 作っておくと― ローカライザーにコンテキストを 渡す時に役立ちます 別のテストでは パック旅行の画像の― 写真を取得し マーケティングに役立てます

サポートするものを 全部テストしたいけれど― 時間がない時に便利なのが Test Plansです プロジェクトに簡単に追加できます “File”“New File” テンプレートで“plan”を探します ありました 既存のテストの移行も可能です 事前に作ってきました ご覧ください

テスト対象が２つあります すべての画面でテストを 実行するものと― マーケティング画像を 取り込むものです コンフィギュレーション設定もします 重要なものは Shared Settings内です Localization Screenshotsを オンにします

１つは“英語 アメリカ” もう１つは “スウェーデン語 スウェーデン” 画像はフランス語なので フランス語も加えましょう “プラス”をクリック “フランス語 フランス”としましょう

ここでアプリケーション言語を フランス語に設定し― 地域をフランスに設定します

マーケティング画像を得るため テストを再試行し― ローカライズ済みの フランス語画像を得ます

先ほどのUIテストです テストのマークを クリックすると― 全部のコンフィギュレーションで実行 この様子は 実際に見ることができます 実行されるテストは３回 まず英語とスウェーデン語です まだローカライズの途中ですね 最後にフランス語で実行

アクセシビリティ識別子を 使っているので― ３言語すべてで テストできるはずです もう一度 試します

よかった　フランス語です

詳しく見ましょう

実行したテストは―

完了ですね フランス語を確認するために― 添付を見てみます 成功です マーケティングに利用できます

ローカライザーに送る スウェーデン語の更新がまだです 新しいLocalization Catalogを送り― 分かりにくい“start”も 正しく伝えます スクリーンショットも忘れずに 先ほどは全部の画面を 取り込みました スウェーデン語では―

“start”はどうなったでしょう？ 下のほうですね ありました “Start”と“End”は 英語のままですが― “Travelers”は翻訳済みです

フレーム情報を含むplistもあります

Localization Catalogの準備完了です “Project”“Editor”から エクスポートします 今回はスウェーデン語です “Include Screenshots”をクリック 19のスクリーンショットを 取得可能です 詳細を見ましょう “Customize”をクリック iPhone 8 Plus　iPhone XR iPhone XSでテストしました レイアウトが問題になる場合も ありますが― 今は全部 置いておきます

これでエクスポートの準備完了です

新しいLocalization Catalogを 見ると―

Notesに スクリーンショットが入りました テスト対象とデバイスごとに 整理されているのが分かります マーケティング用のものは 残して― 他は すべて ローカライザーに送ります

ここに すべての スクリーンショットがありますね

難しい“Start”の文字列も クリアです “Start”以上に難しい― “Book”が全部で３回 入っています フレーム情報を含むplistが― ここで役立ちます しかも統合plistなので― 全スクリーンショットが取り込んだ 文字列のフレーム情報を含みます

好きなローカリゼーションツールで カタログを開けるので便利です

これで文字列の表示位置を プレビューできます (拍手) 文字列が表示される 場所だけでなく― 全スクリーンショットの 表示も閲覧できます (拍手) ローカライザーが喜ぶでしょう

まとめましょう

システム言語と違う言語での アプリケーション実行方法を見ました ローカリゼーションツールは 大幅に改良されましたね Interface Builderファイルの 高速エクスポートや― stringsdictの新ルール Settingsバンドルのローカライズ アセットカタログ内での ローカライズも可能です

テストでのローカライズ済み スクリーンショットの生成法や― スクリーンショットの利用法を 紹介しました

developer.apple.comでも 情報が得られます 質問のある方は後でどうぞ

ありがとうございました (拍手)