1. JSSメディアAPI

JSSアプリケーションでのイメージの使用

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

フレームワーク固有のSDKによって提供される <Image/> コンポーネントを使用して、JSSアプリケーションでイメージを表示できます。イメージは、他のJSSコンポーネントと同様に、親コンポーネントのプロパティに提供されるフィールド データから属性を取得しますprops。

すべてのサンプル アプリケーションには、イメージのサイズ変更パラメーターをホワイトリストに登録するための設定例が付属しています。 /sitecore/<app-name>.configで検査できます。ここで、<app-name> は、package.jsonファイルで設定されたアプリケーションの名前を表し、configオプションで設定します。ほとんどの場合、アプリケーション用に追加の画像サイズが必要になります。

メモ

Next.jsアプリケーションを開発している場合は、代わりにNextImageコンポーネントを使用できます。

メディアURLのクエリ パラメーターを指定します

<Image /> コンポーネントを使用する場合は、imageParamsプロパティを使用してパラメーターをSitecoreメディアURLにアタッチし、サイズ設定などのさまざまなイメージの側面に影響を与えることができます。

JSSアプリケーションでレンダリングされる画像のクエリ パラメータを指定するには、次のようにします。

  1. /sitecore/<app-name>.configファイルで、Sitecore Media Handlerを設定して、画像のサイズ設定パラメーターをホワイトリストに登録します。

  2. <Image/> コンポーネントのimageParamsプロパティで画像サイズ設定パラメーターを指定します。例えば：

    <Image
  field={props.fields.sample2}
  editable={false}
  imageParams={{ mw: 100, mh: 50 }}
  height="50"
  width="94"
  data-sample="other-attributes-pass-through"
/>

レスポンシブ画像をレンダリングする

サーバー側のサイズ変更でレスポンシブ画像をレンダリングするには、<Image/>コンポーネントのsrcSetプロパティとsizesプロパティを使用できます。これらのプロパティを定義すると、image HTML要素のsrcset属性とsizes属性が設定されます。

レンダリング イメージのsrcset属性とsizes属性を設定するには:

  1. /sitecore/<app-name>.configファイルで、Sitecore Media Handlerをホワイトリスト サイズ パラメーターにまだ設定していない場合は、ホワイトリストに登録するように設定します。

  2. Sitecoreのサイズ変更パラメーターは、<Image/> コンポーネントのsrcSetプロパティとsizesプロパティで指定します (w、h、mw、mhなど)。例えば：

    <Image
  field={props.fields.sample2}
  srcSet={[{ mw: 300 }, { mw: 100 }]}
  sizes="(min-width: 960px) 300px, 100px"
  className="img-fluid"
/>

コンテンツ配信ネットワークからの画像の提供

Media Libraryアセットにコンテンツ配信ネットワーク (CDN) を使用することはSitecoreのコア機能の一部であるため、この設定はJSS固有ではありません。セットアップ手順については、Sitecore CDNの公式ドキュメントを参照してください。

JSS <Image/> コンポーネントを使用して画像をレンディングしているか、JSS mediaApiを使用して画像データを取得している限り、結果のメディアURLはJSSアプリで自動的に機能します。

画像の最適化

画像にSitecore Media Libraryを使用している場合は、Sitecore DianogaやimgIXなどのサードパーティ ツールを使用して画像を最適化できます。

この記事を改善するための提案がある場合は、 お知らせください!