1. SPEAK 3

Sitecoreのアイテムに保存された翻訳を活用してください

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

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

SPEAK 3の翻訳メカニズムはAngularのngx-translateサービスを使用しています。Sitecore項目で翻訳を定義でき、ngx-translateを設定してこれらの翻訳を取得し使用できるようにします。このためにSciTranslateLoaderサービスを使用します

このトピックでは、以下の方法を説明します:

Sitecoreインスタンスで翻訳を指定する

Sitecoreインスタンスで翻訳を指定するには:

  1. Speak3DictionaryFolderテンプレートを使って、アプリケーション項目の子として「Translations」という項目を作成します。「Translations」という名前は慣例に過ぎませんが、辞書は使用できません(その名前は予約されています)。
  2. 必要な翻訳ごとにSpeak3DictionaryEntryテンプレートに基づくアイテムを追加してください。これらすべての項目を翻訳項目の直接的な子として追加してください。これらの項目の キー フィールドにすべて大文字の値を入力することを推奨しました。
  3. TranslationsフォルダのアイテムIDに注目してください。これは後の設定のために必要です。

この方法では、サービスやngx-translateパイプを通常通り利用できるため、NgScModuleがこれらの機能をエクスポートします。

この例は基本的な用法を示しています:

import { Component } from '@angular/core'; import { NgScService } from '@speak/ng-sc'; @Component({ selector: 'app-translate-demo', template: `

Translate demo

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

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

Fish: {{ 'FISH' | translate }}
Pork: {{ 'PORK' | translate }}
Vegetables: {{ 'VEGETABLE' | translate }}
\` }) export class TranslateDemoComponent { // The currently active language. locale = 'en'; constructor( private ngScService: NgScService ) {} // This method will switch the active language. switchLocale(lang) { this.locale = lang; this.ngScService.switchLanguage(lang); } }

TranslateModuleモジュールを個別に設定してください

TranslateModuleモジュールを個別に設定するには、NgScModuleを使わない場合:

  • app.module.tsでは:

    import { HttpModule, Http } from '@angular/http'; import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { SciTranslateLoader, TRANSLATE_ITEM_ID } from '@speak/ng-sc/ngx-translate-loader'; // other imports here @NgModule({ imports: // other imported modules here HttpModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: SciTranslateLoader, deps: Http, TRANSLATE_ITEM_ID } }) , providers: { provide: TRANSLATE_ITEM_ID, useValue: '99228409-8417-4692-A5B9-E59CC8AC74B9' }

    }) export class AppModule { }

Angularアプリで翻訳を提供するためにngx-translateを使うことができます。 公式のngx-translateドキュメントに詳しい情報があります。

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