この記事では、iframe モジュールについて取り上げ、Microsoft Dynamics 365 Commerce でサイトのページに追加する方法を説明します。
iframe モジュールは、サイトの外部コンテンツをホストする iframe (インライン フレーム) を提供します。 たとえば、どのサイトのページでも YouTube の動画や PDF ファイル ビューアをホストすることができます。
iframe モジュールにはターゲットの URL が必要となります。 そして、HTML の iframe 要素の中にターゲット ページのコンテンツをホストします。 外部 URL は、サイトのコンテンツ セキュリティポリシー (CSP) の指示に従って、許可リストに登録されている必要があります。 iframe のコンテンツでは、frame-ancestor のディレクティブを使用して URL を許可する必要があります。 詳細については、コンテンツ セキュリティ ポリシー (CSP) の管理 を参照してください。
メモ
iFrame モジュールは、Dynamics 365 Commerce 10.0.13 リリースで利用可能です。
以下の画像は、サイトページに外部動画を表示する iframe モジュールの例です。
iframe モジュールのプロパティ
| プロパティ名 | 先頭値 | 説明 |
|---|---|---|
| ヘッダー | テキスト | モジュールのヘッダー。 |
| ターゲット URL | URL | モジュール内でホストされている URL。 |
| Height | 数値またはパーセンテージ | モジュールの高さをピクセル、パーセンテージで指定します。 たとえば、値が 100 の場合はピクセル数として扱われ、値が 100% の場合はパーセンテージとして扱われます。 |
| Aria ラベル | テキスト | Accessible Rich Internet Applications (ARIA) ラベルはアクセシビリティの目的で定義することができます。 |
iFrame モジュールをページに追加する
iframe モジュールをページに追加して外部動画を表示するには、以下の手順に従ってください。
- テンプレート に移動し、新規 を選択して新たなテンプレートを作成します。
- 新規テンプレート ダイアログ ボックスの テンプレート名 に マーケティング テンプレート と入力し、OK を選択します。
- 保存 を選択し、 編集の完了 を選択してテンプレートをチェックインし、発行 を選択して公開します。
- ページ に移動し、新規 を選択して新たなページを作成します。
- 新規ページの作成 ダイアログ ボックスの ページ名 に マーケティング ページ と入力し、次へ を選択します。
- テンプレートの選択 で、作成した マーケティング テンプレート を選択して 次へ を選択します。
- レイアウトの選択 でページ レイアウト (例: 柔軟性の高いレイアウト) を選択し、次へ を選択します。
- 確認して終了 でページ構成を確認します。 ページ情報の編集が必要な場合は 戻る を選択します。 ページ情報が正しい場合は ページの作成 を選択します。
- 新規ページの メイン スロットで、省略記号ボタン (...) を選択し、モジュールの追加を選択します。
- モジュールの選択 ダイアログ ボックスで コンテナー モジュールを選択して、OK を選択します。
- モジュールのプロパティ ウィンドウで、幅 の値を 全コンテナー に設定します。
- コンテナー スロットの省略ボタン (...) を選択し、モジュールの追加 を選択します。
- モジュールの選択 ダイアログ ボックスで iFrame モジュールを選択して、OK を選択します。
- モジュールのプロパティ ペインで、動画に使用する外部 URL をターゲット URL に設定します。
- 必要に応じて、 ヘッダー や 高さ などのプロパティを設定します。
- 保存 を選択し、 編集の完了 を選択してページにチェックインし、発行 を選択して公開します。
- ご利用のサイトのマーケティング ページに移動します。 動画が iframe モジュールでレンダリングされていることが確認できます。
メモ
iFrame モジュールには外部コンテンツがホストされているため、サイトの作成者は、iFrame モジュール内でホストされているコンテンツが、それぞれの市場のコンテンツ制限ポリシーに違反していないように確認する必要があります。 iFrame モジュールを使用するページにコンテンツ違反がある場合、サイト作成者は、サイト ビルダーでページを開き、iFrame モジュール スロットでモジュールの削除を選択した後、ページを保存および再公開することで、iFrame モジュールを削除できます。