360° ギャラリー コンポーネント

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

360° ギャラリー コンポーネントを使用すると、一連の複数の画像を使ってオブジェクトの回転を表示できます。デフォルトでは、最後の画像が最初の画像にラップされるため、ユーザーはどちらの方向でもシームレスにオブジェクトを回転させることができます。

次の例では、7 つのソース画像が使用されています。

適したギャラリーを選ぶ

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

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

プロジェクトで 360° ギャラリーを使用する

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

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

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

  4. 次のいずれかの方法でギャラリーに画像を追加します。

    • [プロパティ] パネルの [360° ギャラリー] 欄で、[画像] の「ギャラリーの画像を選択」ボタン をクリックします。[画像を選択] ボタンをクリックして画像ファイルを参照するか、ダイアログ ボックスにファイルを直接ドラッグします。
    • [プロパティ] ペインの [360° ギャラリー] 欄で、画像の URL をカンマで区切って [画像] に追加します。
  5. (省略可)他のプロパティを調整します(下記をご覧ください)。

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

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

プロパティ

プロパティ 説明
名前 コンポーネントの名前。
画像 ギャラリーに表示する画像の URL をカンマで区切って指定します。動的データにバインドできます。
自動再生 オンにすると、ギャラリーに各画像が順番に自動的に表示されます。
ラップ オンにすると、ギャラリーがいずれかの端(最初の画像または最後の画像)からラップされます。

イベントと操作

360° ギャラリー コンポーネントから送信されるイベント

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

イベント 説明
最初の操作 ユーザーがギャラリーを最初に操作したときに送信されます。
すべてのフレームを表示 ギャラリーのすべてのフレームが少なくとも一度表示されると送信されます。
画像読み込み完了 ギャラリーのすべてのフレームが読み込まれると送信されます。
フレームの表示 新しいフレームの表示が完了するたびに送信されます。
フレーム有効化 フレームの変更が開始されると送信されます。
フレームのタップ フレームがクリックされると送信されます。

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

360° ギャラリー コンポーネントで実行される操作

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

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

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

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

プレビュー

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

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