ASP.NET Core.

코어 MVC 내장 기능을 갖춘 ASP.NET 다국어 전환

페이지 업데이트 :
페이지 생성 날짜 :

환경

Visual Studio
  • Visual Studio 2019
ASP.NET Core
  • 3.0
  • 3.1

처음에

ASP.NET Core MVC 지역화 기능을 사용 하 여 다 언어를 전환 하 여 표시 합니다.

번역 된 텍스트의 리소스 파일 만들기

텍스트를 관리 하는 리소스 파일 (Resx)을 저장할 폴더를 만듭니다. 장소는 어디 든 상관 없지만, 루트 바로 아래에 둡니다. 이 경로는 나중에 설정에도 영향을 줍니다.

프로젝트를 마우스 오른쪽 단추로 클릭 하 고 「 추가 」 「 새 폴더 ― 」을 선택 합니다.

image

폴더 이름은 「 Resources 」에 둡니다. 이 폴더 이름은 임의로 설정할 수 있지만 나중에이 폴더의 이름을 지정할 수 있습니다.

image

연속적으로 각 언어의 텍스트를 입력 하 여 리소스 파일을 만듭니다.

「 Resources 」 폴더를 마우스 오른쪽 단추로 클릭 하 고 「 추가 」 「 새 항목 」을 선택 합니다.

image

리소스 파일 (.resx)을 선택 합니다. 파일 이름에 상관 없지만, 나중에 지정 된 이름과 일치 해야 합니다. 여기에서는 「 SharedResource.resx 」 라고 합니다.

image

.Resx 파일을 만든 후에 두 번 열고 텍스트를 식별 하는 이름으로 진짜로 표시할 텍스트를 입력 합니다. 「 SharedResource.resx 」 파일이 해당 언어가 존재 하지 않은 경우에 사용 되는 파일 이지만, 이 문서에서는 일본어를 입력 합니다. 영어 등 다른 언어를 기본으로 하 고 싶다면 해당 언어로 입력 하십시오.

여기서는 예제로 서 「 Hello 및 Goodbye 」를 입력 합니다. 대/소문자를 구분 하지 유의 하십시오.

image

다른 언어의 리소스 파일을 만듭니다. 언어를 식별 하는 파일 이름을 SharedResource. <カルチャコード> .resx 같이 지정 합니다. 문화권 코드는 ISO 639와 ISO 3166의 둘 중 하나 또는 둘 다 지정할 수는 있지만, 해당 코드는 언제 든 지 변경 될 수 있으므로 Microsoft 사이트의 CultureInfo 클래스 페이지를 참조 하십시오.

이번에는 en (영어)와 es (스페인어)를 제공 합니다. 일본어는 기본으로 하 고 있기 때문에 제공 하지 않습니다.

image

각각의 파일에 키를 모든 파일에 통합 된 상태에서 번역 한 텍스트를 입력 합니다.

image

image

다음 클래스 정의 파일을 제공 합니다. 이것은 방금 만든 리소스 파일과 동일한 이름으로 만듭니다.

실제로는 클래스 이름만 맞추면 좋은 코드 파일 자체의 이름은 뭐 든 상관 없지만, 가능한 것과 같이 동일 합니다. 코드를 작성 하는 폴더는 어디에도 없습니다.

image

네임 스페이스를 프로젝트의 루트에 빈 클래스를 만듭니다.

namespace LocalizationText
{
  // クラス名は作成した .resx のファイル名と同じにする必要がある
  public class SharedResource { }
}

각 프로그램의 수정

Startup.cs

Startup.cs 를 수정 합니다. ConfigureServices 메서드를 다음과 같이 작성 합니다.

services. AddMvc(). AddViewLocalization 메서드가 있으면 뷰 쪽도 컨트롤러 쪽도 번역 된 텍스트를 얻을 수 있는지 확인 합니다, 공식 사이트에도 있듯이 services. AddLocalization 메서드를 사용 하 여 부르고도 문제는 없습니다.

options. ResourcesPath에 Resx 파일이 있는 폴더의 경로를 지정 합니다. 둘 다 지정 하지 않으면 services. AddMvc(). AddViewLocalization 메서드는 무시 됩니다.

public void ConfigureServices(IServiceCollection services)
{
  services.AddControllersWithViews();

  // Resx ファイルのあるフォルダを指定する。
  // コントローラー側でしか使用しないならこちらでもよい。AddViewLocalization を使用するならこちらはなくても動作する。
  //services.AddLocalization(options => options.ResourcesPath = "Resources");

  services.AddMvc()
    // ローカライズに必要。Resx ファイルのフォルダパスを指定
    .AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix, opts => { opts.ResourcesPath = "Resources"; });
}

연속적으로 Startup.cs 의 Configure 메서드를 수정 합니다. 리소스 파일을 로드 하는 경우에 이것은 필요 하지 않지만 사용자 측면에서 언어를 지정할 수 있도록 하는 데 필요한 코드입니다.

여기에서는 ASP.NET Core MVC에 내장 된 기능을 사용 하 고 있습니다. 다음과 같은 코드를 작성 하면 사용자 환경에 따라 「 쿼리 문자열 」 「 Cookie 」 「 Accept-Language HTTP 헤더 」 표시 언어를 전환할 수 있습니다. 실제 작동 하는 방법은 뒷부분에서 설명 합니다.

전환 가능한 언어는 여기에서 배열 (supportedCultures)로 지정 합니다. 기본 언어에 ja로 지정 하 고 있습니다만, 이번에 ja 파일은 생성 하지 않기 때문에 En, es 이외의 언어가 지정 되지 않으면 SharedResource.resx가 사용 됩니다.

UI와 지원 되는 언어를 구분할 수 있지만 분리 메리트는 별로 없기 때문에 동일한 언어를 지정 합니다.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  if (env.IsDevelopment())
  {
    // 省略
  }

  // 標準の機能で切り替えたい言語を定義します。
  var supportedCultures = new[]
  {
    new CultureInfo("ja"),
    new CultureInfo("en"),
    new CultureInfo("es"),
  };

  // 標準の言語切り替え機能を有効にします。対応しているのは「クエリ文字列」「Cookie」「Accept-Language HTTP ヘッダー」です。
  app.UseRequestLocalization(new RequestLocalizationOptions
  {
    DefaultRequestCulture = new RequestCulture("ja"),
    SupportedCultures = supportedCultures,
    SupportedUICultures = supportedCultures
  });

  app.UseHttpsRedirection();
  app.UseStaticFiles();

  // 省略
}

Controllers\HomeController.cs

Controllers\ HomeController.cs 파일입니다. 컨트롤러 쪽에 지역화 된 언어를 반환 하는 IStringLocalizer 생성자에서 받습니다. SharedResource 전에 만든 리소스 파일에는 클래스의 이름과 동일 해야 합니다. 받은 담당자가 ― 인덱서에 리소스 파일에 입력 된 키 문자열을 전달 하 여 텍스트를 검색할 수 있습니다. 어떤 언어 텍스트를 반환 하거나 요청 된 문화에 따라 결정 됩니다.

덧붙여 IStringLocalizer 외에 HTML을 그대로 검색할 수 있는 IHtmlLocalizer도 있습니다.

public class HomeController : Controller
{
  private readonly ILogger<HomeController> _logger;
  private readonly IStringLocalizer<SharedResource> _localizer;

  // DI でローカライザーを取得します。
  public HomeController(ILogger<HomeController> logger, IStringLocalizer<SharedResource> localizer)
  {
    _logger = logger;
    _localizer = localizer;
  }

  public IActionResult Index()
  {
    // ローカライザーを使用して設定されている言語のリソースファイルからテキストを取得します。
    ViewData["Message"] = _localizer["Goodbye"];

    return View();
  }

  // 省略
}

Views\_ViewImports.cshtml

Views\ _ViewImports .cshtml 파일입니다. 보기 옆에 확인을 사용 하려면 IHtmlLocalizer 를 삽입 하실 필요가 있습니다. 일단 아래와 같이 설명 하면 OK입니다. 이 쪽도 SharedResource 전에 만든 리소스 파일에는 클래스의 이름과 동일 해야 합니다.

IHtmlLocalizer는 Microsoft.AspNetCore.Mvc.Localization 네임 스페이스에 있으므로 이것도 using에 정의 해 둡니다.

로컬라이저를 정해진 곳 에서만 사용 하지 않을 경우 별도의 뷰 파일에 다음 코드를 설명 해야 하나요, _ViewImports .cshtml 파일을 작성 하면 자동으로 모든 파일에 사용할 수 있습니다.

@using LocalizationText
@using LocalizationText.Models
@using Microsoft.AspNetCore.Mvc.Localization
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@* ビュー側でローカライザーを使用できるように定義します *@
@inject IHtmlLocalizer<SharedResource> Localizer

Views\Home\Index.cshtml

Views\Home\Index.cshtml 파일입니다. 컨트롤러 쪽에서 얻은 텍스트 뷰 쪽에서 직접 가져온 텍스트를 표시 하도록 하 고 있습니다. 뷰 쪽 로컬라이저는 인덱서에 키 문자열을 지정 하 여 텍스트를 가져옵니다.

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@* ローカライザーから取得したテキストを表示します。 *@
<p>@Localizer["Hello"]</p>
<p>@ViewData["Message"]</p>

동작 확인

쿼리 문자열

URL의 쿼리 문자열에 현재 문화권 코드를 지정 하 여 표시 언어를 전환할 수 있습니다. 체재는 ? culture = <カルチャコード> 입니다. UI와 분리 원한다 면 ? culture = <カルチャコード>&ui-culture=<カルチャコード> 입니다.

다음은 아무것도 지정 하지 않은 경우입니다. 지정 하지 않은 경우에는 「 SharedResource.resx 」가 사용 됩니다. (실제로는 다른 결정이 적용 되어 있지만 ...)

image

? Culture = en 을 지정 하는 것입니다. 표시 언어를 영어입니다.

image

? Culture = es 를 지정 하는 것입니다. 표시 언어가 스페인어입니다.

image

? Culture = ja 를 지정 하는 것입니다. 원래는 SharedResource.ja.resx 파일이 사용 되지만 존재 하지 않기 때문에 SharedResource.resx가 사용 됩니다.

image

시도에 없는 언어를 지정 합니다. 이 쪽도 해당 파일이 없기 때문에 SharedResource.resx가 사용 됩니다.

image

Cookie

Cookie에 의해 표시 언어를 전환할 수 있습니다. 일반적으로 서버측에서 발급 하는 니다만, 이번에는 브라우저의 기능에 직접적으로 Cookie를 등록 합니다.

각 Web 브라우저에는 개발자 도구가 존재 하기 때문에이 도구를 사용 하 여 쿠키를 등록 합니다. 다음 그림에서는 Edge에서 F12 키를 눌러 개발자 도구를 표시 합니다.

해당 하는 쿠키의 이름은 . AspNetCore.Culture 이며, 언어를 지정 하는 값에는 C = <カルチャーコード>|uic=<カルチャーコード> 형식으로 입력 합니다. Cookie의 경우 UI 코드는 입력 필수 항목입니다. Cookie를 등록 하는 경우 Web 브라우저의 페이지를 업데이트 하 여 다시 표시 하십시오. 서버가 Cookie가 전달 됩니다 서버 쪽에서 해당 언어를 검색할 수 있습니다.

다음 그림에서는 c = en | uic = en 을 입력 하 여 영어를 볼 수 있습니다.

image

C = es | uic = es 를 입력 하 고 스페인어를 표시 하 고 있습니다.

image

Accept-Language HTTP 헤더

Accept-Language HTTP 헤더는 Web 브라우저에서 서버로 요청한 헤더 정보를 확인 하 여 그것에 맞게 언어를 전환 하는 기능입니다.

Web 브라우저의 설정에서 Accept-Language를 보낼 수 있지만, 기본적으로 OS의 언어 설정에 따라 Accept-Language를 보내도록 되어 있습니다. (실제로 전달 되는지 여부는 OS, Web 브라우저에 따라 달라 집니다. OS의 언어에 맞춰 Web 브라우저의 언어 기본 설정 된, 그러나 맞을 지도 모른다)

따라서 예를 들면 아래와 같이 영어 환경 OS의 Web 브라우저에서 페이지를 열면 en 정보가 전송 되기 때문에 자동으로 SharedResource.en.resx가 선택한 영어 나타날 수 있습니다.

image

한번 쿼리 문자열이 존재 하지 않는 언어를 지정한 경우 기본적으로 SharedResource.resx가 사용 되는 것 이지만, Accept-Language으로 en이 존재 하기 때문에 영어가 표시 됩니다.

image

쿼리 문자열에 ja를 지정한 경우 쿼리 문자열을 우선 하기 때문에 일본어를 표시 합니다.

image

요약

여기서는 가장 간단한 방법으로 다 언어 전환을 구현 해 보았습니다. 사용자 환경에 맞게 언어를 설정 하거나 해제 하려면 기본 표시 언어는 Accept-Language HTTP 헤더를 사용 하 여 사용자가 원하는 언어를 선택한 경우에는 Cookie를 추가 하거나 쿼리 문자열을 추가 (또는 입력) 하는 것이 좋습니다.

코어의 엔터티 프레임워크 코어를 사용하여 데이터베이스를 ASP.NET
매개 변수 이름, 입력 유효성 검사 메시지 등에 사용되는 DataAnnotations에 대한 다국어 지원