💗

【SwiftUI】アプリを多言語化(ローカライズ・外国語対応)する

2023/05/18に公開

日本語表示で作成したアプリ[1]を、英語にも対応する手順を示します。

  • 開発環境
    XCode 14.2

Localizationsの追加

[PROJECT]セクションのアプリ名を選択 -> [Info]タブ -> [Localizations]タブ内の[+]をクリックして[Japanese(ja)]を選択
英語と日本語以外も対応する場合は、同様に全ての言語を追加する

コードの多言語化

Localizable.stringsファイルの追加

ナビゲータエリア下部の[+] -> [New File]を選択 -> [iOS]の[Resource]カテゴリ内の、[Strings File]を選択 -> [Next]ボタン

[Save As]に[Localizable]と入力 -> [Create]ボタン
※必ず名称はLocalizableとする必要があります。

ナビゲータエリアで[Localizable.strings]を選択

-> 画面右側のファイルインスペクタの[Localize]ボタンをクリック

-> [English]を選択し[Localize]をクリック

[Japanese]にもチェックを入れる

ナビゲータエリアに、[Localizable (English)]と[Localizable (Japanese)]が追加されていることを確認

英語と日本語以外も対応する場合は、同様に全ての言語を追加する

Localizable.stringsへのキー名と文字列の定義

Localizable.stringsの書式
"キー名" = "ローカライズされた文字列";

各言語ごとのLocalizable.stringsへ、上記の書式で記入していきます。
日本語表示で作成したアプリ[1:1]を例にします。

Localizable.strings(Japanese)
"KEY_INPUT_NAME"     = "こちらに名前を入力してください";
"KEY_NAME_TO_6CHARS" = "名前は6文字以内である必要があります。";
"KEY_NEXT"           = "次のページへ";
Localizable.strings(English)
"KEY_INPUT_NAME"     = "Enter Name.";
"KEY_NAME_TO_6CHARS" = "Name must be up to 6 characters.";
"KEY_NEXT"           = "Go to the next page.";

おまけ 後に文字列を変更しやすくする

日本語と英語に対応する時、上記のLocalizable.stringsファイルの追加で、[English]のローカライズしか行わず(Japaneseを行わない)、ソースコード内に直書きされた日本語を[キー名]にして、下記のように記述する方法を紹介していることがあります。
下記の例では、"こちらに名前を入力してください"が[キー名]になっています。

Localizable.strings
"こちらに名前を入力してください" = "Enter Name.";
//"キー名"                   = "ローカライズされた文字列";   ←書式

しかしこの方法だと、ソースコード内で日本語の文字列(上記の例では、"こちらに名前を入力してください")を変更した場合に、各言語のLocalizable.stringsの[キー名]自体を変更しなければならず間違いも起こりやすくなるので、私はこの方法は使いませんでした。

こちらの方法を用い、文字列を変更する場合はキー名を変更せずに文字列だけを変更するようにすると、変更箇所が少なくて済み間違いも防ぎやすいです!

コードの文字列を[キー名]に書き換え

ソースコード[1:2]のTextの日本語の文字列の部分を、[キー名]に書き換えていきます。

【Before】ContentView.swift
struct ContentView: View {
    @State var name = ""
    
    var body: some View {
        VStack {
            Text("こちらに名前を入力してください")       //書き換え前:日本語の文字列
                .font(.title2)
            Text("名前は6文字以内である必要があります。") //書き換え前:日本語の文字列
            
	    ...
            
            Button(action: {
                //ボタンが押された際の動作
            }) {
                Text("次のページへ")            //書き換え前:日本語の文字列
                    .padding(.all)
                    .background(Color.yellow)     
            }
        }
    }
}
【After】ContentView.swift
struct ContentView: View {
    @State var name = ""
    
    var body: some View {
        VStack {
            Text("KEY_INPUT_NAME")             //書き換え後:キー名
                .font(.title2)
            Text("KEY_NAME_TO_6CHARS")             //書き換え後:キー名
            
	    ...
            
            Button(action: {
                //ボタンが押された際の動作
            }) {
                Text("KEY_NEXT")             //書き換え後:キー名
                    .padding(.all)
                    .background(Color.yellow)     
            }
        }
    }
}

言語設定が日本語と英語設定の場合でそれぞれ下記のような表示となり、多言語化できました♪

[キー名]が表示されてしまう場合

上記のように文字列の部分を[キー名]に書き換えても、表示でローカライズされた文字列に置き換わらず、[キー名]がそのまま表示されてしまうことがありました。
変数にSTRING型を使っている場合などです。
こちらについては、別記事に記述します。

文字列に変数・定数を使う場合

文字列に変数・定数を使ったり、動的に変更する場合についても、別記事に記述します。

アプリ名とInfo.plistファイルの多言語化

InfoPlist.stringsファイルの追加

ナビゲータエリア下部の[+] -> [New File]を選択 -> [iOS]の[Resource]カテゴリ内の、[Strings File]を選択 -> [Next]ボタン

[Save As]に[InfoPlist]と入力 -> [Create]ボタン
※必ず名称はInfoPlistとする必要があります。

ナビゲータエリアで[InfoPlist.strings]を選択

-> 画面右側のファイルインスペクタの[Localize]ボタンをクリック

-> [English]を選択し[Localize]をクリック

[Japanese]にもチェックを入れる

ナビゲータエリアに、[InfoPlist (English)]と[InfoPlist (Japanese)]が追加されていることを確認

英語と日本語以外も対応する場合は、同様に全ての言語を追加する

InfoPlist.stringsへのアプリ名やInfo.plistの文字列定義

このように定義します。

InfoPlist.stringsの書式
CFBundleDisplayName = "アプリ名";

Info.plistの決められたキー名 = "文字列";

各言語ごとのInfoPlist.stringsへ、上記の書式で記入していきます。

例えば、このような感じです。

Localizable.strings(Japanese)
CFBundleDisplayName = "さくひんばこ";

NSCameraUsageDescription = "作品の写真を撮影するためにカメラを利用します。";
NSPhotoLibraryUsageDescription = "フォトライブラリにも撮影した写真を保存します。";
NSUserTrackingUsageDescription = "「許可」の選択をしていただくことで、あなたに合わない広告を表示しにくくできます。";
Localizable.strings(English)
CFBundleDisplayName = "KidsArtKeep";

NSCameraUsageDescription = "Camera is used to take photos. ";
NSPhotoLibraryUsageDescription = "Save photos to the Photo Library as well. ";
NSUserTrackingUsageDescription = "By selecting the 'Allow' option, you will be less likely to see advertisements that do not suit you. ";

プレビューで複数の言語を確認

下記のように記述することで、複数の言語のプレビューを確認できます。

ContentView.swift
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environment(\.locale, Locale(identifier: "en"))
        ContentView()
            .environment(\.locale, Locale(identifier: "ja"))
    }
}

参考

https://zenn.dev/sakutech/articles/swiftui-localization
https://developer.apple.com/documentation/swiftui/preparing-views-for-localization

脚注
  1. こちらの簡単なアプリを例とします。
    ↩︎ ↩︎ ↩︎

Discussion