進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

Storefront Reference Architecture と Page Designer の学習

学習の目的

この単元を完了すると、次のことができるようになります。

  • 新しい B2C Commerce Storefront Reference Architecture (SFRA) を理解する。
  • Page Designer を使用して E コマースエクスペリエンスの作成を迅速化する。
  • Page Designer の SFRA 更新に関する知識を得る。

Salesforce 認定資格の概要

Salesforce 認定 B2C Commerce デベロッパー資格を保有している場合、その認定資格を維持するためには期日までにこのモジュールを修了する必要があります。資格を更新するためにもう 1 つ重要なことは、必ず Trailhead アカウントと Webassessor アカウントをリンクしておくことです。

認定を受けることに関心がある場合は、Salesforce 認定 B2C Commerce デベロッパーの資格を参照してください。

この 1 年間に多くの機能が強化されました。その中でも重要なものについて説明します。

Storefront Reference Architecture

B2C Commerce Storefront Reference Architecture (SFRA) は、モデル-ビュー-コントローラー (MVC) 技術的アーキテクチャのモバイルファーストアプローチを使用したサイト設計とカスタマーエクスペリエンスのベストプラクティスを提供します。SFRA により拡張性も向上するため、マーチャントは開発プラットフォーム、Open API、認定パートナーのネットワークを使用して、E コマースストアフロントの作成とカスタマイズを行うことができます。

Storefront Reference Architecture は、最適なユーザーエクスペリエンスアプローチを識別するための 2,000 以上のストアフロントを使用したデータ駆動型分析によって設計されました。この最新のアーキテクチャを使用することで、マーチャンダイザーと開発者はモバイルまたはデスクトップエクスペリエンスをかつてなく迅速に作成できます。

SFRA は単なるブループリントではありません。開発者が使いやすいツールと数百もの標準搭載機能 (ホームページ、オンサイト検索、商品の詳細、チェックアウトフローなど) も含まれています。

SiteGenesis とは?

Salesforce B2C Commerce の優れた SiteGenesis アーキテクチャは、現在 2,700 以上の B2C Commerce サイトで使用されており、世界をリードするいくつかのブランドによって実証済みの基盤です。SiteGenesis は今後も安心して利用できます。サポートとメンテナンスは継続され、SiteGenesis のお客様には引き続き B2C Commerce API レイヤーを通じてプラットフォームのイノベーションが提供されます。サポート終了の予定はありません。

一方、SFRA 参照アプリケーションは、B2C Commerce で現在推奨されるデジタルストアフロント実装アプローチを表すもので、これによりマーチャントは最新かつ最適なブループリントを使用してサイト設計を開始できます。参照アーキテクチャは、新規サイトの構築時やサイト再設計の実施時に役立ちます。このいずれかを実装する場合は、SFRA 参照アプリケーションを出発点として使用してください。

SFRA の使用開始

SFRA 参照アプリケーションには 2 つのサンプルサイトが用意されています。

  • RefArch
  • RefArchGlobal

SFRA では、サンプル E コマースストアフロントを動作させるための関連データとコードも提供されます。

SFRA の設定手順についての詳細は、Infocenter の「Getting Started with SFRA」(SFRA の使用開始) を参照してください。環境が設定できたら、SFRA 参照アプリケーションを実行し、その構造を探索できます。

SFRA の概要

Storefront Reference Architecture は、ストアフロントサイトの作成とカスタマイズのための新しいアプローチです。Salesforce B2C Commerce には、app_storefront_base カートリッジと server モジュールが付属しています。

ベースカートリッジには、ほとんどのサイトに共通する機能のみが含まれています。ベースカートリッジの上に、プラグインカートリッジ、LINK カートリッジ、カスタムコードカートリッジによって機能のレイヤーを追加できます。B2C Commerce には、ギフトレジストリ、Apple Pay、商品比較、ミドルウェア機能など、他の機能を提供するプラグインカートリッジがあります。PayPal や Bazaarvoice などの LINK パートナーからは、サードパーティ統合用の LINK カートリッジが提供されています。1 つ以上のカスタムカートリッジを作成して、ベースカートリッジを部分的に上書きしたり、ストアフロントサイトの機能やブランド設定をカスタマイズしたりできます。

app_storefront_base カートリッジには複数のモデルが含まれています。これらのモデルは、B2C Commerce Script API を使用して、注文など、アプリケーションの機能エリア用にプラットフォームからデータを取得します。次に、これらのモデルは、テンプレートを表示したり、非同期コールに AJAX 応答を返したりするために使用可能な JSON 応答を作成します。

server モジュールは、HTTP 要求、応答、セッションオブジェクトからのデータが含まれるオブジェクトを提供します。server モジュールは、URL とそれが B2C Commerce で検出されると実行されるコードをマップするルートを登録します。

これらの概念を理解すると、組織、ブランド、商品用に SFRA をカスタマイズする方法を探ることができます。SFRA は拡張可能であるため、app_storefront_base カートリッジや他のプラグインを編集することなくカスタマイズできます。この拡張可能な設計によって、セキュリティ更新、バグ修正、新機能の導入もより簡単に行うことができます。app_storefront_base カートリッジモデルと server モジュールオブジェクトでは、メジャリリース間での後方互換性が保証されています。

メモ

メモ

app_storefront_base カートリッジや提供されている他のプラグインの名前を変更しないでください。また、常に最新の状態を維持してください。そうすることで、最新のバグ修正とパフォーマンス向上が提供されます。

メモ

メモ

app_storefront_base カートリッジや server モジュールを編集すると、後方互換性の保証が無効になり、機能や修正の導入に支障を来します。代わりに、B2C Commerce スクリプトメソッドを使用して、ベースカートリッジの機能を拡張します。server モジュールや app_storefront_base モデルで作成される JSON オブジェクトでは、その構造が保持され、ポイントリリースによってプロパティが変更されることはありません。

関連情報: Trailhead: Salesforce B2C Commerce (デベロッパー向け)

Page Designer を使用した E コマースエクスペリエンス作成の迅速化

Page Designer を使用すると、ビジネスチームは洗練された効果の高いコマースエクスペリエンスを迅速に作成できます。Page Designer では、ビジネスユーザーが簡単なドラッグアンドドロップインターフェイスでページを設計、スケジュール、公開できます。その際、開発者がオープン Web 標準を使用して作成した再利用可能なコンポーネントと、提供されている参照ライブラリを利用できます。これにより、開発と品質保証にかかる時間が短縮され、製品化のスピードが大幅に改善されます。

Page Designer は、再利用可能なページタイプとコンポーネントタイプを作成するための標準開発プロセスとツールをサポートする B2C Commerce 機能です。マーチャントは、Business Manager のビジュアルエディターを使用し、ページタイプやコンポーネントタイプをドラッグしてストアフロントのカスタムページを設計、スケジュール、公開できます。マーチャントは同じページタイプやコンポーネントタイプを使用して、さまざまなページを別個に作成できます。開発者に更新を依頼する必要はありません。

典型的な Page Designer 実装プロセスでは、次の手順を実行します。

  1. E コマースマーケティング部門が開発者とミーティングをして、ストアフロントに必要なページ、コンポーネント、レイアウト、アセットを検討します。
  2. 開発者が、E コマースマーケティング部長の要件をサポートする再利用可能なページタイプとコンポーネントタイプを作成します。
  3. 開発者が、ページタイプとコンポーネントタイプが含まれるカスタムカートリッジと、サイトの補助的 UI アーティファクトが含まれる別のカスタムカートリッジをアップロードします。
  4. マーチャントが、Business Manager の Page Designer ビジュアルエディターで、開発者が実装したページタイプとコンポーネントタイプを使用してストアフロントページを作成します。

このプロセスでは、ビジネス要件、目標、設計を定義するための事前作業が必要です。ただし、一度これが決定されれば、開発者はモジュール形式で再利用可能なカスタムコンポーネントを作成できます。そのため、継続的に開発者の専門技術に依存する必要はなくなります。

開発者はオープン Web 標準、フレームワークコンポーネント、Storefront Reference Architecture (SFRA) のような参照ソリューションキットを使用して、Page Designer のページとコンポーネントを作成します。SFRA をベースとして使用することで、開発の依存が減り、品質保証にかかる時間が短縮され、製品化のスピードが改善されます。SFRA には、組み込みの Page Designer ページと事前構築済みコンポーネント (ヘッダー、カルーセル、商品タイルなど) が付属します。または、独自のページタイプやコンポーネントタイプを作成し、SFRA からコード例を取り込むこともできます。

関連情報: Trailhead: Salesforce B2C Commerce Page Designer for Developers (Salesforce B2C Commerce Page Designer (デベロッパー向け))

Page Designer の SFRA で最適化されたページとコンポーネント (SFRA 4.2)

Storefront Reference Architecture に付属する新しいページやコンポーネントを利用することで、Page Designer の使用をすばやく開始できます。

SFRA には次のページタイプとコンポーネントタイプが含まれています。

  • ヘッダー
  • メインバナーまたはヒーロー画像
  • ショップカテゴリ
  • 商品カルーセル — カタログ
  • 商品カルーセル — Einstein
  • 商品タイル
  • キャンペーンバナー
  • ルックバック
  • 写真タイル
  • ショップリンクを含む静的コンテンツ
  • コンテンツミックスブロック

方法: SFRA の最新バージョンについては、GitHub の SalesforceCommerceCloud/storefront-reference-architecture リポジトリにアクセスしてください。

GitHub の SFRA リポジトリにアクセスする手順は、Trailhead の「Tools & Resources for Salesforce B2C Commerce Developers」 (Salesforce B2C Commerce のツールとリソース (デベロッパー向け)) を参照してください。

GitHub の page-designer-reference リポジトリから参照ページタイプまたはコンポーネントタイプを使用してページまたはコンポーネントを作成した場合、SFRA のアップグレード後に、それらのページとコンポーネントの書式が意図したとおりであることを確認してください。書式またはスタイルに何らかの調整が必要になることがあります。

page-designer-reference リポジトリの参照ページタイプおよびコンポーネントタイプは、SFRA に含まれるページタイプやコンポーネントタイプと同様に、連動を目的としています。両方の参照セットからのページとコンポーネントを一緒に使用する場合、さらに書式の調整が必要になることがあります。

リソース