【Xcode】多言語化の方法を解説！プレビューの多言語化も紹介！

せっかく作ったアプリ、日本だけじゃなくて世界に配信したい！そんなふうに思ったことありませんか？

この記事では、 iOSアプリの

• 多言語化の方法
• 多言語プレビューの方法

を解説します！

世界に向けてアプリを配信したい人は、ぜひチェックしてください！

iOSアプリを多言語化（ローカライズ）するには？

「PROJECT」>「info」>「Localizations」で対応言語を追加する

iOSアプリを多言語化（ローカライズ）するには、まず最初にプロジェクtの設定に対応言語を追加します。

プロジェクトを選択し、「PROJECT」>「info」>「Localizations」の「+」ボタンから追加したい言語を選択できます。

ここでは「Japanese」を追加します。

String Catalogで各言語ごとの文字列を指定する

次に実際に各言語での文字列を指定するための「String Catalog」ファイルを追加します。

プロジェクトナビゲーターの適当なところを右クリックして、「New File from Template」からプロジェクトに「String Catalog」を追加できます。ファイル名はデフォルトの「Localizable」のままで大丈夫です。

追加された「Localizable.xcstrings」ファイルに各言語の文字列を設定していきます。

この設定は「Key-Value」型になっていて、Keyに対して各言語ごとのValueを追加していきます。

なお「Localizable.xcstrings」ファイルを追加したあとにビルドを実行すると、自動でプロジェクト内の文字列を検知して設定項目を追加してくれます。

もちろん手動で設定を追加することもできます。

例えば、以下のようなソースコードをビルドすると「Hello, world!」というKeyの設定項目が自動で追加されます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

ただし、各言語のValue（表示する文字列）の方は個別に設定する必要があります。

このように各言語を設定すると、上記のソースコードの”Hello, world!”部分がスマホの言語設定によって切り替わるようになります。

なお、私の環境だとプレビューのデフォルト言語は日本語になっているようで、日本語の内容が表示されます。

プレビューで各言語の動作確認をするには？

それぞれの言語の表示を確認する必要がある

多言語化をすると、それぞれの言語でちゃんと表示ができているか？をチェックする必要があります。

例えば、

• 文章の折り返しが変になっていないか？
• 文章がはみ出して見切れていないか？

などです。

このテストをするのに、毎回実機で言語設定を切り替えるなんてことをしているとすごく大変です。

そんなことをしなくても、Xcodeのプレビューで簡単にテストできるので、その方法をご紹介します。

ソースコードでプレビューにロケールを指定する

Xcodeのプレビューは複数作成することができ、ロケールを指定することもできます。

ソースコードを以下のように修正し、ロケールが英語(en)、日本語(ja)、フランス語(fr)のプレビューを表示します。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview("English") { // プレビューを見分けるために名前を追加
    ContentView()
        // ロケールを指定
        .environment(\.locale, .init(identifier: "en"))
}

#Preview("Japanese") {
    ContentView()
        .environment(\.locale, .init(identifier: "ja"))
}

#Preview("French") {
    ContentView()
        .environment(\.locale, .init(identifier: "fr"))
}

そうすると各言語設定でのプレビューを確認できます。

プレビューの切り替えはプレビュー画面の上部から選択できます。

なお、フランス語には個別の言語設定がない（ローカライズされていない）ため、デフォルトに指定している英語の文章が表示されます。