SwiftUIで多言語化に対応してプレビューで確認する

SwiftUIで多言語化対応したテキストを確認したかったのでその確認方法を記事にしようと思います。また多言語対応も行う度に調べてしまっていたので、改めて多言語対応の手順も振り返ってみることにしました。

環境

• Xcode 13.3

多言語化対応を行う

Localizationsを追加

Project > Info > Localozations の　+ボタンを押します。

追加できるLocalizationが沢山出てくるので、追加したいものを選択します。

今回は、Englishに加え、Japanese、Arabic、Italian を追加しました。

Localization.stringを追加

Xcodeの上部メニューバー File > New > File を押します。

表示された中からStrings.fileを選択します。

ファイルの名前は必ずLocalizable.stringsにしてください。

Localizable.stringsにLocalizationを追加

Localization.swiftを開いて、ユーティリティエリアにあるLocalize...を押します。

「このファイルをローカライズしたいですか？」と聞かれるので、まずEnglishを選択してLocalizeを押します。

すると、Localizable.stringsのユーティリティエリアのLocalizationに冒頭で追加したLocalizationが追加されました。先ほど、Englishを追加したので、Englishのチェックボックスは選択状態になっています。

今回は、Japanese、Arabic、Italian も追加するのでユーティリティエリアのLocalizationのチェックボックスを選択状態にします。

すると、Localizable.stirngsに各言語のリソースファイルが追加されました。

このファイルにKeyとValueを記述して、文字列の多言語化を行います。

Localizable.stringに記述する

Localizable.string (Japanese)

Key = Valueの形式なので、左がKey、右に実際に表示される文字列を記載します。末尾のセミコロン;を忘れてしまうと機能しないので忘れないようにしましょう。

"IWontDieBecauseILoveYou" = "僕は死にましぇん。あなたが好きだから";

その他の言語も同じように追加します。

Localizable.string (English)

"IWontDieBecauseILoveYou" = "I won't die because I love you";

Localizable.string (Arabic)

"IWontDieBecauseILoveYou" = "لن أموت لأنني أحبك";

Localizable.string (Italian)

"IWontDieBecauseILoveYou" = "Non morirò perché ti amo";

ローカライズされた文字列を使用する

UIKitの場合

例えば、UILabelのテキストをローカライズされた文字列に変更する場合はこのように記述します。

label.text = NSLocalizedString("IWontDieBecauseILoveYou", comment: "")

上記の第一引数は、Localizable.stringのKeyで第二引数のcommentは、ローカライズされた文字列に関するコンテキストを翻訳者に提供する為のもので描画されるものではありません。

SwiftUIの場合

TextにはText(LocalizedStringKey:)というローカライズの為のKeyをそのまま渡せるものがあるので、そのままTextにKeyを設定することが出来ます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("IWontDieBecauseILoveYou")
            .padding()
    }
}

プレビュー画面でローカライズされた文字列を確認する

SwiftUIのプレビューを使用すると容易に確認出来ます。

今回ローカライズした言語のidの配列でForEach処理を行い、.environment(\.locale,)にidを設定しています。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {

        let localizationIds = ["en", "ja", "ar", "it"]

        ForEach(localizationIds, id: \.self) { id in

            ContentView()
                .previewDisplayName("Localized - \(id)")
                .environment(\.locale, .init(identifier: id))
        }
    }
}

プレビュー結果

English	Japanese

Arabic	Italian

おまけ

利用可能なLocaleのId一覧の取得はLocale.availableIdentifiersから取得出来ます。

let identifiers = Locale.availableIdentifiers

おわりに

SwiftUIだと多言語対応した際の確認がとても容易な為、スムーズに開発を進めていけれそうだなと感じました！

この記事が誰かの助けになれば嬉しいです。

また今回調べたおかげでアラビア語で「僕は死にましぇん。あなたが好きだから」が「لن أموت لأنني أحبك」ということを学びました。使う機会があったら使おうと思います。

参考

• NSLocalizedString(_:tableName:bundle:value:comment:)
• 【Swift】Localeの使い方
• SwiftUIでアプリ表示を多言語化する方法