本記事では、Webページで一定の間隔をおいてモーダルウィンドウを開く方法を説明します。ニュースレターのサインアップやFacebook上で「いいね！」を取得するときなど、特定のCTA（Call To Action）を強調して表示する場合に役立ちます。一部のサイトは広告を表示するときにもこの手法を使っています。
ただし、こうしたウィンドウの開き方が本当に必要かどうか少し自問してから作業を続けてください。閲覧中になにもクリックしていないのにウィンドウが開くと、たいていの訪問者は即座に閉じ、邪魔されたことにうんざりします。サイトのイメージを損なう可能性もありますが、訪問者の意識をコンテンツに向けさせるための改善策はあります。
基本実装
続きを読みますか？ ではさっそく取りかかりましょう。急ぐ場合は最後の「デモ」を参照してください。
記事ではモーダル表示にColorboxプラグインを使います。ColorboxはjQueryに依存しているので、jQueryを追加する必要があります。テンプレートは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Delayed modal demo</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.rawgit.com/jackmoore/colorbox/master/jquery.colorbox-min.js"></script>
<script>
<!-- Code here -->
</script>
</body>
</html>
スクリプトを取り込むためにさまざまなCDNを使用していますが、パッケージマネージャーを使ってnpmやBowerなどをインストールできることも覚えておいてください。
モーダルを表示する
通常はHTML要素にColorboxを割り当て、key/valueの組み合わせで任意に設定します。
$(selector).colorbox({
key:value,
key:value
});
しかし、Colorboxを、どこにも割り当てずに直接呼び出したいときの構文は少し異なります。
$.colorbox({
key:value,
key:value
});
Colorboxにはモーダルをカスタマイズできる、多くの画像表示関連オプションあります。次の例では寸法を指定し、CSSでスタイリングができるようにクラス名をつけ、HTMLの文字列へ渡して表示します。Colorboxのページにはオプションがすべて記載されたリストがあります。
$.colorbox({
html:"<h2>Call For a Free Quote</h2>",
className: "cta",
width: 350,
height: 150
});
そしてJavaScriptのsetTimeout関数を使うだけで、必要な時間が経過したあとに上のコードを呼び出せます。setTimeout()はミリ秒単位で指定した時間のあとに、関数の呼び出しやコードスニペットの実行をするJavaScript関数です。setTimeout()全体の速度を上げたい場合は、『jQuery setTimeout() Function Examples』を参考にしてください。
setTimeout(function(){
$.colorbox({
html:"<h2>Call For a Free Quote</h2>",
className: "cta",
width: 350,
height: 150
});
}, 10000);
以上で、訪問者が10秒間サイトを閲覧するとウィンドウがポップアップします。
アクセシビリティの懸念
モーダルウィンドウには、アクセシビリティの問題があります。ユーザーがキーボードを使っている場合の反応、マークアップがセマンティックかどうか、モーダルウィンドウを拒否するのは簡単かなどです。『Making Modal Windows Better For Everyone』では、こうしたテーマについて徹底的な議論がされています。
Colorboxには最初からたくさんの機能が付属していますが、まだ改善が必要なものもあります。
フォーカスのシフト
モーダルが開くと、Colorboxはウィンドウにフォーカスをシフトします。これは良いことですが、モーダルに<input>などインタラクティブな要素がある場合、その要素にフォーカスすることも検討できます。マウス使用者ならクリック操作1回分、キーボード使用者ならキー操作1回分を省略できます。JavaScriptのフォーカスメソッドを使って実行できます。
コンテンツの読み込みを確認するにはColorboxを実行するonCompleteイベントを使用する必要があります。
$.colorbox({
...
onComplete: function(){ $("#myInput").focus(); }
});
ユーザーの元の位置を記憶する
ポップアップが閉じられたら、ユーザーを元のページ位置へ戻すのが礼儀です。実現するためには、インタラクトしたときのユーザーの位置を把握し、モーダルが閉じられたときに把握した位置へフォーカスをリセットします。
var lastFocus;
setTimeout(function(){
lastFocus = document.activeElement;
$.colorbox({
...
onClosed: function(){ lastFocus.focus(); }
});
}, 2000);
X時間ごとに1度、ポップアップを表示する
ユーザーがサイトを訪問するたびにモーダルが開くと、ユーザビリティが良くありません。かわりに、X時間あるいはX日ごとに1度だけ表示することにします。
実現する方法は、モーダルが表示されてから割り当てられた時間で期限切れになるCookieを設定することです。設定によって、ページの読み込み時にCookieを確認し、Cookieに応じて実行します。
そのためにはCookieを処理するための関数セットが必要になります。js-cookieがおすすめです。
Coloboxライブラリーのあとにjs-cookieを読み込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
この時点では、さまざまな関数を独自の関数に移行することにも意味があります。
var lastFocus;
function onPopupOpen(){
$("#myInput").focus();
}
function onPopupClose(){
Cookies.set('colorboxShown', 'yes', { expires: 1 });
lastFocus.focus();
}
function displayPopup(){
$.colorbox({
html:"<h2>Call For a Free Quote</h2>",
className: "cta",
width: 350,
height: 250,
onComplete: onPopupOpen,
onClosed: onPopupClose
});
}
setTimeout(function(){
var popupShown = Cookies.get('colorboxShown');
if(popupShown){
console.log("Cookie found. No action necessary");
} else {
lastFocus = document.activeElement;
displayPopup();
}
}, 2000);
デモ
CodePenで動作するすべてのコードは以上です。埋め込みを実行すると3秒後にポップアップが開きます。説明したとおり、Cookieの設定に従って24時間に1度だけ表示されます。デモを複数回実行できるように「Clear Cookies（Cookieの消去）」ボタンを追加しています。右下のRerunボタンをクリックすると埋め込みを再実行できます。
最後に
この記事では、指定した期間にサイトが閲覧されたときにポップアップを開く方法を説明しました。また、このアプローチをめぐるユーザビリティとアクセシビリティの懸念についても明らかにしました。
（原文：Quick-Tip: Show Modal Popup after Time Delay）
［翻訳：柴田理恵／編集：Livit］
