開発者向け
MVCでの構造化リッチテキストレンダリング
By Jan Lenoch
リッチテキストを作成し、コンテンツモジュールを使用してコンテンツを作成する機能は、KenticoCloudヘッドレスCMSのコア機能の1つです。 ASP.NET MVCは、最先端のオープンソースWebフレームワークです。リッチテキスト、モジュラーコンテンツ、MVCはどのように連携しますか？
完璧に。 MVC Webアプリは、リッチテキストに配置されたコンテンツモジュールの任意の階層をレンダリングできます。開発者は、コンテンツ編集者がコンテンツモジュールのミックスアンドマッチングを行うたびに支援する必要がなくなりました。 MVCアプリにそのような柔軟性を追加する方法を見つけましょう。
モジュラーコンテンツのユースケース
モジュラーコンテンツでできることをすべて要約することから始めましょう。
- アプリ全体でコンテンツアイテムの一部を再利用する
- 大きなコンテンツアイテムを小さな部分に分割する
- ページの階層構造を可能にする（例：折りたたみ可能な部分）
- コンテンツアイテムの特定の部分に特定の形式を適用する
- コンテンツアイテムの一部などに、さまざまな寄稿者や翻訳者を割り当てます。
KenticoCloudでモジュラーコンテンツを操作する方法は2つあります。
モジュラーコンテンツ要素へのコンテンツモジュールの追加
このように、コンテンツモジュールは専用のコンテンツ要素に存在します。
リッチテキスト要素へのコンテンツモジュールの追加
このように、コンテンツモジュールは、テキストとともにリッチテキスト要素内に存在します。
さて、MVCがコンテンツモジュールでそのような自由を可能にするのはどうしてですか？どれどれ。最初に、「表示テンプレート」と呼ばれるMVCの優れた機能の基本について説明します。次に、既存のMVCアプリを調整するための基本的な手順について説明します。最後に; DancingGoatサンプルサイトを使用して簡単なデモを行います。
MVCでモジュラーコンテンツを操作する方法
基本的に2つの方法があります。より伝統的なものと、より柔軟なもの。
従来の方法は、設計時に既知のビューモデルの一部をレンダリングすることです。 Dancing Goatアプリの例については、〜/ Views / Home /Index.cshtmlを参照してください。以下のコードブロックは、設計時に既知の記事タイプで機能します。
@foreach (DancingGoat.Models.Article article in Model.ContentItem.Articles)レンダリングの柔軟な方法を使用することは、表示テンプレートを介してそれを行うことを意味します。テンプレートを使用すると、MVCビューはビューモデルのすべての内部部分のタイプを知る必要がありません。ビューで行う必要があるのは、@ Html.DisplayForメソッドを呼び出すことだけです。明確な例として、以前のブログ投稿の1つで作成された単純なアプリのデフォルトビューを参照します。
@model PageViewModel@section Navigation{ @Html.Partial('_DrawerMenuPartial', Model.Navigation)}@Html.DisplayFor(vm => vm.Body)Model.Bodyのタイプは、このビューとは関係がないことに注意してください。
どちらが良いですか？
すべてのコンテンツモジュールがモジュラーコンテンツ要素にあり（上のスクリーンショットの「ホーム」コンテンツアイテムのように）、それらがフラット構造である場合は、従来の方法に頼ることができます。
ただし、深い構造にしたい場合、またはコンテンツモジュールをリッチテキスト要素で使用したい場合（上記の「コーヒー飲料の説明」の項目のように）、唯一の方法は表示テンプレートを活用することです。
ディスプレイテンプレートのしくみ
テンプレートは基本的にCLRタイプ専用のHTMLスニペットです。それらはMVCビュー（.cshtml）と同じ形式です。設計時に開発者が厳選するビューとは異なり、テンプレートは実行時にMVCによって自動的にレンダリングされるために使用されます。モデルのタイプとモデルの構成は言わずに、モデルプロパティのDisplayForメソッドのみを呼び出すことを忘れないでください。モデルには、設計時に認識されていないタイプの他のコンテンツアイテムのコレクション（または深い階層）が含まれている場合があります。
コレクション（階層）内の各アイテムについて、MVCは命名規則に従って適切なテンプレートを選択します。デフォルトでは、MVCはビューモデルでCLRタイプの名前を持つ.cshtmlファイルを検索します。 MVCは、〜/ Views / Shared / DisplayTemplates /または〜/ Views / [コントローラー名] / DisplayTemplates /で表示テンプレートを検索します。 MVCが適切なテンプレートを選択できるようにする代わりに、DisplayForメソッドのオプションのパラメーターを使用して、特定のテンプレートを明示的に呼び出すこともできます。
テンプレートの使用方法
（ネタバレ注意：非常に簡単です。タイプの表示テンプレートファイルを作成し、@ Html.DisplayForの呼び出しに依存するだけです。）
まず、〜/ Views / Shared / DisplayTemplates /または〜/ Views / [コントローラー名] / DisplayTemplates /の場所に[モデル名] .cshtmlファイルを作成します。コンテンツモジュールに使用されると予想されるすべてのタイプのファイルを作成します。
リッチテキストでモジュールをレンダリングできるようにするには、モデルジェネレーターを使用して型を生成し、-structuredmodelパラメーターを使用します。これにより、「リッチテキスト」タイプのすべてのコンテンツ要素が、文字列だけでなく、 IRichTextContentプロパティの形式で生成されます。
コンテンツのリクエストに応じて、Delivery SDKは各IRichTextContentプロパティに文字列ブロック（HTML見出し、段落など）とコンテンツモジュールオブジェクト（つまり、ネストされたコンテンツアイテム）のコレクションを入力します。コンテンツモジュールは強く型付けされているため、MVCはそれぞれに適切なテンプレートを自動的に選択できます。
これ以降、ビューで「@ Html.DisplayFor（vm => vm。[somerich text property]）」を呼び出すたびに、リッチテキストには内部コンテンツモジュールからのHTMLが含まれます。
テンプレートとビュー
いつ何を使用するかについて、いくつかの推奨事項を示したいと思います。
- 特定のタイプのアイテムをアプリの特定の部分で非常に特定の方法でレンダリングする必要がある場合は、HTMLを通常のMVCビューに配置します。
- アプリの複数の部分でHTMLを使用する必要があるが、コンテンツモジュールのタイプを使用しない場合は、HTMLを部分的に表示しても問題ありません。
- アプリの複数の部分でHTMLを使用する必要があり、コンテンツモジュールのタイプを使用する場合は、HTMLを表示テンプレートに配置します。
- 表示テンプレートの柔軟性を活用し、アイテムをさまざまなレンディション（リストエントリ、検索結果、詳細ビュー、モバイルビューなど）でレンダリングする場合は、名前に接尾辞を付けて追加の表示テンプレートファイルを作成します。 私のフォーラムの投稿に従って、カスタムHTMLヘルパーメソッドを介してそれらを呼び出します。
クイックデモ
従来のDancingGoat MVC5サンプルサイトを使用します。最初に、コンテンツモジュールの既存の例をリッチテキストで説明します。ただし、この例では深い階層が示されていないため、別の小さな例を作成します。
リッチテキスト
この記事の2番目のスクリーンショットでは、DancingGoatサンプルサイトのいくつかのリッチテキスト要素にいくつかのコンテンツモジュールがすでに追加されていることに気付いたかもしれません。 2つの記事で、ツイートとホストされた（埋め込まれた）ビデオを追加しました。 「どの醸造があなたに合っていますか？」にあるホストされたビデオの実装について簡単に説明します。論文。
ユーザーフレンドリーなビデオの追加を可能にするために、最初に「ホストされたビデオ」コンテンツタイプを作成しました。
次に、アイテムを作成し、それをコンテンツモジュールとして上記の記事に追加しました。ライブサイトでは、記事のテキストに埋め込まれたビデオとして表示されます。
次に、モデルを再生成し、〜/ Views / Articles / DisplayTemplates /HostedVideo.cshtmlファイルを作成しました。
@model DancingGoat.Models.HostedVideo@{ var host = Model.VideoHost.FirstOrDefault()?.Codename; if (host == 'vimeo') { } else if (host == 'youtube') { }}それだけです。
深い階層
それでは、コンテンツモジュールの階層のレンダリングについて簡単に説明しましょう。
つまり、各記事の最後に新しい「関連製品」セクションを追加します（一点鎖線）。各製品で、アクセサリタイプ（赤い破線）のネストされたコンテンツアイテムを各製品に配置できるようになります。付属品は、関連商品の説明の括弧内に記載されています。結果は次のようになります。
次のコンテンツモジュールの階層が作成されます。
- どの醸造があなたに合っていますか？ （タイプ記事）
- AeroPress（タイプブリューワー）
- AeroPressフィルター（タイプアクセサリー）
- ハリオV60（タイプブリューワー）
- AeroPress（タイプブリューワー）
MVCアプリのコードでは、次のことを行います。
〜/ Controllers / ArticleController.csで、DepthParameterを「2」に上げます。
var response = await client.GetItemsAsync( new EqualsFilter('elements.url_pattern', urlSlug), new EqualsFilter('system.type', 'article'), new DepthParameter(2)); モデル（Article.csおよびBrewer.cs）を再生成するか、新しいプロパティを手動で追加します。
public IEnumerable public IEnumerable〜/ Views / Articles / Show.cshtmlファイルの内容の最後に、「関連製品」セクションをレンダリングするためのコードを追加します。
@if (Model.RelatedProducts.Any()){ }次に、Brewer.cshtmlとAccessory.cshtmlの2つの表示テンプレートを（〜/ Views / Articles / DisplayTemplates /に）作成します。
@model DancingGoat.Models.Brewer @Html.AssetImage(Model.ProductImage.FirstOrDefault(), title: 'Brewer ' + Model.ProductProductName, cssClass: 'article-tile-image') @Html.DisplayFor(vm => vm.ProductProductName)
@Html.DisplayFor(vm => vm.ProductShortDescription)
@{ if (Model.RecommendedAccessories.Any()) { (Accessories: @foreach (var accessory in Model.RecommendedAccessories) { @Html.DisplayFor(vm => accessory); if (!accessory.Equals(Model.RecommendedAccessories.Last())) { @Html.Raw(', ') } } )
} } @model DancingGoat.Models.Accessory@Html.DisplayFor(vm => vm.ProductName)その結果、アプリは、タイプに関係なく、ネストされたコンテンツをレンダリングします。コーヒーとグラインダーのタイプのテンプレートを作成した場合、「AeroPress」と「Hario V60」を他の製品アイテム（それらに含まれているアクセサリを含む）と交換することができます。ビューを変更したり再展開したりすることなく、物事を入れ替えることができ、アプリはコンテンツを喜んでレンダリングしてくれます。
コードを取得する
いつものように、 Kentico Cloud CodeExamplesリポジトリの専用フォルダーからコードを取得できます。その他の詳細については、wikiを参照することもできます。
まとめ
わずかな調整で、アプリはページ構成の変更に耐えるようになりました。私がDancingGoat社の開発者であった場合、各ページの再構築を支援する必要はなくなりました。
モジュラーコンテンツと表示テンプレートの概念が気に入った場合、または質問やコメントがある場合は、お知らせください。以下のチャット、またはフォーラムで。
