指定日公開

Webサイトを制作していると、指定した日までは公開したくないというものがあることもあります。作成するページの一部分を非表示にしておき、後日自動的に表示するようなJavaScriptを作成してみましたので必要な方はご利用ください。いうまでもありませんが、非表示状態で公開しているということは、HTMLのソースを見た人には非公開部分を知られてしまいます。厳密に公開日を指定されていて、それまでは絶対に公開してはならないというようなものに使ってはいけません。あらかじめその点をご了承ください。

まずはページ作成

通常通りWebサイトを作成してください。後日公開したい部分も公開したときの状態を考えて見た目などを調整しておきましょう。スタイルシートとJavaScriptを利用して指定日公開を実現しているため、あらかじめ公開後の表示状態を確認しておく必要があります。スタイルシートで非表示にしておき、JavaScriptで指定日を過ぎていたら表示するように切り換えるだけですから。Webページの作成が終わったら、非表示部分を指定してください。<div class="secret" id="dayshift">～</div>で非表示にしたい部分を括りましょう。

ページに追加するもの

スタイルシートとJavaScriptをページに埋め込む必要があります。外部ファイルにできる部分もありますが、ここでは該当HTMLに直接埋め込む方法で紹介しましょう。外部ファイルにしたい人はどうすればいいのかわかっているでしょうし、そもそも自力で同等のものを作成していると思いますから。

スタイルシートは、<head>～</head>内に以下のような記述をしておきます。

<style type="text/css">
.secret {display:none}
</style>

これは該当部分を非表示にするためのスタイルシートで、ブラウザが画面に表示しないように指定しているだけです。必要なスタイルシートはこれだけなので、お使いの外部スタイルシートに追加するなどの対応で構いません。

非表示状態でブラウザが処理を行ないますので、このままでは指定日以降に表示することができません。そこでJavaScriptをWebページに埋め込みます。HTMLファイルのできるだけ後ろのほう、できれば</body>直前あたりに以下のコードを記述してください。今回の例では、括るDIV要素のIDをdayshiftにしているので、getElementByIdもdayshiftで取得しています。別のIDにする場合はそれに合わせて変更しましょう。

公開指定日は、shiftDay手続きで行ないます。これに渡すパラメータに、基準日と何日経過してから公開するかを指定してください。以下の例では2007年12月5日から60日後に公開するようにしてあります。設置する際に正しく動作するのか確かめたい場合は、基準日と公開までの日数を変更してテストしてください。

<script type="text/javascript">
function shiftDay(ymd,limit) {
  today=new Date();
  shift=new Date(ymd);
  if (Math.floor((today-shift)/1000/60/60/24)>limit) {
    document.getElementById('dayshift').className='';
  }
}
  shiftDay("2007/12/5",60);
</script>

指定した日を過ぎたら、非表示設定にしておいたクラスネームを空にして表示するようにしているだけの比較的単純なものです。これでもWeb制作をしていて役立つケースがあると思います。必要になったらご自由にお使いくださいませ。