HTML5 フルスクリーン エキスパンド クリエイティブは、初期状態の折りたたみサイズと動的なフルスクリーン サイズの 2 つのサイズを持つエキスパンド広告です。HTML5 フルスクリーン エキスパンド クリエイティブは、デスクトップ、モバイル、アプリ内で使用できます。
HTML5 フルスクリーン エキスパンド クリエイティブの小さいほうは折りたたみ時のサイズで、デスクトップやモバイル向けウェブサイト、またはモバイルアプリ内の標準的な広告のプレースメント内に収まります。大きいほうはエキスパンド時のサイズで、折りたたみサイズの枠外に拡大して表示されます。必要に応じてフルスクリーンよりも小さい指定サイズでパソコンのブラウザ ウィンドウまたはモバイル端末の画面に表示することも可能で、常に中心に配置されます。ユーザーがフルスクリーン ボタンをクリックすると、広告がエキスパンドします。
この記事では、スタジオの HTML5 SDK を使用して HTML フルスクリーン エキスパンド クリエイティブを作成する方法について説明します。
イネーブラーを追加して初期化を待つ
イネーブラーは、スタジオの中核的なコード ライブラリで、すべてのリッチメディア クリエイティブに必須です。次のスクリプトタグを HTML ファイルの <head> タグに追加します。
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
イネーブラーの初期化を待つ
イネーブラーの初期化が完了するまで、広告内のいずれの要素も自動的に実行されることはありません。このため、すべてが正しく読み込まれてイネーブラーのメソッドにアクセスできるようになってからユーザーは広告を操作することになります。
JavaScript で、イネーブラーの isInitialized メソッドを使用してイネーブラーが初期化されたことを確認します。このメソッドは、true または false を返します。true の場合、関数を呼び出して開始します。この例では、enablerInitHandler() を呼び出します。false の場合、フォールバックを呼び出して、イネーブラーの INIT イベントをリッスンします。
イネーブラーの初期化が完了したら、アニメーションの開始、画像アセットの読み込み、またはトラッキング メソッドの呼び出しを行います。
// true の場合、関数を起動。false の場合、INIT をリッスン。
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
// 広告アニメーションの開始、画像の読み込み、イネーブラー メソッドの呼び出し、またはボライトロードを
// 行うコードを追加
}
サイト運営者のページが読み込まれるまで、クリエイティブ アセットの読み込みを遅らせる方法をポライトロードと呼びます。ポライトロードを設定するには、イネーブラーの初期化を待ってから、isPageLoaded メソッドを呼び出します。上記の enablerInitHandler 関数を次のコードで置き換えます。
function enablerInitHandler() {
if (Enabler.isPageLoaded()) {
politeLoadHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.PAGE_LOADED,
politeLoadHandler);
}
}
function politeLoadHandler() {
// 広告アニメーションを開始するまたは画像を読み込むコードを追加
}
クリエイティブに自動再生アニメーションを含める場合、アニメーションを再生する前に、広告が表示される位置までユーザーがスクロールするのを待つことが考えられます。表示されたかどうかを確認するには、イネーブラーの isVisible メソッドを呼び出します。
politeLoadHandler 関数を次のコードで置き換えます。
function politeLoadHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// 広告アニメーションを開始するまたは画像を読み込むコードを追加
}
enablerInitHandler 関数を次のコードで置き換えます。
function enablerInitHandler() {
if (Enabler.isVisible()) {
adVisibleHandler();
} else {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisibleHandler);
}
}
function adVisibleHandler() {
// 広告アニメーションを開始するまたは画像を読み込むコードを追加
}
フルスクリーンへのエキスパンドと折りたたみ
フルスクリーン エキスパンド クリエイティブは、どのような画面に表示される場合でも画面全体を占めるように、全方向にエキスパンドします。エキスパンド プロセスは次のとおりです。各ステップをクリックすると、詳細とサンプルコードを確認できます。
フルスクリーンが使用可能かどうかを判断するには、Enabler.queryFullscreenSupport() を呼び出します。
フルスクリーンがサポートされているかどうかを確認するサンプルコード
// フルスクリーンのサポートを保存する変数を作成
var fullscreenSupported = false;
// 結果を報告するリスナーを追加
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_SUPPORT,
function(event) {
fullscreenSupported = event.supported;
});
Enabler.queryFullscreenSupport();
// フルスクリーン サポートを確認できたら、非表示のフルスクリーン ボタンを表示
if (fullscreenSupported) {
// 下記の行は 'fullscreenButton' という名前のボタンがあることを想定
fullscreenButton.style.display = 'block';
}
クリエイティブは可能な最大サイズに自動的にエキスパンドします。必要であれば、画面のサイズを確認して、最大サイズの代わりにカスタムサイズにエキスパンドできます。画面のサイズを取得するには、Enabler.queryFullscreenDimensions() を呼び出します。
エキスパンドする前に画面のサイズを確認するサンプルコード
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_DIMENSIONS,
function(event) {
Enabler.requestFullscreenExpand();
});
fullscreenButton.addEventListener('click',
function(event) {
Enabler.queryFullscreenDimenions();
}, false);
画面の最大サイズにエキスパンドするには、Enabler.requestFullscreenExpand() を呼び出します。次に、FULLSCREEN_EXPAND_START イベントをリッスンします。エキスパンドのアニメーションを表示する場合は、このイベント ハンドラでカスタム アニメーション メソッドを呼び出します。
画面全体にエキスパンドするサンプルコード
Enabler.requestFullscreenExpand();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// （省略可）エキスパンドのカスタム アニメーションを開始するコードを追加
// アニメーションを表示しない場合は、代わりに Enabler.finishFullscreenExpand(); を呼び出す
Enabler.finishFullscreenExpand();
});
または、カスタムサイズ（例: 1,280x1,024）にエキスパンドするには、代わりに希望する幅と高さをメソッドに渡します。
カスタムサイズにエキスパンドするサンプルコード
Enabler.requestFullscreenExpand(1280, 1024);
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_START,
function(event) {
// （省略可）エキスパンドのカスタム アニメーションを開始するコードを追加
// アニメーションを表示しない場合は、代わりに Enabler.finishFullscreenExpand(); を呼び出す
Enabler.finishFullscreenExpand();
});
エキスパンドの完了時に、Enabler.finishFullscreenExpand() を呼び出します。次に、FULLSCREEN_EXPAND_FINISH イベントをリッスンします。
エキスパンドのアニメーションを使用している場合、アニメーションの完了時にこのメソッドを呼び出します。アニメーションを表示していない場合は、FULLSCREEN_EXPAND_START イベントのハンドラでこのメソッドを呼び出します。上記の例をご覧ください。
エキスパンドを終了するサンプルコード
Enabler.finishFullscreenExpand();
// エキスパンド状態をトラッキングする変数を作成
var isFullscreen = false;
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_EXPAND_FINISH,
function(event) {
isFullscreen = true;
});
折りたたむには、まずクリエイティブのフルスクリーン状態で閉じるボタンが必要です。折りたたみを開始するには、Enabler.requestFullscreenCollapse() を呼び出します。次に、FULLSCREEN_COLLAPSE_START イベントをリッスンします。折りたたみのアニメーションを表示する場合は、このイベント ハンドラでカスタム アニメーション メソッドを呼び出します。
折りたたみを開始するサンプルコード
Enabler.requestFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_START,
function(event) {
// （省略可）折りたたみのカスタム アニメーションを開始するコードを追加
// アニメーションを表示しない場合は、代わりに Enabler.finishFullscreenCollapse(); を呼び出す
Enabler.finishFullscreenCollapse();
});
折りたたみの完了時に、Enabler.finishFullscreenCollapse() を呼び出します。次に、FULLSCREEN_COLLAPSE_FINISH イベントをリッスンします。
折りたたみのアニメーションを使用している場合、アニメーションの完了時にこのメソッドを呼び出します。アニメーションを表示していない場合は、FULLSCREEN_COLLAPSE_START イベントのハンドラでこのメソッドを呼び出します。上記の例をご覧ください。
折りたたみを終了するサンプルコード
Enabler.finishFullscreenCollapse();
Enabler.addEventListener(studio.events.StudioEvent.FULLSCREEN_COLLAPSE_FINISH,
function(event) {
// 「エキスパンドを完了する」手順で作成した変数に設定
isFullscreen = false;
});