-
こんにちは
-
Google Web Designer担当エンジニアの
マチェクです
-
今日紹介するのは Google Web Designerの
イベントシステムの使い方です
-
この動画では
-
ドキュメントにイベントハンドラを
追加する方法について説明します
-
デモ用に簡単なドキュメントを用意しました
-
カルーセルギャラリーと
青色のdivが含まれています
-
ドキュメントにイベントハンドラを追加するには
-
右側の[イベント]パネルを使用します
-
ここにはインストール済みのイベントハンドラが
すべて表示されます
-
今はまだハンドラがないので
何も表示されませんが
-
イベントハンドラが複数ある場合は
並べ替えやフィルタリングができます
-
イベントハンドラの追加は
[イベント]ダイアログで行います
-
ダイアログを表示する方法はいくつかあります
-
選択するターゲットがわかっている場合は
-
要素を右クリックして
[イベントを追加]を選択します
-
これで 選択した要素が
ターゲットとして設定されます
-
この要素の選択を解除して
別の方法でダイアログを表示してみましょう
-
隅にある小さいプラスアイコンをクリックすると
-
[イベント]ダイアログが表示されます
何も設定されていない状態です
-
そこでまず ターゲットを選択します
-
ターゲットとは イベントハンドラを
トリガーする要素です
-
ここでは カルーセルを選択してみます
-
次は イベントハンドラをトリガーする
イベントの選択です
-
[マウス]と[タップ]は
ほとんどの要素で使用できます
-
これはカルーセルなので
カルーセル専用のイベントも選択できます
-
その中のクリックイベントを選択します
-
次はアクションの選択です
-
これは イベントに応じて実行する
アクションです
-
ほとんどの要素で CSSスタイルの設定や
-
カスタムアクションの追加ができます
これは後ほど説明します
-
ドキュメント内に他のカスタム要素があり
-
イベントを追加していれば
そのイベントもここで選択できます
-
このデモでは
[スタイルを設定]を選択しましょう
-
次はレシーバーを選択します
-
レシーバーは 変化させるCSS要素です
-
ここでは青色のdivを選択し
-
CSSプロパティをいくつか割り当てます
-
divの背景色を赤に変更しましょう
-
イージングオプションを選択し
長さを指定したら
-
[OK]をクリックして保存します
-
これで ドキュメントに
イベントハンドラを追加できました
-
ではドキュメントをプレビューして
今の設定を確認しましょう
-
カルーセルをクリックすると
-
divの色が青から赤にゆっくり変わります
-
とても簡単でしたね
-
設定を間違えた場合は
-
イベントハンドラを編集することができます
-
最初から作り直す必要はありません
-
たった今作成したイベントハンドラも
編集できます
-
イベントハンドラをダブルクリックすると
-
[イベント]ダイアログが編集モードで開きます
-
[アクション]画面に戻って
[カスタムアクションを追加]を選択します
-
ここでは有効なJavaScriptコードを
入力できます
-
コードに関数名を付けておきましょう
-
そしてこのデモ用に
アラートを作成します
-
これでいいでしょう
-
[OK]をクリックして保存します
-
このように
イベントハンドラが更新されています
-
myFunctionという関数を呼び出す
ことが示されています
-
プレビューで確認しましょう
-
カルーセルをクリックすると
-
「I love Google Web Designer!」という
アラートの文章が表示されるようになりました
-
以上で説明は終わりです
-
Google Web Designerのイベントや
その他の内容について質問がある場合は
-
動画のコメント欄をご利用ください
