B2C Commerce 開発環境の説明

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

• Salesforce B2C Commerce ストアフロントのクライアント側で使用するツールを 2 つ挙げる。
• B2C Commerce の主なソフトウェア開発ツールを 3 つ挙げる。
• MVC アーキテクチャの要素について説明する。
• スクリプトとコントローラーを使用して実行できるタスクを 3 つ挙げる。

B2C Commerce ストアフロントアプリケーションの新参のデベロッパーでも経験豊富なデベロッパーでも、だいたいの流れは御存じでしょう。最初にツールを確認します。

B2C Commerce の主なソフトウェア開発ツールは、Business Manager、Microsoft Visual Studio Code、Commerce Cloud ストアフロントリファレンスアーキテクチャ (SFRA) の 3 つです。他に次のようなツールがあります。

• テンプレート
• フォーム定義
• リソースバンドル
• スクリプト
• コントローラー

順に詳しく説明しますが、まずはアーキテクチャから見ていきましょう。

ここでは、アプリケーションを 3 つに分割する MVC (モデル–ビュー–コントローラー) を使用します。

• このモデルは、アプリケーションの基盤となるビジネスロジック、データ、ルールです。従来モデルには、ビューへの入力に使用するデータが格納されます。B2C Commerce では、データを保存する代わりに、ヘルパークラスを提供する API によってデータが表されます。
• ビューは、ストアフロントで買い物客に表示されるものです。ランディングページ、商品情報ページ、クイックビュー、買い物カゴページなどがあります。
• 入力項目やボタンクリックなどからコントローラーが買い物客の入力を取得してアクションやデータに変換したものを、モデルやビューが使用します。

このアーキテクチャは各要素がどのように連動するかを示す地図になりますが、コードには導入メカニズムも必要です。カートリッジが必要なのはこのためです。

カートリッジとは、B2C Commerce がプログラムのコードやデータをパッケージ化してリリースする手段で、汎用またはアプリケーション固有の機能を備えています。たとえば、マーチャントが複数のブランドを個別のサイトで販売しているとします。アパレルを扱っているため、どのサイトもプロセスは同様ですが、サイトの外観がブランドごとに異なります。汎用カートリッジには標準のプロセスが格納されるのに対し、アプリケーション固有のカートリッジにはブランド固有のコードやデータが格納されます。

では、ここで構築するものを上位から順に見ていきましょう。

ストアフロントページは、デスクトップでもモバイルデバイスでも、クライアント上に表示されます。以下は、標準のストアフロントページの一部です。

• ホーム
• カテゴリ
• 注文の詳細
• 検索結果

これらのページは HTML に基づく専有の ISML 形式で、フォーマットには CSS を使用する業界標準です。買い物客は、ボタンやタブをクリックしたり、項目にテキストを入力したりしてこれらのページを操作します。ここで使用する開発ツールは、テンプレートとフォーム定義というものです。

これらのツールを使用して、次のことができます。

• 買い物客の入力を検証する。
• 買い物客に確認画面を表示する。
• エラーや情報ボックスを表示する。
• HTML を条件付ける。

クライアントとサーバーの両方にアプリケーション処理コンポーネントがあります。このコンポーネントは、ページからクリックやデータ入力を取得して処理するコードです。ここで使用する開発ツールは、スクリプトとコントローラーです。

これらのツールを使用して、次のことができます。

• ビジネスプロセスに計算やロジックを追加する。
• Web サービスをコールする。
• バックエンドシステムを統合する。
• ユーザー間で情報を共有する。

次は、この処理について説明します。

ストアフロントページは視覚的なページで、魅力的な商品、華やかな広告、気の利いた割引で目を引きます。こうしたページには、テンプレート、フォーム、定義、リソースバンドルが必要です。ただし、クライアントベースに限られます。

アプリケーションの処理においては、訪問から注文手続きまですべて買い物客の動作に従って適切な詳細を表示、送信、計算、取得します。アプリケーションはこのために、スクリプトとコントローラーを使用します。

コードをアップロードするために、SFRA アップロードツールまたは webdav などの標準プロトコルのアップロードユーティリティを使用する必要があります。アップロードユーティリティは、GitHub にある B2C Commerce コミュニティのリポジトリから入手できます。また、リンターや静的コード解析ツールなど、標準の JavaScript ツールも使用できます。

この環境で作業を始めるとき、実行すべき手順がたくさんありますが、以下のものに絞ることができます。

1. Salesforce の Developer Center for Commerce Cloud (Commerce Cloud の開発センター) を確認してください。
2. B2C Commerce サポート (LINK パートナーのデベロッパーの場合は LINK パートナープログラムマネージャー) から Sandbox を取得します。
3. Microsoft Visual Studio Code などの統合開発環境 (IDE) をダウンロードしてインストールします。
4. Business Manager を開いて、次のことを行います。
   • カートリッジを登録します。
   • ストアフロントリファレンスアーキテクチャのデータを Sandbox にインポートし、それを出発点またはサンプルコードとして使用します。
   • ページキャッシュを無効にして、変更内容をすぐに確認できるようにします。
   • 検索インデックスを生成して、アプリケーションで検索を適切に機能させます。
   • ストアフロントを表示します。

LINK マーケットプレイスは、デベロッパーが各自のサイトをサードパーティのソフトウェアで拡張する場合にアクセスする場所です。

サードパーティのソフトウェアプロバイダーが Salesforce B2C Commerce LINK テクノロジーパートナープログラムに参加して、各自のカートリッジが B2C Commerce の最新テクノロジーに適合することを保証しています。LINK カートリッジを使用すれば、現在使用可能なものの中でも極めて画期的な e コマーステクノロジーを実装できます。

これらのカートリッジはすぐに使える状態のため、実装時間が大幅に短縮されます。ソリューションはたくさんありますが、その大半は次のカテゴリに分類されます。

• 決済プロバイダー
• 評価とレビュー
• 課税住所の確認
• ソーシャルパーソナライズ

この単元では、B2C Commerce 開発環境について説明し、使用するツールと使用する理由に対する理解を深めてきました。また、開発環境の構築に必要な手順と、いくつかの代替法についても学びました。次の単元では、Commerce Cloud ストアフロントリファレンスアーキテクチャについて学習します。