ウォークスルー

MVCアプリケーションを静的HTML生成に適応させる

MVCアプリケーションは、JSSアプリを使った静的HTML生成に互換性があるように、いくつかの変更が必要になるかもしれません。

MVCアプリケーションを適応させるために:

1. JSSアプリで編集および静的生成をサポートするには、サイトのrootが /sitecore/templates/Foundation/JavaScript Services/App templateを継承していることを確認してください。

   

2. 編集サポートを有効にするには、ページのレイアウトがテンプレート /sitecore/templates/Foundation/JavaScript Services/JSS Layoutを使用しているか継承されていることを確認してください。 Path値は使用されず、有効なファイルパスである必要があります。デフォルトではJSSが /Views/JssApp.cshtmlを使用します。

3. JSS辞書APIは、構成のdictionaryDomain属性など、特定のテンプレートや設定を必要とします。互換性のためにMVCソリューションを調整する必要があるかもしれません。

レイアウトサービス応答にMVCレイアウトのプレースホルダーを含める

JSSアプリケーションでMVCレイアウトをレンダリングするには、レイアウト用のプレースホルダーをレイアウト サービスの 応答に含める必要があります。

!ヒントこのウォークスルーではREST Layout Serviceのエンドポイント例を使用しますが、この手続きはGraphQLとExperience Edgeの両方で良好に動作し、レイアウトクエリを使えばデータにアクセスできます。

レイアウトサービスの応答を確認するには、<cm_server>/sitecore/api/layout/render?item=/&sc_apikey=<api_key>のエンドポイントにアクセスしてください。設定済みのサイト開始項目JSON出力 / 。

!注マルチサイトソリューションの場合、sc_siteクエリパラメータを追加してください。 sc_mode=normalクエリパラメータでレイアウトデータの編集を無効にします。

sitecore > route > placeholdersのJSONデータ構造にプレースホルダー情報が欠けている場合、すべてのレイアウトに対してレイアウトサービスのプレースホルダーフィールドを設定しなければなりません。このフィールドはレイアウトサービスのレスポンスデータに含まれるプレースホルダー情報を決定します。

レイアウトのplaceholdersフィールドを埋めるには:

1. コンテンツツリーのsitecore/layouts/Layoutsの下、選択したレイアウトの下、すべての ルート のプレースホルダーをレイアウト サービスのプレースホルダー フィールドに追加してください。

   !注Placeholder Settingsアイテムが存在しない場合は、それを作成してください。

   

2. 以前アクセスしたレイアウトサービスエンドポイントをリフレッシュしてください。 Sitecore/route /placeholdersのデータにあるプレースホルダー情報が入力されています。データにはページレンダリングに必要なすべてのプレースホルダーやコンポーネントが含まれています。

SitecoreレイアウトサービスをMVCレンダリング用のHTML出力に設定してください

レイアウトサービスの プレースホルダー フィールドの設定に従うと、JSON形式のプレースホルダー情報が得られます。

すべてのコンポーネントをJavaScriptに変換する前にMVCアプリケーションを静的にHTMLにレンダリングするには、JSSアプリケーションに到達する前にコンポーネント情報をHTMLに変換する必要があります。

レイアウトサービスをMVCレンダリング用のHTML出力に設定するには:

1. sitecore/layout/Renderingsに移動し、レンダリングのHTML出力を有効にする方法のいずれかを用いてください:

   • 関連するレンダリングについては、HTML出力を手動で有効にするには、「 HTMLとしてレンダリング 」チェックボックスを選択してください。このオプションはすべてのネストレンダリングでも有効にする必要があります。

     !tipこの設定が必要なコンポーネントを特定するには、JSON出力のcomponentNameプロパティを確認してください。 componentNameはレンダリングアイテム名と一致しています。

     

   • 拡張機能がインストール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を使って基本的なJSS Next.jsアプリケーションを作成することをお勧めします。

!ヒントJSSが提供するサンプルのNext.jsアプリケーションを基にアプリケーションを作成する前に、GraphQLサービスを使うかRESTサービスを使うか、MVCアプリケーションがJavaScriptに移行された際のプリレンダリング方法を検討してください。

Experience Edge for XMとの互換性のためにGraphQLを推奨します。

作成時に特別なパラメータを使って、希望の工具やセットアップに合わせてアプリケーションを設定できます。利用可能なパラメータの詳細については、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。

3. Next.jsアプリケーションのルートディレクトリで、Sitecore構成パッチファイルを確認してください /sitecore/config/.config。この構成はSitecoreインスタンスにデプロイする必要があります。

   !注既存のMVCサイトに対してすでに対応する 設定があるなら、サイト設定属性を統合したいかもしれません。

4. 高度なSitecoreエディターを使って編集を有効にしてください。

Next.jsアプリケーションを既存のMVCアプリからレイアウトや資産に対応させるように適応させましょう

JSS Next.jsアプリでSitecore MVCアプリケーションをレンダリングするには、対応するレイアウトと、スタイルやスクリプトなどのアプリMVCリソースへのアクセスが必要です。

Next.jsアプリケーションを適応させるには:

1. もしアプリがページのhtmlやbody要素のカスタマイズが必要な場合は、src/pagesディレクトリで カスタムDocument componentを定義 してください。

2. src/Layout.tsxファイルを適応させ、アプリケーションのルートレイアウト(ベースマークアップやルートのプレースホルダーを含む)をMVCベースのレイアウトに合わせます。

3. src/pages/_app.tsxやsrc/Layout.tsxファイルを修正してフロントエンドの資産を取り入れてください。

   !ヒントNext.jsで組み込みサポートされているCSSソリューションへの移行を検討し、next/scriptコンポーネントを使って外部スクリプトを読み込むことを検討してください。

   !注生成されたアプリはBootstrapおよびカスタムCSSを使用しています。詳細はディレクトリsrc/assets/を参照してください。

4. ビルド中に手つかずにしたいファイルは、Next.jsアプリケーションのルートディレクトリにあるpublicディレクトリに配置してください。詳細については、静的ファイルの提供に関するNext.jsドキュメントを参照してください。

5. DOMContentLoadedやドキュメント対応イベントに依存している既存のJavaScriptコードを、クライアント側のルート変更でイベント委任が保証されなくなるイベント委任のようなものを使うように調整しましょう。

6. Sitecore Content ManagementサーバーやContent Deliveryサーバーに返送したいリクエストに対してリライトを設定してください。JSSアプリケーションは共通のリダイレクト(Sitecore、メディア)で事前に設定されていますが、MVCソリューションでカスタマイズ可能なリダイレクトは必ず設定しなければなりません。

   !ヒントNext.jsは、特にすぐにJamstackアーキテクチャに変換したくないサイト機能のために、リ ライトの設定 を段階的に導入できる強力な機能を備えています。

7. もしMVCアプリケーションが現時点でSitecore辞書を使用していない場合は、Next.jsアプリから一時的に辞書の使用を削除できます。 src/lib/page-props-factory.tsファイルで辞書呼び出しを削除してください。

8. もしあなたのMVCアプリケーションが多言語対応であれば、Next.jsアプリケーション内でSitecoreの設定に合わせて国際化を設定する必要があります。そうでなければ、JSS Next.jsアプリからコンテンツ翻訳機能を削除してください。

9. マークアップを直接Razorビューに注入するC#コードはレイアウトデータを代わりに使うようにリファクタリングする必要があります。例えば、ヘッドプレースホルダーに動的 タグを追加するなどです。

Next.jsアプリケーションを起動してください

Next.jsアプリケーションは開発モードか本番モードで起動できます。

アプリケーションを開始し、開発を続けるには:

• ターミナル内のJSS Next.jsアプリのルートディレクトリで、以下のスクリプトを実行します。

  jss start

アプリケーションを起動し、その本番の動作をプレビューするには:

• ターミナル内のJSS Next.jsアプリのルートディレクトリで、以下のスクリプトを実行します。

  jss start

これらの手続きを完了したら、Next.js JSSアプリケーションを展開できます。

また、MVC/RazorからReact/Next.jsへのコンポーネント変換を段階的に行うこともできます。