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

学習の目的

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

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

SFRA とは

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

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

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

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

モバイルファーストデザイン

これまでは Web 設計者の大半がデスクトップファーストを念頭に置いていたため、モバイルは二の次でした。レスポンシブデザインでも、まずデスクトップ向けに設計され、その後モバイル用のコードが追加されていました。

レスポンシブデザインとは、画面サイズに応じて画面の内容が調整されるものです。

モバイルは流行ではありません。現在の主流です。オンラインショッピングをはじめ、モバイルデバイスを使用してさまざまなことを行う人々が増大しています。手の上でコンピューターを操作できるのはすごいことです。

モバイルファーストでは最小の画面から設計し、拡大していきます。レスポンシブデザインとアダプティブデザインのどちらを作成する場合でも、最適な戦略の 1 つとなるのがモバイルファーストです。

アダプティブデザインとは、デバイスやその他の機能を検出し、あらかじめ定義された一連のビューポートサイズやその他の特性に基づいて適切な機能やレイアウトを提供するものです。

アーキテクチャについて

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

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 上に構築された強力なプラグインを使用して、アイデアのプロトタイプを作成したり、アプリケーション全体を構築したりすることができます。

知っておくべきその他の事項

マーチャントが SFRA を活用できるのは、新しいサイトの実装を開始する場合や、既存のストアフロントを設計し直す場合です。マーチャントは通常、3 ～ 5 年おきにストアフロントを設計し直します。そしてサイトの再設計では大量のリソースを消費するため、マーチャントはタイムラインと、予算、範囲、ビジネスへの影響とを天秤にかける必要があります。この作業を正しい方向に進められるように、SFRA には注釈付きのワイヤーフレームが用意されています。また、ユーザーグループも利用できます。

B2C Commerce リテール業務チームが、ストアフロント設計のコンサルティングを行い、既存のストアフロントの最適化や新しいストアフロントへの移行を行うマーチャントをサポートします。

LINK パートナー

B2C Commerce LINK テクノロジーパートナープログラムには、堅牢な機能が揃った世界クラスのエコシステムがあり、マーチャントはこれらの機能を利用して、業界屈指の e コマースソリューションを実現できます。LINK パートナーは、各自のテクノロジーを B2C Commerce に統合するために尽力しています。テクノロジーが統合されると、LINK マーケットプレイスを通して世界各地の B2C Commerce のお客様に提供されます。

特によく使用される LINK カートリッジは Paypal、CyberSource、Bazaarvoice (評価とレビュー)、Avalara (課税)、Adyen、Experian QAS (AVS) などで、これらは SFRA で使用できます。マーチャントや SI 実装者が新しいサイトの設計や再設計を判断する場合は、LINK エコシステムを利用してコマース体験を拡張することを検討するようにします。

次のステップ

Commerce Cloud の SFRA の詳細を確認しました。次はいよいよ B2C Commerce のビジネスオブジェクトについて学習します。

リソース

• 外部リンク: 6 Ways to Increase Revenue Through a Mobile-First Approach (モバイルファーストアプローチで収益を増やす 6 つの方法)
• Salesforce ヘルプ: Salesforce Reference Architecture (SFRA) (Salesforce リファレンスアーキテクチャ (SFRA))
• Salesforce: Salesforce パートナーコミュニティ (ログイン情報が必要)
• Salesforce: Salesforce Trailblazer Community
• Trailhead: Salesforce Commerce Cloud Architect Roles: Quick Look (Salesforce Commerce Cloud アーキテクトの役割: クイックルック)