📑

Blazor Web App(.NET8)に多言語対応の機能を実装する。

2024/01/10に公開

はじめに

Blazorで作成したWEBアプリをグローバルに公開したいときに多言語対応、なかんずくアプリ上で設定するだけで簡単に言語切り替えを行いたいケースがあると思います。
本稿では、多言語対応の機能（言語データの準備と言語切り替え）について、ご紹介したいとお思います。

なお、本記事は下記のマイクロソフトのチュートリアルを参考としております。

本稿で作成したサンプルのGitHub

本稿で作成したサンプルはこちらに公開しておりますので、ぜひともご参考まで。

プロジェクト作成

フレームワークは最新の.NET8とします。
Visual Studioのプロジェクトで"Blazor Web App"のテンプレートを選択して、プロジェクトを新規作成します。
ここではプロジェクト名を"Blazor_LocaleTest"といたします。
Interactive render modeはServerといたします。

NuGetで"Microsoft.Extensions.Localization"のインストール

NuGetでインストールしてください。

リソースファイルの準備

初めに言語リソースファイルを作成しておきます。
今回は日本語、英語、中国語、フランス語の4か国語でやってみたいと思います。
ちなみには私は中国語とフランス語はわかりませんので、Google翻訳を使ってやります(汗)

"Resources"フォルダを作成して、その中に下図の4つのリソースファイルを作成してください。

なお、リソースファイルの内容は下記のようにしております。
参考までにリソースファイルの管理はResXManagerを使用しております。

_Imports.razorとProgram.csの編集

_Imports.razorに下記を追加します。

@using Microsoft.Extensions.Localization

Program.csに下記を追加します。
これはローカライズ機能とMVC機能の各ミドルウェアを登録し、4言語を使用することを意味します。


builder.Services.AddLocalization();
builder.Services.AddControllers();


var supportedCultures = new[] { "en-US", "ja-JP", "zh-CN", "fr-FR" };

var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture(supportedCultures[0])
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);


app.UseRequestLocalization(localizationOptions);

app.MapControllers();

編集後のファイルの内容は下記のようになります。

MVCコントローラの追加

Cookieに使用する言語、つまりデフォルトのカルチャを登録するためのMVCコントローラを作成します。

これはMicrosoftのチュートリアルにある内容をそのまま使用します。
"Components"フォルダに"Controllers"フォルダを作成します。
そのフォルダに"CultureController.cs"を作成します。

言語切り替え機能の実装

いよいよ最後にHome.razorに言語切り替えの機能を実装します。
簡易的に言語選択のプルダウンを配置して、それを選ぶことで"Hello"の文字が切り替わるようにします。

Home.razorの頭に下記の宣言をします。

@using System.Globalization
@rendermode InteractiveServer
@inject NavigationManager Navigation
@inject IStringLocalizer<Resources.Resource> Loc

Blazorでは、"IStringLocalizer<>"インターフェースがリソースファイルの内容を呼び出す機能を担当します。<>の中にはリソースのクラスを指定します。
インスタンス名を"Loc"とすると、@Loc["Hello"]と置くことで、カルチャに応じて"Hello"キーに対応するリソース文字列が呼び出されます。
Helloおよび言語選択のプルダウンは下記のようにHtmlで記述します。


<h1>@Loc["Hello"]</h1>

<div class="row pt-1">
    <select @bind="selectedCulture">
        @foreach (var cultureInfo in cultureInfos)
        {
            <option value="@cultureInfo.Name">@cultureInfo.DisplayName</option>
        }
    </select>
</div>

言語選択時にselectedCultureプロパティが呼び出されます。その処理の中でMVCコントローラへCookieのデフォルトカルチャの値を登録（書き換え）を行う指令を出すためにNavigation.NavigateToメソッドでページをリダイレクトを行います。


@code {

    private List<CultureInfo> cultureInfos = new();


    private CultureInfo selectedCulture
    {
        get => CultureInfo.CurrentCulture;

        set
        {
            if (CultureInfo.CurrentCulture != value)
            {
                var uri = new Uri(Navigation.Uri)
                    .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
                var cultureEscaped = Uri.EscapeDataString(value.Name);
                var uriEscaped = Uri.EscapeDataString(uri);

                Navigation.NavigateTo(
                    $"Culture/Set?culture={cultureEscaped}&redirectUri={uriEscaped}",
                    forceLoad: true);
            }
        }
    }

    protected override async Task OnInitializedAsync()
    {
        cultureInfos.Add(new CultureInfo("en-US"));
        cultureInfos.Add(new CultureInfo("ja-JP"));
        cultureInfos.Add(new CultureInfo("zh-CN"));
        cultureInfos.Add(new CultureInfo("fr-FR"));

    }
}

最終的なHome.razorの内容は下記のようになります。

動作確認

ビルドしてブラウザを立ち上げると、下の画面のようにプロダウンに連動して、Helloの文字が切り替わることが確認できます。