【Blazor】ブラウザの言語設定に応じて表示テキストを切り替える

はじめに

Blazor Web Assembly (Blazor WASM) で生成した下記記事のソフトウェアをローカライズしました。

https://zenn.dev/lilytechlab/articles/ad5f0e747b11ea

ブラウザの設定言語に応じて言語が切り替わるようにしました。
すんなりいけるかと思ったのですが、検索すると色々な情報が出てきて混乱したので、最終的にできたやり方を残しておきます。

環境

• Blazor Web Assembly (Blazor WASM)
• .NET9

作業手順

1. Microsoft.Extensions.Localization をインストール

Nuget経由でインストールします。

https://www.nuget.org/packages/Microsoft.Extensions.Localization

2. リソースファイルを置くフォルダ作成

言語ごとにファイルを作成するので、まとめておくためのフォルダをプロジェクト内に作ります。
場所は任意で大丈夫です。
今回は Resources/Localization フォルダとします。

3. リソースファイル作成

作成したフォルダ内にリソースファイルを追加します。
ファイル名は任意で大丈夫です。
今回は AppLocalization.resx としました。

このリソースファイルに記載するのは、ユーザの設定言語がプロジェクト内に存在しない場合に表示されるフォールバック用の設定となります。
今回はこれを英語用のファイルとします。

次に日本語用のファイルを用意します。
同じフォルダ内に再度リソースファイルを追加します。
ファイル名は先程作成したものの末尾に .ja を付与したものとなります。

他にも言語を用意する場合は、同じように言語のサフィックスを付与したファイルを作っていくことになります。

4. ソースコードの自動生成設定

環境に合わせたリソースファイルを自動で読み込んでくれるコードを自動生成するように設定します。

AppLocalization.resx を開き、コード生成の設定を「コード生成なし」から「Public」に変更します。

すると、ソリューションエクスプローラでデザイナファイルが増えているのを確認できます。

他の方法

ここの手順は以下のようにしても良いようです。

1. 「3. リソースファイル作成」 の手順を行う前に AppLocalization.razor という空のrazorファイルを同じフォルダに追加
2. 「3. リソースファイル作成」 の手順を行う

私は自動生成されたコードが見えている方が安心感があるので、デザイナファイルを生成するやり方を選びました。

5. Localizationサービスを登録

Program.cs にLocalizationサービスを登録するコードを書きます。

Program.csでのLocalizationサービス登録コード

builder.Services.AddLocalization();

Mainメソッドの中はこんな雰囲気になります。

Program.cs

public static async Task Main(string[] args) {
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("#app");
    builder.RootComponents.Add<HeadOutlet>("head::after");

    builder.Services.AddLocalization();

    await builder.Build().RunAsync();
}

6. Import設定

_Imports.razor にLocalizationサービスと追加したリソースファイルから自動生成されるコードのNamespaceを追記します。
Resources.Localization の部分はリソースファイルを置いたフォルダと対応する階層となります。

_Imports.razor

@using Microsoft.Extensions.Localization
@using Resources.Localization

この時点でビルドが通ればここまでの設定はうまくいっています。

7. リソースファイルに書き込み

リソースファイルを開いてローカライズ対象の文字列を各言語で入力していきます。
これが一番面倒ですよね…。

8. ソースコード内のテキストをリソースファイルデータを参照するように書き換え

これも数が多いと面倒なのですが…。

razorファイル

コード上部に下記のコードを追記し、IStringLocalizer をDIで注入できるようにします。
Loc の部分はお好みで。

razorファイルでのIStringLocalizer注入方法

@inject IStringLocalizer<AppLocalization> Loc

テキストをハードコーディングしている場所を Loc["項目名"] と書き換えます。
インテリセンスが効かないのがとてもやり辛い…。

razor.csファイル

対応するrazorファイルで IStringLocalizer を注入している場合は、razor.csファイルでも同じように Loc["項目名"] と書き換えることができます。

razorファイルで IStringLocalizer を注入していない場合は、下記のコードをrazor.csファイルに追記して注入できるようにします。

IStringLocalizerのプロパティ注入

[Inject]
public required IStringLocalizer<AppLocalization> Loc { private get; init; }

その他のクラス

DIで生成されないクラスはrazor.csファイルのようにIStringLocalizerを注入することができません。
このため下記のような対応が必要となります。

• DIで生成されるクラスから渡してもらう
• Program.cs でサービス登録してDI対象に変更する

そのクラスがシングルトンで問題無い場合は、シングルトンとしてサービス登録するのが楽そうです。

Program.cs内のシングルトンサービス登録コード

builder.Services.AddSingleton<クラス名>();

動作確認

実行すると、テキスト表示が日本語に変わっています。

ブラウザの言語設定を変更してみます。
今回は日本語とフォールバック用言語（英語）しか用意していないので日本語以外の言語を優先するように設定すると英語に切り替わる筈です。
下図はChromeの言語設定画面です。

言語設定変更後、Webページをリロードすると…

英語に切り替わりました！

簡単に切り替えてテストしやすいのは嬉しいですね。

参考プロジェクト

今回ローカライズしたプロジェクトはGitHubに置いているので、必要に応じて参考にしてください。

https://github.com/lilytech-lab/MidiSevenBitsAndBytesConverter