---
title: "タグヘルパー"
slug: "tag-helpers"
abstract: "Sitecore ASP.NETレンダリングSDKタグヘルパーの概要。"
---
# タグヘルパー

> !重要以前にアプリを統合していた場合、それは旧版のASP.NETコアレンダリングSDK(バージョン22以前)を使用しています。このSDKは更新を受け取っていないため、[最新のバージョンへのアップグレード](https://doc.sitecore.com/xmc/en/developers/asp-net/latest/asp-net-core-sdk/upgrade-from-v22.html) をお勧めします。

[ASP.NET](http://asp.net/)では、タグヘルパーがサーバーサイドのコードがRazorファイル内のHTML要素の作成およびレンダリングに参加できるようにします。タグヘルパーに関する詳細は[Microsoftタグヘルパーのドキュメント](https://docs.microsoft.com/en-US/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-3.1)でご覧いただけます。

Sitecore ASP.NETレンダリングSDKは、コンテンツのレンダリング、プレースホルダーデータ、ページ編集に必要なメタデータをレンダリングするための複数のカスタムタグヘルパーを提供します。

以下のタグヘルパーはSitecore.AspNet.RenderingEngineライブラリで利用可能です:

-   プレースホルダータグヘルパー
-   テキストフィールドタグヘルパー
-   リッチテキストフィールドタグヘルパー
-   ハイパーリンクタグヘルパー
-   日付タグヘルパー
-   画像タグヘルパー
-   ナンバータグヘルパー

> !注要素内容を作成または修正するASP.NETタグヘルパーでは、明示的なクロージングタグを使用しなければなりません。タグが自己閉じている場合、タグヘルパーが要素コンテンツ(この場合はフィールド値)を挿入する場所はありません。

Sitecoreタグヘルパーがレンダリングホストアプリケーションで利用可能であることを保証するには、\\Views\\\_ViewImports.cshtmlRazorビューでタグヘルパーを含むライブラリの名前空間をインポートする必要があります:  

@addTagHelper \*, Sitecore.AspNet.RenderingEngine

## プレースホルダータグヘルパー

プレースホルダータグヘルパーは、Sitecoreのプレースホルダーで定義されたコンポーネントをレンダリングできます。デフォルトでは、タグヘルパーは複数のネストされたプレースホルダーのレンダリングもサポートしています。

ページが編集モードにあるとき、タグヘルパーはコンポーネントに加えて編集用のクロームもレンダリングします。

このタグヘルパーを使うには、単独タグとして追加します:

<sc-placeholder name="main"></sc-placeholder>

name属性が必要であり、その値は現在のコンポーネントに対してレイアウトサービスから返されるプレースホルダーの名前と一致しなければなりません。nameが無効またはマッチしていない場合、タグヘルパーはHTMLコメントを使ってページ上に警告を表示します。

> !注プレースホルダータグヘルパーは、レイアウトサービスの出力に基づいてコンポーネントをレンダリングするエントリーポイントです。通常、UseSitecoreRenderingでタグ付けされたコントローラーアクションで返されるビュー内に、このタグヘルパーのインスタンスが1つ以上見つかります。

## テキストフィールドタグヘルパー

テキストフィールドタグヘルパーは、ページが編集モードにあるときに、単行および多行テキストフィールドの内容をレンダリング・編集できます。

このタグヘルパーを使うには、HTML要素のasp-for属性にTextFieldプロパティの名前を追加します:

@model MyComponentModel
<h2 asp-for="@Model.Heading"></h2>

HTML Breakタグへの改行文字の翻訳を無効にするには、convert-new-lines属性を追加し、false:

@model MyComponentModel
<div asp-for="@Model.Description" convert-new-lines="false"></div>

テキストフィールドの編集を無効にするには、editable属性(デフォルトでtrue)を追加します:

@model MyComponentModel
<div asp-for="@Model.Description" editable="false"></div>

## リッチテキストフィールドタグヘルパー

リッチテキストフィールドタグヘルパーは、ページが編集モードにあるときにSitecoreのリッチテキストフィールドの内容をレンダリング・編集できます。

このタグヘルパーは2つの方法で使えます:

-   単独タグとして追加してください:
    
    @model MyComponentModel
    <sc-text asp-for="@Model.Content"></sc-text>
    
    これは、リッチテキストフィールドSitecore独自のルート<p>タグを持ち、この方法はDOMに新しい要素を導入しないため、しばしば好まれます。
    
-   HTML要素のasp-for属性にRichFieldプロパティの名前を追加します:
    
    @model MyComponentModel
    <div asp-for="@Model.Content"></div>
    

リッチテキストフィールドの編集を無効にするには、editable属性(デフォルトでtrue)を追加してください:

@model MyComponentModel
<sc-text asp-for="@Model.Content1" editable="false"></sc-text>
<div asp-for="@Model.Content2" editable="false"></div>

## ハイパーリンクタグヘルパー

ハイパーリンクタグヘルパーは、ページが編集モードにある際にSitecoreの一般的なリンクフィールドの内容をレンダリング・編集できます。

このタグヘルパーは2つの方法で使えます:

-   単独タグとして追加してください:
    
    @model MyComponent
    <sc-link asp-for="MyLink"></sc-link>
    
    > !注コンテンツ作成者にリンクテキストの設定をさせたくない場合は、静的リンクテキストを追加できます:
    > 
    > @model MyComponentこれは私の **カスタム** テキストです
    
-   そのa HTML要素のasp-for属性にHyperLinkFieldプロパティ名を追加します:
    
    @model MyComponentModel
    <a asp-for="@Model.MyLink">It is my link!</div>
    

href属性のほかに、タグヘルパーは(フィールドプロパティに記載されている場合)以下の属性をレンダリングします。

-   class
-   target
-   title

これらの属性を上書きしたり、追加したりすることができます:

@model MyComponent
<sc-link asp-for="MyLink" class="font-weight-bold" data-otherattributes="pass-through-to-anchor-tag">Link to Sitecore</sc-link>

ハイパーリンクフィールドの編集を無効にするには、editable属性(デフォルトでtrue)を追加してください:

@model MyComponentModel
<sc-link asp-for="MyLink" editable="false" />

> !注エクスペリエンスエディターでレンダリングした場合、カスタムコンテンツを持つリンクタグヘルパーはそのコンテンツをレンダリングしません。これはWYSIWYG編集を可能にするためです。このような場合は、editable=”false”を設定してフィールドエディターを使用することを検討してください。

## 日付タグヘルパー

Dateタグヘルパーは、ページが編集モードにあるときにSitecoreの日付フィールドの内容をレンダリング・編集できます。

このタグヘルパーは2つの方法で使えます:

-   単独タグとして追加してください:
    
    @model MyComponent
    <sc-date asp-for="MyDate"></sc-date>
    
-   HTML要素のasp-for属性にDateプロパティの名前を追加します:
    
    @model MyComponent
    <span asp-for="MyDate" ></span>
    

日付のフォーマットはdate-format属性で、文化はculture属性で指定できます。 date-format属性が指定されていない場合、タグヘルパーはローカルフォーマットを表示します。 culture属性が指定されていない場合は、タグヘルパーは現在のカルチャーフォーマットを表示します。

@model MyComponent
<sc-date asp-for="Date" date-format="d" culture="en-us"></sc-date>
<sc-date asp-for="Date" date-format="MM/dd/yyyy HH:mm:ss" culture="en-us"></sc-date>

> !注日付タグヘルパーは[標準的な.NETの日付と時間フォーマットの文字列](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings)をサポートしています。

## 画像フィールドタグヘルパー

画像フィールドタグヘルパーは、ページが編集モードにあるときにSitecoreの画像フィールドの内容をレンダリング・編集できます。

このタグヘルパーは2つの方法で使えます:

-   単独タグとして追加してください:
    
    @model MyComponentModel
    <sc-img asp-for="@Model.Image" />
    
-   そのimg HTML要素のasp-for属性にImageFieldプロパティ名を追加します:
    
    @model MyComponentModel
    <img asp-for="@Model.Image" />
    

画像フィールドの編集を無効にするには、editable属性(デフォルトでtrue)を追加してください:

@model MyComponentModel
<sc-img asp-for="@Model.Image" editable="false" />
<img asp-for="@Model.Image" editable="false" />

サーバー側で画像のサイズ変更を行うために、画像タグヘルパーに追加のパラメータを渡すことができます:

@model MyComponentModel
<img asp-for="@Model.Image" image-params="new { mw = 100, mh = 50 }" />

この属性に与えられたすべてのパラメータは、画像URLに次のように追加されます:http://<Content Delivery server>/-/jssmedia/<your site>/data/media/img/sc\_logo.png?iar=0&amp;hash=F313AD90AE547CAB09277E42509E289B&amp;mw=100&amp;mh=50

タグヘルパーの外でリサイズパラメータ付きの画像フィールドをレンダリングしたい場合は、ImageField.: のGetMediaLink拡張を使用できます。

style="background-image: url(@Model.Banner?.GetMediaLink(new {mw = 1170, mh = 402}))"

> !重要image-params属性やGetMediaLinkに入力するすべてのパラメータは、リサイズが行われるためにホワイトリスト化されている必要があります。
> 
> 以下は構成パッチの例です:
> 
> MW=42,MH=42

## ナンバータグヘルパー

Numberタグヘルパーは、ページが編集モード中にあるときにSitecoreの数字フィールドの内容をレンダリング・編集できます。

このタグヘルパーは2つの方法で使えます:

-   タグヘルパーをスタンドアロンタグとして追加してください:
    
    @model MyComponent
    <sc-number asp-for="MyNumber" />
    
-   HTML要素のasp-for属性にNumberプロパティの名前を追加します:
    
    @model MyComponent
    <span asp-for="MyNumber" ></span>
    

番号のフォーマットはnumber-format属性とculture属性で指定できます。 culture属性が指定されていない場合、タグヘルパーは現在の文化フォーマットを表示します。

@model MyComponent
<sc-number asp-for="MyNumber" number-format="C" culture="en-us"></sc-number>

> !注ナンバータグヘルパーは [標準的な.NET数値フォーマット文字列](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings)をサポートしています。