坂本 健一

坂本 健一

1654256160

.NET6でグローバリゼーションとローカリゼーションを実装する

グローバリゼーションとローカリゼーションとは何ですか？

グローバリゼーションとローカリゼーションは、特定の言語に縛られないようにアプリケーションアーキテクチャを設計する手法であり、いつでも手直しなしでより多くの言語を導入することができます。アプリケーションは言語に依存しないように設計されています。より正確に言うと、アプリケーションをグローバル化する場合、出力値を生の文字列としてハードコーディングするのではなく、キーを使用してテキストを識別します。ローカリゼーションの段階で使用できる重要なテキストまたは理解しやすいテキストとして、あらゆるものを識別できます。ローカリゼーションとは、グローバル化されたアプリケーションに加えて、さまざまな言語のサポートを追加することを意味します。グローバリゼーションがなければ、アプリケーションをローカライズすることはできません。一部のアクションを無視できる他の言語に変換できない場合は、例外が発生する可能性があります。また、  

このプロセスを展開するための最良の方法は上に示されています。

  1. 翻訳されたコンテンツを取得します。
  2. ハードコードされた値をキーにグローバル化します。
  3. リソースファイルを作成し、翻訳されたコンテンツを追加します。

グローバリゼーション

グローバリゼーションを実装するために、たとえば、アプリケーションの各テキストをキーに変換します。この値は、依存性注入としてIStringLocalizer <T>ローカライザーを使用して利用できます。ここで、Tは、リソースを作成するRazorコンポーネント名を表します。キーと値は、razorコンポーネントの.resxファイルとコードスニペットにあります。

価値鍵コードスニペット
こんにちは世界greet_helloローカライザー['greet_hello']
私たちに関してはtitle_aboutローカライザー['title_about']

たとえば、以下はIStringLocalizer <NavMenu>です。ローカライザーは依存関係として挿入され、値を取得するためにキー名を参照しています。

ローカリゼーション

ローカリゼーションを実装するには、MicrosoftExtensionLocalizationパッケージをインストールします。

<ItemGroup>
    <PackageReference Include="Microsoft.Extensions.Localization" Version="6.0.5" />
</ItemGroup>

Program.csに、ミドルウェアを追加します。

builder.Services.AddLocalization();

次に、言語とコンポーネントの組み合わせ用のリソースファイルを作成します。規則<ComponentName>。<language>.resxに従う必要があります

プロジェクト構造

リソースファイルNavMenu.fr-CA-resx

次に、ユーザーの好みに基づいて言語を選択します。これを実装するために、ユーザーが選択した言語をブラウザのlocalstorageに保存します。以下は、参照用の簡単なコンポーネントです。

LanguageSelector.razor

<ul>
@foreach(var lang in new string[] { "en-IN","hi","pa","fr-CA" })
{
    <li><a href="#" onclick="(localStorage.setItem('lang','@lang'),window.location.reload())();">@lang</a></li>
}
</ul>

ローカルストレージから言語を選択してアプリケーションで使用するには、最終的なコードは次のようになります。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorGlobalizationTutorial</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorGlobalizationTutorial.Client.styles.css" rel="stylesheet" />
<script>
//Function to get localizer language for webassembly C# code
    window.getCultureLang = () => {
        return window.localStorage['lang']
    };
</script>
</head>

<body>
    <div id="app">Loading...</div>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js" autostart="false"></script>
    <script>
//Function to get localizer language for application startup. If language is not set use ‘en-IN’
        let languageSet = (localStorage.getItem('lang') || 'en-IN');
        console.log(languageSet);
        Blazor.start({
            applicationCulture: languageSet
        });
    </script>
</body>
</html>

 Program.cs

using BlazorGlobalizationTutorial.Client;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using System.Globalization;
using Microsoft.JSInterop;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add < App > ("#app");
builder.RootComponents.Add < HeadOutlet > ("head::after");
builder.Services.AddScoped(sp => new HttpClient {
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
});
builder.Services.AddLocalization(); //Localizer added
var host = builder.Build();
/*Localizer setting start*/
var js = host.Services.GetRequiredService < IJSRuntime > ();
var lang = await js.InvokeAsync < string > ("getCultureLang");
CultureInfo.DefaultThreadCurrentCulture = string.IsNullOrWhiteSpace(lang) ? CultureInfo.CurrentCulture : new CultureInfo(lang);
CultureInfo.DefaultThreadCurrentUICulture = string.IsNullOrWhiteSpace(lang) ? CultureInfo.CurrentCulture : new CultureInfo(lang);
/*Localizer setting end*/
await host.RunAsync();

参考までに、アップロードされたコードを確認してください。読んでくれてありがとう。 

このストーリーは、もともとhttps://www.c-sharpcorner.com/article/implement-globalization-and-localization-in-net-6-and-blazor-webassemly-app2/で公開されました。

#global #localization #dotnet #blazor 

What is GEEK

Buddha Community

.NET6でグローバリゼーションとローカリゼーションを実装する
坂本 健一

坂本 健一

1654256160

.NET6でグローバリゼーションとローカリゼーションを実装する

グローバリゼーションとローカリゼーションとは何ですか？

グローバリゼーションとローカリゼーションは、特定の言語に縛られないようにアプリケーションアーキテクチャを設計する手法であり、いつでも手直しなしでより多くの言語を導入することができます。アプリケーションは言語に依存しないように設計されています。より正確に言うと、アプリケーションをグローバル化する場合、出力値を生の文字列としてハードコーディングするのではなく、キーを使用してテキストを識別します。ローカリゼーションの段階で使用できる重要なテキストまたは理解しやすいテキストとして、あらゆるものを識別できます。ローカリゼーションとは、グローバル化されたアプリケーションに加えて、さまざまな言語のサポートを追加することを意味します。グローバリゼーションがなければ、アプリケーションをローカライズすることはできません。一部のアクションを無視できる他の言語に変換できない場合は、例外が発生する可能性があります。また、  

このプロセスを展開するための最良の方法は上に示されています。

  1. 翻訳されたコンテンツを取得します。
  2. ハードコードされた値をキーにグローバル化します。
  3. リソースファイルを作成し、翻訳されたコンテンツを追加します。

グローバリゼーション

グローバリゼーションを実装するために、たとえば、アプリケーションの各テキストをキーに変換します。この値は、依存性注入としてIStringLocalizer <T>ローカライザーを使用して利用できます。ここで、Tは、リソースを作成するRazorコンポーネント名を表します。キーと値は、razorコンポーネントの.resxファイルとコードスニペットにあります。

価値鍵コードスニペット
こんにちは世界greet_helloローカライザー['greet_hello']
私たちに関してはtitle_aboutローカライザー['title_about']

たとえば、以下はIStringLocalizer <NavMenu>です。ローカライザーは依存関係として挿入され、値を取得するためにキー名を参照しています。

ローカリゼーション

ローカリゼーションを実装するには、MicrosoftExtensionLocalizationパッケージをインストールします。

<ItemGroup>
    <PackageReference Include="Microsoft.Extensions.Localization" Version="6.0.5" />
</ItemGroup>

Program.csに、ミドルウェアを追加します。

builder.Services.AddLocalization();

次に、言語とコンポーネントの組み合わせ用のリソースファイルを作成します。規則<ComponentName>。<language>.resxに従う必要があります

プロジェクト構造

リソースファイルNavMenu.fr-CA-resx

次に、ユーザーの好みに基づいて言語を選択します。これを実装するために、ユーザーが選択した言語をブラウザのlocalstorageに保存します。以下は、参照用の簡単なコンポーネントです。

LanguageSelector.razor

<ul>
@foreach(var lang in new string[] { "en-IN","hi","pa","fr-CA" })
{
    <li><a href="#" onclick="(localStorage.setItem('lang','@lang'),window.location.reload())();">@lang</a></li>
}
</ul>

ローカルストレージから言語を選択してアプリケーションで使用するには、最終的なコードは次のようになります。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorGlobalizationTutorial</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorGlobalizationTutorial.Client.styles.css" rel="stylesheet" />
<script>
//Function to get localizer language for webassembly C# code
    window.getCultureLang = () => {
        return window.localStorage['lang']
    };
</script>
</head>

<body>
    <div id="app">Loading...</div>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js" autostart="false"></script>
    <script>
//Function to get localizer language for application startup. If language is not set use ‘en-IN’
        let languageSet = (localStorage.getItem('lang') || 'en-IN');
        console.log(languageSet);
        Blazor.start({
            applicationCulture: languageSet
        });
    </script>
</body>
</html>

 Program.cs

using BlazorGlobalizationTutorial.Client;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using System.Globalization;
using Microsoft.JSInterop;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add < App > ("#app");
builder.RootComponents.Add < HeadOutlet > ("head::after");
builder.Services.AddScoped(sp => new HttpClient {
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
});
builder.Services.AddLocalization(); //Localizer added
var host = builder.Build();
/*Localizer setting start*/
var js = host.Services.GetRequiredService < IJSRuntime > ();
var lang = await js.InvokeAsync < string > ("getCultureLang");
CultureInfo.DefaultThreadCurrentCulture = string.IsNullOrWhiteSpace(lang) ? CultureInfo.CurrentCulture : new CultureInfo(lang);
CultureInfo.DefaultThreadCurrentUICulture = string.IsNullOrWhiteSpace(lang) ? CultureInfo.CurrentCulture : new CultureInfo(lang);
/*Localizer setting end*/
await host.RunAsync();

参考までに、アップロードされたコードを確認してください。読んでくれてありがとう。 

このストーリーは、もともとhttps://www.c-sharpcorner.com/article/implement-globalization-and-localization-in-net-6-and-blazor-webassemly-app2/で公開されました。

#global #localization #dotnet #blazor