当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。
承知しました
本サイトではWebサイトのエクスペリエンスを向上させるために、Cookieを使用しています。Cookieはブラウザの設定から無効にできます。本サイトで使用するCookieについては、プライバシーポリシーをご確認ください。

Blog

ブログ

開発者向け

KenticoCloudでのローカリゼーションの操作

By Bryan Soltis  

世界中の聴衆のために開発するとき、あなたは多言語を考えなければなりません。母国語でコンテンツを提示することは、視聴者とつながり、はるかに個人的な体験で情報を提供するのに役立ちます。最近、Kentico Cloudのアップデートをリリースして、データのローカリゼーションを可能にし、ほぼすべての言語でコンテンツを編集および保存できるようにしました。このブログでは、プロジェクト内でこの新しい機能を活用する方法を紹介します。


グローバルにビジネスを行う企業は、ローカライズされたコンテンツの価値を知っています。さまざまな文化の情報を提示することで、ユーザーエクスペリエンスをパーソナライズし、より個人的なレベルでユーザーと結び付けることができます。 Kentico EMS開発者はこの機能を何年も活用してきましたが、Kentico Cloudを選択することは、コンテンツを単一の言語に制限することを意味しました。今まで!

Kentico Cloudは定期的に、多くの場合隔週でメジャーアップデートを取得します。これはSaaSであるため、サービスを活用する既存のアプリケーションに影響を与えることなく、プラットフォームのすべてのユーザーに新しい機能を展開できます。最近、コミュニティから最も要望の多かった機能の1つであるKenticoCloudコンテンツの新しいローカリゼーションサポートを開始しました。この機能により、編集者はすべてKenticoCloudポータル内から複数の言語でコンテンツを作成および管理できます。 APIが更新され、開発者はすべての呼び出しに対して言語バリアントを指定できるようになりました。また、「デフォルト」言語にフォールバックするかどうか、いつフォールバックするかを決定するために設定できる構成があります。

このブログでは、この新機能を使用して多言語サイトを構築する方法を紹介します。 Kentico Cloudプロジェクトを構成し、コンテンツを定義および作成し、APIを利用して新しいデータを取得する方法について説明します。方法をお見せしましょう!

コンテンツの作成

私の最初のステップは、コンテンツを作成することでした。私の非常に素晴らしいデモのために、私は何か普遍的なものを考え出さなければなりませんでした。映画!誰もが見ていますが、国によってタイトルが違うことがよくあります。さて、私はアイデアを思いついたので、それは私のプロジェクトにありました。

デフォルトのコンテンツを作成する

Moviesという単純なコンテンツタイプを作成しました。要素については、タイトル、年、ジャンル、ポスター(画像用)、リンクを作成しました。

Kentico Kontent


コンテンツを定義した後、コンテンツアイテムを作成しました。もちろん、私は史上最高のクリスマス映画から始めました!

Kentico Kontent

言語バリアントの追加

デフォルトのコンテンツを作成した後、2つの新しい言語バリアントでプロジェクト構成を更新しました。

Kentico Kontent


クイックヒントに記載されているように、言語バリアントには任意の値を定義できます。バリアントは、実際にはコンテンツのバージョンの単なる識別子です。これは、カルチャコード、名前、またはその他の意味のある値を自由に入力できることを意味します。私のデモでは、チェコ語とフランス語の実際の文化コードを使用して、物事を整理しました。

バリアントごとに、デフォルト言語にフォールバックするかどうかを選択できることに注意してください。これは、コンテンツアイテムが新しいバリアントに翻訳されていない場合、APIは代わりにデフォルトの言語バージョンを返すことを意味します。サイトを構築するときは、必要な機能を正確に取得できるように、このことを念頭に置いてください。

ローカライズされたコンテンツの追加

バリアントを配置したら、ローカライズされたコンテンツを入力する準備が整いました。コンテンツアイテムごとに、言語バリアントを選択しました(新しいバリアントを定義した後に有効になる新しいドロップダウンを使用)。

Kentico Kontent


次に、バリアント固有の情報でコンテンツを更新しました。

Kentico Kontent


チェコ共和国が、ジョン・マクレーンの休日の歓声を広めるという壮大な物語である素晴らしさを認めているのを見てうれしかったです。

在庫の表示

コンテンツを更新した後、コンテンツインベントリを表示しました。この画面には、各コンテンツアイテムのステータスが表示されるため、翻訳が必要なアイテムを特定できます。言語バリアントのドロップダウンを使用して、バリアントを切り替えることもできます。

Kentico Kontent


私はファイトクラブとユージュアルサスペクツをフランス語に翻訳しなかったことに注意してください。はい、彼らはそこでそれらを見たと確信していますが、名前は同じで、デモするものが必要でした。

プロジェクトの作成

コンテンツが整ったので、サイトを作成する準備が整いました。出発点として、Kentico Cloud .NET CoreBoilerplateを選択しました。このプロジェクトにはすでに多くの優れた機能が組み込まれているため、簡単に選択できました。また、Kentico Cloud Code Generatorプロジェクトを活用して、サイトに含めるMovieクラスを作成しました。

Kentico Kontent


Kentico Cloud .NET Core Boilerplateプロジェクトの詳細については、こちらをご覧ください

コードの更新

プロジェクトとクラスを更新した後、コードに移動しました。ホームコントローラーで、インデックス関数を更新して、新しいムービーコンテンツタイプをプルしました。

 public async Task Index() { var response = await DeliveryClient.GetItemsAsync( new EqualsFilter('system.type', 'movie'), new OrderParameter('system.name') ); return View(response.Items); }


次に、プロジェクトを新しいムービー表示テンプレートで更新し、レイアウトを追加しました。

 

@Model.Title

@Model.Poster.First().Name
Name: @Model.System.Name
Year: @Model.Year
Genre: @Model.Genre.First().Name @if (Model.Link != null) {

Link }


私はサイトをテストして、すべてが正しく見えることを確認しました。

Kentico Kontent

多言語サポートの追加

サイトが正常に機能し、映画を見ることができることを確認した後、言語バリアントのサポートの追加に移りました。これを行うには、ルーティング、ある種の言語セレクターを追加し、API呼び出しを更新する必要がありました。

私のStartUp.csで、次のマッピングを追加しました。このコードにより、URLの一部としてカルチャを指定できました。

 routes.MapRoute( name: 'cultureRoute', template: '{culture}/{controller}/{action}/{id?}', defaults: new { controller = 'Home', action = 'Index' }, constraints: new { culture = new RegexRouteConstraint('^[az]{2}(?:-[AZ]{2})?$') });


次に、非常に複雑な言語セレクターをIndex.cshtmlに追加しました。リンクはユーザーを同じページにリダイレクトし、言語バリアントを追加します。

 

Movies


最後に、カルチャコードを活用するために、ホームコントローラーのAPI呼び出しを更新しました。少しわかりやすくするために、 List オブジェクトを使用してフィルターを保持することにしました。次に、英語以外の言語バリアントを条件付きで設定します。

 public async Task Index() { List filters = new List(); filters.Add(new EqualsFilter('system.type', 'movie')); filters.Add(new OrderParameter('system.name')); // Check if a culture code is specified if(Request.Path != '/') { string strPath = Request.Path.ToString().Replace('/', '').ToLower(); filters.Add(new LanguageParameter(strPath)); filters.Add(new EqualsFilter('system.language', strPath)); } var response = await DeliveryClient.GetItemsAsync( filters ); return View(response.Items); }


API呼び出しのEqualsFilterに注意してください。このフィルターは、選択した言語に翻訳されたコンテンツアイテムのみを返すようにAPIに指示します。このフィルターが削除された場合、APIはコンテンツアイテムのデフォルト言語バージョンにフォールバックします。

テスト

コンテンツとコードを配置したら、サイトをテストする準備が整いました。まず、文化を指定せずにサイトにアクセスし、英語版が表示されていることを確認しました。さらに、非常に優れた言語セレクターが表示されていることを確認しました。

Kentico Kontent


次に、チェコ語のリンクをクリックして、コンテンツが正しく読み込まれたことを確認しました。

Kentico Kontent


最後になりましたが、私はそれらのタイトルを見るためにフランス語を選択しました。

Kentico Kontent


API呼び出しにEqualsFilterがあるため、リストはフランス語に翻訳されたコンテンツアイテムのみにフィルターされます。

前進する

多言語コンテンツは、あらゆるグローバルサイトにとって重要な要素です。 Kentico Cloudを使用すると、複数の言語でコンテンツを簡単に構築できます。更新されたAPIを使用すると、必要な言語バリアントをすばやく取得し、デフォルト言語にフォールバックする方法とタイミングをカスタマイズできます。このブログが、始めるのがいかに簡単で、多言語サイトをすぐに使い始めるのに役立つかを示してくれることを願っています。がんばろう!

ソースコードを見る

Kentico Cloudでのローカリゼーションについて詳しくは、こちらをご覧ください

Headless CMSの導入をお考えでしょうか?

クラウドとマルチデバイスに最適化されたKentico Kontentをお試しください