tackme31

こんにちは。tackmeと申します。職場でプロジェクトのテストを整備する動きがあり、フロントエンドのテストにReact Testing Library（以下、RTL）を導入することになりました。テストの作成に際して、ライブラリの作者であるKent C. Dodds氏の記事"Write tests. Not too many. Mostly integration."を参考にし、インテグレーションテストに主眼を置く方針を取りました。しかし実際にテストの作成を始めてみると「ユニットテストとインテグレーションテストの境界線がどこにあるか」という疑問や、「具体的にはどのようなテストケースを...

[React] コンポーネントのインテグレーションテストって何を書けばいいの？

職場で自チーム内にフロントエンド初心者のエンジニアが多かったので、不定期でType Challengesを解いてみようの会を開いてました。この記事はそのときに作成した資料をブラッシュアップしたものです。私自身もフロントエンドの経験は少ないので、間違ってるところあるかもしれません。 どういう人向け？以下のような人向けの記事です。Type Challengesやってみたけど、easyすら難しくてよくわからん。TypeScriptのドキュメントを一通り読んでみたけど、実際に型をどうやって使うか想像つかない…他の人の答えを見てみたけど、どうやってその回答を導き出したのか気になる。...

Type Challengesの問題を解いてみる: First of Array

こんにちは。tackmeと申します。Zennに投稿するのはこれが初めてです。趣味でVisual Studioの拡張機能やChromeの拡張機能を作ったり、ちょっとしたライブラリ等を書いたりしています。仕事ではReact, .NET CoreでWebアプリの開発を担当しています。さて、私が働いている会社では、コードレビューのチェック項目のうち機械的にチェックできるものはIDE上に警告をだして実装時に気がつけるようにしています。例えば以下のように日本語の文字列を多言語化せずに（_Tを使わずに）入力すると警告を出してくれます。この独自の警告はコードアナライザーと呼ばれる機能で実現して...

[C#] Visual Studioで独自の警告を作ってチームで共有する

ソースコードの複雑さ、不具合のリスクを定量化したコードメトリクス^1というものがあります。コードメトリクスは計算方法によっていくつか種類があり、メジャーなものだと以下のものがあります。Cyclo…

メソッド上にコードの複雑さを表示するVisual Studio拡張機能を作りました

意図せずネガティブな記事やコメントを見てしまい気分が悪くなることはありませんか？ そんな問題を解決するために、見たくない単語を画面上から隠してくれる拡張機能を作りました。この記事では作成した拡張機…

見たくないテキストをSCPっぽく隠してくれるChrome拡張機能[データ削除済み]

コントローラのアクションでDictionary型のGETパラメータを受け取るには、以下のようなフォーマットでパラメータを記述します。https://example.com/api/Sample/SampleData?param[key1]=val1&param[key2]=val2&...上記のリクエストを投げると、アクションで定義したparam引数で以下のように値を受け取ることができます。[Route("api/[controller]")]public class SampleController : Controller{    [HttpGet("[action]")]    public Data SampleData(Dictionary<string, string> param)    {        var val1 = param["key1"];        var val2 = param["key2"];        return ...;    }}先ほどの例でparamパラメータ無しのリクエストを投げるとアクションが見つからずエラーが発生します。https://example.com/api/Sample/SampleData=> 500 Error空のディクショナリを渡すには、以下のような値無しのparamパラメータ付きのリクエストを投げる必要があります。https://example.com/api/Sample/SampleData?param[HttpGet("[action]")]public InitData Init(Dictionary<string, string> param){    var _ = param.Count; // => 0    return ...;}c# - Is it possible to get Dictionary from query string? - Stack Overflow

コントローラでDictionary型のGETパラメータを受け取る

SonarQubeで大きなプロジェクトの解析を行うと、以下のようなエラーが発生し処理が停止してしまうことがあります。java.lang.OutOfMemoryError: Java heap spacedockerでコンテナ起動時に環境変数 SONAR_CE_JAVAOPTS="-Xmx1G -Xms1G" を指定してヒープサイズを大きくすると解消できます。docker run -d --name sonarqube --env SONAR_CE_JAVAOPTS="-Xmx1G -Xms1G" -p 9000:9000 sonarqube:ltsHow to set Sonarqube Compute Engine Java memory parameters with Environment Variables - Get help / SonarQube - SonarSource Community

SonarQubeでJavaのメモリ不足エラーが発生した際の対処法

PowerShellの初期読み込みファイル（ii $PROFILEで開けます）に以下を追記するとホームディレクトリを変更できます。# $HOMEの変更Remove-Variable -Force HOMESet-Variable HOME $env:HOME# '~'の解決先を変更$fs = $ExecutionContext.SessionState.Provider.Get("FileSystem")$fs[0].Home = $env:HOMEこれで$HOMEの値やcd ~の移動先が設定したディレクトリに変更されます。

PowerShellでホームディレクトリを変更する

「ローカル環境だと思ってアイテムを編集したら実は本番環境だった😱」みたいな経験、ありませんか？私はあります。何度かやらかしました。こんな感じの画面になります。一目瞭然ですね。お察しの方もいらっしゃるかもしれませんが、Chromeの拡張機能であるStylusを使用します。Stylusを使用すると、特定のURLで任意のCSSを適用することができます。Stylus - Chrome ウェブストアインストールしたらStylusの管理画面を開き、左側のメニューから「新スタイルを作成」をクリックします。スタイルの編集画面が表示されるので、まずは適当な名前をつけて保存してください。次に左側のメニューの「インポート」をクリックします。テキストエリアが表示されるので、以下のCSSをコピペして「スタイルを上書き」を選択してください。@-moz-document url-prefix("http://foo.prod.sc"), domain("bar.prod.sc") {.sc-globalHeader, .scRibbon .chunk, .scRibbonToolbarStrip {    background-color: #3765bf;}.scRibbon {    background-color: #1c3e7d;}.scRibbon .chunk, .scRibbonToolbarStrip,.scRibbonNavigatorButtonsActive,.scRibbonToolbar .scRibbonToolbarStrip {    background-color: #6b94e1;}.sc-applicationContent-main {    background-color: #c3ddff;}}@-moz-document url-prefix("http://foo.prod.sc/sitecore/login"), domain("bar.prod.identityserver") {body, .login-outer {    background: none;    background-color: #6998ff;}.login-page [for='Username']:before, #loginLbl:before {    content: "【本番環境】 ";}.login-page [for='Password']:before, #passLabel:before {    content: "【本番環境】 ";}}以下のように2つのCSSが読み込まれます。上が管理画面のスタイル、下がログイン画面のスタイルです。それぞれのスタイルの下部に「適用先」とあるので、上のスタイルに管理画面のURL（ドメイン）を指定して、下にスタイルにログイン画面のURL（ドメイン）を指定してください。最後に保存すればおしまいです。実際にSitecoreにアクセスしてみてください。Sitecoreのイメージカラーの補色っぽい色を設定していますが、もし色が気に入らなければ適当に変えてください。それでは、Happy Sitecoring!

カスタマイズなしでSitecoreの管理画面の色を変更する

JSSでウェブサイトを作成していた際にGraphQLで詰まったので備忘録として残しておきます。Integrated GraphQLだと動的にパラメータを変更するような処理が組めないので、そういう場合はConnected GraphQLを使うことになります。しかし、Connected GrapQLを使用したコードをSitecoreへデプロイしてIntegrated Modeで動作させると以下のようなエラーが発生します。unable to verify the first certificateこれはnode.jsはWindowsの証明書ストアを参照しないため、SSRの実行時にAPIへのリクエストで証明書の検証に失敗することが原因です。まずはウェブサイトの中間（ルート）証明書をブラウザから取得します。Export & Download — SSL Certificate from Server (Site URL) | by Menaka Jain | Medium証明書の形式は Base 64 encoded X.509 (.CER) を選択してください。次にその証明書を適当なフォルダに配置します。最後にSitecore.configへ以下のパッチを適用します。JSSで使用するNode.jsのプロセスに環境変数 NODE_EXTRA_CA_CERTS を割り当てています（システム環境変数に直接設定してもOKです）。<configuration xmlns:role="http://www.sitecore.net/xmlconfig/role/">  <sitecore role:require="ContentManagement or ContentDelivery or Standalone">    <javaScriptServices>      <renderEngines>        <renderEngine name="nodejs">          <instance id="defaults">                        <EnvironmentVariables>              <var name="NODE_EXTRA_CA_CERTS" value="C:\path\to\certificate.cer" />            </EnvironmentVariables>          </instance>        </renderEngine>      </renderEngines>    </javaScriptServices>  </sitecore></configuration>node.jsでは環境変数のNODE_EXTRA_CA_CERTSに証明書ファイルへのパスを設定しておくことで、node.jsがその証明書を参照するようになります。これでエラーが発生せずにConnected GrapQLを使用できるようになります。JSS headless SSR proxy “unable to verify the first certificate” – Dev's Encore

JSSのIntegrated ModeでConnected GraphQLを使用すると証明書エラーが発生する

Azure Searchで取得したファセットのカウント数と実際のドキュメントの数が異なっている現象に遭遇しました。Azure Searchではシャーディングアーキテクチャが原因で不正確な値を返すことがあるようです。ファセット取得クエリで以下のようにcountに大きな値を渡すことで正確な値を取得できるようになります。&facet=color,count:100ただしドキュメント数が多い場合はパフォーマンスが低下する可能性があるため注意が必要です。Add a faceted navigation category hierarchy - Azure Cognitive Search | Microsoft Docs

Azure Searchで取得したファセットのカウント数が実際のドキュメント数と異なる場合の対処法

トップページなどによく見られるスライダー（カルーセルパネル）は、画像が読み込まれるまで高さが計算できず、コアウェブバイタルのContent Layout Shift (CLS)に影響を与えます。今回はよく使用されるスライダーのライブラリであるslick.jsでこの問題に対応する方法をご紹介します。例として以下のようなスライダーのHTMLを考えます。<ul class="slider">  <li>    <img src="/image1" />  </li>  <li>    <img src="/image2" />  </li>  <li>    <img src="/image3" />  </li></ul>liタグのに設定した画像をスライダーで表示する簡単なHTMLです。まずCLSの対策では画像に対してwidthおよびheight属性を指定することが重要です。<ul class="slider">  <li>        <img src="/image1" width="1000" height="400" />  </li>  <li>    <img src="/image2" width="1000" height="400" />  </li>  <li>    <img src="/image3" width="1000" height="400" />  </li></ul>ただしslick.jsを使用している場合、スクリプトの読み込みが完了するまでは全ての画像が表示されるため、余計なスペースが確保されてしまいます。これを解決するために、以下のスタイルを当てます。ul.slider > li:not(:first-child) {    display: none;}これは1つ目以外の画像を予め非表示にしておくスタイルです。これではスクリプト読み込み後でも2つ目以降の画像が表示されないままなのでは？と思うかもしれませんが、slider.jsではスライダーを作成する際にulタグとliタグの間にdivタグを挟み込みます。ulタグの直下のliタグに対してスタイルを当てているため、スクリプト読み込み後はセレクターの対象から外れ、スライダーに画像が表示されるようになります。これにより、スクリプト読み込み前は1つ目の画像のスペースだけが確保され、読み込み語は1つ目の画像のみが表示されるため、レイアウトのズレが発生しなくなります。Javascript sliders will kill your website performance | by Javier Villanueva | ITNEXT

slick.jsで作成したスライダー読み込み時のレイアウトずれ対策

Sitecore 9.0以降ではルールベースのconfigに対応しており、検索プロバイダやサーバーロールに応じて異なるconfigを適用できるようになりました。これらの情報はWeb.configで*:defineという名前のApp Settingsを用いて定義されています。<add key="role:define" value="ContentDelivery" /><add key="search:define" value="Solr" /><add key="exmEnabled:define" value="yes" />これらの他にenv:defineという独自の環境名を定義することができる設定が用意されており、これを用いることでデプロイスロットにだけconfigを設定することができます。Azureポータルでデプロイスロットを開き、Configurationを選択します。New application settingを選択します。Nameにenv:defineを、ValueにStagingを入力して、Deployment slot settingにチェックを入れます。Stagingだけに適用したいconfigの属性に env:require="Staging" を追加します。<configuration xmlns:env="http://www.sitecore.net/xmlconfig/env/" xmlns:patch="http://www.sitecore.net/xmlconfig/">    <sitecore>        <settings>                        <setting name="Media.MediaLinkServerUrl" env:require="Staging">                <patch:attribute name="value">http://staging.example.com</patch:attribute>            </setting>        </settings>    </sitecore></configuration>これでデプロイスロットだけにconfigが適用されます。Deployment slot settingにチェックを入れた設定はスワップしてもスワップ前のサーバーに適用されるので、このような挙動を実現できます。また以下のように!を使って指定した環境名以外に適用することも可能です。<configuration xmlns:env="http://www.sitecore.net/xmlconfig/env/">  <sitecore>    <settings>            <setting name="MySetting" value="Foo" env:require="Staging" />            <setting name="MySetting" value="Bar" env:require="!Staging" />    </settings>  </sitecore></configuration>Use a rule-based configurationBlue-Green deployment of Sitecore solutions hosted in Azure PaaS | Wunderman Thompson Technology

Sitecore PaaSでデプロイスロットだけにconfigを適用する方法

先日Sitecoreのレコメンドライブラリ「Cairngorm」をリリースしました。作成にあたって色々詰まったところがあったので、今回は一からライブラリを作成する方法を解説します。Sitecoreのライブラリに特有の作業は「プロジェクトの作成」節だけなので、パッケージの作成方法をご存じの方はそれ以外は飛ばしてOKです。まずはVisual Studioで以下の設定でプロジェクトを作成します。テンプレート: クラス ライブラリ (.NET Framework)フレームワーク: .NET Framework 4.5.2つぎにライブラリの作成にあたって必要になるSitecore関連のパッケージをNuGetでインストールします。8.2.160729を指定してください。今回は例として、Sitecore.Kernelをインストールして進めます。一度Visual Studioを閉じて、プロジェクトフォルダにある "packages.config" を開いてください。Sitecore.KernelのpackageノードにdevelopmentDependency="true"を追加しましょう。<?xml version="1.0" encoding="utf-8"?><packages>  <package id="Sitecore.Kernel" version="8.2.160729" targetFramework="net452" developmentDependency="true" /></packages>これで、Sitecoreのバージョンに依存しないライブラリが作成できます。具体的には Sitecore 8.2.1 - 9.x に対応できます。おそらく10にも対応できると思いますが、試していないのでわかりません。  Visual Studioを開き、ライブラリの中身を実装します。ここは特に注意点はありません。好きなようにコードを書いてください（もちろん、.NET Framework 4.5.2なので構文には制限があります）。configファイルを使うライブラリの場合は、プロジェクトにファイルを追加してプロパティでビルドアクションを「コンテンツ」に設定しておいてください。こうしておくと、NuGetでライブラリをインストールすると自動的にconfigファイルが追加されるようになります。  実装を終えたら、AssemblyInfo.csを編集します。それぞれの項目に何を設定すべきかは調べれば出てくると思いますが、ひとまず以下の項目を記述しておけばOKです。  AssemblyTitle: ライブラリ名AssemblyCompany: 作成者の名前AssemblyProduct: ライブラリ名AssemblyCopyright: "Copyright c {年} {作成者名}"AssemblyVersion: 適当なバージョンAssemblyFileVersion: 適当なバージョン私は初めてのバージョンは大体0.1.0を設定しますが、別に1.0.0でも問題ないと思います。次にプロジェクトフォルダ以下に{プロジェクト名}.nuspecという名前でファイルを作成します。ファイルの中身は以下を貼り付けてください。<?xml version="1.0" encoding="utf-8"?><package>  <metadata>    <id>$id$</id>    <version>$version$</version>    <authors>$author$</authors>    <owners>$author$</owners>    <requireLicenseAcceptance>false</requireLicenseAcceptance>    <license type="expression">MIT</license>    <description>$description$</description>    <releaseNotes></releaseNotes>    <copyright>Copyright @2020 $author$</copyright>  </metadata></package>ライセンスは好きなものを設定しましょう。また上記以外にも色々と設定項目があるので、詳しくは以下のURLを参照してください。https://docs.microsoft.com/ja-JP/nuget/reference/nuspecパッケージの作成にはNuGet CLIを使います。以下のURLからnuget.exeをダウンロードして適当なフォルダに配置し、パスを通しておいてください。https://docs.microsoft.com/ja-jp/nuget/consume-packages/install-use-packages-nuget-cliまずはプロジェクトをRelease構成でビルドしてください。$ cd /path/to/solution/project # プロジェクトのフォルダに移動$ nuget pack -Prop Configuration=Release処理が終わると、作業フォルダに {プロジェクト名}.{バージョン}.nupkg という名前でパッケージが生成されているはずです。最後に以下のサイトに従ってNuGet Galleryにパッケージを公開することができます。一度公開したパッケージは削除できないので注意してください。https://docs.microsoft.com/ja-jp/nuget/nuget-org/publish-a-package上記以外にもnuget pushコマンドを使って公開することもできます。どちらを使っても同じなので好きな方を選んでください。また、NuGet Galleryに公開しなくても.nupkgファイルさえあればプロジェクトにインストールすることができます。共有フォルダを利用してnugetパッケージを管理する方法 - Qiitaはじめから公開するのは怖い、という方や社内でだけ共有したい、という方はこちらの方法を使うことをオススメします。今回はソースコードだけを提供するライブラリの作成方法でした。ライブラリの一部としてSitecoreのアイテムも提供したい場合は今回の方法では実現できません。  アイテムも提供したい場合は、一度ライブラリを適用したSitecoreの環境を作成して、Sitecoreのパッケージを作成しましょう。作成したパッケージはGitHubやSitecore Marketplaceで公開すればOKです。ライブラリの作成はいい経験にもなりますし、Sitecore MVPへの応募時のアピールにもなります。皆さんもぜひライブラリを作成して公開していきましょう。それでは、Happy Sitecoring！

Sitecoreのライブラリを開発する

In Sitecore Commerce, a category/product entity associated with the different parents is treated as the different items in the Content Editor. Each item's fields are kept in the entity's ExternalSettings component per entity relationship. So one item  is edited, the others will not be updated. You can change this behavior by customizing the CatalogDataProvider class.  To retrieve all items that share an entity, use the CatalogRepository class. The implementation is the following.public List<Item> GetEntityShareCatalogItems(Item item){    // Deterministic ID is an item's ID in the Content Editor.    var deterministicId = item.ID.Guid.ToString();    // Sitecore ID is an one-to-one GUID with the entity.    // This is used for mapping entity with items internally, so not visible in the Content Editor.    var catalogRepository = new CatalogRepository(item.Language.Name);    var sitecoreId = catalogRepository.GetSitecoreIdForDeterministicId(deterministicId);    if (string.IsNullOrWhiteSpace(sitecoreId))    {        return new List<Item> { item };    }    var entityId = catalogRepository.GetEntityIdFromMappings(sitecoreId);    if (string.IsNullOrWhiteSpace(entityId))    {        return new List<Item> { item };    }    // Get all items that share the entity ID.    var deterministicIds = catalogRepository.GetDeterministicIdsForEntityId(entityId, includeVariations: true);    if (deterministicIds == null || !deterministicIds.Any())    {        return new List<Item> { item };    }    return deterministicIds        .Select(id => ID.Parse(id, ID.Null))        .Select(item.Database.GetItem)        .Where(item => item?.Name == item.Name)        .Where(item => item.DescendsFrom(item.TemplateID))        .Where(item => item.Language == item.Language)        .ToList();}And apply field changes to all the items by customizing the CatalogDataProvider.SaveItem method.public class MyCatalogDataProvider : CatalogDataProvider{    public override bool SaveItem(ItemDefinition itemDefinition, ItemChanges changes, CallContext context)    {        if (!CanProcessItem(itemDefinition, false))        {            return false;        }        using (new LanguageSwitcher(changes.Item.Language))        {            // Call the method here.            var catalogItems = GetEntityShareCatalogItems(changes.Item);            var success = true;            // Apply the same changes to all the items.            foreach (var item in catalogItems)            {                var definition = new ItemDefinition(item.ID, itemDefinition.Name, itemDefinition.TemplateID, itemDefinition.BranchId);                var clonedChanges = changes.Clone(item);                try                {                    success &= base.SaveItem(definition, clonedChanges, context);                }                catch (Exception ex)                {                    success = false;                }            }            return success;        }    }}Then replace the default data provider with the customized one.<?xml version="1.0" encoding="utf-8" ?><configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">  <sitecore>    <dataProviders>      <catalogProvider type="Sitecore.Commerce.Engine.Connect.DataProvider.CatalogDataProvider, Sitecore.Commerce.Engine.Connect">        <patch:attribute name="type">Namespace.To.MyCatalogDataProvider, Assembly</patch:attribute>      </catalogProvider>    </dataProviders>  </sitecore></configuration>Now when a catalog item is saved, all related items are updated together.

Update all items that share the same catalog entity when the item is saved

Sitecoreでは初めて描画するレンダリング（View）はアクセス時にコンパイルされます。ページへの初回アクセスが遅くなる原因の一つは、この実行時コンパイルにあります。Viewファイルが含まれているプロジェクトに、NuGetで RazorGenerator.MsBuild をインストールします。依存関係は無視してOKです。以下のパッチを適用します。<?xml version="1.0" encoding="utf-8"?><configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"><sitecore><settings>    <setting name="Mvc.UsePhysicalViewsIfNewer">    <patch:attribute name="value">false</patch:attribute>  </setting></settings><mvc>    <precompilation>    <assemblies>      <assemblyIdentity name="Habitat.Foundation.Account" />      <assemblyIdentity name="Habitat.Feature.Search" />    </assemblies>  </precompilation></mvc></sitecore></configuration>プロジェクトをデプロイします。以上です。  dnSpy等でビルドしたアセンブリを除いてみると、名前空間ASPにコンパイルされたViewが生成されていることを確認出来ます。プリコンパイルを設定すると、たとえサーバー上のViewファイルを編集してもページに適用されなくなります。Viewファイルを変更した際には必ずソースコードのデプロイを行うよう注意してください。Olmec Dev | Sitecore 9 View Precompilation

Sitecoreでウェブサイトの初期表示を速くする方法（Viewのプリコンパイルの設定方法）

Sitecore XCのビジネスツールはAngularで実装されており、簡単にカスタマイズできるようになっています。SDKが用意されているので、開発環境を構築する方法をまとめました。  以下の手順ではSitecore XC 9.2.0を使用することを前提とします。① お使いのマシンにnode/npmをインストールします。② npmでangular-cliをインストールします。$ npm install -g @angular/cli③ Sitecore Commerceのインストールパッケージに含まれているSitecore.BizFX.SDK.3.0.7.zipを解凍します。今回は例としてC:\Project\BizFxに解凍します。④ Sitecore Commerceのインストールパッケージに含まれているspeak-ng-bcl-0.8.0.tgzとspeak-styling-0.9.0-r00078.tgzを、C:\Project\BizFx内にコピーします。⑤ 以下のコマンドを実行して、Sitecoreのnpmレジストリを登録します。$ cd C:\Project\BizFx # 作業フォルダに移動$ npm config set @speak:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/$ npm config set @sitecore:registry=https://sitecore.myget.org/F/sc-npm-packages/npm/⑥ 以下のコマンドを実行して、必要なパッケージをインストールします。$ cd C:\Project\BizFx # 作業フォルダに移動$ ​​​​​​​npm install .\speak-ng-bcl-0.8.0.tgz$ npm install .\speak-styling-0.9.0-r00078.tgz$ npm install @sitecore/bizfx$ npm install⑦ Sitecore Commerceで使用しているIdentityServerの以下のファイルを修正します。Config\production\Sitecore.Commerce.IdentityServer.Host.xml <AllowedCorsOrigins>-  <AllowedCorsOriginsGroup1>https://localhost:4200|https://localhost:5000</AllowedCorsOriginsGroup1>+  <AllowedCorsOriginsGroup1>http://localhost:4200|https://localhost:4200|https://localhost:5000</AllowedCorsOriginsGroup1>   <AllowedCorsOriginsGroup2>https://bizfx.xc920.local|https://commerceauthoring.xc920.local</AllowedCorsOriginsGroup2>   <AllowedCorsOriginsGroup2>https://bizfx.xc920.local|https://commerceauthoring.xc920.local</AllowedCorsOriginsGroup2> </AllowedCorsOrigins>⑧ Commerce Authoringエンジンの以下のファイルを修正します。wwwroot\config.json {   "AppSettings": {     ...     "AllowedOrigins": [+        "http://localhost:4200",         "https://localhost:4200",         "https://bizfx.xc920.local",         "https://sc920.sc"     ],-    "AntiForgeryEnabled":  true,+    "AntiForgeryEnabled":  false,   },⑨ IISを再起動し、実行中のビジネスツール（BizFx）のサイトを停止します。⑩ 作業フォルダにある以下のファイルを修正します。C:\Project\BizFx\src\app\assets\config.json{  "EnvironmentName": "HabitatAuthoring",  "EngineUri": "{Commerce AuthoringのURL}",  "IdentityServerUri": "{Identity ServerのURL}",  "BizFxUri": "http://localhost:4200",  "Language": "en",  "Currency": "USD",  "ShopName": "Storefront",  "LanguageCookieName": "selectedLanguage",  "EnvironmentCookieName": "selectedEnvironment",  "AutoCompleteTimeout_ms": 300}{Commerce AuthoringのURL}および{Identity ServerのURL}には、お使いのSitecore Commerceで使用しているものを設定してください。⑪ 以下のコマンドを実行して、ビジネスツールをビルド・実行します。$ cd C:\Projects\BizFx # 作業フォルダに移動$ ng serve実行後、http://localhost:4200にアクセスしてビジネスツールが正常に動作することを確認してください。Marchandisingツールでエラーが発生する場合は、CORSやAnti-Forgeryの設定が正しくできていない可能性があります。  ① IISで実行中のビジネスツール（BizFx）のサイトを停止します。② 以下のコマンドを実行してプロジェクトをビルドします。$ cd C:\Projects\BizFx # 作業フォルダに移動$ ng build -prod実行すると、作業フォルダのdist/sdkにビルドされたファイルが出力されます。③ 出力されたファイルのうちassets/config.json以外をお使いのビジネスツールの物理フォルダに上書きコピーします。以上でデプロイが完了します。IISでBizFxを起動し、動作を確認してください。