360° ギャラリー
3D ホットスポット
3D ホットスポット コンテナ
3D モデル
3D モデルビューア
カレンダーに追加
音声
カルーセル ギャラリー
キューポイント
日付の入れ替え
ギャラリー ナビゲーション
一般広告
ジェスチャー
Google 広告
ホットスポット
iframe
画像
画像ボタン
画像効果
「前後の比較」画像効果
「呼吸」画像効果
「サーチライト」画像効果
「波」画像効果
地図
ページ
ページデッキ
パララックス
パーティクル エフェクト
パーティクル
スプライト シート
星評価
ストリートビュー
スワイプ ギャラリー
Swirl
タップ領域
タップして通話 / テキスト送信
トランジション ギャラリー
ブラインド トランジション
ドアワイプ トランジション
フェード トランジション
アイリスワイプ トランジション
プッシュ トランジション
放射状ワイプ トランジション
回転トランジション
スライス トランジション
分割プッシュ トランジション
ストライプ ワイプ トランジション
ベネチアン ブラインド トランジション
ワイプ トランジション
ジグザグ トランジション
動画
YouTube
gwd-360gallery
オブジェクトの回転を表示するギャラリー オブジェクト
プロパティ
| 名前 | 説明 |
|---|---|
images:string |
ギャラリーで使用する画像のパスをカンマで区切った文字列です。 |
autoplay:boolean |
ギャラリーが読み込まれると、ギャラリーの画像が自動的に再生されます。 |
wrap:boolean |
ギャラリーの最後でフレームが停止するのではなく、ユーザーが最初のフレームから最後のフレームまでギャラリー内をスワイプできるようになります。 |
イベント
| 名前 | 説明 |
|---|---|
firstinteraction |
ユーザーが初めてギャラリーを操作すると送信されます。 |
allframesviewed |
ギャラリーのすべてのフレームが少なくとも 1 回表示されると送信されます。 |
allframesloaded |
ギャラリーのすべてのフレームが読み込まれると送信されます。 |
frameshown |
新しいフレームが表示されると送信されます。 |
frameactivated |
新しいフレームの有効化が開始されると、まだ表示されていなくても送信されます。 |
frametap |
ユーザーがフレームをタップすると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
goToFrame(frame:number, opt_animate:string, opt_direction:string) |
指定されたフレームをアニメーション化します。 |
rotateOnce(opt_duration:number, opt_direction:string) |
ギャラリー内のオブジェクトを 1 回転します。 |
goForwards() |
ギャラリーを 1 フレーム進めます。 |
goBackwards() |
ギャラリーを 1 フレーム戻します。 |
gwd-3d-hotspot
3D モデルにアノテーションを表示する要素です。
プロパティ
| 名前 | 説明 |
|---|---|
data-position:string |
ホットスポットの位置です。 |
data-normal:string |
ホットスポットの基準です。 |
hotspot-name:string |
ホットスポットの名前です。 |
hotspot-title:string |
情報カードに表示するタイトル テキストです。 |
hotspot-description:string |
情報カードに表示する説明テキストです。 |
hide-infocard:boolean |
情報カードを非表示にするかどうかを指定します。 |
gwd-3d-hotspot-container
3D モデルのアノテーションのためのコンテナ要素です。
プロパティ
| 名前 | 説明 |
|---|---|
up-image:file |
押されていない状態にある 3D ホットスポットの画像の URL です。 |
over-image:file |
マウスオーバーやカーソルを合わせた状態にある 3D ホットスポットの画像の URL です。 |
down-image:file |
押されている状態にある 3D ホットスポットの画像の URL です。 |
gwd-3d-model
3D ビューア コンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
id-url:download |
3D モデルの ID または URL です。 |
data-gwd-refresh-assets:string |
Google Web Designer で 3D アセットを更新する必要があるかどうかを判断するために使用される属性です。 |
glass:boolean |
3D モデルのガラス素材を有効にします。 |
src:string |
表示するモデルです。 |
transparent:boolean |
3D モデルで透明な背景を有効にします。 |
gesture-cue-icon:file |
ジェスチャー キューのアイコンです。 |
gesture-cue-text:string |
ジェスチャー キュー アイコンの下に表示されるテキストです。 |
gesture-cue-duration:number |
ジェスチャー キューを表示する時間（秒単位）です。時間制限がない場合は、-1 を指定します。 |
イベント
| 名前 | 説明 |
|---|---|
scene-rendered |
3D モデルシーンが初めてレンダリングされると、送信されます。 |
camera-changed |
3D カメラのプロパティが変更されると、送信されます。event.detail オブジェクトには、カメラの現在のプロパティがすべて含まれます。 |
hotspot-clicked |
ホットスポットがクリックされると送信されます。event.detail オブジェクトには、クリックされたホットスポットの名前が含まれます。 |
interaction-start |
ユーザーが 3D モデルの操作を開始すると送信されます。 |
interaction-end |
ユーザーが 3D モデルの操作を停止すると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
setYaw(yaw:number) |
カメラの制限を考慮して、ヨー角を度単位で設定します（アニメーションはありません）。 |
setTargetYaw(targetYaw:number) |
カメラの制限または床の回転角（-360～+360 度）に基づいて、ターゲットのヨー角を度単位で設定します。 |
setTargetPitch(targetPitch:number) |
ターゲットのピッチの角度を度単位で設定します。 |
incrementTargetPitch(pitchDelta:number) |
デルタ角のターゲットのピッチを度単位で大きくします。 |
setTargetZoom(targetZoom:number) |
ターゲットのズームをメートル単位で設定します。 |
incrementTargetZoom(zoomDelta:number) |
ターゲットのズームをメートル単位で増加させます。 |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
ターゲットの回転軸をメートル単位で設定します。 |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
ターゲットのローカルパンをメートル単位で設定します。 |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
マテリアルの色を設定します。 |
playAnimation(animationName:string) |
アニメーションを再生します。 |
pauseAnimation(animationName:string) |
アニメーションを一時停止します。 |
setAnimationTime(animationName:string, animationTime:number) |
アニメーション時間を秒単位で設定します。 |
lookAtHotspot(hotspotName:string) |
カメラを移動、回転させてホットスポットに焦点を合わせます。 |
gwd-3d-model-viewer
3D モデルビューア コンポーネントをラップするコンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
src:file |
3D モデルのソースファイルです。 |
gesture-cue-icon:file |
ジェスチャー キューのアイコンです。 |
gesture-cue-text:string |
ジェスチャー キュー アイコンの下に表示されるテキストです。 |
gesture-cue-duration:number |
ジェスチャー キューを表示する時間（秒単位）です。時間制限がない場合は、-1 を指定します。 |
skybox-image:file |
3D モデルシーンの背景画像です。 |
environment-image:file |
3D モデルの環境反射を制御します。 |
イベント
| 名前 | 説明 |
|---|---|
scene-rendered |
3D モデルシーンが初めてレンダリングされると、送信されます。 |
camera-changed |
3D カメラのプロパティが変更されると、送信されます。event.detail オブジェクトには、カメラの現在のプロパティがすべて含まれます。 |
hotspot-clicked |
ホットスポットがクリックされると送信されます。event.detail オブジェクトには、クリックされたホットスポットの名前が含まれます。 |
interaction-start |
ユーザーが 3D モデルの操作を開始すると送信されます。 |
interaction-end |
ユーザーが 3D モデルの操作を停止すると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
setYaw(yaw:number) |
カメラの制限を考慮して、ヨー角を度単位で設定します（アニメーションはありません）。 |
setTargetYaw(targetYaw:number) |
カメラの制限または床の回転角（-360～+360 度）に基づいて、ターゲットのヨー角を度単位で設定します。 |
setTargetPitch(targetPitch:number) |
ターゲットのピッチの角度を度単位で設定します。 |
incrementTargetPitch(pitchDelta:number) |
デルタ角のターゲットのピッチを度単位で大きくします。 |
setTargetZoom(targetZoom:number) |
ターゲットのズームをメートル単位で設定します。 |
incrementTargetZoom(zoomDelta:number) |
ターゲットのズームをメートル単位で増加させます。 |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
ターゲットの回転軸をメートル単位で設定します。 |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
ターゲットのローカルパンをメートル単位で設定します。 |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
マテリアルの色を設定します。 |
playAnimation(animationName:string) |
アニメーションを再生します。 |
pauseAnimation(animationName:string) |
アニメーションを一時停止します。 |
setAnimationTime(animationName:string, animationTime:number) |
アニメーション時間を秒単位で設定します。 |
gwd-addtocalendar
カレンダーにイベントを追加します。
プロパティ
| 名前 | 説明 |
|---|---|
event-title:string |
ユーザーのカレンダーに表示されるイベント名です。 |
start-date:string |
イベントの開始日です。 |
start-time:string |
イベントの開始時間（24 時間形式）です。 |
end-date:string |
イベントの終了日です。 |
end-time:string |
イベントの終了時間（24 時間形式）です。 |
timezone:string |
イベントのタイムゾーンです。設定中にユーザーが別のタイムゾーンに移動した場合でも、本来の設定時間が移動先のタイムゾーンで表示されます。 |
location:string |
イベントの場所です。 |
description:string |
イベントの説明です。 |
icalendar:boolean |
iCalendar ファイルを使用するかどうか |
google:boolean |
Google カレンダーを使用するかどうかを指定します。 |
windows-live:boolean |
Windows Live カレンダーを使用するかどうかを指定します。 |
yahoo:boolean |
Yahoo! カレンダーを使用するかどうかを指定します。 |
bg-color:string |
プルダウンの背景色を示す 16 進値です。 |
font-color:string |
プルダウンのフォントの色を示す 16 進値です。 |
font-family:string |
プルダウンのフォントの名前です。 |
font-size:string |
プルダウンのフォントのサイズです。 |
font-weight:string |
プルダウンのフォントのウェイトです。 |
highlight-color:string |
プルダウンのハイライト色を示す 16 進値です。 |
gwd-audio
HTMLAudioElement をラップするコンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
autoplay:boolean |
読み込み時に音声を自動再生するかどうか |
loop:boolean |
再生完了時に音声を繰り返し再生するかどうか |
muted:boolean |
音声をミュート状態で開始するかどうかを指定します。 |
controls:boolean |
デフォルトのネイティブ プレーヤー コントロールを有効にするかどうかを指定します。 |
sources:file |
異なる形式の音声ソースをカンマで区切った文字列です。 |
イベント
| 名前 | 説明 |
|---|---|
play |
前の一時停止イベント後にメディアの再生が始まると送信されます。 |
pause |
再生が一時停止すると送信されます。 |
playing |
メディアの再生が始まると（初めての開始、一時停止後の再開、終了後に最初から開始したいずれの場合も）送信されます。 |
ended |
再生が完了すると送信されます。 |
volumechange |
音量が変更されると（音量の設定時、ミュート属性の変更時のいずれでも）送信されます。 |
seeked |
シーク動作の完了後に送信されます。 |
waiting |
リクエストした操作（再生など）が、別の操作（シークなど）の完了待ちで遅れるときに送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
mute() |
音声のミュートとミュート解除を切り替えます。 |
pause() |
音声を一時停止します。 |
play() |
音声を再生します。 |
replay() |
音声を最初から再生します。 |
seek(time:number) |
音声内の指定された時間にジャンプします。 |
gwd-carouselgallery
カルーセル スタイルのレイアウトでフレームを表示するギャラリー オブジェクトです。
プロパティ
| 名前 | 説明 |
|---|---|
images:string |
ギャラリーで使用する画像のパスをカンマで区切った文字列です。 |
groups:string |
グループ ID をカンマで区切った文字列です。 |
transition-duration:number |
ギャラリーのアニメーションの速度（ミリ秒単位） |
start-frame:number |
最初に表示する画像の枚数です。 |
autoplay:boolean |
フレームを 1 回自動再生するかどうか |
has-navigation:boolean |
ギャラリーのナビゲーション コントロールを自動的に表示するかどうかを指定します。 |
navigation-thumbnails:boolean |
丸の代わりにサムネイルをナビゲーションに使用するかどうか |
navigation-highlight:color |
ナビゲーションでアクティブなフレームのハイライト表示に使用する CSS カラーコード |
scaling:string |
画像コンテンツを拡大縮小してフレームに収める方法 |
frame-width:number |
1 つのコンテンツ パネルの幅です。 |
frame-height:number |
1 つのコンテンツ パネルの高さです。 |
neighbor-rotation-y:number |
現在中心にあるパネルの周辺に適用される Y 軸周りの回転で、隣接するパネルを傾けるのに使用 |
neighbor-translation-x:number |
現在中心にあるパネルの周辺に適用される X 軸に沿った変換で、隣接するパネルの配置を調整するのに使用 |
neighbor-translation-y:number |
現在中心にあるパネルの周辺に適用される Y 軸に沿った変換 |
neighbor-translation-z:number |
その時点で中心にあるパネルの周辺に適用される Z 軸に沿った変換です。 |
exit-urls:string |
ギャラリー内の画像に対応する exit URL をカンマで区切った文字列です。 |
show-reflection:boolean |
CSS3 を使った反射を表示するかどうかを指定します。 |
pause-front-media:boolean |
現在のフレームの移行時に、前のフレームのメディア要素（動画、音声など）を一時停止するかどうかを指定します。 |
resume-next-media:boolean |
現在のフレームの移行時に、新しい現在のフレームでメディア要素（動画、音声など）を再開するかどうかを指定します。 |
イベント
| 名前 | 説明 |
|---|---|
firstinteraction |
ユーザーが初めてギャラリーを操作すると送信されます。 |
allframesviewed |
ギャラリーのすべてのフレームが少なくとも 1 回表示されると送信されます。 |
allframesloaded |
ギャラリーのすべてのフレームが読み込まれると送信されます。 |
autoplayended |
なんらかの理由で自動再生が終了すると送信されます。指定した自動再生の継続時間に達して自然に終了すると、event.detail.completed が true になり、それ以外の場合は false になります。 |
frameshown |
新しいフレームが表示されると送信されます。 |
frameactivated |
新しいフレームの有効化が開始されると、まだ表示されていなくても送信されます。 |
frameautoplayed |
自動再生用にフレームが有効になると送信されます。同時に複数のフレームが表示されると、それぞれのフレームに対して別々に呼び出されるため、frameshown よりもトリガーの回数が多くなります。 |
frametap |
ユーザーがフレームをタップすると送信されます。 |
reachleftend |
ギャラリーが左端に達すると送信されます。 |
reachrightend |
ギャラリーが右端に達すると送信されます。 |
trackstart |
マウスまたはタップのドラッグが開始されると送信されます。 |
track |
マウスまたはタップのドラッグにより得られる X と Y の位置データが登録されます。 |
trackend |
マウスまたはタップのドラッグが終了すると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
goToFrame(index:number, opt_animate:string) |
指定されたフレームに移動します。 |
goForwards(opt_animate:string) |
次のフレームが利用できれば移動します。 |
goBackwards(opt_animate:string) |
前のフレームに移動します。 |
rotateOnce(opt_duration:number, opt_direction:string) |
ギャラリー内のすべてのフレームを 1 回表示します。 |
stopRotation() |
現在の自動回転を停止します。 |
gwd-cuepoint
Google Web Designer の動画コンポーネントに付属し、動画が特定の時間に到達したときにイベントを起動するコンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
time:number |
イベントがトリガーされる時間（秒単位）です。 |
イベント
| 名前 | 説明 |
|---|---|
cuepoint |
メディアの再生がキューポイントで定義した時間に到達すると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
seek() |
動画の時間をキューポイントの時間に設定します。 |
setTime(time:number) |
キューポイントの時間を設定します。 |
gwd-dateswap
Date Swap は、現在の日付と対象の期間の比較に基づいて、要素の視認性を変更します。
プロパティ
| 名前 | 説明 |
|---|---|
from_date:string |
RFC2822 または ISO 8601 の日付を表す文字列です。 |
to_date:string |
RFC2822 または ISO 8601 の日付を表す文字列です。 |
イベント
| 名前 | 説明 |
|---|---|
before |
現在の日付が from_date より前の日付である場合に送信されます（from_date と同じ日付の場合は除外）。 |
during |
現在の日付が from_date～to_date の場合に送信されます（from_date および to_date と同じ日付の場合を含む）。 |
after |
現在の日付が to_date より後の日付である場合に送信されます（to_date と同じ日付の場合は除外）。 |
メソッド
| 名前 | 説明 |
|---|---|
checkDate() |
現在の日付と期間を比較します。 |
gwd-gallerynavigation
Google Web Designer ギャラリー コンポーネントのナビゲーション コントロールです。
プロパティ
| 名前 | 説明 |
|---|---|
for:string |
ギャラリーで使用する画像のパスをカンマで区切った文字列です。 |
highlight:color |
ナビゲーションでアクティブなフレームのハイライト表示に使用する CSS カラーコード |
use-thumbnails:boolean |
丸の代わりにサムネイルをナビゲーションに使用するかどうか |
gwd-genericad
汎用広告コンテナを実装します。
イベント
| 名前 | 説明 |
|---|---|
adinitialized |
汎用要素が広告のコンテンツをレンダリングする直前に送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
initAd() |
イネーブラーから該当するイベントを受け取ったときに広告を開始します。 |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
広告のエキスパンド サイズに移動します。ページ ID が指定されていない場合、広告はデフォルト ページに移動します。 |
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string) |
広告を終了し、指定された場合は広告を折りたたみます。 |
gwd-gesture
各種のジェスチャー イベントを抽象化します。
プロパティ
| 名前 | 説明 |
|---|---|
touch-action:string |
タップ操作をどう解釈するかを指定します。有効な値は auto、none、pan-x、pan-y です。デフォルトの動作は none に設定されている場合と同じです。 |
イベント
| 名前 | 説明 |
|---|---|
hover |
マウスまたはタップの場所がコンポーネントの領域に入ると送信されます。 |
hoverend |
マウスまたはタップの場所がコンポーネントの領域から出ると送信されます。 |
trackstart |
マウスまたはタップのドラッグが開始されると送信されます。 |
track |
マウスまたはタップのドラッグにより得られる X と Y の位置データが登録されます。 |
trackend |
マウスまたはタップのドラッグが終了すると送信されます。 |
tap |
ユーザーのタップまたはマウスクリックが行われると送信されます。 |
swipeleft |
ユーザーが左にスワイプすると送信されます。 |
swiperight |
ユーザーが右にスワイプすると送信されます。 |
swipeup |
ユーザーが上にスワイプすると送信されます。 |
swipedown |
ユーザーが下にスワイプすると送信されます。 |
gwd-google-ad
Google 広告コンテナを実装します。
プロパティ
| 名前 | 説明 |
|---|---|
polite-load:boolean |
この広告でポライトロードを考慮する必要があるかどうかを指定します。 |
fullscreen:boolean |
この広告は全画面にエキスパンドしようとするかどうか |
イベント
| 名前 | 説明 |
|---|---|
adinitialized |
要素が広告のコンテンツをレンダリングする直前に送信されます。 |
expandstart |
イネーブラーが展開開始イベントを起動すると送信されます。 |
expandfinish |
イネーブラーが展開終了イベントを起動すると送信されます。 |
collapsestart |
イネーブラーが折りたたみ開始イベントを起動すると送信されます。 |
collapsefinish |
イネーブラーが折りたたみ終了イベントを起動すると送信されます。 |
fullscreensupport |
全画面展開がサポートされている場合に送信されます。 |
dynamicelementsready |
動的データが広告のコンテンツに適用された後に送信されます。 |
hostpagescroll |
イネーブラーが Hostpage スクロール イベントを起動すると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
initAd() |
イネーブラーから該当するイベントを受け取ったときに広告を開始します。 |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
広告のエキスパンド サイズに移動します。ページ ID が指定されていない場合、広告はデフォルト ページに移動します。 |
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
広告を終了し、指定された場合は広告を折りたたみます。 |
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
Studio に定義された値に関係なく広告を終了し、指定された URL に移動します。opt_collapseOnExit が true の場合、広告を折りたたみます。 |
incrementCounter(metric:string, opt_isCumulative:boolean) |
カウンタ イベントをトラッキングします。 |
startTimer(timerId:string) |
イベント タイマーを開始します。 |
stopTimer(timerId:string) |
イベント タイマーを停止します。 |
reportManualClose() |
フローティング、ポップアップ、エキスパンド、ページはめ込みとポップアップ、ページはめ込みとフローティングなどの広告の手動終了回数を記録します。このメソッドは Enabler.reportManualClose のプロキシです。 |
gwd-hotspot
動画の特定の時間にホットスポットを表示または非表示にするコンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
show-time:number |
ホットスポットの表示が開始される時間（秒単位）です。 |
hide-time:number |
ホットスポットの表示が停止される時間（秒単位）です。 |
left:string |
動画の上に表示されるホットスポットの左端の位置。動画のフレーム幅に対する相対値で指定します（例: 「5%」）。 |
top:string |
動画の上に表示されるホットスポットの上端の位置。動画のフレーム高さに対する相対値で指定します（例: 「5%」）。 |
width:string |
動画に比例するホットスポットの幅。動画のフレーム幅に対する相対値で指定します。 |
height:string |
動画に比例するホットスポットの高さ。動画のフレーム高さに対する相対値で指定します。 |
イベント
| 名前 | 説明 |
|---|---|
hotspotshown |
ホットスポットが表示されると送信されます。 |
hotspothidden |
ホットスポットが非表示になると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
show(showHide:boolean) |
ホットスポットの表示を切り替えます。 |
seek(showHide:boolean) |
動画の時間をホットスポットの表示時間または非表示時間に設定します。 |
setTimes(showTime:number, hideTime:number) |
ホットスポットの表示時間と非表示時間を設定します。 |
gwd-iframe
HTMLIframeElement をラップするコンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
source:string |
iframe のソースです。ネイティブ画像要素の src 属性の代わりに使用されます。 |
scrolling:string |
iframe にスクロールバーを表示するかどうかを指定します。 |
イベント
| 名前 | 説明 |
|---|---|
iframeload |
iframe が読み込まれると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
setUrl(url:string) |
iframe の URL を変更し、すぐに読み込みます。 |
gwd-image
HTMLImageElement をラップするコンポーネントです。画像ソースの遅延読み込みをサポートします。
プロパティ
| 名前 | 説明 |
|---|---|
source:file |
画像のソースです。ネイティブ画像要素の src 属性の代わりに使用されます。 |
alt:string |
画像の代替テキストです。 |
scaling:string |
画像を拡大縮小してフレームにどう収めるかを定義します。 |
alignment:string |
画像を表示領域に配置する方法を指定します。 |
focalpoint:string |
画像のフォーカス ポイントを x/y ピクセル座標としてエンコードします。 |
disablefocalpoint:boolean |
focalpoint 属性（Google Web Designer で内部的に使用されます）で設定されたフォーカス ポイントを無効にします。 |
gwd-imagebutton
画像ボタンとアップ、オーバー、ダウンの各状態をサポート
プロパティ
| 名前 | 説明 |
|---|---|
up-image:file |
押されていない状態にあるボタンの画像の URL です。 |
over-image:file |
マウスオーバーやカーソルを合わせた状態にあるボタンの画像の URL です。 |
down-image:file |
押されている状態にあるボタンの画像の URL です。 |
bgcolor:string |
ボタンの背景色です。 |
alignment:string |
画像を表示領域に配置する方法 |
scaling:string |
画像を親コンテナに収める方法 |
disabled:boolean |
ボタンを無効にするかどうか |
イベント
| 名前 | 説明 |
|---|---|
imagebuttonloaded |
すべての画像が読み込まれると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
toggleEnable() |
有効と無効を切り替えます。 |
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string) |
すべてのボタン状態の画像ソースを設定します。 |
gwd-image-effect
画像効果コンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
scaling:string |
画像を拡大縮小してフレームにどう収めるかを定義します。 |
time-limit:number |
アニメーションの時間制限です。時間制限がない場合は、-1 を指定します。 |
settings:string |
コンポーネント設定ダイアログを開始します。 |
images:string |
画像効果で使用する画像のパスをカンマで区切った文字列です。 |
イベント
| 名前 | 説明 |
|---|---|
autoplayended |
制限時間に達して自動再生が終了すると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
play() |
アニメーションを再生します。 |
pause() |
アニメーションを一時停止します。 |
gwd-before-and-after
2 つの類似した画像が「前後」の比較画像に合成される画像効果です。
gwd-breathe
画像を弾力的に膨張、収縮させてアニメーション化する画像効果です。
gwd-reveal
楕円形のフォーカス領域が 1 つ目の画像をスキャンしながら、2 つ目の画像を表示する画像効果です。
gwd-wave
アニメーション化した波パターンを画像に適用し、波パターンに従って画像をうねらせる画像効果です。
gwd-map
HTMLElement を拡張して、Google Maps API 呼び出しをラップします。
プロパティ
| 名前 | 説明 |
|---|---|
api-key:string |
Google API キーです。https://developers.google.com/maps/documentation/javascript/get-api-key をご覧ください。 |
query:string |
Google Places API から場所を返す検索クエリ名です。 |
start-latitude:decimal |
最初の中心の緯度座標です。-90～90（度）の値が有効です。 |
start-longitude:decimal |
最初の中心の経度座標です。指定できる値は -180～180（度）です。 |
request-user-location:boolean |
ユーザーの現在地をリクエストするかどうか。true に設定すると、ユーザーに位置情報を共有するように求めます。 |
client-id:string |
Google Maps Premier クライアント ID です。 |
search-radius:number |
場所の検索を行う最小半径（メートル単位） |
result-limit:number |
1 回の検索で返される結果の最大件数 |
start-zoom:number |
最初のズームレベル（Google Maps API で使用される単位）。既定値は 16 でこれは周辺地域のレベルです。 |
marker-src:string |
場所マーカーの画像のファイル名で、スプライトとしてオフ、オン、影の各コンポーネントが含まれます。 |
gps-src:string |
GPS での現在地を示す青い点の画像のファイル名 |
msg-start-position-prompt:string |
最初の位置を選択するように促すダイアログのテキストをローカライズした文字列 |
msg-gps-button-label:string |
Geolocation API からユーザーの位置情報を取得するボタンのラベルをローカライズした文字列です。 |
msg-manual-position-button-label:string |
場所の検索ボックスを表示するボタンのラベルをローカライズした文字列 |
msg-manual-position-prompt:string |
地図の最初の位置を検索するように促すダイアログ テキストをローカライズした文字列 |
msg-manual-position-placeholder:string |
地図の最初の位置を検索する検索ボックスのプレースホルダ テキストをローカライズした文字列 |
msg-geocode-failure:string |
Geolocation API を使用できなかった場合に表示されるダイアログのプロンプト テキストをローカライズした文字列です。 |
msg-no-results-found:string |
選択された位置での地図の検索で結果が見つからない場合に表示されるダイアログのテキストをローカライズした文字列 |
イベント
| 名前 | 説明 |
|---|---|
pinclick |
ユーザーが地図上のピンを選択すると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
setCenter(latitude:number, longitude:number, opt_accuracy:number) |
地図の中心を経度と緯度で指定した場所に設定します。 |
gwd-page
ページはページデッキ内の 1 つのカードです。
プロパティ
| 名前 | 説明 |
|---|---|
expanded:boolean |
このページを展開したページ（広告専用）と見なすかどうかを指定します。 |
centered:boolean |
このページ コンテンツを中心に配置するかどうかを指定します。 |
alt-orientation-page:string |
別の向きでこのコンテンツを適切に表示できるページの ID |
イベント
| 名前 | 説明 |
|---|---|
attached |
ページが DOM に接続された直後に送信されます。 |
detached |
ページが DOM から削除された直後に送信されます。 |
pageactivated |
ページが表示できるようになると送信されます。 |
pagedeactivated |
ページが表示されなくなると送信されます。 |
pageload |
ページのコンテンツが正常に読み込まれると送信されます。 |
pagepresenting |
ページがイントロ アニメーションを開始する直前に送信されます。 |
shake |
デバイスでシェイク ジェスチャーが検出されると送信されます。 |
tilt |
デバイスのチルトが検出されると送信されます。 |
rotatetoportrait |
デバイスが回転して縦向きになると送信されます。 |
rotatetolandscape |
デバイスが回転して横向きになると送信されます。 |
gwd-pagedeck
PageDeck はページのコンテナです。1 度に 1 ページずつ表示します。任意の順序で、またはサポートされるページの移行方法を使用して、前面に表示するページを周期的に変更できます。
プロパティ
| 名前 | 説明 |
|---|---|
default-page:string |
既定のページの ID |
イベント
| 名前 | 説明 |
|---|---|
pagetransitionstart |
ページが移行する前に送信されます。 |
pagetransitionend |
ページが移行した後に送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
ページデッキ内の次のページに移動します。 |
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
ページデッキ内の前のページに移動します。 |
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
ページデッキ内の指定されたページに移動します。 |
getCurrentPage() |
現在のページを返すか、ページを表示していない場合は null を返します。 |
getDefaultPage() |
指定されている場合はデフォルトのページを返し、指定されていない場合は最初のページを返します。 |
getPage(pageId:string) |
指定された ID を持つページを返します。 |
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean) |
指定された値と同じ属性値を持つページ要素を返すか、そのページが見つからない場合は -1 を返します。 |
getOrientationSpecificPage(orientation:string, pageId:string) |
指定された向きに対応するページを返します。 |
getElementById(id:string) |
指定された ID を持つ要素をこのページデッキ内のすべてのページで探します。gwd-pagedeck には DOM 内のアクティブなページしか保管されていないため、標準の document.getElementById(id) では非アクティブ ページに含まれる要素は返されません。非アクティブ ページの要素の参照は、特にダイナミック広告でよく必要になります。その場合、このメソッドを使って要素を ID で逆参照できます。 |
gwd-parallax
パララックス コンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
settings:string |
コンポーネント設定ダイアログを開始します。 |
yscroll:decimal |
ステージ上でレンダリングする際にパララックス アニメーションに使用するスクロール率です。 |
イベント
| 名前 | 説明 |
|---|---|
ready |
パララックス内のすべてのアセットが読み込まれると送信されます。 |
gwd-particleeffects
複数のパーティクル エフェクトと画像を合成するためのコンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
autoplay:boolean |
コンポーネントがロードされたときに、アニメーションを自動的に再生するかどうかを指定します。 |
time-limit:number |
アニメーションの時間制限です。時間制限がない場合は、-1 を指定します。 |
settings:string |
コンポーネント設定ダイアログを開始します。 |
イベント
| 名前 | 説明 |
|---|---|
timelimitreached |
アニメーションの再生が指定の制限時間に達したときに送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
play() |
アニメーションを再生します。 |
pause() |
アニメーションを一時停止します。 |
stop() |
アニメーションを停止します。 |
gwd-particles
パーティクル システム コンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
acceleration-x:number |
加速度の X コンポーネント（ピクセル/フレーム/フレーム単位）です。 |
acceleration-y:number |
加速度の Y コンポーネント（ピクセル/フレーム/フレーム単位）です。 |
angle-max:number |
パーティクルの速度方向の最大角度です。 |
angle-min:number |
パーティクルの速度方向の最小角度です。 |
autoplay:boolean |
親の gwd-particleeffects が再生を開始したときに、アニメーションを自動的に再生するかどうかを指定します。 |
color1:color |
1 つ目の色です。 |
color2:color |
2 つ目の色です。 |
color-rate:number |
1 フレームあたりの色 1 から色 2 への変化率です。[0, 1] の範囲で指定します。 |
emit-interval:number |
次のパーティクルが出力されるまでのフレーム数です。 |
emit-x-max:string |
パーティクル出力範囲の最大 X 座標です。 |
emit-x-min:string |
パーティクル出力範囲の最小 X 座標です。 |
emit-y-max:string |
パーティクル出力範囲の最大 Y 座標です。 |
emit-y-min:string |
パーティクル出力範囲の最小 Y 座標です。 |
loop:boolean |
アニメーションをループさせるかどうかを指定します。 |
number:number |
パーティクルの数です。 |
opacity-min:number |
パーティクルの最小不透明度です。 |
opacity-max:number |
パーティクルの最大不透明度です。 |
opacity-rate:number |
1 フレームあたりの不透明度の変化率です。これは、パーティクルの現在の不透明度に加算されます。 |
random-colors:boolean |
パーティクルに色 1 と色 2 の間のランダムな色を持たせるかどうかを指定します。false の場合、すべてのパーティクルは色 1 で初期化されます。 |
shape:string |
スプライトの形状です。 |
size-max:number |
パーティクルの最大サイズ（ピクセル単位）です。 |
size-min:number |
パーティクルの最小サイズ（ピクセル単位）です。 |
size-rate:number |
1 フレームあたりのサイズの変化率です。これは、パーティクルの現在のサイズに加算されます。 |
skip-forward:number |
指定された割合のパーティクルがパーティクル システムに放出される時間にスキップします。 |
speed-max:number |
パーティクルの最高速度（ピクセル/フレーム単位）。 |
speed-min:number |
パーティクルの最低速度（ピクセル/フレーム単位）。 |
sprite-image-src:file |
スプライトとして使用する画像のソースです。 |
turbulence-frequency:number |
タービュランスの頻度です。大きな値を指定するほど、動きが不規則になります。正の数のみ指定できます。 |
turbulence-rate:number |
時間に対する強度の変化率です。 |
turbulence-strength:number |
パーティクルに作用するタービュランスの強度です。正の数のみ指定できます。 |
turbulence-trail:number |
レンダリングするパーティクルの前および現在の状態の数です。 |
メソッド
| 名前 | 説明 |
|---|---|
play() |
アニメーションを再生します。 |
pause() |
アニメーションを一時停止します。 |
stop() |
アニメーションを停止します。 |
gwd-spritesheet
スプライト シートの単一のキーフレームやアニメーションを表示します。
プロパティ
| 名前 | 説明 |
|---|---|
imagesource:file |
スプライト シート画像の URL です。 |
offsetx:number |
スプライト シートの左側から次のいずれかの位置までのオフセット値（ピクセル単位）です。
|
offsety:number |
スプライト シートの上部から次のいずれかの位置までのオフセット値（ピクセル単位）です。
|
clipwidth:number |
次のいずれかの幅（ピクセル単位）です。
|
clipheight:number |
次のいずれかの高さ（ピクセル単位）です。
|
alignment:string |
コンテナ内の画像の位置を指定します。 |
scaling:string |
さまざまなサイズの画像をコンポーネント内でどのように表示するかを指定します。 |
totalframecount:number |
アニメーションを構成するフレームの数です。 |
duration:number |
各フレームの再生時間（ミリ秒単位）です。 |
loopcount:number |
アニメーションを繰り返す回数です。0 に設定すると無限に繰り返されます。 |
autoplay:boolean |
アニメーションを自動的に再生するかどうかを指定します。 |
endonstartframe:boolean |
アニメーションが最初のフレームで終了するかどうかを指定します。 |
reverseplay:boolean |
アニメーションを逆順で再生するかどうかを指定します。 |
イベント
| 名前 | 説明 |
|---|---|
animationend |
アニメーションが終了すると送信されます。 |
animationpause |
アニメーションが一時停止すると送信されます。 |
animationplay |
アニメーションが再生を開始すると送信されます。 |
animationrestart |
一時停止後にアニメーションを再開すると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean) |
新しいアニメーションを定義します。 |
play() |
アニメーションを再生します。 |
pause() |
アニメーションを一時停止します。 |
togglePlay() |
アニメーションの再生と一時停止を切り替えます。 |
restart() |
アニメーションを再開します。 |
previousFrame() |
前のフレームを表示します。 |
nextFrame() |
次のフレームを表示します。 |
goToFrame(id:number) |
フレーム番号で特定のフレームを表示します。 |
gwd-starratings
評価を表す星の数をレンダリングするためのコンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
ratingvalue:decimal |
評価値です。 |
iconsize:number |
星アイコンのサイズです。 |
isemptyshown:boolean |
空白の星アイコンを表示するかどうかを指定します。 |
isemptycolored:boolean |
空白の星アイコンに色を付けるかどうかを指定します。 |
colorprimary:color |
塗りつぶしを行う場合のメインの色です。 |
colorsecondary:color |
グラデーションを行う場合の 2 番目の色です。 |
gradienttype:string |
グラデーションのタイプです。 |
ratingmax:number |
星評価の最高値です。 |
ratingmin:decimal |
星評価の最低値です。 |
イベント
| 名前 | 説明 |
|---|---|
complete |
星評価アイコンが作成されるタイミングを指定します。 |
validationerror |
星評価の値が最低値を下回っています。 |
gwd-streetview
Google ストリートビュー コンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
key:string |
アプリケーションに固有のキーを取得する方法については、https://developers.google.com/maps/documentation/javascript/get-api-key をご覧ください。 |
latitude:decimal |
場所を示す緯度の値です。 |
longitude:decimal |
場所を示す経度の値です。 |
interaction:boolean |
ビューのパン表示や回転を可能にするかどうかを指定します。 |
heading:decimal |
カメラのコンパス方位を示します。使用できる値は、0～360 です（0 と 360 は北、90 は東、180 は南）。コンパス方位を指定しない場合、目的の場所に対して、最も近くの撮影地点からカメラが向いている方向として値が計算されます。 |
pitch:decimal |
ストリートビュー車両に対するカメラの上下の角度です。多くの場合は水平ですが、常に水平とは限りません。正の値を指定すると、カメラは上向きになり（90 度で真上）、負の値を指定すると、カメラは下向きになります（-90 度で真下）。 |
zoom:number |
ストリートビュー車両に対するカメラのズームを指定します。 |
gwd-swipegallery
スワイプ可能なコンテンツ ストリップにフレームを表示するギャラリー オブジェクト
プロパティ
| 名前 | 説明 |
|---|---|
images:string |
ギャラリーで使用する画像のパスをカンマで区切った文字列です。 |
groups:string |
グループ ID をカンマで区切った文字列です。 |
transition-duration:number |
ギャラリーのアニメーションの速度（ミリ秒単位）です。 |
start-frame:number |
開始するフレームの番号（1 から始まる） |
num-frames-to-display:number |
一度に表示するフレームの数です。 |
frame-snap-interval:number |
1 回のスワイプで進むフレームの数です。 |
autoplay:boolean |
ギャラリーを自動的に 1 回転するかどうかを指定します。 |
has-navigation:boolean |
ギャラリーのナビゲーション コントロールを表示するかどうかを指定します。 |
navigation-thumbnails:boolean |
丸の代わりにサムネイルをナビゲーションに使用するかどうか |
navigation-highlight:color |
ナビゲーションでアクティブなフレームのハイライト表示に使用する CSS カラーコード |
scaling:string |
画像コンテンツを拡大縮小してフレームに収める方法 |
swipe-axis:string |
スワイプが検出された軸を指定します。 |
offset:number |
隣接するコンテンツ フレームとの間の空間の幅です。 |
frame-width:number |
1 つのコンテンツ フレームの幅です。num-frames-to-display をオーバーライドします。 |
frame-height:number |
1 つのコンテンツ フレームの高さです。 |
autoplay-duration:number |
フレームを自動再生する総時間 |
autoplay-step-interval:number |
自動再生時の各フレーム ステップの間隔 |
exit-urls:string |
ギャラリー内の画像に対応する exit URL をカンマで区切った文字列です。 |
disable-gesture:boolean |
ギャラリーのタップ ナビゲーションを有効にするジェスチャー コンポーネントを非表示（無効）にするかどうかを指定します。 |
pause-front-media:boolean |
現在のフレームの移行時に、前のフレームのメディア要素（動画、音声など）を一時停止するかどうかを指定します。 |
resume-next-media:boolean |
現在のフレームの移行時に、新しい現在のフレームでメディア要素（動画、音声など）を再開するかどうかを指定します。 |
イベント
| 名前 | 説明 |
|---|---|
firstinteraction |
ユーザーが初めてギャラリーを操作すると送信されます。 |
allframesviewed |
ギャラリーのすべてのフレームが少なくとも 1 回表示されると送信されます。 |
allframesloaded |
ギャラリーのすべてのフレームが読み込まれると送信されます。 |
autoplayended |
なんらかの理由で自動再生が終了すると送信されます。指定した自動再生の継続時間に達して自然に終了すると、event.detail.completed が true になり、それ以外の場合は false になります。 |
frameshown |
必要なアニメーションの完了後に新しいフレームが表示されると送信されます。 |
frameactivated |
新しいフレームの有効化が開始されると、まだ表示されていなくても送信されます。 |
frameautoplayed |
自動再生用にフレームが有効になると送信されます。同時に複数のフレームが表示されると、それぞれのフレームに対して別々に呼び出されるため、frameshown よりもトリガーの回数が多くなります。 |
frametap |
ユーザーがフレームをタップすると送信されます。 |
reachleftend |
ギャラリーが左端に達すると送信されます。 |
reachrightend |
ギャラリーが右端に達すると送信されます。 |
framemouseover |
ユーザーがフレームにカーソルを合わせると送信されます。 |
framemouseout |
ユーザーがフレームからカーソルを移動すると送信されます。 |
trackstart |
マウスまたはタップのドラッグが開始されると送信されます。 |
track |
マウスまたはタップのドラッグにより得られる X と Y の位置データが登録されます。 |
trackend |
マウスまたはタップのドラッグが終了すると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
goToFrame(frame:number, opt_animate:string) |
指定されたフレームに移動します。 |
rotateOnce(opt_duration:number, opt_direction:string) |
ギャラリー内のすべてのフレームを 1 回表示します。 |
stopRotation() |
現在の自動回転を停止します。 |
goForwards() |
ギャラリーを 1 フレーム進めます。 |
goBackwards() |
ギャラリーを 1 フレーム戻します。 |
gwd-swirl
Swirl コンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
yscroll:decimal |
ステージ上でレンダリングする際に Swirl アニメーションに使用するスクロール率です。 |
settings:string |
コンポーネント設定ダイアログを開始します。 |
イベント
| 名前 | 説明 |
|---|---|
ready |
すべての子アセットが読み込まれると送信されます。 |
gwd-taparea
クリックやタップのイベントを抽象化します。
プロパティ
| 名前 | 説明 |
|---|---|
exit-override-url:string |
タップ領域をタップしたときの exit URL です。 |
イベント
| 名前 | 説明 |
|---|---|
action |
ユーザーがボタンをタップ（モバイルの場合）する、またはクリック（パソコンの場合）すると送信されます。 |
gwd-taptocall
クリックまたはタップされると、設定された電話番号に発信または SMS を送信するコンポーネント
プロパティ
| 名前 | 説明 |
|---|---|
number:string |
発信またはメッセージを送信する電話番号 |
action:string |
SMS メッセージを送信するか、電話番号に発信するかを選択 |
イベント
| 名前 | 説明 |
|---|---|
action |
ユーザーがボタンをタップ（モバイルの場合）する、またはクリック（パソコンの場合）すると送信されます。 |
taptocall |
通話や SMS が開始されると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
dial() |
設定された電話番号に発信または SMS を送信します。 |
gwd-transitiongallery
トランジション ギャラリー コンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
settings:string |
コンポーネント設定ダイアログを開始します。 |
images:string |
ギャラリーで使用する画像のパスをカンマで区切った文字列です。 |
scaling:string |
画像を拡大縮小してフレームにどう収めるかを定義します。 |
exit-urls:string |
ギャラリー内の画像に対応する exit URL をカンマで区切った文字列です。 |
イベント
| 名前 | 説明 |
|---|---|
autoplayended |
なんらかの理由で自動再生が終了すると送信されます。指定した自動再生のループカウントに達して自然に終了すると、event.detail.completed が true になり、それ以外の場合は false になります。 |
frameactivated |
新しいフレームの有効化が開始されると、まだ表示されていなくても送信されます。 |
frameshown |
新しいフレームが表示されると送信されます。 |
frametap |
ユーザーがフレームをタップすると送信されます。 |
rotateonceended |
なんらかの理由で回転が終了すると送信されます。自然に終了すると、event.detail.completed が true になり、それ以外の場合は false になります。 |
reachleftend |
ギャラリーが左端に達すると送信されます。 |
reachrightend |
ギャラリーが右端に達すると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
goToFrame(frame:number, with_animation:boolean) |
指定されたフレームに移動します。 |
rotateOnce(startFromCurrentFrame:boolean) |
ギャラリーのフレームを表示します。startFromCurrentFrame が false になっているか、指定されていない場合には開始フレームから、それ以外の場合には現在のフレームから開始します。回転は、開始フレームに到達する前に停止します。 |
startAutoplay(startFromCurrentFrame:boolean) |
ギャラリーの自動再生を開始します。startFromCurrentFrame が false になっているか、指定されていない場合には開始フレームから、それ以外の場合には現在のフレームから開始します。自動再生は、ループカウントに達すると停止します。 |
stop() |
アニメーションが進行中の場合は、これをキャンセルします。 |
goForwards() |
ギャラリーを 1 フレーム進めます。 |
goBackwards() |
ギャラリーを 1 フレーム戻します。 |
gwd-blinds
ブラインド エフェクト コンポーネントです。窓のブラインド スラットが一方の端から反対側の端に向かって 1 つずつ開くにつれて、その背後から新しい画像が現れます。
プロパティ
| 名前 | 説明 |
|---|---|
direction:dropdown |
エフェクトの方向です。 |
blinds:number |
ブラインドの数です。 |
transparentbackground:boolean |
新しい画像のブラインドをレンダリングする前に、透明の背景を表示するかどうかを指定します。false の場合、ブラインドが元の画像を覆い隠します。 |
gwd-door-wipe
ドアワイプ エフェクト コンポーネントは、ワイプ エフェクトの一種です。ワイプの方向によって異なる 2 つのタイプがあります。開くドアのワイプでは、両開きのドアが開くように、古い画像の中心から新しい画像が表示されます。閉じるドアのワイプでは、両開きのドアが閉じるように、古い画像の両端から新しい画像が表示されます。
プロパティ
| 名前 | 説明 |
|---|---|
orientation:dropdown |
アニメーションの向きです。 |
direction:dropdown |
ドアワイプ エフェクトの方向です。 |
gwd-fade
トランジション フェード コンポーネントです。
gwd-iris-wipe
アイリスワイプ エフェクト コンポーネントです。フレームの中心から（デフォルト）大きくなる円の中に新しい画像を表示します。
プロパティ
| 名前 | 説明 |
|---|---|
originpercentx:number |
大きくなる円の原点の X 軸です。フレームの幅に対する相対値で指定します。 |
originpercenty:number |
大きくなる円の原点の Y 軸です。フレームの高さに対する相対値で指定します。 |
gwd-push
プッシュ トランジション エフェクト コンポーネントです。元の画像が押し出されて新しい画像が挿入されます。
プロパティ
| 名前 | 説明 |
|---|---|
direction:dropdown |
プッシュ エフェクトの方向です。 |
gwd-radial-wipe
放射状ワイプ エフェクト コンポーネントは、ワイプ エフェクトの一種です。時計の針のように、指定した点を中心にして回転する半径の背後から新しい画像が現れます。
プロパティ
| 名前 | 説明 |
|---|---|
direction:dropdown |
エフェクトの方向です。 |
originpercentx:number |
回転する半径の原点の X 軸です。その背後から新しい画像が表示されます。フレームの幅に対する相対値で指定します。 |
originpercenty:number |
回転する半径の原点の Y 軸です。その背後から新しい画像が表示されます。フレームの高さに対する相対値で指定します。 |
gwd-rotate
回転エフェクト コンポーネントです。元の画像をズームインさせながら回転させ、回転が終わるまで新しい画像をズームアウトさせます。
プロパティ
| 名前 | 説明 |
|---|---|
direction:dropdown |
エフェクトの方向です。 |
gwd-slice
スライス エフェクト コンポーネントです。新しい画像をスライスまたはバーとして、1 つずつスライドインさせます。
プロパティ
| 名前 | 説明 |
|---|---|
direction:dropdown |
スライス エフェクトの方向です。 |
slices:number |
ビューを分割したスライスまたはバーの数です。 |
transparentbackground:boolean |
新しい画像のスライスがスライドインする前に、透明の背景を表示するかどうかを指定します。false の場合、スライスが元の画像を覆い隠します。 |
gwd-split-push
分割プッシュ エフェクト コンポーネントは、プッシュ エフェクトの一種です。元の画像が垂直方向または水平方向に 2 つに分割されます。新しい画像の対応する部分が、元の画像のそれぞれの部分をビューから反対方向に押し出します。
プロパティ
| 名前 | 説明 |
|---|---|
orientation:dropdown |
アニメーションの向きです。 |
gwd-stripe-wipe
ストライプ ワイプ エフェクト コンポーネントは、ワイプ エフェクトの一種です。画面上で交互に色が変わる単色のストライプが同時に大きくなり、元の画像を覆い隠します。次に、ストライプが小さくなって、新しい画像が表示されます。
プロパティ
| 名前 | 説明 |
|---|---|
direction:dropdown |
エフェクトの方向です。 |
stripes:number |
各色のストライプ数です。 |
color1:color |
交互になっている 2 つのストライプ色の 1 つ目を表す 16 進値です。 |
color2:color |
交互になっている 2 つのストライプ色の 2 つ目を表す 16 進値です。 |
gwd-venetian-blinds
ベネチアン ブラインド エフェクト コンポーネントです。ベネチアン ブラインドのスラットが同時にまたは 1 つずつ開き、その背後から新しい画像が現れます。
プロパティ
| 名前 | 説明 |
|---|---|
orientation:dropdown |
アニメーションの向きです。 |
blinds:number |
ブラインドの数です。 |
staggered:boolean |
スラットが遅延して遷移するかどうかを指定します。false の場合、すべてのスラットが同時に遷移します。 |
gwd-wipe
トランジション ワイプ コンポーネントです。標準ワイプ エフェクトです。片方の端から反対側の端までラインがワイプしていき、その背後で元の画像が少しずつ新しい画像に変わります。
プロパティ
| 名前 | 説明 |
|---|---|
direction:dropdown |
エフェクトの方向です。 |
angle:number |
元の画像を新しい画像に置き換えるラインを傾ける角度です。 |
gwd-zigzag
ジグザグ エフェクト コンポーネントです。新しい画像がスネーク グリッド パターンで表示されます。水平方向のジグザグ エフェクトでは、新しい画像のタイルが交互になっている（左から右、右から左）連続した行で表示されます。垂直方向のジグザグ エフェクトでは、新しい画像のタイルが交互になっている（上から下、下から上）連続した列で表示されます。
プロパティ
| 名前 | 説明 |
|---|---|
orientation:dropdown |
アニメーションの向きです。 |
rows:number |
ジグザグ エフェクトの行数です。 |
columns:number |
ジグザグ エフェクトの列数です。 |
gwd-video
HTMLVideoElement をラップするコンポーネントです。
プロパティ
| 名前 | 説明 |
|---|---|
autoplay:boolean |
読み込み時に動画を自動再生するかどうか |
loop:boolean |
再生完了時に動画を繰り返し再生するかどうか |
muted:boolean |
動画をミュートして開始するかどうか |
controls:boolean |
デフォルトのネイティブ プレーヤー コントロールを有効にするかどうかを指定します。 |
sources:file |
異なる形式の動画をカンマで区切った文字列です。 |
poster:string |
ユーザーが再生またはシークするまで表示するポスター フレームを指定する URL です。 |
イベント
| 名前 | 説明 |
|---|---|
play |
一時停止した後にメディアの再生が開始すると（前の pause イベント後に再生が再開すると）送信されます。 |
pause |
再生が一時停止すると送信されます。 |
playing |
メディアの再生が開始すると（初めての開始、一時停止後の再開、終了後の最初から開始のいずれでも）送信されます。 |
ended |
再生が完了すると送信されます。 |
volumechange |
音量が変更されると（音量の設定時、ミュート属性の変更時のいずれでも）送信されます。 |
seeked |
シーク動作の完了後に送信されます。 |
waiting |
リクエストした操作（再生など）が、別の操作（シークなど）の完了待ちで遅れるときに送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
mute() |
動画のミュートとミュート解除を切り替えます。 |
pause() |
動画を一時停止します。 |
play() |
動画を再生します。 |
replay() |
動画を最初から再生します。 |
seek(time:number) |
動画内の指定された時間にジャンプします。 |
setVolume(volume:number) |
動画の音量を設定します。 |
setSources(sources:string) |
動画のソースを設定します。 |
gwd-youtube
HTMLElement を拡張して、YouTube API 呼び出しをラップします。
プロパティ
| 名前 | 説明 |
|---|---|
video-url:string |
動画の YouTube URL です。 |
autoplay:string |
サポートされている環境では、読み込み時に YouTube 動画を自動再生 |
preview-duration:number |
プレビューの時間を設定します。autoplay 属性が preview に設定されている場合にのみ使用します。 |
controls:string |
動画コントロールを表示します（none、autohide）。 |
color:string |
プレーヤーの進行状況バーのカラーテーマ（赤色または白色） |
muted:boolean |
動画をミュート状態で開始するかどうかを指定します。 |
loop:boolean |
再生完了時に動画を繰り返し再生するかどうか |
pause-on-end:boolean |
残り 1 秒で動画を一時停止するかどうかを指定します。 |
start-position:number |
動画の開始位置の時間（秒単位） |
allowfullscreen:boolean |
パソコンでの全画面表示を許可するかどうか |
extra-player-args:string |
その他の YouTube プレーヤー パラメータです。詳しくは https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters をご覧ください。 |
イベント
| 名前 | 説明 |
|---|---|
buffering |
YouTube プレーヤーがバッファリング中 |
ended |
YouTube 動画が終了した |
paused |
YouTube 動画が一時停止された |
playing |
YouTube 動画の再生が開始された |
replayed |
YouTube 動画が最初から再生された |
viewed0percent |
動画が 0% 再生されると送信されます。 |
viewed25percent |
動画が 25% 再生されると送信されます。 |
viewed50percent |
動画が 50% 再生されると送信されます。 |
viewed75percent |
動画が 75% 再生されると送信されます。 |
viewed100percent |
動画が 100% 再生されると送信されます。 |
previewed0percent |
プレビューが 0% 再生されると送信されます。 |
previewed25percent |
プレビューが 25% 再生されると送信されます。 |
previewed50percent |
プレビューが 50% 再生されると送信されます。 |
previewed75percent |
プレビューが 75% 再生されると送信されます。 |
previewed100percent |
プレビューが 100% 再生されると送信されます。 |
メソッド
| 名前 | 説明 |
|---|---|
toggleMute() |
動画のミュートとミュート解除を切り替えます。 |
pause() |
動画を一時停止します。 |
play() |
動画を再生します。 |
replay() |
動画を最初から再生します。 |
seek(time:number) |
動画内の指定された時間にジャンプします。 |
setYouTubeId(id:string, cueOnly:boolean) |
指定された ID に YouTube 動画のソースを変更します。 |