スワイプギャラリーコンポーネント

このコンポーネントは、AMP HTML 広告、動画広告、イメージ広告ではサポートされていません。

スワイプギャラリーコンポーネントでは、簡単なギャラリーを作成できます。このギャラリーでは、ユーザーは左右にスワイプして、さまざまな画像やグループのセットを表示できます。スワイプギャラリーはダイナミック広告で使用できます。

適したギャラリーを選ぶ

Google Web Designer には 4 つのギャラリーコンポーネントが用意されています。

360 度ギャラリーでは、1 つのオブジェクトをあらゆる角度から表示できます。前後にスワイプするとオブジェクトが回転します。360 度ギャラリーではグループ要素やナビゲーション要素は表示できません。
スワイプギャラリーは、平面的にオブジェクトを表示できるシンプルなギャラリーです。画像やグループ間を垂直方向または水平方向にスワイプできます。
カルーセルギャラリーはスワイプギャラリーに似ていますが、画像が円周上に 3D 形式で配置される点が異なります。
トランジションギャラリーでは、画像を切り替えながらさまざまなアニメーション効果を使用できます。

スワイプギャラリーを使用するには:

[コンポーネント] パネル、[ギャラリー] フォルダの順に開きます。
スワイプギャラリー コンポーネントをステージにドラッグします。
[プロパティ] パネルの [スワイプギャラリー] 欄で、コンポーネントの名前を設定します。
画像のセットまたはグループのセットのいずれかを追加します。画像以外の要素を表示したり、1 つのフレームに複数の要素を表示したりするには、グループを使用します。
- 画像を追加するには、次のいずれかの方法を使用します。
  - [プロパティ] パネルの [スワイプギャラリー] 欄で、画像の URL をカンマで区切って [画像] に追加します。
  - [プロパティ] パネルの [スワイプギャラリー] 欄で、「 ギャラリーの画像を選択」ボタンをクリックします。[ファイルを選択] ボタンをクリックして画像ファイルを参照するか、ダイアログボックスにファイルを直接ドラッグします。
- ギャラリーにグループを追加するには:
  - [プロパティ] パネルの [スワイプギャラリー] 欄で、グループの名前をカンマで区切って [グループ] に追加します。
（省略可）コンポーネントのプロパティを調整します（下記をご覧ください）。

スワイプギャラリーでグループを使用する

スワイプギャラリーには、画像のセットまたはグループのセットのいずれかを保存できます。グループの場合は、ギャラリーの各フレームで、画像ではないアセット（動画のセットなど）や複数のアセットのコレクション（字幕付きの画像など）を使用できます。

動画（またはその他のインタラクティブなアセット）の場合は、[プロパティ] パネルで [スワイプを無効にする] を選択します。これで、動画コントロールを操作できるようになります。ギャラリーのフレーム間の移動には、ギャラリーナビゲーションコンポーネントを使用できます。

画像とグループの両方を表示するギャラリーを作成するには、使用する画像を事前にグループに変換しておきます。

グループを使用すると、ギャラリー内に複数のダイナミック要素を表示することもできます。

ギャラリーの画像の並べ替えや削除を行う

[プロパティ] パネルの [スワイプギャラリー] 欄で、「ギャラリーの画像を選択」ボタンをクリックします。
画像を並べ替えるには、画像を移動したい位置にドラッグします。ギャラリーから画像を削除するには、画像にカーソルを合わせて「削除」ボタンをクリックします。
[OK] をクリックします。

プロパティ

プロパティ	説明
名前	スワイプギャラリーの名前を設定します。
画像	ギャラリーで使用する画像を選択できます。動的データにバインドできます。
グループ	ギャラリーで使用するグループをカンマで区切って指定します。動的データにバインドできます。
移行	画像間の移行時間（ミリ秒単位）です。
開始フレーム	最初に表示する画像の番号です。
表示するフレーム数	ギャラリーに同時に表示するフレームの数です。
スワイプのフレーム数	1 回のスワイプで進むフレームの数です。
自動再生	オンにすると、ギャラリーの画像が自動再生されます。
ナビゲーションを含める	オンにすると、ギャラリー内の移動中にナビゲーションアイコンが表示されます。
サムネイルを使用	[ナビゲーションを含める] と一緒にオンにすると、ナビゲーションにアイコンではなくサムネイルが表示されます。
ハイライトの色	ナビゲーション画像のハイライトの色を設定します。
スケーリング	固定サイズのフレームにさまざまなサイズの画像をどのように表示するかを指定します。画像が収まるようにサイズ変更: 画像を切り抜かずにフレームに収まるよう、必要に応じて画像のサイズを均等に変更します。画像とフレームのアスペクト比が異なる場合はパディングが追加されます。画像が収まるように切り抜く: フレームに完全に収まるように画像のサイズを変更し、フレームと画像のアスペクト比が異なる場合は必要に応じて画像を切り抜きます。なし: 画像は元のサイズのまま、フレームの中心に表示されます。画像がフレームより小さい場合は、余分なスペースに透明のパディングが追加されます。画像がフレームより大きい場合は、画像は切り抜かれます。画像が収まるように拡大: 画像を切り抜かずに、フレームのサイズと一致するよう、必要に応じて画像のサイズを変更して拡大します。
方向	ギャラリー内で画像を移動する方向（水平方向または垂直方向）を指定します。

詳細プロパティ

詳細プロパティを表示するには、コンポーネントのプロパティパネルで [詳細プロパティ] の展開アイコンをクリックします。

詳細プロパティ	説明
フレームオフセット	画像間の距離
フレーム幅	ギャラリー内の画像フレームの幅（ピクセル単位）
フレーム高さ	ギャラリー内の画像フレームの高さ（ピクセル単位）
自動再生の継続時間	最初のフレームから最後のフレームまで、ギャラリーが再生される時間（ミリ秒単位）。[自動再生のステップ間隔] を選択している場合を除き、時間は各画像で等分されます。
自動再生のステップ間隔	自動再生がオンになっている場合に、それぞれの画像が表示される時間（ミリ秒単位）。自動再生の継続時間に達するまで、各画像はここで指定する継続時間に基づいて再生されます。必要に応じて、画像は複数回繰り返し表示されます。
exit URL	ギャラリー内の各フレームに対応する URL のリスト（複数の場合はカンマで区切ります）動的データにバインドできます。
スワイプを無効にする	ギャラリーのスワイプ移動を無効にするチェックボックスです。無効にすれば、フレーム内の要素を操作する際に間違ってフレームを変更することがなくなります。オンにすると、[ナビゲーションを含める] プロパティまたはギャラリーナビゲーションコンポーネントを使用してフレームを変更できます。
フレームの終了時にメディアを一時停止	オンにすると、フレームが移行するたびに、現在のフレームで再生中の音声または動画が一時停止します（背景での不要なコンテンツの再生を防止できます）。
フレームの開始時にメディアを再開	オンにすると、フレームがアクティブになるたびに、次のフレームで一時停止していた音声や動画が再開されます。

イベントと操作

スワイプギャラリーコンポーネントから送信されるイベント

以下のスワイプギャラリーコンポーネントのイベントに基づいてその他の操作をトリガーできます。

イベント	説明
最初の操作	ユーザーがギャラリーを最初に操作したときに送信されます。
すべてのフレームを表示	ギャラリーのすべてのフレームが少なくとも一度表示されると送信されます。
画像読み込み完了	ギャラリーのすべてのフレームが読み込まれると送信されます。
自動再生終了	何らかの理由で自動再生が終了すると送信されます。
フレームの表示	新しいフレームの表示が完了するたびに送信されます。
フレーム有効化	フレームの変更が開始されると送信されます。
フレーム自動再生	自動再生時に、フレームが自動的に表示されると送信されます。
フレームのタップ	フレームがクリックされると送信されます。
左端に到達	スワイプ後に、ギャラリーが左端に到達すると送信されます。
右端に到達	スワイプ後に、ギャラリーが右端に到達すると送信されます。
マウスをフレーム上に移動	マウスがフレームに入ると送信されます。
マウスをフレームから移動	マウスがフレームを離れると送信されます。
トラッキング開始	マウスまたはタップのドラッグが開始されると送信されます。
トラッキング	マウスまたはタップのドラッグにより得られる X と Y の位置データが登録されます。
トラッキング終了	マウスまたはタップのドラッグが終了すると送信されます。

[イベント] ダイアログでこれらのイベントのいずれかを選択するには、スワイプギャラリーコンポーネントをターゲットとして設定します。

スワイプギャラリーコンポーネントで実行される操作

スワイプギャラリーコンポーネントの以下の操作は、他のイベントをもとにトリガーできます。

操作	設定項目
フレーム	フレーム番号アニメーション - [none] または [slide]
1 回転	所要時間 - 所要時間（ミリ秒単位）方向 - [forwards] または [backwards]
回転を停止	なし
進む	なし
戻る	なし

[イベント] ダイアログでこれらの操作のいずれかを選択するには、スワイプギャラリーコンポーネントをレシーバーとして設定します。

イベントを設定する方法をご確認ください。

プレビュー

ステージでは、スワイプギャラリーに開始フレームが表示され、コンポーネントの表示の状態をおおまかに確認できます。完全にレンダリングされたコンポーネントの動作を確認するには、右上隅の [プレビュー] ボタンをクリックして、お使いのブラウザでドキュメントをプレビューしてください。

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。

スワイプ ギャラリー コンポーネント