B2C Commerce 開発環境の説明

学習の目的

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

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

ツールの確認

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

レンチ - ツールキットの 1 つ

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

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

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

MVC アーキテクチャ

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

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

MVC アーキテクチャ - モデル、ビュー、コントローラー

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

B2C Commerce のカートリッジ

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

何を構築するのか

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

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

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

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

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

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

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

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

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

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

ストアフロントページのコード化

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

テンプレート

テンプレートは、データやページ情報を HTML ベースの Web ページにどのように変換するかを定義します。これらのページがブラウザーに表示される際、ページレイアウトやスタイル設定には CSS、データの表示や検証には B2C Commerce のフォーム定義が使用されます。テンプレートは、HTML を動的に生成する Internet Store Markup Language (ISML) でコード化されます。複数の事前定義されたタグ (<isif>/<isloop> など) が提供され、スクリプトブロックや式が使用されます。

ISML を使用すると、1 つのテンプレートで何千もの商品を表示できます。たとえば、検索結果ページには、テンプレートで定義されているとおりのタイルの行と列に商品のリストが表示されます。

フォーム定義

フォーム定義では、顧客が入力した値をどのように検証してブラウザーに表示するかを管理できます。たとえば、フォームを使用して、郵便番号は正確な一連の整数として入力する必要があり、名前とアドレス情報は文字列として入力する必要があることを指定できます。ISML と同様に、B2C Commerce のフォーム定義は、独特の専有言語を使用します。

アドレスフォームの例

フォーム定義は、カートリッジのフォームフォルダー (cartridge/forms/default) に格納されます。フォームスキーマファイルは、許可される要素と属性を特定します。フォーム定義は、ストアフロントアプリケーションの表示の部分と処理の部分の両方とやりとりします。

リソースバンドル

買い物客に表示されるストアフロントのコードでは、ハードコード化されたテキスト文字列を避けることが望まれます。そのため、タイトル、表示ラベル、メッセージ、ボタン、項目名はリソースバンドル (.properties ファイルともいう) に保存します。このテキストを表示レイアウトと分けておけば、特にさまざまな地域情報をサポートしている場合に、テキストを目的ごとに簡単に変更できます。

ストアフロントアプリケーションの処理

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

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

スクリプト

アプリケーションは Visual Studio Code でローカルに開発しますが、実行するのはサーバー上です。JavaScript インタープリタがアプリケーションサーバーで実行され、JavaScript の各クラスやメソッドを処理します。JavaScript インタープリタにとって、スクリプトコールのソースは関係ありません。これにより、使用できるツールの選択肢が広がります。

B2C Commerce は、B2C Commerce Script API と Open Commerce API (OCAPI) を使用する本格的なアプリケーションプログラムインターフェース (API) をいくつか備えています。OCAPI は RESTful API で、HTTP 要求を受け取って応答を返します。要求をどのように構築し、応答をどのように使用するかはデベロッパーが自在に決めることができます。

B2C Commerce API は、ストアフロントのユーザー体験のすべてを構築するために使用します。OCAPI は、サードパーティのシステムを統合したり、Commerce Cloud が提供する体験の先を行くカスタマージャーニーにつなげたりするために使用します。

B2C Commerce Script API は次の業界標準をサポートしています。詳細は、Salesforce ヘルプの「Script Programming (スクリプトプログラミング)」と「Compatibility Mode Changes (互換性モードの変更点)」を参照してください。

コントローラー

コントローラーは、ストアフロントの要求を処理するサーバー側のスクリプトで、ストアフロントのバックエンド処理を統制し、ストアフロントの各要求を処理して適切な応答を生成するモデルやビューのインスタンスを作成します。たとえば、カテゴリメニュー項目をクリックしたり検索用語を入力したりすると、ページを表示するコントローラーがトリガーされます。

コントローラーは JavaScript と B2C Commerce スクリプトに記述されます。コントローラーのファイル拡張子は .ds か .js のいずれかになります。コントローラーはカートリッジの最上位にあるコントローラーフォルダーに配置される必要があります。

コントローラーの開発には JavaScript エディターを備えた任意の IDE を使用できます。

はじめよう

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

Salesforce の Developer Center for Commerce Cloud (Commerce Cloud の開発センター) を確認してください。
B2C Commerce サポート (LINK パートナーのデベロッパーの場合は LINK パートナープログラムマネージャー) から Sandbox を取得します。
Microsoft Visual Studio Code などの統合開発環境 (IDE) をダウンロードしてインストールします。
Business Manager を開いて、次のことを行います。

カートリッジを登録します。
ストアフロントリファレンスアーキテクチャのデータを Sandbox にインポートし、それを出発点またはサンプルコードとして使用します。
ページキャッシュを無効にして、変更内容をすぐに確認できるようにします。
検索インデックスを生成して、アプリケーションで検索を適切に機能させます。
ストアフロントを表示します。

LINK パートナー

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

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

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

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

次のステップ

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

ヘルプをお探しですか?

もっと探す