---
title: "アクティビティエディター"
slug: "the-activity-editor"
abstract: "Sitecoreマーケティングオートメーションロジックで使用するアクティビティエディターの概要。"
---
# アクティビティエディター

アクティビティエディターは、アクティビティタイプのアイテム向けに書かれた[Angular 5](https://v4.angular.io/docs)のグラフィカルユーザーインターフェースです。コンテンツ作成者はアクティビティエディターを使ってアクティビティを設定します。

以下のサンプル実装は、[SingleItemアクティビティタイプ](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-platform/the-singleitem-activity-type.html "The SingleItem activity type")に基づくアクティビティエディタを示しています。[FinalItem](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-platform/the-finalitem-activity-type.html "The FinalItem activity type")、[ConditionItem](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-platform/the-conditionitem-activity-type.html "The ConditionItem activity type")、[DecisionPointItem](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-platform/the-decisionpointitem-activity-type.html "The DecisionPointItem activity type")アクティビティタイプに対して簡単に変更できます。

## 項目構成

SingleItemアクティビティタイプには以下の構造が含まれています。

![Illustration showing the structure of the SingleItem activity type.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-platform/images/sample-activity-item1.png)

## ユーザーインターフェース

SingleItemアクティビティタイプは、コンテンツ作成者に以下のユーザーインターフェースを提供します:

![Illustration showing the user interface of the SingleItem activity type.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-platform/images/sample-activity-editor1.png)

## TypeScriptコンポーネント実装のサンプル

アクティビティエディターコンポーネントはカスタムコードを実装する場所です。コンポーネントはEditorBaseクラスを拡張しなければならず、そのクラスには以下のメンバーがあります:

メンバー

概要

abstract serialize(): any

アクティビティエディタの変更がコミットされ適用されたときに呼び出されるシリアライズメソッドです。 model オブジェクトを返します。  
  
アクティビティエディタはこのメソッドの実装を提供しなければなりません。

model: any

アクティビティパラメータに対応するプロパティを含むオブジェクトです。

これはSingleItemアクティビティエディタのサンプル実装です:

//sample/src/editor/sample-single-item-editor.component.ts

import { Component, OnInit } from '@angular/core';
import { EditorBase } from '@sitecore/ma-core';

@Component({
 selector: 'sample-single-item-editor',
 template: \`
 <section class="content">
 <div class="form-group">
 <div class="row sample-single-item-editor">
 <label class="col-6 title">Count</label>
 <div class="col-6">
 <span class="minus-icon" (click)="decreaseValue()">-</span>
 <input type="number" class="form-control" (ngModel)="count"/>
 <span class="plus-icon" (click)="increaseValue()">+</span>
 </div>
 </div>
 </div>
 </section>
 \`,
 // CSS styles are omitted for brevity.
 styles: \`\`
})

export class SampleSingleItemEditorComponent extends EditorBase implements OnInit {

 /\*\*
 \* Count property is bound to the input element
 \*/
 count: number;

 /\*\*
 \* A component lifecycle hook.
 \* Called whenever the model property or any other property in the component changes.
 \*/
 ngOnInit(): void {
 this.count = this.model ? this.model.count || 0 : 0;
 }

 /\*\*
 \* Increases the count by 1. Bound to the '+' button.
 \*/
 increaseValue() {
 this.count++;
 }

 /\*\*
 \* Decreases the count by 1. Bound to the '-' button.
 \*/
 decreaseValue() {
 this.count--;
 }

 /\*\*
 \* Called when the changes in the editor are applied.
 \* @returns an object that contains the values of the parameters of the activity,
 \* where each property corresponds to a parameter key.
 \*/
 serialize(): any {
 return {
 count: this.count
 };
 }
}

> !注この実装のserializeメソッドは、SingleItemアクティビティタイプから継承されたcountプロパティのみを含むオブジェクトを返します。

マーケティング [オートメーションアプリケーションサービスの](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-platform/the-marketing-automation-application-services.html "The Marketing Automation application services")ドキュメントを参照してください。これらはアクティビティエディターの実装に役立ちます。

## TypeScriptモジュール実装のサンプル

モジュールはコンポーネントや他のモジュールをインポートし、Sitecoreで使用するためにモジュールをエクスポートする場所です。この実装はSampleSingleItemEditorComponentngModel指令を使うためFormsModuleをインポートします。

//sample/src/editor/sample-single-item-editor.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SampleSingleItemEditorComponent } from './sample-single-item-editor.component';

@NgModule({
 imports: 
 FormsModule
 ,
 declarations: SampleSingleItemEditorComponent,
 entryComponents: SampleSingleItemEditorComponent
})

export class SampleSingleItemModule { }