--- title: "ウォークスルー:MVCアプリケーションを静的に生成する方法" slug: "walkthrough--statically-generating-an-mvc-application" abstract: "Headless ServicesとNext.js JSSアプリを使ってMVCレイアウトやレンダリングをレンダリングします" --- # ウォークスルー:MVCアプリケーションを静的に生成する方法 Sitecoreが提供するヘッドレスレンダリングソリューション( [Sitecore Headless Services](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-headless-services.html "Sitecore Headless Services")や[Sitecore JavaScript Services SDK (JSS)](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-services-sdk--jss-.html "Sitecore JavaScript Services SDK (JSS)")などを用いて、JSS Next.jsアプリを使って静的にMVCアプリケーションを生成することができます。 JSSを使ってMVCアプリケーションを静的に生成するプロセスを始める前に、以下の前提条件を満たす必要があります: - XM/XPバージョン10.2+Sitecoreヘッドレスサービスモジュールバージョン19+Sitecore Sitecoreインスタンスにアクセスできます。 - [Sitecore JavaScriptサービスSDK(JSS)、](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-services-sdk--jss-.html "Sitecore JavaScript Services SDK (JSS)")[Next.js](https://nextjs.org/)、[Next.js Sitecore JavaScriptレンダリングSDK(JSS)](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html "Sitecore JavaScript Rendering SDK (JSS) for Next.js")にはある程度馴染みがありますね。 - [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")バージョン19+をインストールする必要があります。 - [APIキーを作成する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/create-a-sitecore-services-client-api-key.html "Create a Sitecore services client API key")必要があります。 > !重要これらの指示に従う際は、複数のレイアウト項目やカスタマイズが必要な段階的な変換をする場合は、既存のMVCページと静的MVCページの両方をサポートすることを念頭に置いてください。 このウォークスルーでは、以下の方法を説明します: - MVCアプリケーションを静的HTML生成に適応させます。 - レイアウトサービス応答にMVCレイアウトのプレースホルダーを含めてください。 - SitecoreレイアウトサービスをMVCレンダリング用のHTML出力に設定してください。 - MVCアプリケーションをレンダリングするためにJSS Next.jsアプリケーションを準備します。 - Next.jsアプリケーションを既存のMVCアプリからレイアウトや資産に対応させるように適応させましょう - Next.jsアプリケーションを起動します。 > !重要この変換プロセスは、JSSアプリケーションの選択や既存のSitecoreおよびMVCアプリケーションのセットアップによっていくつかの [制限](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/limitations-and-workarounds-for-static-generation-of-mvc-apps-with-jss.html "Limitations and workarounds for static generation of MVC apps with JSS")があります。 ## MVCアプリケーションを静的HTML生成に適応させる MVCアプリケーションは、JSSアプリを使った静的HTML生成に互換性があるように、いくつかの変更が必要になるかもしれません。 MVCアプリケーションを適応させるために: 1. JSSアプリで編集および静的生成をサポートするには、サイトのrootが */sitecore/templates/Foundation/JavaScript Services/App template*を継承していることを確認してください。 ![Site root item template inheritance](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/StaticMVCRootItemPageTemplate.png) 2. 編集サポートを有効にするには、ページのレイアウトがテンプレート */sitecore/templates/Foundation/JavaScript Services/JSS Layout*を使用しているか継承されていることを確認してください。 Path値は使用されず、有効なファイルパスである必要があります。デフォルトではJSSが /Views/JssApp.cshtmlを使用します。 3. [JSS辞書API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-dictionary-api.html "JSS Dictionary API")は、構成のdictionaryDomain属性など、特定のテンプレートや設定を必要とします。互換性のためにMVCソリューションを調整する必要があるかもしれません。 ## レイアウトサービス応答にMVCレイアウトのプレースホルダーを含める JSSアプリケーションでMVCレイアウトをレンダリングするには、レイアウト用のプレースホルダーをレイアウト [サービスの](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service") 応答に含める必要があります。 > !ヒントこのウォークスルーではREST Layout Serviceのエンドポイント例を使用しますが、この手続きはGraphQLとExperience Edgeの両方で良好に動作し、レイアウトクエリを使えばデータにアクセスできます。 レイアウトサービスの応答を確認するには、/sitecore/api/layout/render?item=/&sc\_apikey=のエンドポイントにアクセスしてください。設定済みのサイト開始項目JSON出力 / 。 > !注マルチサイトソリューションの場合、sc\_siteクエリパラメータを追加してください。 sc\_mode=normalクエリパラメータでレイアウトデータの編集を無効にします。 sitecore > route > placeholdersのJSONデータ構造にプレースホルダー情報が欠けている場合、すべてのレイアウトに対してレイアウトサービスの**プレースホルダー**フィールドを設定しなければなりません。このフィールドはレイアウトサービスのレスポンスデータに含まれるプレースホルダー情報を決定します。 レイアウトのplaceholdersフィールドを埋めるには: 1. コンテンツツリーの*sitecore/layouts/Layouts*の下、選択したレイアウトの下、すべての *ルート* のプレースホルダーをレイアウト **サービスのプレースホルダー** フィールドに追加してください。 > !注*Placeholder Settings*アイテムが存在しない場合は、それを作成してください。 ![Configuration interface for Layout Service Placeholders](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/StaticMVCConfigurePlaceholders.png) 2. 以前アクセスしたレイアウトサービスエンドポイントをリフレッシュしてください。 *Sitecore/route /placeholders*のデータにあるプレースホルダー情報が入力されています。データにはページレンダリングに必要なすべてのプレースホルダーやコンポーネントが含まれています。 ## SitecoreレイアウトサービスをMVCレンダリング用のHTML出力に設定してください レイアウトサービスの **プレースホルダー** フィールドの設定に従うと、JSON形式のプレースホルダー情報が得られます。 [すべてのコンポーネントをJavaScriptに変換](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/convert-components-from-mvc--c--razor--to-next-js--javascript-react--incrementally.html "Convert components from MVC (C#/Razor) to Next.js (JavaScript/React) incrementally")する前にMVCアプリケーションを静的にHTMLにレンダリングするには、JSSアプリケーションに到達する前にコンポーネント情報をHTMLに変換する必要があります。 レイアウトサービスをMVCレンダリング用のHTML出力に設定するには: 1. *sitecore/layout/Renderings*に移動し、レンダリングのHTML出力を有効にする方法のいずれかを用いてください: - 関連するレンダリングについては、HTML出力を手動で有効にするには、「 **HTMLとしてレンダリング** 」チェックボックスを選択してください。このオプションはすべてのネストレンダリングでも有効にする必要があります。 > !tipこの設定が必要なコンポーネントを特定するには、JSON出力のcomponentNameプロパティを確認してください。 componentNameはレンダリングアイテム名と一致しています。 ![View of the Render as HTML checkbox](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/LayoutServiceRenderAsHTML.png) - 拡張機能がインストールSitecore PowerShellされている場合、Sitecore PowerShell ISEツールで以下のスクリプトを実行し、*すべての*レンダリングに対して「**HTMLとしてレンダリング**」のチェックボックスを選択してください: > !注スクリプトを実行するには拡張機能Sitecore PowerShellインストールが必要です。 Get-ChildItem "/sitecore/layout/Renderings" -Recurse | Where-Object { $\_.TemplateName -eq "View rendering" -or $\_.TemplateName -eq "Controller rendering" } | ForEach-Object { $val = $\_.Fields"Render as HTML".Value if ($val -eq "1") { return } Write-Host "Setting '$($\_.Name)'" $\_.Editing.BeginEdit() $\_.Fields"Render as HTML".Value = 1 $\_.Editing.EndEdit() } - グローバル設定を使ってJSONレンダリングを無効にし、すべてのレンダリングをHTMLシリアライズに切り替えます: 2. 変更点を公開してください。 3. レイアウトサービスのエンドポイントを更新し、コンポーネントデータ出力がHTMLであることを確認しましょう。 ## MVCアプリケーションをレンダリングするためにJSS Next.jsアプリケーションを準備します MVCアプリケーションを静的に生成するには、[JSS for Next.js](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html "Sitecore JavaScript Rendering SDK (JSS) for Next.js")を使って基本的なJSS Next.jsアプリケーションを作成することをお勧めします。 > !ヒントJSSが提供するサンプルのNext.jsアプリケーションを基にアプリケーションを作成する前に、GraphQLサービスを使うかRESTサービスを使うか、MVCアプリケーションがJavaScriptに移行された際のプリレンダリング方法を検討してください。 > > Experience Edge for XMとの互換性のためにGraphQLを推奨します。 > > 作成時に特別なパラメータを使って、希望の工具やセットアップに合わせてアプリケーションを設定できます。利用可能なパラメータの詳細については、[jss createコマンドのドキュメント](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-rendering-sdk-cli-tools-api-reference.html#UUID-ba8bae12-5938-63d2-1ae1-451aec88abe5_UUID-63ee54c7-6c40-bc5a-0db9-0be674e71aa0 "jss create")を参照してください。 MVCアプリのHTML出力をレンダリングするためのNext.js JSSアプリケーションを作成するには: 1. ターミナルで、以下のコマンドを実行してJSSでNext.jsアプリケーションを作成します。 jss create nextjs --empty --fetchWith {REST|GraphQL} --prerender {SSG|SSR} > !重要 はMVCサイト名と一致しなければなりませんが、アプリ名のフォーマット制限に注意する必要があります。例えば、MyMvcAppは有効なMVCサイト名ですが、JSS CLIでは小文字のみが許可されています。JSSアプリケーションを作成する際は、例えばjss create my-mvc-app nextjs --empty --fetchWith {REST|GraphQL} --prerender {SSG|SSR}などの小文字アプリ名を指定してください。プロセスが終わったら、package.jsonファイル内でconfig.appNameプロパティをMyMvcAppに更新します。 2. [Next.js JSS申請書をSitecoreに出Connect](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-code-first-jss-next-js-application-to-sitecore.html "Walkthrough: Connecting a code-first JSS Next.js application to Sitecore")。 3. Next.jsアプリケーションのルートディレクトリで、Sitecore構成パッチファイルを確認してください /sitecore/config/.config。この構成はSitecoreインスタンスにデプロイする必要があります。 > !注既存のMVCサイトに対してすでに対応する 設定があるなら、サイト設定属性を統合したいかもしれません。 4. [高度なSitecoreエディターを使って編集を有効にしてください](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--connecting-a-next-js-jss-app-to-sitecore-editors.html "Walkthrough: Connecting a Next.js JSS app to Sitecore editors")。 ## Next.jsアプリケーションを既存のMVCアプリからレイアウトや資産に対応させるように適応させましょう JSS Next.jsアプリでSitecore MVCアプリケーションをレンダリングするには、対応するレイアウトと、スタイルやスクリプトなどのアプリMVCリソースへのアクセスが必要です。 Next.jsアプリケーションを適応させるには: 1. もしアプリがページのhtmlやbody要素のカスタマイズが必要な場合は、src/pagesディレクトリで [カスタムDocument componentを定義](https://nextjs.org/docs/advanced-features/custom-document) してください。 2. src/Layout.tsxファイルを適応させ、アプリケーションのルートレイアウト(ベースマークアップやルートのプレースホルダーを含む)をMVCベースのレイアウトに合わせます。 3. src/pages/\_app.tsxやsrc/Layout.tsxファイルを修正してフロントエンドの資産を取り入れてください。 > !ヒント[Next.jsで組み込みサポートされているCSSソリューション](https://nextjs.org/docs/basic-features/built-in-css-support)への移行を検討し、[next/scriptコンポーネント](https://nextjs.org/docs/basic-features/script)を使って外部スクリプトを読み込むことを検討してください。 > !注生成されたアプリはBootstrapおよびカスタムCSSを使用しています。詳細はディレクトリsrc/assets/を参照してください。 4. ビルド中に手つかずにしたいファイルは、Next.jsアプリケーションのルートディレクトリにあるpublicディレクトリに配置してください。詳細については、[静的ファイルの提供](https://nextjs.org/docs/basic-features/static-file-serving)に関するNext.jsドキュメントを参照してください。 5. DOMContentLoadedやドキュメント対応イベントに依存している既存のJavaScriptコードを、クライアント側のルート変更でイベント委任が保証されなくなるイベント委任のようなものを使うように調整しましょう。 6. Sitecore Content ManagementサーバーやContent Deliveryサーバーに返送したいリクエストに対してリライトを設定してください。JSSアプリケーションは共通のリダイレクト(Sitecore、メディア)で事前に設定されていますが、MVCソリューションでカスタマイズ可能なリダイレクトは必ず設定しなければなりません。 > !ヒントNext.jsは、特にすぐにJamstackアーキテクチャに変換したくないサイト機能のために、リ [ライトの設定](https://nextjs.org/docs/api-reference/next.config.js/rewrites) を段階的に導入できる強力な機能を備えています。 7. もしMVCアプリケーションが現時点でSitecore辞書を使用していない場合は、Next.jsアプリから一時的に辞書の使用を削除できます。 src/lib/page-props-factory.tsファイルで辞書呼び出しを削除してください。 8. もしあなたのMVCアプリケーションが多言語対応であれば、[Next.jsアプリケーション内で](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/internationalization-in-the-jss-sample-app-for-next-js.html "Internationalization in the JSS sample app for Next.js")Sitecoreの設定に合わせて国際化を設定する必要があります。そうでなければ、[JSS Next.jsアプリからコンテンツ翻訳機能を削除](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/remove-content-translation-functionality-from-the-jss-next-js-app.html "Remove content translation functionality from the JSS Next.js app")してください。 9. マークアップを直接Razorビューに注入するC#コードはレイアウトデータを代わりに使うようにリファクタリングする必要があります。例えば、*ヘッド*プレースホルダーに動的 タグを追加するなどです。 ## Next.jsアプリケーションを起動してください Next.jsアプリケーションは開発モードか本番モードで起動できます。 アプリケーションを開始し、開発を続けるには: - ターミナル内のJSS Next.jsアプリのルートディレクトリで、以下のスクリプトを実行します。 jss start:connected アプリケーションを起動し、その本番の動作をプレビューするには: - ターミナル内のJSS Next.jsアプリのルートディレクトリで、以下のスクリプトを実行します。 jss start:production これらの手続きを完了したら、[Next.js JSSアプリケーションを展開](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/deployment-options-for-jss-next-js-apps.html "Deployment options for JSS Next.js apps")できます。 また、[MVC/RazorからReact/Next.jsへのコンポーネント](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/convert-components-from-mvc--c--razor--to-next-js--javascript-react--incrementally.html "Convert components from MVC (C#/Razor) to Next.js (JavaScript/React) incrementally")変換を段階的に行うこともできます。