ウォークスルー

Viewコンポーネントを作成する

この例では 、ASP.NETコアビューコンポーネント を使って言語スイッチャーのロジックと表示をカプセル化しています。その後、アプリケーションの該当する場所にビューコンポーネントを追加できます。

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

1. Getting Startedガイドに記載されているように、ASP.NETコアベースのソリューションを作成・開始してください。

2. Visual Studioでは、renderingプロジェクトでStartup.csクラスを開いてください。

   !注このクラスには、依存注入を通じて言語切り替え者にASP.NETコアRequestLocalizationOptionsを利用可能にするためにいくつかの変更が必要です。

3. ConfigureServices方法では、以下のローカリゼーション設定登録を追加し、この例ではドイツ語、英語、日本語の3言語とSitecore URLベースの文化解決を可能にします。

   // You need to configure localization options here so you can access them in your language switcher component services.Configure(options => { // If you add languages in Sitecore that this site/rendering host should support, then add them here. var supportedCultures = new List { 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(); });

4. Configure方法では、既存のapp.UseRequestLocalization呼び出しを削除し、よりシンプルなものに置き換えます。

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

5. renderingプロジェクトのModelsフォルダに、言語スイッチャー用の新しいモデルクラスを追加します。このクラスは現在および利用可能な言語を出力します。クラスに以下のコードを追加します:

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

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

6. 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 _localizationOptions;

   public LanguageSwitcherViewComponent(IOptions localizationOptions) { _localizationOptions = localizationOptions; }

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

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

   @model LanguageSwitcherModel

   @foreach (var culture in Model.SupportedCultures) {
   • @if (Model.CurrentUICulture.Name == culture.Name) { @culture.DisplayName } else { @culture.DisplayName }
   }

8. Views/_ViewImports.cshtmlビューで、このプロジェクトのカスタムビューコンポーネントをタグヘルパーとして使用できるようにするために、次の行を追加してください:

   @addTagHelper *, MyProject

9. Sitecoreロゴの下に言語切り替え器をデフォルトビュー( Views/Default/Index.cshtml )に追加してください:

   

10. レンダリングされたサイト(www.myproject.localhost)をリフレッシュして変更点を確認してください。言語を切り替えることは可能ですが、例えばドイツ語や日本語のコンテンツはまだ利用できません。

!重要エラーが発生した場合は、レンダリングホストログでコンパイルエラーを確認してください。PowerShellで、次のように入力してください: docker-compose logs -f rendering。

Sitecoreの言語とコンテンツの追加

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

1. CM環境(cm.myproject.localhost)にログインし、Launchpadからコンテンツエディターを開きます。
2. /sitecore/system/languagesの下に、例えばドイツ語(ドイツ)や日本語(日本)などの言語を追加します。このプロセスでde-DEとja-JPの言語項目が作成されます。
3. /sitecore/content/MyProject/Home/Contentコンテンツ項目に移動し、これらの新しい言語の言語バージョンを作成し、タイトルフィールドに関連するコンテンツを入力します。例えば:
   • ドイツ語: ハロー!
   • 日本語: こんにちは
4. 言語の追加や内容の変更を公開してください。
5. レンダリングしたサイトに行ってください。言語を切り替えたときに言語固有のコンテンツを見ることができます。

言語項目のシリアライズ設定(任意)

本番環境では、作成した言語項目をシリアライズモジュールに含める必要があります。 en項目はSitecoreが付属しているため、ルールで無視できます。

言語項目のシリアライズを設定するには:

1. src\Items.module.jsonでは、/sitecore/system/Languagesを含む を加えます:

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

   }

2. 言語項目やサイト内容の変更をシリアライズするには、Sitecore CLIからdotnet sitecore ser pullを実行してください。