JS: to show a CAUTION to first time only
Sorry, this entry is only available in Japanese. For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.
いきなりですが、二次創作や、人を選ぶ性癖を扱っているサイトでは、「事前情報なしで来た人に警告するために入口ページをあえて表示」したりします。
18禁コンテンツで、最初に18歳以上かどうか聞かれるアレ、と言った方がイメージしやすい方も多いかもしれません。
何のためにあるかというと、
「こっちは警告したからね！見るのを選んだのはあなただからね！文句言うなよ！」
とか
「１８歳以上と申告した人だけが見られるサイトです。もし１８歳未満が見たとしてもそれは嘘の申告をした人に非があります。」
と言い訳するためのものです。
とはいえ、ああいう注意書きは、警告内容をわかりきっている“同志”には、ただの邪魔なページなんですよね…
注意書きをすっ飛ばされてリンクされると、入口ページ以外にはリンクを貼らないようにお願いしているサイトも多いです。
ただ、直接下層のページにリンクできないのは面倒くさい！ めんどくさい…
注意書きを置きたいけどわかってる人には直接きてほしい、そんな方に。
最初は注意書きを表示させるけれど、２回目以降の訪問では３０日間（変更可）注意書きを表示させないようにするスクリプトです。
デモ
※注意書き画面を最前面に表示させるのはCSSで実装しています。
※CSSでこの注意書きを被せているだけなので、OKを押さなくても、ソースコードを見れば中身は見えます。隠し事目的ではなく、あくまで注意喚起用としてください。
※ローカル環境ではCookieが保存されません。使用の際はサーバーにアップしてお確かめください。
別ウィンドウで開くデモページも用意しました。
注意書きページと本文が同じURLで実装されているのがわかるかと思います。
使い方
HTML・JS・CSSのセットをダウンロードできます。ダウンロードしたファイルをカスタマイズして使ってください。
※readme-caution.jsファイルの編集の必要はありません。
HTMLファイルの編集
<head>タグ内に下記を記入する必要があります。
<link rel="stylesheet" href="./style.css">
<script src="readme-caution.js"></script>
<script>
var readmeCookieName = 'demo1';
var readmeCookiePath = '';
var readmeAreaId = 'caution';
</script>
var readmeCookieName = ‘demo1‘;
デフォルトは’demo1’になっています。
注意書きを読んだかどうか判定するcookieの名前を指定します。
複数ページに同じcookieを使いたい場合はこの名前を統一してください。
この名称を使い分けることで、同じサーバーにある別サイトも管理できます。
var readmeCookiePath = ‘http://example.com/AAA/BBB/‘;
デフォルトは'(空欄)’になっています。
注意書きを共有するページがディレクトリをまたがる場合に設定してください。
サイトのパスをhttp://から始まり、/で終わる形で入れてください。
＊ページを１つしか使わない場合は空欄のままにしてください。
＊注意書きを共有するページが同じ階層にある場合も設定不要です。
var readmeAreaId = ‘caution‘;
デフォルトは’caution’になっています。
注意書きとして表示したいエリアのid名を指定します。
注意書きとして表示したいエリアにはid=”caution”を振ります。（上記のhead内の設定で名称変更可）
<div id="caution"> </div>
閲覧者がJavascriptを切っている、Javascript非対応ブラウザの場合
注意書きページから遷移できません。
閲覧者がCookieをオフにしている場合
OKを押せば注意書きが非表示になりますが、リロードすると再度注意書きが表示されます。
（これを回避し、状態を記憶するためにCookieを使用していますので、オフにされてしまうとどうにもなりません）
つまり注意書きを使うページひとつひとつに注意書きタグコピペしないといけないの？
そうなります。
PHPやJSで外部化してください。
初めからJSで注意書きを外部化したものを配布してもいいのですが、注意書きエリアの編集の難易度が上がってしまうので…
（JS編集できる人はご自分で外部化できますしね！）
