B2C Commerce 開発環境の説明

学習の目的

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

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

何を構築するのか

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

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

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

これらのページは 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 は次の業界標準をサポートしています。

  • Rhino JavaScript (ECMAScript 5、Mozilla 拡張 JavaScript 1.8 以下、E4X を含む)
  • JavaScript 2.0/ECMA 4th Edition 提案と ActionScript の省略可能な型仕様をサポート
  • parseInt(String) グローバル関数の ECMAScript 5 互換性修正プログラム

コントローラー

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

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

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

はじめよう

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

  1. Commerce Cloud Developer Center を確認します。
  2. B2C Commerce サポート (LINK パートナーのデベロッパーの場合は LINK パートナープログラムマネージャ) から Sandbox を取得します。
  3. Microsoft Visual Studio Code などの統合開発環境 (IDE) をダウンロードしてインストールします。
  4. Business Manager を開いて、次のことを行います。
    1. カートリッジを登録します。
    2. ストアフロントリファレンスアーキテクチャのデータを Sandbox にインポートし、それを出発点またはサンプルコードとして使用します。
    3. ページキャッシュを無効にして、変更内容をすぐに確認できるようにします。
    4. 検索インデックスを生成して、アプリケーションで検索を適切に機能させます。
    5. ストアフロントを表示します。
無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる