カルーセル ギャラリー コンポーネント

この機能は AMPHTML 広告では使用できません。 代わりに、amp-carousel コンポーネントを使用してください。

カルーセル ギャラリー コンポーネントを使って、スワイプ操作をして複数の画像を表示できるカルーセル形式のギャラリーを作成します。コンポーネントのプロパティを変更して、さまざまな 3D 効果やカルーセル タイプを作成できます。また、ダイナミック広告でカルーセル ギャラリーを使用することもできます。

適したギャラリーを選ぶ

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

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

プロジェクトでカルーセル ギャラリーを使用するには:

  1. [コンポーネント] パネル、[ギャラリー] フォルダの順に開きます。

  2. カルーセル ギャラリー コンポーネント をステージにドラッグします。

  3. [プロパティ] パネルの [カルーセル ギャラリー] 欄で、コンポーネントの名前を設定します。

  4. 画像のセットまたはグループのセットのいずれかを追加します。画像以外の要素を表示したり、1 つのフレームに複数の要素を表示したりするには、グループを使用します。

    • ギャラリーに画像を追加するには、次のいずれかの方法を使用します。
      • [プロパティ] パネルの [カルーセル ギャラリー] 欄で、[画像] 項目の「ギャラリーの画像を選択」ボタン をクリックします。[画像を選択] ボタンをクリックして画像ファイルを参照するか、ダイアログ ボックスにファイルを直接ドラッグします。
      • [プロパティ] パネルの [カルーセル ギャラリー] 欄で、画像の URL をカンマで区切って [画像] に追加します。
    • ギャラリーにグループを追加するには:
      • [プロパティ] パネルの [カルーセル ギャラリー] 欄で、グループの名前をカンマで区切って [グループ] に追加します。
  5. (省略可)他のコンポーネント プロパティを調整します(下記をご覧ください)。

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

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

プロパティ

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

詳細プロパティ

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

フレーム幅 ギャラリー内の画像フレームの幅(ピクセル単位)
フレーム高さ ギャラリー内の画像フレームの高さ(ピクセル単位)
近傍回転 隣接するフレームに適用される回転量
近傍分離 フレーム間の間隔
近傍垂直オフセット 隣接フレームが表示されるときの高さ
近傍規模 隣接画像の相対的な大きさ
exit URL ギャラリー内の各フレームに対応する URL のリスト(複数の場合はカンマで区切ります)動的データにバインドできます。
反射を表示(WebKit) オンにすると、反射した画像を表示できます。反射は WebKit ブラウザでのみサポートされています。
フレームの終了時にメディアを一時停止 オンにすると、フレームが移行するたびに、現在のフレームで再生中の音声または動画が一時停止します(背景での不要なコンテンツの再生を防止できます)。
フレームの開始時にメディアを再開 オンにすると、フレームが移行するたびに、次のフレームで一時停止していた音声や動画が再開されます(背景での不要なコンテンツの再生を防止できます)。

イベントと操作

カルーセル ギャラリー コンポーネントから送信されるイベント

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

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

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

カルーセル ギャラリー コンポーネントで実行される操作

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

操作 設定項目
フレームに移動
  • インデックス
  • アニメーション - [none] または [slide]
進む アニメーション - [none] または [slide]
戻る アニメーション - [none] または [slide]
1 回転
  • 所要時間 - 所要時間(ミリ秒単位)
  • 方向 - [forwards] または [backwards]
回転を停止 なし

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

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

プレビュー

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

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。