チュートリアル: 言語スイッチャーコンポーネントの作成

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

大事な

前にアプリを統合した場合は、従来の ASP.NET Core Rendering SDKバージョン22以前を使用しています。このSDKは更新を受け取っていないため、新しいの最新バージョンにアップグレードすることをお勧めします。

このトピックでは、組み込みのASP.NET Coreローカリゼーションおよびルーティング機能を使用して、ASP.NET Coreレンダリングホストに言語切り替えコンポーネントを実装する方法について説明します。

メモ

このチュートリアルでは、MapSitecoreLocalizedRoute拡張機能を使用してルーティングエンドポイントを構成するか、レイアウトサービスから要求するアイテムパスを示すsitecoreRouteルート値と、目的の言語を示すcultureルート値を使用して構成することを前提としています。詳細については、「 Sitecoreレンダリングエンジン」を参照してください。

このチュートリアルでは、次の方法について説明します。

Viewコンポーネントの作成

この例では、ASP.NET Coreビューコンポーネントを使用して、言語スイッチャーのロジックとプレゼンテーションをカプセル化します。その後、アプリケーション内の関連する場所にビューコンポーネントを追加できます。

ビューコンポーネントを作成するには:

ASP.NET Coreベースのソリューションを作成して開始します。「はじめに」ガイドの説明に従ってください。
Visual Studioのrenderingプロジェクトで、Startup.csクラスを開きます。

手記

このクラスでは、依存関係の挿入を通じてASP.NET Core RequestLocalizationOptionsを言語スイッチャーで使用できるようにするために、いくつかの変更が必要です。

ConfigureServices方法で、次のローカリゼーション設定登録を追加して、この例ではドイツ語、英語、日本語の3つの言語と、Sitecore URLベースのカルチャ解決を有効にします。

// You need to configure localization options here so you can access them in your language switcher component
services.Configure<RequestLocalizationOptions>(options =>
{
    // If you add languages in Sitecore that this site/rendering host should support, then add them here.
    var supportedCultures = new List<CultureInfo> { new CultureInfo(_defaultLanguage), new CultureInfo("de-DE"), new CultureInfo("ja-JP") };
    options.DefaultRequestCulture = new RequestCulture(_defaultLanguage, _defaultLanguage);
    options.SupportedCultures = supportedCultures;
    options.SupportedUICultures = supportedCultures;

    // Resolve culture through the standard Sitecore URL prefix and query string (sc_lang).
    options.UseSitecoreRequestLocalization();
});

Configureメソッドで、既存のapp.UseRequestLocalizationの呼び出しを削除し、より単純な呼び出しに置き換えます。

// Enable ASP.NET Core localization, required for Sitecore content localization.
app.UseRequestLocalization();

renderingプロジェクトのModelsフォルダーに、言語スイッチャーの新しいモデルクラスを追加します。このクラスは、現在の言語と使用可能な言語を出力します。クラスに次のコードを追加します。

using System.Collections.Generic;
using System.Globalization;

namespace MyProject.Models
{
    public class LanguageSwitcherModel
    {
        public CultureInfo CurrentUICulture { get; set; }
        public List<CultureInfo> SupportedCultures { get; set; }
        public string CurrentSitecoreRoute { get; set; }
    }
}

renderingプロジェクトにViewComponentsという新しいフォルダを作成し、そのフォルダ内に新しいView Componentクラスを作成します。このクラスは、設定された言語、現在の言語、および現在のルートに基づいてモデルを設定します。クラスに次のコードを追加します。

 using MyProject.Models;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Localization;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Options;
 using System.Linq;
 using System.Threading.Tasks;

 namespace MyProject.ViewComponents
 {
     public class LanguageSwitcherViewComponent : ViewComponent
     {
         private readonly IOptions<RequestLocalizationOptions> _localizationOptions;

         public LanguageSwitcherViewComponent(IOptions<RequestLocalizationOptions> localizationOptions)
         {
             _localizationOptions = localizationOptions;
         }

         public async Task<IViewComponentResult> InvokeAsync()
         {
             var cultureFeature = HttpContext.Features.Get<IRequestCultureFeature>();
             var languageSwitcherModel = new LanguageSwitcherModel
             {
                 SupportedCultures = _localizationOptions.Value.SupportedCultures.ToList(),
                 CurrentUICulture = cultureFeature.RequestCulture.Culture,
                 CurrentSitecoreRoute = this.HttpContext.Request.RouteValues["sitecoreRoute"]?.ToString() ?? ""
             };
             return View(languageSwitcherModel);
         }
     }
 }

renderingプロジェクトで、コンポーネントのビュー用の新しいフォルダパスViews/Shared/Components/LanguageSwitcherを作成します。Default.cshtmlというフォルダー内にRazor Viewを作成します。このビューでは、モデルを使用して言語スイッチャーをレンダリングします。ビューに次のコードを追加します。

@model LanguageSwitcherModel

<ul id="language-switcher">
@foreach (var culture in Model.SupportedCultures)
{   
    <li>
    @if (Model.CurrentUICulture.Name == culture.Name)
    {
        <strong>@culture.DisplayName</strong>
    }
    else
    {
        <a asp-route-culture="@culture.Name" asp-route-sitecoreRoute="@Model.CurrentSitecoreRoute">@culture.DisplayName</a>
    }
    </li>
}
</ul>

Views/_ViewImports.cshtml Viewで、次の行を追加して、このプロジェクトのカスタムビューコンポーネントをタグヘルパーとして使用できるようにします。
@addTagHelper *, MyProject

言語スイッチャーをSitecoreロゴの下のViews/Default/Index.cshtml (デフォルトのビュー) に追加します。

<div id="Header">
    <img src="/img/sc_logo.png" alt="Sitecore" id="scLogo">
    <vc:language-switcher></vc:language-switcher>
</div>

レンダリングされたサイト(www.myproject.localhost)を更新して、変更を確認します。言語を切り替えることはできますが、ドイツ語や日本語などで利用できるコンテンツはまだありません。

大事な

エラーが発生した場合は、レンダリングホストログでコンパイルエラーを確認します。PowerShellで、「 docker-compose logs -f rendering」と入力します。

Sitecoreの言語とコンテンツを追加する

Sitecoreの言語とコンテンツを追加するには:

CM環境(cm.myproject.localhost)にログインし、Launchpadからコンテンツエディターを開きます。
/sitecore/system/languagesで、必要な言語 (ドイツ語 (ドイツ) や日本語 (日本)) を追加します。このプロセスでは、de-DEとja-JPの言語アイテムが作成されます。
/sitecore/content/MyProject/Home/Contentコンテンツアイテムに移動し、これらの新しい言語の言語バージョンを作成し、タイトルフィールドに次のような関連するコンテンツを入力します。
- ドイツ語： Hallo!
- 日本語： こんにちは
言語の追加とコンテンツの変更を公開します。
レンダリングしたサイトに移動します。言語を切り替えたときに、言語固有のコンテンツを表示できるようになりました。

言語項目のシリアル化を構成する (省略可能)

運用ソリューションでは、作成した言語項目をシリアル化モジュールに含める必要があります。 enアイテムはSitecoreですぐに使えるため、ルールを使用して無視できます。

言語項目のシリアル化を構成するには:

src\Items.module.jsonで、/sitecore/system/Languagesのインクルードを追加します。

  {
      "name": "languages",
      "path": "/sitecore/system/languages",
      "rules": [
          {
              "path": "/en",
              "scope": "ignored"
          }
      ]
  }

言語アイテムとサイトコンテンツへの変更をシリアル化するには、Sitecore CLIから dotnet sitecore ser pullを実行します。

この記事を改善するための提案がある場合は、お知らせください!