SPEAK 3アプリケーションをSitecoreと統合する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
SPEAK 3アプリケーションはAngularアプリケーションです。これらはSitecoreとは独立して動作可能です。しかし、SPEAK 3の目的は、SitecoreブランドのAngularアプリケーションをSitecore CM(コンテンツ管理)サーバーおよびSitecoreユーザーインターフェースと簡単に統合できるようにすることです。
Sitecoreの統合は複数の分野に影響を与えます。これらの分野を説明するトピックは ここに記載されています。
このトピックでは、SPEAK 3のSitecore統合機能を活用できるように開発環境を構築する方法について説明します。
NgScModule(複合モジュール)を使用したベース構成
NgScModule Angularモジュールには以下のSitecore統合機能が含まれています:
- Sitecoreのコンテキスト
- 応用向け翻訳
- SPEAK 3コンポーネントライブラリの翻訳
- コンポーネントユーザーアクセス認可
- クロスサイト間のリクエスト偽造防止(Anti-CSRF)
フィーチャーモジュールを自分でインポートする必要はありません。
依存関係
NgScModuleモジュールはngx-translateに依存しており、SPEAK 3はアプリケーションでの翻訳にngx-translateを提供しています。セットアップを容易にするために、NgScModuleモジュールはngx-translateの設定とエクスポートを行います。
構成
Sitecore統合の設定には以下の手順に従ってください:
-
モジュールの設定:
// imports
import { NgScModule } from '@speak/ng-sc'; import { CONTEXT, DICTIONARY } from '@speak/ng-bcl';
// App module imports
@NgModule({ imports: NgScModule.forRoot({ contextToken: CONTEXT, // Provide Sitecore context for SPEAK 3 Components (optional) dictionaryToken: DICTIONARY, // Provide translations for SPEAK 3 Components (optional) translateItemId: '0C979B7C-077E-4E99-9B15-B49592405891', // ItemId where your application stores translation items (optional) authItemId: '1BC79B7C-012E-4E9C-9B15-B4959B123653' // ItemId where your application stores user access authorization (optional) }) ,
declarations: AppComponent, bootstrap: AppComponent })
export class AppModule { }
!注translateItemIdとauthItemIdのアイテムIDをSitecoreインスタンスの実際の値に変更する必要があります。
-
アプリケーションが初期化されるときにNgScServiceを初期化してください:
// app.component.ts
import { Component, OnInit } from '@angular/core'; import { NgScService } from '@speak/ng-sc';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: './app.component.css' })
export class AppComponent implements OnInit {
constructor( private ngScService: NgScService ) {} ngOnInit() { this.ngScService.init(); } }
シングルモジュールを用いた高度な構成
以下のトピックでは、個別モジュールを個別に含めたい場合は、どのように使うかを説明します。