Railsにjs.cookie.jsを導入してクッキー管理する方法
js.cookie.jsをRailsに導入し、クッキーでポップアップの表示・非表示を管理する機能を作ってみた。Railsのバージョンは4.2.6。
こんなやつを作る
js.cookie.jsを導入
Gemfileに
を追記してbundle install
application.jsに
//= require js.cookie
を追記。これでjs.cookieの導入ができた。
cookieの有無でポップアップを表示・非表示
実装手順としては、
- #popupと#pop_up_layerをdisplay:noneで隠しておく
- クッキーにname=displayed_pop_up_flgがない → そのクッキーを作って、#popupと#pop_up_layerをdisplay: blockにして表示させ、#pop_up_closeか #pop_up_layerをクリックしたらdisplay: noneにする
- クッキーにname=displayed_pop_up_flgがある → なにもしない
といった感じ。二回目以降に表示される時はクッキーがあるので、display: noneのままになって表示されない。
$(function () {
if (!Cookies.get('name', 'displayed_popup_flg')) {
Cookies.set('name', 'displayed_popup_flg');
$('#popup, #popup_layer').css('display', 'block');
// レイヤー/ポップアップのcloseボタンクリック時の処理
$('#popup_close, #popup_layer').click(function(e) {
$('#popup, #popup_layer').css('display', 'none');
});
}
});ビュー
<div id="popup_layer"></div>
<!-- ポップアップ -->
<div id="popup">
<div class='popup-content'>
<span class="box-title">New</span>
<p class='popup-heading'>お知らせ</p>
<p class='popup-message'>ポップアップ機能を追加しました</p>
<span id="popup_close">x</span>
</div>
</div>#popup_layer {
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.20;
}
#popup {
display: none;
position: absolute;
left: 50%;
top: 50%;
width: 380px;
margin-left: -180px;
margin-top: -220px;
background-color: white;
text-align: center;
border: solid 3px #364e96;
}
.popup-content {
height: 100%;
padding: 20px;
.box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #364e96;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.popup-heading {
color: #364e96;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/
}
.popup-message {
margin: 40px 0 25px;
font-size: 16px;
}
#popup_close {
position: absolute;
right: 3px;
top: 7px;
line-height: 0;
font-size: 18px;
cursor: pointer;
}
}
}ブラウザのデバッグ機能でクッキー操作
ChromeやIEのデバッグ機能でクッキーを確認したり作ったり消したりできる。
Chromeでクッキー操作
右クリック→「検証」→「Console」
Internet Explorerでクッキー操作
右クリック→「要素の検証」→「コンソール」
クッキー確認
document.cookie
クッキー追加
Cookies.set('キー', '値')
クッキー削除
Cookies.remove('キー', '値')
js.cookie.jsめっちゃ便利だし今後のサポートも期待できる。おすすめ。
