---
title: "ウォークスルー:MVCサイトにおけるクライアント側JSSアプリケーションの埋め込み"
slug: "walkthrough--client-side-embedding-jss-applications-in-mvc-sites"
abstract: "従来のSitecoreレンダリングの中でJSSアプリを動かす"
---
# ウォークスルー:MVCサイトにおけるクライアント側JSSアプリケーションの埋め込み

JSSアプリのクライアント側埋め込みは、通常のSitecoreレンダリングでJSSアプリを実行できる技術です。この技術は、JSSアプリのマークアップやアプリラッパータグを通常のMVC Sitecoreレンダリング中に埋め込むものです。

クライアント側の埋め込みはJSSアプリをサーバー上でレンダリングしません。これはシンプルさの面での利点であり(Node.jsのインストールは必須ではありません)、SEOの互換性やアプリの起動時間という点では不利です。

クライアントサイド埋め込みは、プロダクトコンフィギュレーター、金融計算機、多段階フォーム、eコマース機能(カート、チェックアウト)などのマイクロアプリケーションやツールに有効です。

このようなアプリの特徴には以下が含まれます:

-   それらは既存の、またはより大きなサイトに埋め込まれています。
-   SEOは通常、アプリ自体にとっては重要ではありません。
-   UXはしばしば多段階的かつ連続的なプロセスです。
-   彼らはしばしば複雑なUXを持ち、現代のJavaScriptフレームワークの恩恵を受けています。

JSSでサイト全体を構築したくなく、複雑なUXや主にフロントエンド駆動のツールやウィザード、計算機を使いたい場合には、[Embedded Wizardのサンプルアプリ](https://github.com/Sitecore/headless-examples/tree/main/examples/sitecore-embedded-jss-app) を使うことができます。

Embedded Wizardサンプルアプリのclient.jsファイルは、react-domを使ってwizard-app IDを使ったページ要素でアプリをレンダリングします。EmbeddedWizard.ascxサブレイアウトはwizard-app IDをページに含むdivを追加し、必要なスクリプトやスタイルをページに追加します。MVC実装では、これは簡単にView Renderingに変わる可能性があります。

実装において、JSSアプリのスクリプトやスタイルをグローバルに含めたくない場合は、レンダリングの存在に基づいて動的に含める仕組み(例えば[Sitecore Habitat](https://github.com/Sitecore/Habitat)のAssetsモジュールなど)を用いてください。このアプローチは[Helixの設計原則](http://helix.sitecore.net/principles/theming/scripting.html#)で説明されています。

多くのアプリを持っていてコンテンツ作成者に管理を任せたい場合は、自分でアプリのレジストリ(DOM ID付き)を作成し、コンテンツ作成者がどのアプリを埋め込むか選べるようにできます。

サンプルアプリのWizardコンポーネントはStepReferenceコンポーネントを使っているため、Sitecoreエディターでステップを管理できますが、フロントエンドでレンダリングする際にはコンポーネントデータを使ってステップを構築します。ウィザード内の各ステップは、Sitecoreエディターでの管理・編集を容易にするための別々のJSSルートです。 Stepコンポーネントは、各ステップが表示されるたびにレイアウトサービスから参照されたルートを読み込みます。各ステップは表示されると分析ツールに登録されます。 StepコンポーネントはAppコンポーネントと同じプレースホルダー名を使用しているため、ステップの内容を直接そのまま描画Appにレンダリングできます。

このウォークスルーを始める前に、Sitecore Headless Servicesを搭載したSitecoreインスタンスにアクセスし、[JSS CLIをグローバルにインストール](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/install-the-jss-cli-globally.html "Install the JSS CLI globally")する必要があります。

このウォークスルーでは、以下の方法を説明します:

-   JSSアプリを作成し、Sitecoreにデプロイします
-   ウィザード配置の設定
-   ウィザードの設定を確認してください

## JSSアプリを作成し、Sitecoreにデプロイします

最初のステップは、組み込みウィザードのサンプルアプリケーションを基にJSSアプリケーションを作成し、それをSitecoreに接続することです。

アプリを作成するには:

1.  ターミナルで以下のコマンドを実行します:
    
    jss create embedded-wizard sitecore-embedded-jss-app
    
    スクリプトはサンプルファイルをローカルにコピーし、すべての依存関係をインストールします。
    
2.  ターミナルを使って、embedded-jssアプリのソースディレクトリに移動します:
    
    cd embedded-wizard
    
3.  このアプリは、標準のサイトSitecore websiteとサンプル*Home*ページで動作するように設計されています。 [アプリケーションをSitecoreインスタンスにConnectし、Sitecoreインスタンスのデフォルトホスト名を使用します](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-jss-application-to-sitecore.html "Walkthrough: Connecting a JSS application to Sitecore")。
    
4.  Sitecoreコンテンツエディターを開き、コンテンツツリーでアプリが利用可能かどうかを確認して、アプリが正しく展開されているか確認してください */sitecore/content/Home/EmbeddedWizard*:
    
    ![The Embedded Wizard app in the Sitecore content tree](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/wizard-app-deployed-items.png)
    
5.  アプリが統合モードで独立して動作しているかは、*http://\[sitecorehost\]/EmbeddedWizard/Wizard*を参照して確認してください。
    
    ![Successful rendering of the Embedded Wizard app in the browser](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/wizard_success.png)
    

## ウィザード配置の設定

アプリケーションがSitecoreに展開されたら、ウィザードの配置設定を進めることができます。

必要なアイテムとレンダリングを設定するには:

1.  アプリをembedded-wizard/sitecore/rendering/EmbeddedWizard.ascxからSitecoreインスタンスのWebsite/layoutsフォルダに埋め込むための付属のサブレイアウトを展開します。ターミナルで以下のスクリプトを実行します:
    
    jss deploy-rendering
    
    > !注deploy-renderingスクリプトはアプリケーションのpackage.jsonファイルで定義されています。
    
2.  Sitecoreで、/sitecore/layout/Sublayoutsの下に新しいサブレイアウトを作成します。
    
3.  サブレイアウトのAscx fileフィールド値を /layouts/EmbeddedWizard.ascxに変更します。
    
4.  /sitecore/content/Homeアイテム、リボン、**プレゼンテーション**タブ、**レイアウト**グループで**「詳細**」をクリックし、「**レイアウト詳細**」ダイアログでデフォルトのレイアウトを編集してください。
    
5.  **「サンプルレンダリング**、**変更**」をクリックします。作成したサブレイアウトを選択し、**OK**をクリックします。
    

## ウィザードの設定を確認してください

組み込みウィザードの設定が正しくできているか確認するために:

1.  Sitecoreからログアウトするか、プライベートブラウザウィンドウを開いてください。
    
2.  Sitecoreインスタンスのホームページに移動してください。ホームページにアプリが埋め込まれているのが見えるはずです。
    
    ![The Embedded Wizard on the Home page](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/wizard-integrated.png)