Commerce Cloud ストアフロントリファレンスアーキテクチャの説明

学習の目的

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

  • Commerce Cloud ストアフロントリファレンスアーキテクチャ (SFRA) を使用する利点を説明する。
  • リファレンスアーキテクチャがサイトの設計図になる理由を説明する。
  • SFRA の技術的な UX コンポーネントを 2 つ挙げる。
  • モバイルファーストの利点を 2 つ挙げる。

はじめに

オンラインストアフロントのサイトがどのように見えるか確認する場合、構築しながら表示でき、コードベースとして使用できるに越したことはありません。ここでは、SFRA を使用してまさにこのとおりのことを行います。ただし、このアーキテクチャはコードベースであるだけでなく、サイトの設計図にもなります。

リファレンスアーキテクチャを使用すると、画期的なサイトがあっという間に出来上がります! 業界のベストプラクティスに従って開発されたサイトのコア機能の完全ライブラリを使用して、サイトを短時間で構築します。買い物カゴ、注文手続き、ホームページ、商品情報ページなど、何百もの機能が標準装備されています。また、Apple Pay などのテクノロジを速やかに導入すれば、買い物客に素晴らしい体験がもたらされます。

SFRA のカスタマイズモデルを使用すると、ストアフロントを簡単に構築して管理し更新することができます。SFRA はプラットフォーム API レイヤの外側に存在し、従来のモデル–ビュー–コントローラー (MVC) アーキテクチャを使用します。API や MVC アーキテクチャについては、「Salesforce B2C Commerce 開発環境」の単元で説明しました。

デベロッパーは SFRA コードベースを自在にカスタマイズや拡張できます。ブランドが自ら、ピクセルパーフェクトなサイトを設計し、独自の Web 体験を綿密に構築することができます。デベロッパーは新しいコードを取り込み、サードパーティプロバイダーと統合して、サイト設計を反復的に実施します。その結果、マーチャントが自身のストアフロントと基盤のコードベースを完全に所有します。

モバイルデバイスを使っている人

アーキテクチャについて

リファレンスアーキテクチャは、オンラインストアフロント設計の出発点で、サイト設計のベストプラクティスとストアフロントアーキテクチャが組み合わされ、e コマースのストアフロントの構築とカスタマイズの設計図になります。

Commerce Cloud ストアフロントリファレンスアーキテクチャのランディングページ

Commerce Cloud ストアフロントリファレンスアーキテクチャ (SFRA) は JavaScript コントローラーを使用します。B2C Commerce で、コントローラーは、ストアフロントの要求を処理するサーバー側のスクリプトです。アプリケーションの制御フローを管理し、ストアフロントの各要求を処理して適切な応答を生成するモデルやビューのインスタンスを作成します。たとえば、買い物客がカテゴリメニュー項目をクリックしたり検索用語を入力したりすると、ページを表示するコントローラーがトリガされます。

メモ

コントローラーは JavaScript と B2C Commerce スクリプトに記述されます。コントローラー CommonJS モジュール標準に適合している必要があります。

SFRA を使用すると、B2C Commerce が配信したコード、マーチャントのカスタマイズ、サードパーティのインテグレーションコードを個別のカートリッジに簡単に分割でき、各カートリッジのコンテンツを管理や更新しやすくなります。

B2C Commerce では、カートリッジにコードやデータが格納されます。つまり、デベロッパーがたとえばほしい物リスト、Apple Pay、支払インテグレーションといった機能などの新しいコンポーネントを構築して、それぞれ個別にストアフロントにプラグインできることを意味します。このアーキテクチャでは、軽量で比較的明快なコードベースを使用して、継続的、反復的、漸進的なサイト設計が可能になります。コアコードは編集できませんが、デベロッパーがコード上に機能を自在に開発できます。

ベストプラクティスの UI 開発

SFRA は一般的なブートストラップフロントエンドコンポーネントの UI ライブラリを使用します。ブートストラップとは、HTML、CSS、JS を使用した開発に使用するオープンソースのツールキットです。Sass 変数や Mixin、レスポンシブグリッドシステム、豊富な組み込みコンポーネント、jQuery 上に構築された強力なプラグインを使用して、アイデアのプロトタイプを作成したり、アプリケーション全体を構築したりすることができます。

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる