ティザーサイトでカウントダウンを表示したいという要望は何かと多いようでして、筆者も最近受けた仕事でそのような内容がありました。
カウントダウンはJavaScriptで実装するだけでいいじゃん。と簡単に思われるようで、実はティザーサイトでカウントダウンするとなると意外と面倒くさい要素が多いんです。
ー 目次 ー
現在時刻はサーバから取得しないといけない（JavaScriptで取得はできない）
JavaScriptから取得するということは、そのユーザのパソコンで設定されている時刻を取得するということになるので、ユーザによって時刻がズレている可能性があります。公開タイミングを全ユーザ共通にするためには、これと決めたサーバから時刻を取得する必要があります。
カウントダウンはJavaScriptで実装していいのか、という論点
JavaScriptは知識あるユーザなら改変して実行できてしまうため、JavaScriptでカウントダウンを実装すると、強制的に0秒にして公開内容を先に閲覧することができてしまいます。そのため、カウントダウンは改変できないようにJavaScript以外の手段で実装するか、もしくは0秒にされても公開内容が先に閲覧できないように工夫を入れておく必要があります。
事例）映画「キングダム」のティザーサイト
これよく出来てると感心しました。
- 右クリック禁止
- カウントダウンはJavaScriptで実装
- 現在時刻はAjaxでサーバの時刻を取ってくる
- 時間になったらYouTubeを表示（っぽい。執筆時、まだ公開時刻でないので未確認）
- YouTubeは予約公開で、公開時刻になるまで閲覧できない（っぽい）
頭いいなと思ったのは、YouTubeの予約公開を利用しているところですね。これならカウントダウンを偽っても、先に動画を閲覧することはできないですし、YouTubeを使うことで動画の再生環境（プレイヤーの実装や、データ通信の重さなど）を気にする必要がないので、実装効率もいいです。
またカウントダウンのティザーサイト案件が来たら、この仕組み倣ってみようと思いました。