SwiftUI Appのローカライズ

SwiftUI Appをローカライズして、世界中のユーザが利用できるようにする方法を確認しましょう。スタイルやフォーマットを含む、SwiftUIの文字列をローカライズする方法を確認します。レイアウト、キーボードショートカットなどのタスクをSwiftUIに自動的に処理させることで時間を節約する方法を実演して、Xcode 13のローカリゼーションワークフローを紹介します。このセッションを最大限に活かしていただく、あるいはMarkdown言語、AttributedStringについて詳しく知りたい方は、WWDC21の「Foundationの新機能」をご確認ください。

リソース

関連ビデオ

WWDC22

Swift Packageプラグインを作成する

WWDC21

ダウンロード

私はSwiftUI Macチームのエンジニアのポールです後で同僚のケイトが加わり SwiftUIアプリをローカライズする方法について話してくれますご存知の方もいると思いますがFrutaアプリをサンプルに説明しますこのアプリによりスムージーのメニューを見たり注文したりレシピを見て自分で作ったりできます

ここでは私とケイトの母国語であるロシア語のローカリゼーションをアプリに追加します　良い練習例ですのでご自分のアプリで使ってみて下さい基本事項としてSwiftUIで文字列をローカライズし設計上のリスクを回避する方法についてお話します文字列とデータのスタイルとフォーマット及びキーボードショートカットのローカライズの改善点もお話します最後にケイトがデモを行い Xcodeのワークフローの ”改善”によりアプリのローカライズが非常に簡単になったことをお見せしますアプリケーションをローカライズする上で重要な事は UIの様々な文字列が翻訳者に公開され実行時に正しくレンダリングされることを知っておくことです SwiftUIを使うとメインバンドルでローカライズされた文字列が自動的に検索されるためこれが簡単になりますこの例ではロシア語の文字列ファイルの翻訳に基づき実行時に自動的にローカライズされる完了ボタンがあります文字列補間でも機能するため変数を文字列に埋め込むことができエクスポートされた文字列ファイルとカタログにおいて自動的にフォーマット指定子に変換されます Xcode 13の新機能は文字列の変数の型に基づきフォーマット指定子の型を自動推測することです制御を強める時テキストにはテーブル名とバンドルのオプション引数を追加できますこの例では材料関連の文字列を全て”材料” という別のテーブルに配置しましたスムージーの実際の材料とは別に　この文字列テーブルで ”材料”の語に対してバリアントを２つ設けスムージービューとレシピビューの２つのコンテキストに当てましたご覧の通りロシア語ではコンテキストに基づきこの２つの語を別の語に訳す必要があるからです文字列を整理する方法について詳しくは”ローカライズされた文字列を効率化” の回をご覧ください。テキストの最初の引数により全て機能します文字列リテラルを受け入れるビューとメソッドがあればこのタイプを利用してローカライズ可能にできますビューおよび関数に引数として渡されたリテラルは Xcodeのローカリゼーションエクスポート中に自動的に抽出されランタイムにバンドルからロードされます先のボタンの例のアプローチはビューの代わりにテキスト引数を受け入れさせるものです LocalizedStringKeyを使用し環境ロケールを指定すると一度に複数のロケールをプレビューできます NSLocalizedStringでロードした文字列を含むローカライズ後の文字列を全てプレビューするとスキームエディタで言語を変更することができます Xcode 13ではプロジェクトをエクスポートするとターゲットを全て作成しローカライズ可能な文字列を検出しますつまりXcodeはローカライズ可能なコンテンツを検出し抽出するという優れた作業ができるということです複数行の文字列を含むコードがあると想像してくださいローカライズ後のコンテンツの抽出にコンパイラを使用するため複数行の文字列リテラルも正しく解析されますではSwiftUIを使用しローカライズに適したレイアウトでアプリを簡単に作成してみましょう文字列検索と同様にSwiftUI のデフォルトのレイアウトはローカリゼーションを想定して設計されており追加の作業はほとんど必要ありませんコントロールとテキストはテキストをラップして長いラベルの言語によるクリップや切り捨てを防止しますこの場合　ロシア語でスムージーの名前が長いため２行目に折り返されています右から左へ読む言語の場合レイアウトは自動反転しますスクリーンショットではテーブルセルのレイアウトもタブバーの記号も反転していますまたデフォルトから変更してカスタマイズする場合も左寄だけでなくVStackから主要な配置を用いるなどローカリゼーションに適したオプションを用意しています次にアプリを作成する際に UIに表示されるローカライズされたテキストのスタイルを整えることもありますこのためマークダウンを利用してローカライズ可能な文字列のスタイルを整える機能を導入しましたこのためローカライズされた文字列へのスタイリングが大幅に簡略化され翻訳者は各言語に適したスタイリングを適用することができます例えばアラビア語にはイタリックの概念がないため英語の文字列で強調をした場合翻訳者は別の処理で強調をしますこの場合ロシア語の翻訳者は英語の意図と一致させるため文字列内の関連する単語の前後にマークアップを用いましたこのサポートは基本的に備わっていますが SwiftUIを使用するとスタイルされた文字列をテキストに直接投げるだけで簡単に表示できます詳しくは ”基本事項とSwiftUIの新機能”の回をチェックしてみて下さいアプリのローカライズでよく起こる事は言語と地域に適したフォーマット用いるということです使い易くTextとTextFieldと一体化した新規フォーマット APIを使うと　このタスクは実行可能です FrutaではUIの多くの場所でカロリー数を表示できます以前はフォーマット値を表示するために　このスライドに似た測定フォーマッターを作成する必要がありました現在は値の表示箇所に直接インラインで宣言的方法によりフォーマットを指定することができます前のスライドのコードよりも読み易いだけでなく効率も良くなります新規フォーマットAPIの詳細については”基本事項の新機能”の回をご覧ください最後にキーボードショートカットを見てみましょうこれを用いると初心者も熟練者もMacとiPadでのタスクを更に迅速に遂行できるようになります macOSとiPadOSの新機能によりSwiftUIアプリで定義したショートカットが自動調整されユーザーのアクティブキーボードレイアウトで入力可能になりました例えばお気に入りのリストにスムージーを追加したい場合 ”Command plus”と入力すると追加できますこれはコマンドキーとプラスキーの２つを押せば良い米国レイアウトで非常に良く機能しますリトアニア語のキーボードレイアウトではプラスキーを押すのは簡単ではありませんバッククォートキーと”シフトイコール”を押しますがこの組み合わせはコマンドキーを押している間は入力できません macOS MontereyとiPadOS 15 の再マッピング機能によりリトアニア語のキーボードレイアウトがアクティブな状況下では　このショートカットは”Command ž”に変更されショートカットを使ってお気に入りにスムージーを追加出来るようになりましたここがベストな箇所です開発者は何もしなくてもただ機能してくれるのですそれではケイトに代ります Xcode 13のローカリゼーションワークフローの改善点に加え　先程説明した内容と新規APIのデモを見せてくれますポール有り難うこんにちは　チームのエンジニアのケイトです SwiftUIアプリのローカライズの簡潔さを見てみましょう Frutaサンプルアプリです世界中の人々が母国語でスムージーを注文できるようにしたいと思います本日はロシア語のローカリゼーションを追加しますプロジェクトナビゲーターからプロジェクトに移動しプロジェクトエディターで ”Fruta”を選択し情報タブからローカリゼーションを追加します macOSに付属するローカリゼーションは全てアルファベット順にリストされています Xcode 12.5ではリスト下部の ”その他の言語”サブメニューに数百の言語と方言を追加してあります ”ロシア語”を選択します Xcode 13はSwiftコンパイラの新技術によりSwiftコードからの文字列抽出を大幅に簡素化しました

Frutaのビルド設定で”コンパイラを使用してSwift文字列を抽出する”が”はい”であることを確認します新規Swiftではデフォルトで有効となっていますが既存のプロジェクトの場合はこの設定をオプトインしますエクスポート後Xcodeはプロジェクト内のターゲットを全て作成しSwiftUIコードからLocalizedStringKeysを抽出しますエクスポート前にSwiftUI プレビューで疑似言語を用いローカライズ可能な文字列と見逃しを確認しますスキームエディターに移動しオプションタブからアプリの言語をクリックしますアプリがサポートする言語は全てこの上部にリストされていますが１番下のアクセント付き疑似言語を選択します

アクセント付き疑似言語は UIのソース文字列に様々なアクセント記号を付与します全ての材料が疑似ローカライズされています計量値はフォーマット化されているため別ですが StepperViewは疑似ローカライズされるはずですそれではやってみましょう StepperViewはラベル文字列を取り込みテキストビューに渡すSwiftUIビューですカスタムSwiftUIビューでは LocalizedStringKeyを使ってローカライズします出来ているか見てみましょう

完璧です！ローカライズ可能になったので複数形が適切に処理されるか見てみましょうこのコードは英語の ”スムージー”を複数形にしますが全ての単語や言語には対応していません stringsdictを使いましょう stringsdictファイルを使うと複数形に様々な訳を適用することができます Stringsdictの詳しい内容については”ローカライズされた文字列の効率化” のビデオをご覧ください

ここに準備したファイルをプロジェクトにドラッグして

ローカライズにマークします

エクスポートしてみましょう Xcode 12.5以降製品メニューからプロジェクトとワークスペースをインポート・エクスポート可能になりました Export Localizationsを選んでデスクトップに保存します

XcodeはプロジェクトとXcode ローカライズカタログを作成してロシア語に翻訳するためポールに送る準備をします詳しくはWWDC2018の ”Xcode10の新規ローカリゼーションワークフロー” の回をご覧ください

送信前にエクスポートされたものを見てみましょう Xcode 13以降Xcodeローカリゼーションカタログは更に利便性が高くなりました Finderでダブルクリックして Xcodeで開くだけですこれは非常に便利でアプリのローカライズ時　ローカライズ用コンテンツ送信前に文字列やスクリーンショットを確認する時　翻訳の修正時に使うことができます

エディタではローカライズする全ファイルを確認できますファイル選択により翻訳者と同様に全文字列が見れますキー　ソース文字列　翻訳コメントです全て良好な状態かどうかをざっと確認します問題点が数点見つかりましたまず”%lf Calories”の文字列をエクスポートしました地域によりカロリーの測定単位が異なるためこの文字列はフォーマット化する必要がありますこの修正にはコード変更の必要があります

文字列の代わりに文字列が抽出された NutritionFactViewで NutritionFacts構造体の計量型に”formatted”法を利用します食品カロリーの測定なのでワイドフォーマットの使用法を”食品”に設定しますこれで全地域の単位のフォーマットが処理されます簡単な修正でした文字列の確認に戻りましょう

翻訳者は変数名を見れないので”Buy recipe for %@” のような文字列は混乱させる可能性がありますレシピの購入か友達へのプレゼントなのか分かりません他にも曖昧な文字列がないか見てみましょう

”Favorite”は動詞とコメントがありますが”Favorites” は明らかに名詞なのでコメントを追加しますコードに両方のコメントを追加します

まず”レシピを購入する” の文字列を処理しましょう

出来ましたタブバー内の”Favorites” の文字列にコメントします

タブバーはラベルビューですコメント追加にはテキストビューでラベルを初期化します

このようなコメントの追加は高品質なローカリゼーションのために不可欠です翻訳者を混乱させたり推測させたりしてはいけません全て修正出来たと思います新たなカタログをエクスポートしてポールに送信します

速かったですねポールは翻訳者の Appleシリコンです彼が返信してきたものをちょっと見てみましょう

ここで翻訳が全てが見れますこれは追加したスムージーステッパのstringsdictです

インポートしてロシア語の表示を見てみましょう製品メニューに移動しローカリゼーションのインポートを選択しカタログを選択します

全文字列が完了済のはずです macOSのアプリをロシア語で処理実行してみましょうスキームをmacOSに言語をロシア語に変更します

実行してみましょう

ロシア語のアプリは素晴らしい出来です　スムージーもどれも美味しそうです材料と栄養価を全て見ることができますこれを注文してみましょう

素晴らしいサービスです

ローカライズは簡単なのでコード記述に集中できますアプリの開発で注意すべき重要な点をお伝えします LocalizedStringKeyはバンドル内でローカライズされた文字列を検索する SwiftUIの特別な型ですカスタムSwiftUIビューでローカライズの準備をします ”コンパイラを使用して Swift文字列を抽出”を有効にしてLocalizedStringKeys を抽出しますコードを国際化しマークダウンでスタイルを設定します

テキストを利用しコンテキストへのコメントを追加します

ご覧頂き有り難うございます別のWWDCもお楽しみください

[音楽]

1:34 - Text() with a string literal

Button(action: done) {
   Text("Done", comment: "Button title to dismiss rewards sheet")
}

1:58 - Text() with a string literal and interpolation

// RewardsCard.swift

Text("You are \(10 - totalStamps) points away from a free smoothie!")

2:06 - Text() with tableName

// RecipeView.swift
Text("Ingredients.recipe", tableName: "Ingredients", comment: "Ingredients in a recipe. For languages that have different words for \"Ingredient\" based on semantic context.")
Text("Ingredients.menu", tableName: "Ingredients", comment: "Ingredients in a smoothie. For languages that have different words for \"Ingredient\" based on semantic context.")

2:52 - Declare localizable attributes in a custom view

struct Card: View {
    var title: LocalizedStringKey
    var subtitle: LocalizedStringKey
    
    var body: some View {
        Circle()
            .fill(BackgroundStyle())
            .overlay(
                VStack(spacing: 16) {
                    Text(title)
                    Text(subtitle)
                }
            )
    }
}

Card(
    title: "Thank you for your order!",
    subtitle: "We will notify you when your order is ready."
 )

3:47 - Text() with multiline string literal

Text("""
        A delicious blend of tropical fruits and blueberries will
        have you sambaing around like you never knew you could!
        """,
        comment: "Tropical Blue smoothie description")

4:39 - Customize attributes

VStack(alignment: .leading) {
    Text(smoothie.title)
        .font(.headline)
    Text(ingredients)
}

5:13 - Using Markdown

// Smoothie.swift

Text("A refreshing blend that's a *real kick*!", comment: "Lemonberry smoothie description")

6:04 - Create a measurement formatter (prior to iOS 15)

let calories = Measurement<UnitEnergy>(
    value: nutritionFact.kilocalories, unit: .kilocalories)

static let measurementFormatter: MeasurementFormatter = {
    let formatter = MeasurementFormatter()
    formatter.unitStyle = .long
    formatter.unitOptions = .providedUnit
    return formatter
}()

Text(Self.measurementFormatter.string(from: calories))

Text("Energy: \(calories, formatter: Self.measurementFormatter)")

6:22 - Specify the format in a declarative manner (iOS 15)

let calories = Measurement<UnitEnergy>(
    value: nutritionFact.kilocalories, unit: .kilocalories)

Text(calories.formatted(.measurement(width: .wide, usage: .food)))

Text("Energy: \(calories, format: .measurement(width: .wide, usage: .food))")

6:53 - Specify a keyboard shortcut

struct SmoothieCommands: Commands {

    var body: some Commands {
        CommandMenu(Text("Smoothie", comment: "Menu title for smoothie-related actions")) {
            SmoothieFavoriteButton(smoothie)
                .keyboardShortcut("+")
        }
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。