[JS] 同人サイトによくある注意書きを初回訪問時のみ表示させる

by carl_marie

HTML

<script>
	//注意書きを読んだかどうか判定するcookieの名前を指定します。
	//  この名称を使い分けることで複数ページを管理できます。
	//  逆にこの名前を使い回すことで、下層ページに直接アクセスされた時にも注意書きを出せます。
	//'demo1'の部分に任意の名前を入れてください。
	var readmeCookieName = 'demo1';

	//注意書きを共有するページがディレクトリをまたがる場合に設定してください。
	//	＊ページを１つしか使わない場合は空欄にしてください。
	//	＊注意書きを共有するページが同じ階層にある場合も設定不要。
	//サイトのパスをhttp://から始まり、/で終わる形で入れてください。
	//例）var readmeCookiePath = 'http://example.com/AAA/BBB/';
	var readmeCookiePath = '';
		
	//注意書きエリアのid名
	var readmeAreaId = 'caution';
</script>

</head>
<body>

<!-- 注意書きエリアここから -->
<div id="caution">
    <section>
    <h2>[必ずお読みください]</h2>
        <p>当サイトは「●●●●」の二次創作同人サイトです。原作者様・版元様とは一切関係ありません。</p>
        <p>サイトの内容には○○や●●が含まれます。</p>
        <p>サイト内の文章・イラストの無断転載は禁止です。</p>
        <p>以上をご理解いただけましたら、下のボタンからご入室ください。</p>
    </section>
    
    <!-- OKボタンここから -->
    <input type="button" value=" 私は注意書きを読みました " onClick="readmeCookie()" id="switch">
	<noscript><p>※Javascriptがオフになっているようです。恐れ入りますが、Javascript対応のブラウザで閲覧ください。</p></noscript>
    <!-- /OKボタンここまで -->
</div>
<!-- 注意書きエリアここまで -->


<!-- 初回訪問時は隠れているエリア ここから -->
<div id="content">

ここは初回訪問時は隠れているエリアとなります。
<br><br><br>

</div>
<!-- 初回訪問時は隠れているエリア ここまで -->


<!-- 公開するときは削除してください　ここから -->
    <hr>
    注意書きページを編集したい時などに、cookieを切るスイッチ↓<br>
    <a href onClick="readmeCookie(0)">cookieをオフにする</a>
<!-- 公開するときは削除してください　ここまで -->

CSS

#caution {
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #000;
    color: #fff;
    position: absolute;
    left: 0; top: 0;
}
#caution a {color:#eee;}

JavaScript

//Cookieの有効期限を設定
var cookieToday,cookieTodayGMT;
var cookieExpirationDate = 30;   //cookieの期限変更可（default：30日）
cookieToday = new Date();
cookieToday.setTime(cookieToday.getTime() + cookieExpirationDate * 1000 * 60 * 60 * 24);
cookieTodayGMT = cookieToday.toGMTString();

//HTMLの読み込みが全て終わった後
window.onload = function() {
	//HTMLで指定したcookie名に値"pressedOK"が入っているか判定
	//入っていれば、注意書きエリアを非表示にする
    if(document.cookie.indexOf(readmeCookieName + '=pressedOK',0) != -1)
        {document.getElementById(readmeAreaId).style.display = 'none';}


}

//cookieのON・OFFスイッチをおした時
function readmeCookie(num){
	//書き込むcookieのpath設定
	var result = readmeCookiePath.match("^(.+?):\/\/(.+?)(\/.*)\/(.+?)?$");
    if (result == null) {
            var result = '';
        }
        else if(result[4] == '') {
            var result = result[3];
        }
        //[4]にドットが入るものはファイルとみなす
        else if(result[4].match(/\./)){
            var result = result[3];
        }
        else{
            var result = result[3] + result[4] +'/';
        }
	
	//スイッチ判定
	if (num == 0){
        document.getElementById(readmeAreaId).style.display = 'block';
        document.cookie = readmeCookieName + '=; path=' + result + '; expires=Thu, 01 Jan 1970 00:00:00 GMT';
    }
    else {
        document.getElementById(readmeAreaId).style.display = 'none';
        document.cookie = readmeCookieName + '=pressedOK; path=' + result + '; expires=' + cookieTodayGMT;
        return false;
    }
}