---
title: "ウォークスルー:Business Toolsのカスタマイズの始め方"
slug: "walkthrough--getting-started-with-business-tools-customization"
abstract: "Sitecore BizFX SDKを使ってXC Business Tools開発環境を構築し、アプリケーションをコンパイルする方法。"
---
# ウォークスルー:Business Toolsのカスタマイズの始め方

Sitecore Experience Commerceリリースパッケージ(オンプレミスソリューション向け)には、Sitecore.BizFX.SDKというソフトウェア開発キット(SDK)が含まれており、XC Business Toolsカスタマイズプロジェクトの開始を支援する[Angular](https://angular.io/guide/setup-local)フレームワークコンポーネントが含まれています。

このウォークスルーでは、XC Business Toolsカスタマイズプロジェクトを始めるためのSitecore BizFX SDKの基本的なセットアップ手順を説明しています。

## 前提条件

このウォークスルーの手順を行う前に:

-   開発環境にCommerce Engineの動作インスタンスを導入している必要があります。
-   作業ステーションに以下の環境とツールをインストールしていることを確認してください
    -   [Node.js ® JavaScriptランタイム](https://nodejs.org/download/release/latest-v14.x/)環境
        
        > !注Node.jsリリース14を使用しなければなりません。\*
        
    -   Angularの [CLIツール](https://angular.io/cli)
        

## Sitecoreをセットアップします。BizFX。SDK開発ソリューション

Sitecoreをセットアップするために。BizFX。開発用のSDK:

-   Sitecore XCリリースパッケージを含むフォルダを開き、 Sitecore.BizFX.SDK.\*.\*.\*.zip ファイルの内容を選択した場所に抽出します。例えば C:\\projects\\。

## SitecoreのNPMパッケージの公開フィードをnpm設定に追加してください

Sitecore。BizFX。SDK Sitecore公式のパブリックフィードでNPMパッケージを入手できるNPMパッケージに依存しています。NPMリソースにアクセスするために、マシンがフィードに接続できることを確認してください。

NPMパッケージを追加するには、設定ファイルへのフィードを行ってください:

-   ファイル: C:\\Users\\your user\\.npmrcを開き、以下のファイルを追加します。
    
    @speak:registry=https://npm.sitecore.com/resources/
    @sitecore:registry=https://npm.sitecore.com/resources/
    
    > !注もし .npmrcファイルがあなたのマシンに存在しない場合は、必要なフィードURLで以下のコマンドを実行して作成してください。
    > 
    > NPM config Set @speak:registry=[https://npm.sitecore.com/resources/](https://npm.sitecore.com/resources/) npm config set @sitecore:registry=[https://npm.sitecore.com/resources/](https://npm.sitecore.com/resources/)
    

## Business Tools config.jsonファイルをデプロイ設定で更新してください

Sitecore.BizFX.SDKフォルダには、デプロイメント固有の値で更新しなければならない設定パラメータがconfig.jsonファイルに入っています。

設定パラメータを更新するには:

1.  Sitecore.BizFX.SDK.\*.\*.\*.ZIPを抽出したフォルダで、src\\assets\\config.jsonファイルを開いてください。
    
2.  もしデプロイメントがデフォルトのHabitat Authoring環境("EnvironmentName": "HabitatAuthoring")を使っていない場合は、"EnvironmentName" パラメータ値をデプロイのオーサリング環境の名前に更新してください。
    
3.  "PlaceholderFor<context>"で始まるすべての値を、実際の展開時の値(デフォルトの位置はinetpub\\wwwroot\\SitecoreBizFxSite\\assets\\config.json)に置き換えてください。以下は、置き換えなければならない"PlaceholderFor..."で始まる値の例を示しています。
    
    {
     "EnvironmentName": "HabitatAuthoring",
     "EngineUri": "PlaceholderForAuthoringUrl",
     "IdentityServerUri": "PlaceholderForIdentityServerUrl",
     "BizFxUri": "PlaceholderForBizFxUrl",
     "Language": "PlaceholderForDefaultLanguage",
     "Currency": "PlaceholderForDefaultCurrency",
     "ShopName": "PlaceholderForDefaultShopName",
     "LanguageCookieName": "selectedLanguage",
     "EnvironmentCookieName": "selectedEnvironment",
     "AutoCompleteTimeout\_ms": 300
    }
    
    > !注基本的な開発シナリオでは、LanguageCookieNameとEnvironmentCookieNameプロパティのデフォルト値を使用することを推奨します。
    

## Commerce Engine Authoringサービス設定の更新

Commerce EngineのAuthoringサービスの設定を更新して、Business Toolsアプリケーションからのリクエストを受け入れる必要があります。

オーサリングサービスの構成を更新するには:

1.  Commerce Engineの開発環境で、例えば\\inetpub\\wwwroot\\CommerceAuthoring\_Sc\\wwwroot\\config.jsonconfig.jsonのAuthoring serviceファイルを開きます。
    
2.  "AppSettings"セクションで、"AllowedOrigins"の値を更新して"http://localhost:4200"を指定します。例えば:
    
    "AllowedOrigins": "<your deployment values>|http://localhost:4200",
    
3.  [Commerce EngineのBootstrap](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/bootstrap-the-commerce-engine.html "Bootstrap the Commerce Engine")で構成をグローバルデータベースに読み込みます。
    

## Sitecore Identityサービスの設定を更新してください

Sitecore Identity Serviceの設定を更新し、localhostポート4200をクライアントとして受け入れる必要があります。

Sitecore Identityサービスの構成を更新するには:

1.  Commerce Engineの開発環境で、Sitecore IdentityServerのサービスフォルダでSitecore.Commerce.Identity ServiceHost.xmlファイルを開いてください。例えば、\\inetpub\\wwwroot\\<yourDeployment>-IdentityServer\\wwwroot\\Config\\production\\Sitecore.Commerce.IdentityServer.Host.xmlを開きます。
    
2.  <Clients>セクションで<AllowedCorsOriginsGroup1>の値を<your\_deployment\_values>|http://localhost:4200に変えます。
    
    例えば:
    
    <AllowedCorsOrigins>
     <AllowedCorsOriginsGroup1>http://YOUR\_VALUES:4200|http://localhost:4200</AllowedCorsOriginsGroup1>
    
    </AllowedCorsOrigins>
    
3.  変更を保存してください
    

## SPEAKおよびBixFXパッケージをインストールする

Business Tools(BizFX)ソリューションを構築するには、まず必要なSPEAKおよびBizFXパッケージをインストールする必要があります。

> !注使用しているSitecore Experience Commerceのバージョンに付属しているSitecore Business Toolsのバージョンを必ずインストールしてください。

-   お好みのCLIツールを開き、以前にそのSitecore.BizFX.SDKを抽出したフォルダから以下のコマンドを実行します。
    
    npm install @speak/ng-bcl@2.0.0-r00116
    npm install @speak/styling@1.0.0-r00110
    npm install @speak/icon-fonts@1.1.0
    npm install @sitecore/bizfx
    npm install

## BizFxサンプルソリューションプロジェクトを構築し展開してください

サンプルのBizFxアプリケーションを構築・展開するには:

1.  解決策を構築するには、CLIウィンドウでコマンドng buildを実行します。
    
    > !注本番環境に最適化されたソリューションを得るには、ng build --configuration productionコマンドを実行します。
    
    Angularアプリケーションビルドプロセスは、解決策をワークスペースフォルダ内の*dist*という出力フォルダにコンパイルします。 *dist*フォルダ内で、sdkソリューションはウェブルートの websiteフォルダに相当します。
    
2.  BizFxソリューションを展開するには、dist/sdkフォルダの内容を <web root>\\<BizFx> フォルダにコピーしてください。