1. スピーク3

SPEAK 3アプリケーションをSitecoreと統合する

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

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

SPEAK 3アプリケーションはAngularアプリケーションです。これらはSitecoreとは独立して実行できます。ただし、SPEAK 3の目的は、SitecoreブランドのAngularアプリケーションをSitecore CM (コンテンツ管理) サーバーおよびSitecoreユーザー インターフェイスに簡単に統合できるようにすることです。

Sitecoreインテグレーションは、いくつかの領域に影響します。 ここでは、これらの領域について説明するトピックを示します。

このトピックでは、SPEAK 3 Sitecore統合機能を使用できるように開発環境を設定する方法について説明します。

NgScModule(複合モジュール)を使用した基本構成

NgScModule Angularモジュールには、次のSitecore統合機能が含まれています。

  • Sitecoreコンテキスト

  • アプリケーションの翻訳

  • SPEAK 3コンポーネントライブラリの翻訳

  • コンポーネント ユーザー・アクセス許可

  • クロスサイトリクエストフォージェリの防止(CSRF対策)

機能モジュールを自分でインポートする必要はありません。

依存 関係

NgScModuleモジュールはngx-translateに依存しており、SPEAK 3はこれをアプリケーションでの翻訳に利用できます。セットアップを簡単にするために、NgScModuleモジュールはngx-translateを構成およびエクスポートします。

構成

次の手順に従って、Sitecore統合を設定します。

  1. モジュールを設定します。

    // 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インスタンスの実際の値に変更する必要があります。

  2. アプリケーションが初期化されるときに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();
    }
}

単一モジュールを使用した高度な構成

次のトピックでは、1つのモジュールを個別に含める場合に、これらのモジュールを個別に使用する方法について説明します。

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