cookieを使ってコンテンツを表示したりしなかったりなど、動的コンテンツの奥行きを自由にすることができますが、書き込む際の文字列を指定したりと結構手間も多くなりがちです。
ですが、jQueryの「jquery.cookie.js」を利用することで、cookieを簡単に扱えることができ、かつシンプルなコードで実装することができます。
今回は、jQueryのコピペでcookieを使って初回アクセス時にモーダルを表示させるスニペットについてご紹介します。
目次
cookieは、何かしらの情報を保存しておくための仕組みとバックリとした理解をしていますが、wikipediaで調べると以下の通りです。
HTTP cookie（エイチティーティーピークッキー、単にクッキーとも表記される）は、マジッククッキーの一種であり、RFC 6265などで定義されたHTTPにおけるウェブサーバとウェブブラウザ間で状態を管理する通信プロトコル、またそこで用いられるウェブブラウザに保存された情報のことを指す。ユーザ識別やセッション管理を実現する目的などに利用される。
引用：Wikipedia より
このように、WEBサイトにアクセスしたユーザーに関する情報を保存する仕組みを意味しますが、発行元の違いで実際に訪問しているWEBサイトのドメインから発行され1st party cookie と 訪問しているWEBサイトのドメイン以外から発行される3rd party cookie の2種類が存在しています。
最近、外国のWEBサイトでcookieの利用目的について説明し、クッキーの設定について閲覧者の同意を求めるcookieバナーをよく見かけますが、これはクッキー規制が強化されたことでその規制の遵守する対応が本格化しています。
日本では、明確に規制の対象とはなっていませんがGoogleが「Chrome」で3rd party Cookieを2年かけて段階的に廃止する方針を明らかにするなど、その行先が気になるところです。
モーダルウィンドウのサンプル
とまぁ、cookieについての概要が長くなってしまいましたが、以下のボタンで表示されるものが、今回実装するモーダルウィンドウのサンプルです。
このモーダルウィンドウに、jquery.cookie.js を使ってcookieをトリガーにして、色々な表示条件を設定することができます。
ちなみに、このページに初回アクセスした際表示されたモーダルも同じサンプルです。
モーダルのサンプル
自然を寫すのに、どういふ文體が宜いかといふ事は私には何とも言へない。今日では一番言文一致が行はれて居るけれども、句の終りに「である」「のだ」とかいふ言葉があるので言文一致で通つて居るけれども、「である」「のだ」を引き拔いたら立派な雅文になるのが澤山ある。だから言文一致は便利ではあらうが、何も別にこれでなければ自然は寫せぬといふ文體はあるまい。けれども漢文くづしの文體が可いか、言文一致の細かいところへ手の屆く文體が可いかといふ事は、韻致とか、精細とかいふ點に於て一寸考へものだらうとは思ふ。 韻致とか精細とか言ふ事は取りやうにもよるが、精細に描寫が出來て居て、しかも餘韻に富んで居るといふやうな文章はまだ私は見た事がない。或一つの風景について、テンからキリまで整然と寫せてあつて、それがいかにも目の前に浮動するやうな文章は恐らくあるまい。それは到底出來得べからざる事だらうとおもふ。私の考では自然を寫す――即ち敍事といふものは、なにもそんなに精細に緻細に寫す必要はあるまいとおもふ。寫せたところでそれが必ずしも價値のあるものではあるまい。
jquery.cookie.jsには、jQueryの組み込みが必要です。
jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script><head></head><head>〜</head>の中に記述してjquery.cookie.jsを読み込みます。
cookieを使ってアクセス回数を判別して「初回アクセス時にモーダルウィンドウを表示させる」などの制御をにします。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> 本体はCDNにあるので上記をjQuery本体の次に記述して完了です。
以下のjquery-modalLayerBoard.jsのファイルを使い<head>〜</head>の中に記述します
<script src="設置したドメイン.../jquery-modalLayerBoard.js"></script> ファイルを設置できない場合、ファイルを開いてコード一式を<script>〜</script>の中に、直接HTMLへ記述して使用しましょう。
以下のlayerBoard.cssのファイルを<head>〜</head>の中に記述しましょう。
<script src="設置したドメイン.../layerBoard.css"></script> jquery-modalLayerBoard.jsを実行させるために、以下のどちらかのコードをHTMLの<script>〜</script>の中に記述しましょう。
//条件を付けずに動かす場合
$(function(){
$('#layer_board_area').layerBoard();
})
// 条件設定をする場合
$(function(){
$('#layer_board_area').layerBoard({
delayTime: 100, //表示までの待ち時間
fadeTime : 400, //表示開始から表示しきるまでの時間
alpha : 0.7, //背景レイヤーの透明度
limitMin : 0, //何分経過後に再度表示するか/分（0で再表示なし）
easing: 'linear', //イージング
limitCookie : 0 , //cookie保存期間/日（0で開くたび毎回表示される）
countCookie : 1000 //何回目のアクセスまで適用するか(cookie保存期間でリセット)
});
}) <body>タグにHTMLを記述します。
<div id="layer_board_area">
<div class="layer_board_bg"></div>
<section class="layer_board">
<div class="layer_borad_content">
<!-- 表示する内容 -->
</div>
<a class="mdl_btn_close square_btn" href="#">閉じる</a>
<div class="mdl_btn_close circle_btn"></div>
</section><!-- layer_board -->
</div><!-- layer_board_area -->#layer_board_area・layer_board_bg.layer_boardの3点は、class名の変更などせずそのままにして使用しましょう。
SANGOで使用する場合
当サイトでも使用しているWordPressテーマSANGOで、モーダルウィンドウを表示させるボタンを設置するには、ボタンなどのショートコードにlayer_board_btnクラスをつけることで設置することができます。
[btn class="raised main-bc strong layer_board_btn"]<i class="far fa-window-maximize"></i> モーダルウィンドウを開く[/btn]ネイティブなJavaScriptで初回アクセスでモーダルを出す場合
ちなみに、jQueryを使わずにネイティブなJavaScriptで同じようにモーダルを出すには、以下のスニペットがあります。
JavaScriptのsessionStorageでそのページへ初回アクセス時にモーダルを表示
jQuery本体はもちろんのこと、ライブラリも使わず簡単に実装できるので、気になった方は以下の記事を参考にしてみてください。
参考サイト
参考jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱うTips Note by TAM
