---
title: "Angular API参照のためのJSS"
slug: "jss-for-angular-api-reference"
abstract: "JSS Angularアプリで使えるコンポーネントとユーティリティの概要"
---
# Angular API参照のためのJSS

JSS Angular SDKは、Sitecoreレイアウト [サービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service")から返されるデータに基づいてコンポーネントやフィールドをレンダリングするためのモジュール、コンポーネント、プレースホルダー、フィールドヘルパー指令を提供します。

## Angularモジュールにおけるコンポーネントのレジスタ

AngularのSDKには、開発を支援するモジュール、コンポーネント、その他のユーティリティが含まれています。モジュールを作成する際、JssModuleクラスが提供するwithComponentsメソッドを使って、プレースホルダーでレンダリング可能なコンポーネントをコンポーネントのリストに追加できます:

import { JssModule } from '@sitecorelabs/sitecore-jss-angular';
import { WelcomeComponent } from './components/welcome/welcome.component';

@NgModule({
 ...
 declarations: 
 WelcomeComponent,
 ...
 ,
 imports: 
 JssModule.withComponents(
 { name: 'Welcome', type: WelcomeComponent }
 )
 ,
 ...
})
export class FooModule { }

> !注Angularサンプルアプリでは、JssModuleがインポートされ、通常に動的に生成され、構成時のディスク上の存在に基づいてコンポーネントが登録されます。これによりコンポーネント登録のメンテナンスが軽減されます。

## プレースホルダー指令

Angular用のJSSは、レイアウトサービスから返されるプレースホルダーをレンダリングするのに役立つコンポーネントを提供します。プレースホルダーコンポーネントは、レイアウトサービスデータで定義されたコンポーネントに基づいて、追加のAngularコンポーネントを動的にインスタンス化します。

基本的なプレースホルダー技術は、コンポーネントに注入されたレンダリングデータを渡すことです:

<sc-placeholder name="jss-styleguide-layout" rendering="rendering"></sc-placeholder>

さらに高度な利用も可能で、テンプレートを使って各子コンポーネントの周囲に出力されるマークアップをカスタマイズできます:

<div class="row" sc-placeholder name="jss-reuse-example" rendering="rendering">
 <ng-template renderEach let-rendering="rendering">
 <div class="col-sm">
 <sc-render-component rendering="rendering"></sc-render-component>
 </div>
 </ng-template>
 <ng-template renderEmpty let-renderings="renderings">
 <div class="col-sm">
 <sc-placeholder renderings="renderings"></sc-placeholder>
 </div>
 </ng-template>
 <ng-template scPlaceholderLoading>
 <img src="https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/loading.gif">
 </ng-template>
</div>

高度なプレースホルダー技術の詳細については、サンプルアプリのスタイルガイドにあるレイアウト再利用例をご覧ください。

## フィールドヘルパー指令

このライブラリはSitecoreフィールド値の出力を支援する構造的指示を提供します。構造的指示を使う利点は、開発者としてタグのすべての機能が利用可能であり、他のコンポーネントにラップされないことです。Experience Editor内で動作する場合、マークされたタグは編集可能な別の要素に置き換えられます。

例えば、画像の編集を有効にするには:

<img \*scImage="rendering.fields.logoImage" />

以下は、すべてのサポートされる構造指令とその使用方法の一覧です。

> !注以下の例では、フィールドがプレースホルダーコンポーネントからのデータであると仮定します。

### 本文

<p \*scText="field; editable: true; encode: true"></p>

この構造指令は以下の入力プロパティをサポートします:

名称

概要

デフォルト /scText

レンダリングしたいコンポーネントまたはルートフィールド。通常はSitecoreタイプの単行テキストまたは多行テキストですが、数値タイプでも使用可能です。

editable

エクスペリエンスエディター/Sitecore形式のHTML出力を使うべきかを示します。(デフォルト:true)

encode

出力値のHTMLエンコーディングを有効または無効にします。false値は編集可能(editable: false)も意味します。(デフォルト:true)

マルチラインテキストの場合、提供された編集可能な値はすでに<br />で改行が置き換えられています。編集不可の値を使う場合は、field.value処理してJSONの改行を望むマークアップに置き換えるか、pre-wrapのようなCSSの空白表示を使うことができます。

### リッチテキスト

<div \*scRichText="field; editable: true"></div>

この構造指令は以下の入力プロパティをサポートします:

名称

概要

デフォルト /scRichText

レンダリングしたいコンポーネントまたはルートフィールド。Sitecoreタイプのリッチテキストであるべきです。

editable

エクスペリエンスエディター/Sitecore形式のHTML出力を使うべきかを示します。(デフォルト:true)

### 画像

<img \*scImage="field; editable: true" />

この構造指令は以下の入力プロパティをサポートします:

名称

概要

デフォルト /scImage

レンダリングしたいコンポーネントまたはルートフィールド。Sitecoreタイプのイメージであるべきです。

editable

エクスペリエンスエディター/Sitecore形式のHTML出力を使うべきかを示します。(デフォルト:true)

urlParams

画像URLに追加された[クエリ文字列パラメータ](https://community.sitecore.net/technical_blogs/b/sitecorejohn_blog/posts/media-options-and-query-string-parameters-in-the-sitecore-asp-net-cms)。JSSはメディアURLのセキュリティハッシュをサポートしていないため、これらのパラメータセットはサーバー上でホワイトリストに登録する必要があります。

attrs

結果として生成される画像タグのキー/値属性値。ホスト要素に追加された属性もパススルーされますが、データバインディングはサポートしません。

\*scImage指令はattrs入力プロパティを通じて提供された場合、srcSet属性に特別な扱いを与えます。srcSetの各要素に対してクエリ文字列パラメータを表すオブジェクトの配列を提供できます。これにより、サイズ属性と組み合わせることでサーバー側レンダリングに対応したレスポンシブ画像が可能になります。

### リンク

<a \*scLink="field; editable: true"></a>

この構造指令は以下の入力プロパティをサポートします:

名称

概要

デフォルト /scLink

レンダリングしたいコンポーネントまたはルートフィールド。SitecoreタイプのGeneral Linkであるべきです。

editable

エクスペリエンスエディター/Sitecore形式のHTML出力を使うべきかを示します。(デフォルト:true)

attrs

結果として得られる出力タグのキー/値属性値。ホスト要素に追加された属性もパススルーされますが、データバインディングはサポートしません。

Sitecoreの編集可能な出力を使用する場合、scLinkはSitecore提供のマークアップをラッパー範囲で作成し、ホスト要素の属性とattrをこのスパンに適用します。

### ファイル

<a \*scFile="field"></a>

この構造指令は以下の入力プロパティをサポートします:

名称

概要

デフォルト /scFile

レンダリングしたいコンポーネントまたはルートフィールド。Sitecoreタイプのファイルであるべきです。

ファイルフィールドはSitecoreのエクスペリエンスエディターによるインライン編集をサポートしていませんが、コンポーネントのデフォルトフィールドエディターで編集可能です。