カスタムアクションを作成する

JavaScript を使用して、独自のカスタムアクションを作成できます。定義したカスタムアクションはドキュメント内で再利用できます。

カスタムアクションを作成するには:

[イベント] パネルの下部にある「イベントを追加」ボタンをクリックして、新しいイベントを追加します。
ターゲットとイベントを選択します。
そのアクションについて、[カスタム] > [カスタムアクションを追加] を選択します。Google Web Designer で、カスタムコードを入力するように求められます。
コードボックスの上にある項目に（gwd. プレフィックスに続けて）アクションの名前を入力します。
- それぞれのカスタムアクションには、ドキュメント内で固有の名前を付ける必要があります。
- 名前は内容がわかりやすいものにします。
- スペースが含まれているなど、無効な名前を入力すると、項目に赤色の下線が表示されます。
コードボックスに関数の定義を入力します。各コンポーネントの API では、各コンポーネントで利用できるプロパティ、イベント、メソッドの一覧を確認できます。
[OK] をクリックします。

イベントがカスタムアクションを使用するように構成されます。このアクションは [カスタム] に一覧表示されている他のイベントでも使用できます。

ダイアログボックスのサイズを変更するには、右下隅をドラッグします。

例

カスタム操作は、Google Web Designer の機能を拡張するコンポーネントと併用することができます。下記の例ではいずれも、操作を適用するドキュメント内の要素を document.getElementById メソッドを使用して指定します。

次のイベントを追加します。

ターゲット	`gwd-video_1`（または動画の ID）
イベント	[動画] > [一時停止後の再生]
アクション	[カスタム] > [カスタムアクションを追加]
カスタムコード	`if (document.getElementById('gwd-video_1').muted) { document.getElementById('gwd-video_1').mute(); }`

このコードを使用するには、次のようにします。

次のイベントを追加します。

ターゲット	`gwd-swipegallery_1`（またはスワイプギャラリーの ID）
イベント	[スワイプギャラリー] > [フレームの表示]
アクション	[カスタム] > [カスタムアクションを追加]
カスタムコード	`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];`

このコードを使用するには、次のようにします。

次のイベントを追加します。

ターゲット	`page1`（または開始ページの ID）
イベント	[ページ] > [ページの表示の準備完了]
アクション	[カスタム] > [カスタムアクションを追加]
カスタムコード	`setTimeout(nextPage, 2000); function nextPage() { document.getElementById('pagedeck').goToNextPage(); }`

このコードを使用するには、次のようにします。

改善できる点がありましたらお聞かせください。