ダイナミックプレースホルダーを使う

samatsu 11/21/2017 2578 N/A Sitecore Programming

Sitecore 9 の新機能の紹介第二弾として、今回はSitecore 9 で正式にサポートされた Dynamic Placeholder の機能を使ってみます。Dynamic PlaceholderはSitecoreのデザイン変更の機能で、コンポーネントをバインドする場所を表すプレースホルダーキーが同じページに複数存在した場合に、想定した場所にコンポーネントが動的にバインドされないケースを解決できるようになります。地齋には、必ずしもここで述べた問題は発生しないのですが、技術的な詳細は省略します。

ダイナミックプレースホルダーを使うことで、ベースとなるプレースホルダーキーが同じで、ユニークなプレースホルダーキーを生成できるようになります。

言葉で説明していてもわかりづらい部分がありますので、さっそく動きを確認しておきましょう。

今回動作検証を行った環境は次の通りです。

Sitecore 9.0 Initial Release

1. Dynamic Placeholder の定義

Dynamic Placeholder は簡単に定義できます。ビューレンダリングなどの、cshtmlファイル上で、 DynamicPlaceholder メソッドを呼び出すだけです。

例えば、 TwoColumn という名前でビューレンダリングを作成し、次のようにcshtmlを編集しました。

@using Sitecore.Mvc
@using Sitecore.Mvc.Presentation
@using Sitecore.Mvc.Helpers
@model RenderingModel
@{

}
<div style="border-color:red;border-style:dotted;">
    @Html.Sitecore().DynamicPlaceholder("col1")
</div>
<div style="border-color:green;border-style:dotted;">
    @Html.Sitecore().DynamicPlaceholder("col2", 2 )
</div>

DynamicPlaceholder メソッドにはいくつかのオーバーライドがあります。動的に生成するプレールホルダーの数を指定したり、連番の初期値(Seed)を指定したりできます。詳細は最後に紹介するオフィシャルドキュメントをご参照ください。

DynamicPlaceholder を呼び出せるようにするには、 @using Sitecore.Mvc.Helpers 名前空間の参照を追加してください。

2. 動作確認

実際に動作を確認しましょう。動的なバインドを使用して、 main という名前のプレースホルダーの上に、上記 TwoColumn ビューレンダリングを追加した結果は次の通りです。

プレースホルダーをエクスペリエンスエディターで選択できるようにするには、今回のケースでは col1 と col2 用のプレースホルダーアイテムを作成しておきます。

col1(赤い点線で囲まれている場所)では、生成するプレースホルダーの数を指定しなかったのでデフォルトの1つが作成されています。col2(緑の点線で囲まれた場所)は、2つプレースホルダーを生成するようにしたので、プレースホルダーが2つ作成されています。

開発者ツールを使用して、実際に生成されたIDを確認すると <プレースホルダー名>_<レンダリングのID>_<連番> という文字になっていることがわかります。ビューレンダリングは main プレースホルダーの上のバインドされているので _main_col1 や _main_col2 という名前になっています。連番の番号は Seed を指定していないので 0 からの連番になっています。

3. パラメーターを指定する

ダイナミックプレースホルダーにはパラメーターを渡すことができます。パラメーターの渡すルールとしては、ドキュメントのサイトに記載がある通り ph_<プレースホルダーキー>_<パラメーター名> です。生成された特定のインデックスのプレースホルダーにのみパラメーターを渡す場合は、 ph_<プレースホルダーキー>_<連番>_<パラメーター名> で指定します。

Sitecoreのフレームワークで初めから解釈されるパラメーターは counter という名前のパラメーターです。生成するプレースホルダーの数を指定することができます。

それ以外のパラメーターは、コード側でパラメーターを読み込んで動作を変更するために使用します。

ここでは counter パラメーターを使用して、生成するプレースホルダーの数を変更してみます。 TwoColumn コンポーネントを選択して、ツールバーの More > Edit component properties をクリックします。

Additonal Parameters パラメーターフィールドで、例えば下図のように ph_col1_count に 2 という値を設定します。

変更を適用すると col1 のダイナミックプレースホルダーが2つ作成されます。

その他、 DynamicPlaceholder メソッドのオーバーライド版を使うことで、動的に生成するプレースホルダーを別のタグで囲むこともできます。例えば次のようにコードを記述します。

<ul style="border-color:green;border-style:dotted;">
    @Html.Sitecore().DynamicPlaceholder("col2", ctxt => { return new TagBuilder("li"); })
</ul>

簡単ですが、説明は以上です。

詳細な解説に関しては、次のオフィシャルドキュメントを参考にしてください。

Dynamic placeholders

ダイナミックプレースホルダーを使うと、ページ上に同じキーのプレースホルダーを配置すると特定の場合に、期待した場所にコンポーネントを配置できなくなるケースを簡単に解決することができるようになります。

// Net planet-es V2