RSS 2.0
Sitecore MVC で使用することができる ItemRendering というレンダリングコンポーネントを使用するための覚書を記載します。ItemRendering は DataSource フィールドに設定された コンテンツアイテムの__Renderersフィールドで指定されたコンポーネントでアイテムのレンダリングを行うコンポーネントになります。レンダリングの定義アイテム自身でレンダラーの情報を持たないページの一部の見た目(パーツ) をレンダリングするコンポーネントになります。アイテムレンダリングに関しては次のページも参考になると思います。
MVC Item Renderings in the Sitecore ASP.NET CMS
http://www.sitecore.net/Community/Technical-Blogs/John-West-Sitecore-Blog/Posts/2012/06/MVC-Item-Renderings-in-the-Sitecore-ASPNET-CMS.aspx
検証環境
- Sitecore 7.1 がローカルにインストールされた環境
- Visual Studio 2012 Ultimate
- Sitecore Rocks 1.1.0
アイテムレンダリングを作成するプロジェクトは[Sitecore Rocks]ASP.NET MVC 4 Web アプリケーションプロジェクトをセットアップするなどを参照してセットアップ済みであることを前提とします。
1.データテンプレートの準備
コンテンツアイテムの__Renderers フィールドに設定されたレンダラーを使用して DataSource に設定されたアイテムのレンダリングを行うのが Item Rendering とうレンダリングになります。そのため、最初にコンテンツアイテムように データテンプレートを作成します。
Sitecore Explorer 上で templates/User Defined を右クリック→New Template をクリックします。
Add New Item ダイアログで テンプレート名 を入力してデータテンプレートの定義アイテムを作成します。今回は MessageTemplate という名前でアイテムを作成作成しました。
フィールドセクションとフィールドの定義を行います。今回は下図のように Data というフィールドセクションと Message という Multi-Line Text 型のフィールドを定義しました。データテンプレートを編集したら 保存を行います。
2. View Rendering の作成
アイテムをレンダリングするために View Rendering を作成します。ASP.NET MVC プロジェクトの Viewsフォルダー配下の部分ビューを作成するためのフォルダーを右クリック→追加→新しい項目 をクリックします。
下図のようなダイアログが表示されます。 Sitecore/MVC カテゴリーを選択して MVC Partial Page with Razor Syntax という名前のファイルテンプレートを作成して View Rendering を作成します。今回は PartialView という名前でファイルとアイテムを作成します。追加ボタンをクリックします。
続いて New Item というダイアログが表示されるので VIew Rendering アイテムを作成する親のアイテムを選択します。今回は Renderings というアイテムを選択して OK ボタンをクリックします。 Rendering アイテム配下に PartialView という名前でアイテムが作成されます。
PartialView.cshtml 自身は次のように編集しました。単純に Message フィールドをレンダリングするようにしています。
@using Sitecore.Mvc.Presentation
@using Sitecore.Mvc
@model RenderingModel
<h2>Partial Message</h2>
<p>
@Html.Sitecore().Field("Message")
</p>
3. __Renderers フィールドの設定
コンテンツアイテムのそれぞれの __Renderersフィールドにレンダリングを行うコンポーネントの設定を行うこともできますが、今回は先ほど作成した MessageTemplateのスタンダードヴァリューの Renderers フィールドを編集します。MessageTemplate データテンプレートを右クリック → Create Standard Values をクリックします。
__Standard Values アイテムの編集画面が表示されます。画面上で 右クリック→ Standard Fields をクリックします。フィールドのスタンダードフィールドが表示されるようになります。
下図のように Layout フィールドセクションに __Renderers フィールドが格納されています。__Renderers フィールドにアイテムがItem RenderingのDataSourceに指定された場合にレンダリングを行うレンダリングの名前を指定します。 Renderingsアイテムからの相対パスやGUID, 完全パスで指定することができます。|(パイプ)区切りで複数のレンダリングを指定することができます。変更したら忘れずに保存します。
4.コンテンツアイテムの作成
Homeアイテム配下に MessageTemplate 型のコンテンツアイテムを作成してみます。Sitecore Explorer 上で Home アイテムを選択して Ctrl + a を入力します。Add New Item でMessageTemplate を元に Message1 を作成します(下図参照)。
Message フィールドを適当に編集して 保存 (Ctrl -S) します。
5. Item Rendering の作成
いろいろ準備しましたが、 Item Rendering の定義アイテムを作成します。Sitecore Explorer で Renderings アイテムを右クリック→ Add → Item rendering をクリックします。
ダイアログが表示されるのでアイテムの名前を入力します。こんきあは Item Test1 という名前でアイテムレンダリングの定義アイテムを作成します。
ItemRendering の定義アイテムの作成作業自体はこれだけです。
6.動作確認
あとは実際に作成した ItemTest1 アイテムレンダリングを作成します。既定で作成されているHomeアイテムのレイアウト詳細を編集します。下図のようにMessage1アイテムを右クリック→Tasks→Design Layout をクリックします。
レイアウト詳細の画面で Add Rendering をクリックして下図のように ItemTest1 をレンダリングの一覧に追加します。追加した ItemTest1 をダブルクリックします。
Edit Rendering Properties 画面で DataSource に本記事で作成した Message1 コンテンツアイテムを選択します。PlaceholderKey にレンダリングを配置するプレースホルダーの名前を入力します。
レイアウト詳細の変更を行ったら保存を行ってください。
Homeアイテムのレイアウト詳細にアイテムレンダリングのアイテムを追加し、アイテムレンダリングのデータソースにMessage1を設定しました。Message1の__Renderers フィールドには Message1を PartialView.cshtmlを利用してレンダリングを行うように設定が行われています。
実際に Home アイテムをページエディターで表示したのが下図になります。下図で Message1の__Renderers フィールドで指定したレンダリング(PartailMessage)を使用して Message1アイテムがレンダリングされており、 Messageフィールドがインライン編集可能な状態になっていることが確認できます。
5.まとめ
以上となります。ItemRenderingの作成の説明は短いですが、説明は長くなってしまいました。ItemRendering の機能を使用すると DataSource で指定したアイテム自身の __Renderers フィールドに設定されている レンダリングコンポーネントでアイテムをレンダリングさせることができるようになります。条件付きレンダリングで使うとデータソースで指定したアイテム自身に設定されているレンダリングで自動的にコンポーネントの描画方法が切り替わるので効果があると思います。