はじめに
Blazor Web Assembly (Blazor WASM) で生成した下記記事のソフトウェアをローカライズしました。
ブラウザの設定言語に応じて言語が切り替わるようにしました。
すんなりいけるかと思ったのですが、検索すると色々な情報が出てきて混乱したので、最終的にできたやり方を残しておきます。
環境
- Blazor Web Assembly (Blazor WASM)
- .NET9
作業手順
1. Microsoft.Extensions.Localization をインストール
Nuget経由でインストールします。
2. リソースファイルを置くフォルダ作成
言語ごとにファイルを作成するので、まとめておくためのフォルダをプロジェクト内に作ります。
場所は任意で大丈夫です。
今回は Resources/Localization フォルダとします。
3. リソースファイル作成
作成したフォルダ内にリソースファイルを追加します。
ファイル名は任意で大丈夫です。
今回は AppLocalization.resx としました。
このリソースファイルに記載するのは、ユーザの設定言語がプロジェクト内に存在しない場合に表示されるフォールバック用の設定となります。
今回はこれを英語用のファイルとします。
次に日本語用のファイルを用意します。
同じフォルダ内に再度リソースファイルを追加します。
ファイル名は先程作成したものの末尾に .ja を付与したものとなります。
他にも言語を用意する場合は、同じように言語のサフィックスを付与したファイルを作っていくことになります。
4. ソースコードの自動生成設定
環境に合わせたリソースファイルを自動で読み込んでくれるコードを自動生成するように設定します。
AppLocalization.resx を開き、コード生成の設定を「コード生成なし」から「Public」に変更します。
すると、ソリューションエクスプローラでデザイナファイルが増えているのを確認できます。
他の方法
ここの手順は以下のようにしても良いようです。
-
「3. リソースファイル作成」 の手順を行う前に
AppLocalization.razorという空のrazorファイルを同じフォルダに追加 - 「3. リソースファイル作成」 の手順を行う
私は自動生成されたコードが見えている方が安心感があるので、デザイナファイルを生成するやり方を選びました。
5. Localizationサービスを登録
Program.cs にLocalizationサービスを登録するコードを書きます。
builder.Services.AddLocalization();
Mainメソッドの中はこんな雰囲気になります。
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 の部分はリソースファイルを置いたフォルダと対応する階層となります。
@using Microsoft.Extensions.Localization
@using Resources.Localization
この時点でビルドが通ればここまでの設定はうまくいっています。
7. リソースファイルに書き込み
リソースファイルを開いてローカライズ対象の文字列を各言語で入力していきます。
これが一番面倒ですよね…。
8. ソースコード内のテキストをリソースファイルデータを参照するように書き換え
これも数が多いと面倒なのですが…。
razorファイル
コード上部に下記のコードを追記し、IStringLocalizer をDIで注入できるようにします。
Loc の部分はお好みで。
@inject IStringLocalizer<AppLocalization> Loc
テキストをハードコーディングしている場所を Loc["項目名"] と書き換えます。
インテリセンスが効かないのがとてもやり辛い…。
razor.csファイル
対応するrazorファイルで IStringLocalizer を注入している場合は、razor.csファイルでも同じように Loc["項目名"] と書き換えることができます。
razorファイルで IStringLocalizer を注入していない場合は、下記のコードをrazor.csファイルに追記して注入できるようにします。
[Inject]
public required IStringLocalizer<AppLocalization> Loc { private get; init; }
その他のクラス
DIで生成されないクラスはrazor.csファイルのようにIStringLocalizerを注入することができません。
このため下記のような対応が必要となります。
- DIで生成されるクラスから渡してもらう
-
Program.csでサービス登録してDI対象に変更する
そのクラスがシングルトンで問題無い場合は、シングルトンとしてサービス登録するのが楽そうです。
builder.Services.AddSingleton<クラス名>();
動作確認
実行すると、テキスト表示が日本語に変わっています。
ブラウザの言語設定を変更してみます。
今回は日本語とフォールバック用言語（英語）しか用意していないので日本語以外の言語を優先するように設定すると英語に切り替わる筈です。
下図はChromeの言語設定画面です。
言語設定変更後、Webページをリロードすると…
英語に切り替わりました！
簡単に切り替えてテストしやすいのは嬉しいですね。
参考プロジェクト
今回ローカライズしたプロジェクトはGitHubに置いているので、必要に応じて参考にしてください。
Discussion