--- title: "ウォークスルー:SXA Storefront用のカスタムモジュール作成とレンダリング" slug: "walkthrough--creating-a-custom-module-and-rendering-for-sxa-storefront" abstract: "カスタムモジュールを作成し、クローンしたCommerceレンダリングを追加する方法について。" --- # ウォークスルー:SXA Storefront用のカスタムモジュール作成とレンダリング カスタムソリューションを作成する際のストアフロント開発を簡素化するために、基本的なSitecore機能を保持しつつ標準レンダリングをカスタマイズできます。元のレンダリングをクローンし、クローンされたインスタンス上で変更を加えることを推奨します。 このウォークスルーでは、以下の方法を説明します: - カスタムモジュールを作成してください - コマースレンダリングのクローン - カスタムモジュールをストアフロントサイトに追加 - データフォルダを作成し、データソースのアイテムテンプレートを設定します ## カスタムモジュールを作成してください レンダリングをクローンする前に、カスタマイズされたクローンレンダリングを格納できるカスタムモジュールを作成する必要があります。これはモジュール内のアイテムをまとめるというHelixの原則に従っています。 カスタムモジュールを作成するには: 1. コンテンツエディターで */sitecore/System/Settings*に行き、**Feature**を右クリックして「 **Insert, Folder** 」をクリックしてカスタムモジュールを収納するフォルダを作成します。 2. **メッセージ**ダイアログボックスでフォルダ名を入力してください。例えば「*My custom modules」*といった場所で、**OK**をクリックします。 3. コンテンツツリーで */sitecore/System/Settings/Feature*に行き、右クリックして [カスタムモジュールを作成します](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/create-a-new-sxa-module.html)。 4. 「 **新しいモジュールを作成** 」ダイアログボックスで、モジュール名(例えば *「My custom module* 」)を入力し、「 **Add to module group** 」フィールドでステップ1で作成したフォルダ(例:Custom modules)を選択します。 5. 残りのパラメータのデフォルト値を受け入れるには、「 **進行** 」をクリックしてから **「閉じる**」をクリックしてください。 新しいテナントやサイトを作成すると、「 **テナント作成** 」と「 **新しいSXAサイトを作成する** 」ダイアログボックスで「私のカスタムモジュール」が利用可能になります。 ## コマースレンダリングのクローン 一般的には、既存のレンダリングをクローンしてカスタマイズする方が、一から新しいレンダリングを作成するよりも簡単です。判断の助けとして、[カスタムレンダリングを作成するかどうかはフローチャート](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/flowchart-to-determine-whether-to-create-a-custom-rendering.html)を参照してください。 > !注Commerce Controllerは対応するコントローラレンダリング項目のレンダリングビュープロパティへのパスを検証しません。このため、データソースを指定する必要があります。 Commerceレンダリングをクローンするには: 1. コンテンツエディターで、クローンしたいレンダリング(例えば */sitecore/Layout/Renderings/Feature/Commerce Experience Accelerator/*)に移動し、ショッピングカートラインなどの [レンダリングをクローン](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/copy-and-customize-a-rendering.html)します。 2. 「 **派生レンダリングを作成する** 」ダイアログボックスで、新しいレンダリングの名前(例えば「ショッピングカートラインのクローン」)を入力し、 **モジュールに追加** フィールドでステップ2で作成したモジュールを選択します。 3. 残りのパラメータのデフォルト値を受け入れるには、「 **進行** 」をクリックして **閉じてください**。 ## カスタムモジュールをストアフロントサイトに追加 クローンレンダリングを含むカスタムモジュールができたので、それをストアフロントサイトで利用可能にしなければなりません。 カスタムモジュールをストアフロントサイトに追加するには: 1. コンテンツエディターで */sitecore/Content//* に移動し、[カスタムモジュールをサイトに追加](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/en/add-a-module-to-an-existing-tenant-or-site.html)してください。 2. Experience Editorでクローンレンダリングを見るには、*/sitecore/Content//にアクセスし、Homeを右クリック*して**Experience Editor**をクリックしてください。 ツールボックスには、クローンされたレンダリングを含む新しいグループが見えます。 ![Custom module and rendering in the Toolbox.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/MyCustomModule.png) > !注クローンした新しいレンダリングは自動的にストアフロントサイトに追加されません。ステップ1を繰り返して手動で追加する必要があります。 ## データフォルダを作成し、データソースのアイテムテンプレートを設定します 専用のデータソースで動作するクローンレンダリングは、クローン処理の一環として自動的に新しいデータソースアイテムとフォルダテンプレートが作成されます。「**派生レンダリングを作成する」**ダイアログボックスの**Datasource**タブで選択するオプションによって、クローンレンダリングは元のデータソースから継承するか、元のデータソースのコピーで動作します。いずれにせよ、クローンレンダリングは自動的に設定されておらず、サイトデータフォルダ内の挿入オプションとして利用されるわけではありません。このため、カスタムレンダリング用のデータソース項目を保持するためにフォルダテンプレートを基に新しいカスタムフォルダを作成し、新しいデータソーステンプレートを挿入オプションとして設定する必要があります。 データフォルダを作成し、データソースを設定するには: 1. コンテンツエディターで */sitecore/Content///Data*に行き、 **Commerce** を右クリックして「 **Insert, Folder」**をクリックします。 **メッセージ** ダイアログボックスで名前を入力してください。例えば「My custom module」といった名前を「OK」と入力し、 **OK**をクリックします。 2. リボンメニューの **「構成** 」タブの **「オプション挿入** 」セクションで「 **割り当て**」をクリックします。 3. 「 **オプションを挿入** 」ダイアログボックスで */Templates/Feature//* に行き、クローンされたレンダリングフォルダ(例:ショッピングカートラインのクローンフォルダ)をダブルクリックして「 **選択** 済みリスト」に移動し、「 **確定**」をクリックします。 4. リボンメニューの **「ビュー** 」タブで「 **標準フィールド** 」チェックボックスをクリックしてください。 5. リボンメニューの **ホーム** タブの **挿入** セクションで、カスタムレンダリング用のフォルダテンプレート名(例:My Custom Shopping Cart Lines Folder)をクリックしてください。 **メッセージ** ダイアログボックスで、新しいアイテムの名前(例えば「 *My Custom Shopping Cart Lines*」)を入力し、 **OK**をクリックします。 6. コンテンツエディターでクローンレンダリング(*/sitecore/Layout/Renderings/Feature/My custom modules/My custom module/