各コンポーネントの API

360° ギャラリー

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-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:string 異なる形式の音声ソースをカンマで区切った文字列です。

イベント

名前 説明
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

動画コンポーネントに付属し、動画が特定の時間に到達したときにイベントを起動するコンポーネントです。

プロパティ

名前 説明
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_dateto_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 タップ操作をどう解釈するかを、autononepan-xpan-y で指定します。デフォルトの動作は none に設定されている場合と同じです。

イベント

名前 説明
hover マウスまたはタップの場所がコンポーネントの領域に入ると送信されます。
hoverend マウスまたはタップの場所がコンポーネントの領域から出ると送信されます。
trackstart マウスまたはタップのドラッグが開始されると送信されます。
track マウスまたはタップのドラッグにより得られる X と Y の位置データが登録されます。
trackend マウスまたはタップのドラッグが終了すると送信されます。
tap ユーザーのタップまたはマウスクリックが行われると送信されます。
swipeleft ユーザーが左にスワイプすると送信されます。
swiperight ユーザーが右にスワイプすると送信されます。
swipeup ユーザーが上にスワイプすると送信されます。
swipedown ユーザーが下にスワイプすると送信されます。
Google 広告

gwd-google-ad

Google 広告コンテナを実装します。

プロパティ

名前 説明
polite-load:boolean この広告でポライトロードを考慮する必要があるかどうかを指定します。
fullscreen:boolean この広告が全画面への展開を試みるかどうかを指定します。

イベント

名前 説明
adinitialized 要素が広告のコンテンツをレンダリングする直前に送信されます。
expandstart イネーブラーが展開開始イベントを起動すると送信されます。
expandfinish イネーブラーが展開終了イベントを起動すると送信されます。
collapsestart イネーブラーが折りたたみ開始イベントを起動すると送信されます。
collapsefinish イネーブラーが折りたたみ終了イベントを起動すると送信されます。
fullscreensupport 全画面展開がサポートされている場合に送信されます。

メソッド

名前 説明
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) ホットスポットの表示設定を変更します。showHide が true の場合はホットスポットを表示し、showHide が false の場合は非表示にします。
seek(showHide:boolean) 動画の時間をホットスポットの表示時間または非表示時間に設定します。showHide が true の場合は表示時間を使用し、showHide が false の場合は非表示時間を使用します。
setTimes(showTime:number, hideTime:number) ホットスポットの表示時間と非表示時間を設定します。
iframe

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 画像を表示領域に配置する方法を指定します。
画像ボタン

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-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 から場所を返す検索クエリ名です。Fusion Table ID がない場合に必須です。
start-latitude:decimal 最初の中心の緯度座標です。-90~90(度)の値が有効です。
start-longitude:decimal 最初の中心の経度座標です。-180~180(度)の値が有効です。
request-user-location:boolean ユーザーの現在地をリクエストするかどうかを指定します。true に設定すると、ユーザーに位置情報を共有するように求めます。
fusion-table-id:string 公開 Google Fusion Tables の ID です。
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

ページデッキはページのコンテナであり、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 で逆参照できます。

2 秒間一時停止した後、広告内の次のページに移動します。

このサンプルコードでは、広告内に少なくとも 2 つのページがあるとします。ここでは次のように、2 秒ごとにページを変化させるイベントを作成できます。

  • ターゲット - ページを選択します。最初のページは「page1」になります。
  • イベント - [ページ] > [ページの表示の準備完了] を選択します。
  • アクション - [カスタム] > [カスタム アクションを追加] を選択します。

[カスタムコード] ダイアログで関数に名前を付けます。今回の例の場合は、「turnpage」といった名前を使用することをおすすめします。次に、以下のコードを使用します。

setTimeout(nextPage, 2000);
function nextPage() {
   document.getElementById('pagedeck').goToNextPage();
}

同じカスタム操作を使って、同じイベントを各ページに追加します。

パララックス

gwd-parallax

パララックス コンポーネント。

プロパティ

名前 説明
images:string [プロパティ] パネルでパララックスの assetList コントロールが表示されるようにするためのプレースホルダ属性です。
yscroll:decimal ステージ上でレンダリングする際にパララックス アニメーションに使用するスクロール率です。

イベント

名前 説明
ready パララックス内のすべてのアセットが読み込まれると送信されます。
パーティクルのエフェクト

gwd-particleeffects

パーティクル システムによって生成されたアニメーションを表示するコンポーネントです。コンポーネント内の各パーティクルのエフェクトには、それ特有のプロパティもあります。

プロパティ

名前 説明
autoplay:boolean コンポーネントがロードされたときに、アニメーションを自動的に再生するかどうかを指定します。
time-limit:number アニメーションの時間制限です。時間制限がない場合は、-1 を指定します。デフォルトは 29 秒です。
各エフェクトのプロパティ

gwd-particles

プロパティ

名前 説明
acceleration-x:number 水平加速度です。1 フレームあたりの水平速度の変化率を指定します。これは、パーティクルの現在の水平速度に加算されます。
acceleration-y:number 垂直加速度です。1 フレームあたりの垂直速度の変化率を指定します。これは、パーティクルの現在の垂直速度に加算されます。
angle-max:number パーティクルの初期移動方向の最大角度(-360~360)です。
angle-min:number パーティクルの初期移動方向の最小角度(-360~360)です。
autoplay:boolean 親のパーティクルのエフェクト コンポーネントが再生を開始したときに、アニメーションを自動的に再生するかどうかを指定します。
color1:color 1 つ目の色です。
color2:color 2 つ目の色です。
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 パーティクルを color1 から color2 までの間のランダムな色で生成させるかどうかを指定します。false の場合、すべてのパーティクルは color1 で初期化されます。
shape:string パーティクルの形状です。
  • square
  • circle
  • line
  • teardrop
  • image
size-max:number パーティクルの最大サイズ(ピクセル単位)です。
size-min:number パーティクルの最小サイズ(ピクセル単位)です。
size-rate:number 1 フレームあたりのサイズの変化率です。これは、パーティクルの現在のサイズに加算されます。
skip-forward:number アニメーションの開始点です。生成されたパーティクル全体に対する割合で指定します。
speed-max:number パーティクルの最高速度(1 フレームあたりのピクセル数)です。
speed-min:number パーティクルの最低速度(1 フレームあたりのピクセル数)です。
sprite-image-src:file パーティクルの形状に使用される画像のソースです。
turbulence-frequency:number タービュランスの頻度です。大きな値を指定するほど、動きが不規則になります。正の数のみ指定できます。
turbulence-rate:number 時間に対する強度の変化率です。
turbulence-strength:number パーティクルに作用するタービュランスの強度です。正の数のみ指定できます。
turbulence-trail:number レンダリングするパーティクルの前および現在の状態の数です。

イベント

名前 説明
timelimitreached アニメーションの再生が指定された制限時間に達したときに送信されます。

メソッド

名前 説明
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:number 星評価の最低値です。

イベント

名前 説明
complete 星評価アイコンが作成されたときに送信されます。
validationerror 星評価の値が最小値を下回ると送信されます。
ストリート ビュー

gwd-streetview

Google ストリート ビュー コンポーネントです。

プロパティ

名前 説明
key:string Google Maps Platform API キーです。アプリケーションに固有のキーを取得する方法については、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 フレーム戻します。

スワイプ ギャラリーの各フレームで字幕を表示します。

このサンプルコードを使用すると、スワイプ ギャラリー内の各画像向けの字幕を作成できます。ここでは、ステージ上のスワイプ ギャラリー コンポーネントの ID が「gwd-swipegallery_1」(デフォルト ID)で、コンポーネントに画像を追加済みだとします。

また、字幕の場合は div 要素を作成し、「caption-div」という ID を指定してから下記のようなイベントを作成します。

  • ターゲット - 「gwd-swipegallery_1」という ID のスワイプ ギャラリーを選択します。
  • イベント - [スワイプ ギャラリー] > [フレームの表示] を選択します。
  • アクション - [カスタム] > [カスタム アクションを追加] を選択します。

[カスタムコード] ダイアログで関数に名前を付けます。この場合、showcaption などの名前を使用できます。次に、以下のコードを使用します。

var gallery = document.getElementById('gwd-swipegallery_1');
var div = document.getElementById('caption-div');
var text = {
  1: "The text for frame 1",
  2: "The text for frame 2",
  3: "The text for frame 3"
};
div.textContent = text[gallery.currentIndex];
タップ領域

gwd-taparea

クリック イベントまたはタップイベントの抽象化。

プロパティ

名前 説明
exit-override-url:string タップ領域をタップしたときの exit URL です。

イベント

名前 説明
action ユーザーがボタンをタップ(モバイルの場合)する、またはクリック(パソコンの場合)すると送信されます。
タップして通話 / テキスト送信

gwd-taptocall

クリックまたはタップされたときに、設定された電話番号に発信または SMS を送信するコンポーネントです。

プロパティ

名前 説明
number:string 発信またはメッセージを送信する電話番号です。
action:string SMS メッセージを送信するか、通話を開始するかを選択します。

イベント

名前 説明
action ユーザーがボタンをタップ(モバイルの場合)する、またはクリック(パソコンの場合)すると送信されます。
taptocall 通話や SMS が開始されると送信されます。

メソッド

名前 説明
dial() 構成された電話番号に発信または SMS を送信します。
トランジション ギャラリー

gwd-transitiongallery

一連の画像の間にアニメーション エフェクトを付けながら、それらの画像を順番に表示するコンポーネントです。トランジション タイプごとのプロパティについては、以下をご覧ください。

トランジション タイプごとのプロパティ

トランジション タイプ: ブラインド

gwd-blinds

トランジション ギャラリーのブラインド エフェクト タイプです。新しい画像がブラインドの背後から現れます。

プロパティ

名前 説明
direction:string エフェクトの方向です。デフォルトは左から右です。
  • lefttoright - 左から右。
  • righttoleft - 右から左。
  • toptobottom - 上から下。
  • bottomtotop - 下から上。
blinds:number ブラインドの数(1~20)です。デフォルトは 5 です。
transparentbackground:boolean 新しい画像のブラインドをレンダリングする前に、透明の背景を表示するかどうかを指定します。false の場合、ブラインドが元の画像を覆い隠します。

 

トランジション タイプ: ドアの開閉

gwd-door-wipe

トランジション ギャラリーのワイプ エフェクトの一種です。開閉している両開きのドアの背後から新しい画像を表示します。

プロパティ

名前 説明
orientation:string アニメーションの向きです。
  • horizontal - 水平。
  • vertical - 垂直。
direction:string エフェクトの方向です。
  • opening - 開く。
  • closing - 閉じる。

 

トランジション タイプ: アイリスワイプ

gwd-iris-wipe

トランジション ギャラリーのワイプ エフェクトの一種です。大きくなる円の中に新しい画像を表示します。

プロパティ

名前 説明
originpercentx:number 大きくなる円の原点の X 軸です。フレームの幅に対する割合(0~100)で指定します。デフォルトは 50 です。
originpercenty:number 大きくなる円の原点の Y 軸です。フレームの高さに対する割合(0~100)で指定します。デフォルトは 50 です。

 

トランジション タイプ: プッシュ

gwd-push

トランジション ギャラリーのプッシュ エフェクト タイプです。元の画像が押し出されて新しい画像が挿入されます。

プロパティ

名前 説明
direction:string エフェクトの方向です。デフォルトは左から右です。
  • lefttoright - 左から右。
  • righttoleft - 右から左。
  • toptobottom - 上から下。
  • bottomtotop - 下から上。

 

トランジション タイプ: 放射状ワイプ

gwd-radial-wipe

トランジション ギャラリーのワイプ エフェクトの一種です。時計の針のように、指定した点を中心にして回転する半径の背後から新しい画像が現れます。

プロパティ

名前 説明
direction:string エフェクトの方向です。デフォルトは時計回りです。
  • clockwise - 時計回り。
  • counterclockwise - 反時計回り。
originpercentx:number 回転する半径の原点の X 軸です。フレームの幅に対する割合(0~100)で指定します。デフォルトは 50 です。
originpercenty:number 回転する半径の原点の Y 軸です。フレームの高さに対する割合(0~100)で指定します。デフォルトは 50 です。

 

トランジション タイプ: 回転

gwd-rotate

トランジション ギャラリーの回転エフェクトの一種です。元の画像をズームインさせながら回転させ、回転が終わるまで新しい画像をズームアウトさせます。

プロパティ

名前 説明
direction:string エフェクトの方向です。デフォルトは時計回りです。
  • clockwise - 時計回り。
  • counterclockwise - 反時計回り。

 

トランジション タイプ: スライス

gwd-slice

トランジション ギャラリーのスライス エフェクト タイプです。新しい画像をスライスまたはバーとして、ビューに順番に表示します。

プロパティ

名前 説明
direction:string エフェクトの方向です。デフォルトは左から右です。
  • lefttoright - 左から右。
  • righttoleft - 右から左。
  • toptobottom - 上から下。
  • bottomtotop - 下から上。
slices:number スライス数(1~20)です。デフォルトは 5 です。
transparentbackground:boolean 新しい画像のスライスの前に、透明の背景を表示するかどうかを指定します。false の場合、スライスは元の画像を覆い隠します。

 

トランジション タイプ: 分割ブッシュ

gwd-split-push

トランジション ギャラリーのプッシュ エフェクトの一種です。元の画像が垂直方向または水平方向に 2 つに分割されます。新しい画像の対応する部分が、元の画像のそれぞれの部分をビューから反対方向に押し出します。

プロパティ

名前 説明
orientation:string アニメーションの向きです。
  • horizontal - 水平。
  • vertical - 垂直。

 

トランジション タイプ: ストライプ ワイプ

gwd-stripe-wipe

トランジション ギャラリーのワイプ エフェクトの一種です。画面上で交互に色が変わる単色のストライプが同時に大きくなり、元の画像を覆い隠します。次に、ストライプが小さくなって、新しい画像が表示されます。

プロパティ

名前 説明
direction:string エフェクトの方向です。
  • lefttoright - 左から右。
  • righttoleft - 右から左。
  • toptobottom - 上から下。
  • bottomtotop - 下から上。
  • bottomlefttotopright - 左下から右上。
  • toplefttobottomright - 左上から右下。
  • bottomrighttotopleft - 右下から左上。
  • toprighttobottomleft - 右上から左下。
stripes:number 各色のストライプ数(1~10)です。デフォルトは 2 です。
color1:string 交互になっている 2 つのストライプ色の 1 つ目(16 進数のカラーコード)です。デフォルトは #FFFFFF です。
color2:string 交互になっている 2 つのストライプ色の 2 つ目(16 進数のカラーコード)です。デフォルトは #FFA500 です。

 

トランジション タイプ: ベネチアン ブラインド

gwd-venetian-blinds

トランジション ギャラリーのブラインド エフェクトの一種です。新しい画像がベネチアン ブラインドの背後から現れます。

プロパティ

名前 説明
orientation:string アニメーションの向きです。デフォルトは垂直です。
  • vertical - 垂直。
  • horizontal - 水平。
blinds:number ブラインドの数(1~20)です。デフォルトは 5 です。
staggered:boolean スラットが 1 つずつ遷移するかどうかを指定します。false の場合、すべてのスラットが同時に遷移します。

 

トランジション タイプ: ワイプ

gwd-wipe

トランジション ギャラリーのワイプ エフェクト タイプです。片方の端から反対側の端までラインがワイプしていき、その背後で元の画像が少しずつ新しい画像に変わります。

プロパティ

名前 説明
direction:string エフェクトの方向です。デフォルトは垂直です。
  • lefttoright - 左から右。
  • righttoleft - 右から左。
  • toptobottom - 上から下。
  • bottomtotop - 下から上。
angle:number ワイプラインの角度(-89~89 度)です。デフォルトは 0 です。

 

トランジション タイプ: ジグザグ

gwd-zigzag

トランジション ギャラリーのジグザグ エフェクト タイプです。新しい画像をスネーク グリッド パターンで表示します。新しい画像のタイルが、縦横に方向を変えながら次々に表示されます。

プロパティ

名前 説明
orientation:string エフェクトの向きです。
  • horizontal - 水平。
  • vertical - 垂直。
rows:number ジグザグ エフェクトに使用するタイルの行数(1~20)です。デフォルトは 5 です。
columns:number ジグザグ エフェクトに使用するタイルの列数(1~20)です。デフォルトは 5 です。

 

イベント

名前 説明
autoplayended 理由を問わず、自動再生が終了すると送信されます。指定したループカウントに達して自然に終了すると、event.detail.completedtrue になり、それ以外の場合は false になります。
frameactivated 新しいフレームが最初に有効化されると、まだ表示されていなくても送信されます。
frameshown 新しいフレームが表示されると送信されます。
frametap ユーザーがフレームをタップすると送信されます。
rotateonceended 理由を問わず、回転が終了すると送信されます。自然に終了すると event.detail.completedtrue になり、それ以外の場合は false になります。
reachleftend ギャラリーが左端に達すると送信されます。
reachrightend ギャラリーが右端に達すると送信されます。

メソッド

名前 説明
goToFrame(frame:number, with_animation:boolean) 指定されたフレームに移動します。
rotateOnce(startFromCurrentFrame:boolean) ギャラリーの各フレームを表示します。startFromCurrentFramefalse になっているか、指定されていない場合には開始フレームから、それ以外の場合には現在のフレームから開始します。回転は、開始フレームに到達する前に停止します。
startAutoplay(startFromCurrentFrame:boolean) startFromCurrentFramefalse になっているか、指定されていない場合には開始フレームから、それ以外の場合には現在のフレームからギャラリーの自動再生を開始します。自動再生は、ループカウントに達すると停止します。
stop() 進行中のアニメーションをキャンセルします。
goForwards() ギャラリーを 1 フレーム進めます。
goBackwards() ギャラリーを 1 フレーム戻します。
動画

gwd-video

HTMLVideoElement をラップするコンポーネントです。

プロパティ

名前 説明
autoplay:boolean 読み込み時に動画を自動再生するかどうかを指定します。
loop:boolean 再生完了時に動画を繰り返し再生するかどうかを指定します。
muted:boolean 動画をミュート状態で開始するかどうかを指定します。
controls:boolean デフォルトのネイティブ プレーヤー コントロールを有効にするかどうかを指定します。
sources:file 異なる形式の動画をカンマで区切った文字列です。
poster:string ユーザーが再生またはシークするまで表示するポスター フレームを指定する URL です。

イベント

名前 説明
play 一時停止後にメディアの再生が開始すると(直前の一時停止イベント後に再生が再開すると)送信されます。
pause 再生が一時停止すると送信されます。
playing メディアの再生が開始すると(初めての開始、一時停止後の再開、終了後の最初から開始のいずれでも)送信されます。
ended 再生が完了すると送信されます。
volumechange 音量が変更されると(音量の設定時、ミュート属性の変更時のいずれでも)送信されます。
seeked シーク動作の完了後に送信されます。
waiting リクエストした操作(再生など)が、別の操作(シークなど)の完了待ちで遅れるときに送信されます。

メソッド

名前 説明
mute() 動画のミュートとミュート解除を切り替えます。
pause() 動画を一時停止します。
play() 動画を再生します。
replay() 動画を最初から再生します。
seek(time:number) 動画内の指定された時間にジャンプします。
setVolume(volume:number) 動画の音量を設定します。
setSources(sources:string) 動画のソースを設定します。

動画を再生するたびにミュートを解除します。

動画を再生するたびにミュートを解除するには、次のようなイベントを作成します。

  • ターゲット - 制御する動画を選択します。動画が 1 つの場合、デフォルト ID は「gwd-video_1」となります。
  • イベント - [動画] > [一時停止後の再生] を選択します。
  • アクション - [カスタム] > [カスタム アクションを追加] を選択します。

[カスタムコード] ダイアログで関数に名前を付けます。今回の例の場合は、「mutebtn」といった名前を使用することをおすすめします。次に、以下のコードを使用します。

if (document.getElementById('gwd-video_1').muted) {
  document.getElementById('gwd-video_1').mute();
}
YouTube

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 動画をミュート状態で開始するかどうかを指定します。
annotations:boolean 動画のアノテーションを表示するかどうかを指定します。
related: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, opt_cueOnly:boolean) 指定された ID に YouTube 動画のソースを変更します。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。