Sitecore Experience Accelerator (SXA) – マーケターのための最適なツール

Sitecore Experience Acceleratorは、ドラッグ&ドロップ式のコンポネントで、ビジネスニーズやデザインに合わせて拡張し、構築を加速します。

SXAは、マーケティング部門が、開発やITを介さずにWebサイトを作成することを可能にします。デフォルトおよびカスタムビルドのSXAコンポーネントを使用することで、市場投入までの時間を短縮することができます。Web開発チームは、Sitecore Experience Accelerator(SXA)を使用してWebサイトの制作を高速化し、コンポーネント、レイアウト、テンプレートをさまざまなサイトで再利用します。

SXAは構造とデザインを分離しているため、フロントエンドデザイナー、クリエイティブデザイナー、コンテンツ制作者、開発者が並行して作業を行うことができ、複数のサイトを迅速かつ低コストで展開・維持することができます。基本的なユーザー・エクスペリエンス・プランが確立されていれば、誰もがこのプラットフォームを使い始めることができます。例えば、コンテンツ制作者はワイヤーフレーム環境でコンテンツの入力を開始し、フロントエンド開発者はテーマの作成を行い、開発者はデータテンプレートの設定を行います。

1.SXAが使用するコンセプト

まず、Sitecore SXAはマルチテナンシーをサポートしています。また、フォルダ構造を採用しているため、マーケティング担当者はセキュリティロールを作成して割り当て、コンテンツを分離することができます。さらに、テナントレベルでのセキュリティロールの作成と割り当ても可能です。また、テナントごとに機能を有効/無効にしたり、テナントレベルでページテンプレートを作成することも可能です。

再利用可能なレンダリングを備えたツールボックスを使って、ページを簡単に構築することができます。レンダリングは、シンプルなテキストや画像、動画、ソーシャルメディアのプラグインなど多岐にわたります。

さらに、SXAのページにはレスポンシブグリッドレイアウトが採用されています。グリッドは、ページを等間隔の列に分割します。行や列のスプリッターを使ったり、ページ上のレンダリングのグリッド設定を変更したりすることで、ページ上で利用可能な列をどのように分割するかを決めることができます。

最後に、SXAは構造とデザインを分離し、ウェブサイトデザインを変更するプロセスを簡素化します。カスタマイズを容易にするために、SXAではテーマを使用しています。テーマは、主にスタイルシート、スクリプト、画像で構成されています。また、SXAにプラグイン式のテーマを追加することで、スタイリングを素早く変更することができます。

2.Sitecore SXA 9.3に含まれる機能

Sitecore SXA 9.3では、2つの新しい検索機能が導入されました。集約された「ファセットフィルター」と「ファセットサマリー」です。集約されたファセットフィルタでは、検索結果のコンテンツに自動的に適応するダイナミックなフィルタセットを作成することができます。

また、ファセットサマリーは、適用されたファセットを表示し、個別または一度に削除することができます。ファセットサマリーでは、ページ上のアクティブなフィルターを操作することができ、訪問者が1つずつ、またはまとめて削除することも可能です。例えば、ページに果物のサイズ、味、色に関するフィルタが含まれていて、Facet Summaryコンポーネントを追加した場合、訪問者は、関連するxをクリックしてフィルタを個別に削除したり、「Clear all facets」をクリックしてすべてのフィルタを削除したりすることができます。

また、新しいSitecore SXA 9.3のレンダリングバリアントのセクションで紹介されている、高速でパワフル、安全で軽量なテンプレート言語Scribansもあります。Creative Exchangeを使用すると、スクリバンのテンプレートを簡単にインポート/エクスポートすることができ、フロントエンド開発者にとっても非常に柔軟な作業が可能です。

SXA 9.3の最後のメジャーアップデートは、SXAでのフロントエンド開発の方法を全面的に見直したことです。Creative Exchange Live Themingが完全に外部化され、NPMパッケージとして利用できるようになり、Media Libraryが解放されました。また、コマンドライン・インターフェースを使用した「JSSスタイル」のテーマ作成機能も提供されています。ログインしたり、サイトコアのUIを使わずにSXAのテーマを作成できるようになりました。

しかし、SXA 9.3の最もエキサイティングな機能は、間違いなくScribansの導入です。この新しいテンプレート言語は、従来のNVelocityテンプレートを削除するためだけにSXA 9.3で導入されました。scribans テンプレート言語を使用すると、デフォルトのレンダリングバリアントではできなかったループやその他の条件文をレンダリングバリアントに追加することもできます。

標準のscribanテンプレート構造とは別に、これを拡張してカスタムscribanエクステンションを作成することもできます。scriban の優れた点は、HTML に従ったデザインを簡単に実現し、レンダリングするフィールドを含むことができることです。

3.使用方法

この例では、カスタムイベントリストコンポーネント用の新しいScribanテンプレートを使用して、フィールドをレンダリングする方法を示します。

scribanテンプレートを使用したアイテム、オブジェクト、フィールドのサンプル

<div data-row="{"rid:1,"Date":"{{i_item.CustomEventStart}}","Date Stamp":{{i_item.CustomEventStart.raw}},"Event Name":"{{i_item.CustomEventName}}","Description":"{{i_item.EventDescription}}","Organizers":"{{i_item.PresentedBy}}","City":"{{i_item.City}}","Event type":"{{i_item.CustomEventTypes.target.EventTypeText}}","Register Link":""}">
<div class="first-table-cell pad col-0">
<input id="1" type="checkbox" class="rid-select" value="1">
</div>
<div class="pad col-0 sp-rid">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">rid</div>
1</div>
<div class="pad col-0 sp-date">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Date</div>
{{i_item.CustomEventStart}}</div>
<div class="pad col-45 sp-event-name">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Event Detail</div>
<button class="medium x-bold event-info block ellipsis no-border no-background push-left">{{i_item.CustomEventName}}</button>
<strong class="x-small color-label-gray field-label">Presented by: </strong><strong class="x-small">{{i_item.PresentedBy}}</strong>
<div data-hs-match="Class === Class">
<div class="hs-pill bg-color-highlighted-green margin-top">{{i_item.CustomEventTypes.target.EventTypeText}}</div>
</div>
<div data-hs-match="Class === Webinar" class="hidden">
<div class="hs-pill bg-color-highlighted-blue margin-top">{{i_item.CustomEventTypes.target.EventTypeText}}</div>
</div>
</div>
<div class="pad col-20 sp-date-stamp">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Date</div>
<span class="color-lite-gray small">{{i_item.CustomEventStart}}</span> </div>
<div class="pad col-0 sp-description">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Description</div>
{{i_item.EventDescription}}</div>
<div class="pad col-0 sp-organizers">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Organizers</div>
{{i_item.PresentedBy}}</div>
<div class="pad col-20 sp-city">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">City</div>
<div data-hs-match="Class === Webinar" class="hidden"> <span class="color-lite-gray small">Online</span> </div>
<div data-hs-match="Class === Class"> Portland, OR </div>
</div>
<div class="pad col-0 sp-event-type">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Event type</div>
{{i_item.CustomEventTypes.target.EventTypeText}}</div>
<div class="pad col-15 sp-register-link">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Register</div>
<strong class="x-small">{{i_item.LearnMoreLink}}</strong> </div>
</div>

このScribanテンプレートバリアントをカスタムレンダリングで使用すると、次のようになります。

4.その他の便利なコマンド

<h2> This is <b>i_item.name</b> {{i_item.name}}</h2>

<p><b>i_home</b> {{i_home}}</p>

<p><b>i_datasource</b> {{i_datasource}}</p>

<p><b>i_datasource.name</b> {{i_datasource.name}}</p>

<p><b>i_site.name</b> {{i_site.name}}</p>

<p><b>i_page.name</b> {{i_page.name}}</p>

<p><b>i_site</b> {{i_site}}</p>

<p><b>i_item.title</b> {{i_item.title}}</p>

<p><b>i_item.content</b> {{i_item.content}}</p>

<p><b>i_item.parent</b> {{i_item.parent}}</p>

<p><b>i_item.template_id</b> "{{i_item.template_id}}"</p>

<p><b>i_item.has_children</b> {{i_item.has_children}}</p>

<p><b>i_item.path</b> {{i_item.path}}</p>

<p><b>i_item.url</b> {{i_item.url}}</p>

<br><br>

5.Scribanのカスタムメンバーを作成する方法

Sitecore 9.3はマーケターに様々な新機能を提供します。今日は、カスタムScribanを追加してScribanの機能を拡張し、Scribanに新しいMemberを追加してみます。

5.1.コード

public class GetLinkUrl : GetScribanItemMember
{
private readonly IContext context;
protected override string MemberName => "linkurl";
public GetLinkUrl(IContext context)
{
this.context = context;
}

protected override void Resolve(GetScribanItemMembersPipelineArgs args)
{
if(args.Mode == MemberMode.Name)
{
args.Members.Add(MemberName);
}
else
{
var field = args.Item.Fields["{EE230482-43D4-4144-9EA4-CD33494AC364}"];
var fieldType = FieldTypeManager.GetField(field);
var linkfieldUrl = "";
if(fieldType is LinkField)
{
linkfieldUrl = LinkUrl(field);
}
args.MemberValue = (object)linkfieldUrl;
}
}

public static string LinkUrl(LinkField linkField)
{
if (linkField != null)
{
switch (linkField.LinkType.ToLower())
{
case "internal":
// Use LinkMananger for internal links, if link is not empty
return linkField.TargetItem != null ? Sitecore.Links.LinkManager.GetItemUrl(linkField.TargetItem) : string.Empty;
case "media":
// Use MediaManager for media links, if link is not empty
return linkField.TargetItem != null ? Sitecore.Resources.Media.MediaManager.GetMediaUrl(linkField.TargetItem) : string.Empty;
case "external":
// Just return external links
return linkField.Url;
case "anchor":
// Prefix anchor link with # if link if not empty
return !string.IsNullOrEmpty(linkField.Anchor) ? "#" + linkField.Anchor : string.Empty;
case "mailto":
// Just return mailto link
return linkField.Url;
case "javascript":
// Just return javascript
return linkField.Url;
default:
// Just please the compiler, this
// condition will never be met
return linkField.Url;
}
}
return "";
}

}

GetLinkUrl クラスは GetScribanItemMember クラスを継承しており、MemberName プロパティを使用して Scriban に新しいメンバーを追加しています。次に、フィールドタイプがリンクフィールドであるかどうかをチェックし、LinkUrl メソッドから URL を取得し、Resolve メソッドをオーバーライドして、MemberValue を関数 ( URL ) から返された文字列に設定しています。

5.2.コンフィッグ

<sitecore>
<pipelines>
<getScribanItemMembers>
<processor type="Foundation.Extension.Pipelines.GetLinkUrl,Foundation.Extension" resolve="true" />
</getScribanItemMembers>
</pipelines>
</sitecore>

クラスを「getScribanItemMembers」パイプラインに配置します。コンストラクタでコンテキストを解決したい場合は、resolve要素を追加することを忘れないでください。

Scriban に関連する他のすべての既存のパイプラインは 「Sitecore.XA.Foundation.Scriban.config 」ファイルに格納されており、カスタムコードを記述するには 「Sitecore.XA.Foundation.Scriban.dll」 も追加する必要があります。

6.正しい実装

コードの作成が完了したら、必要なアイテムを webroot にデプロイします。レンダリングバリアントでは、次の構文を使用してカスタムItem Memberを使用することができます。

コードの作成が完了したら、必要なアイテムをウェブルートにデプロイします。レンダリングバリアントでは、次の構文 {{i_item.linkurl}} を使用して、カスタムアイテムメンバーを使用できます。

そのURLは以下のようになります。

7.結論

Sitecore Experience Platform 9.3の新機能は、パーソナライズされた顧客体験を実現し、顧客満足度を高めることができるため、マーケティング担当者にとって朗報となります。

デモを申し込む

弊社の専門家は最適なソリューションをサポートさせて頂きます。

►►►サービスについて