Railsにjs.cookie.jsを導入してクッキー管理する方法

js.cookie.jsをRailsに導入し、クッキーでポップアップの表示・非表示を管理する機能を作ってみた。Railsのバージョンは4.2.6。

こんなやつを作る

js.cookie.jsを導入

Gemfileに

gem ‘js_cookie_rails’

を追記してbundle install

application.jsに

//= require js.cookie

を追記。これでjs.cookieの導入ができた。

cookieの有無でポップアップを表示・非表示

実装手順としては、

  1. #popupと#pop_up_layerをdisplay:noneで隠しておく
  2. クッキーにname=displayed_pop_up_flgがない → そのクッキーを作って、#popupと#pop_up_layerをdisplay: blockにして表示させ、#pop_up_closeか #pop_up_layerをクリックしたらdisplay: noneにする
  3. クッキーに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>

CSS

#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めっちゃ便利だし今後のサポートも期待できる。おすすめ。

お仕事決まれば全額キャッシュバック!転職特化型Ruby実践研修【ポテパンキャンプ】