02

2017.07.19

jQuery.cookie.jsについて

ブログ002_トップ

ひと段落したようでしていない中身の人です。
今回のテーマは、「クッキー(COOKIE)」です。
なぜ、クッキーかというと、Webサイトのオープニング画像を表示するしないの制御をCookieで対応することにしたからです。
色々なサイトを見て、書き方や設定をしていたのですが、半日のもかかってしまいました。

1.jQuery.cookie.jsとは

今回cookieを制御するのに使用したのは、タイトルにある「jQuery.cookie.js」というjQueryです。
これを使用することで、cookieの制御するための煩雑なコーディング記述や設定等を省き、必要最低限のコーディングで私が予定している動作をしてもらいます。
はじめは、cookieということもあり、おっかなびっくりで作業をしていましたが、慣れてくると楽に設定をすることができました。

ブログ002_ダウンロード先画面

まず、使用する前にプログラムをダウンロードします。
GitHubで提供しているので、こちらからダウンロードをします。
上の画像の右上にある緑のボタンをクリックすることでダウンロードすることができます。
ファイルを解凍し、srcフォルダー内の「jquery.cookie.js」を適用する先のフォルダーにコピーします。
コピー後、これも適用するファイルに以下のコードを内記述します。


2.cookieの制御

ここからが設定に入ります。
まずやりたいことの整理整頓をします。

【 やりたいこと 】

  • 1.オープニングページの制御
  • 2.トップページの訪問回数のカウント回数
  • 3.トップページの訪問回数のカウント回数のカウントアップ
  • 4.カウント回数の保持

2~4は、1.オープニングページの制御についての具体的にやりたいことになります。
また、カウント回数のデータを保持するためにcookieを利用して、トップページを訪問する回数をカウントすること。
次に回数をカウントした値でオープニングページの表示非表示を判断する。
ということが、今回のやりたいことになります。

トップページの訪問回数のカウント回数

今回は、トップページの訪問回数でオープニングページの制御を行うため、
まず、カウント回数のデータをcookieから取得します。
【 カウント回数の取得 】
1.var cookie_count = $.cookie('taiseicookie').length;
※取得したデータを変数「cookie_count」に入れていろいろな処理を行っていきます。

次に取得した変数cookie_countで条件分岐します。
条件分岐とて、「今日トップページを訪問した」か「訪問していないか」を条件とします。
訪問していない場合は、cookie_countのデータ(カウント回数)が「null」であるかを判断し、もし「null」の場合にはオープニングページを表示します。
また、訪問した場合は、cookie_countのデータ(カウント回数)が「0より大きいか」を判断し、もし「0より大きい」場合にはオープニングページを非表示とします。
【 条件分岐 】
1.訪問していない場合:if(cookie_count == null) {}
2.訪問している場合:if(cookie_count > 0) {}
としました。

カウント回数のカウントアップ

次に、訪問していない場合の処理の中にカウントアップようの記述をします。
そうすることで次に訪問した場合には、オープニングページを非表示となる処理に入るようにします。
【 カウント回数のカウントアップ 】
1.cookie_count = cookie_count + 1;

カウント回数の保持

最後にカウント回数をcookieに書込し、次の訪問したときにカウント回数を利用できるようにします。
そうすることで、変数cookie_countを有効に活用することができます。
【 カウント回数のデータ書込 】
1.$.cookie('taiseicookie','cookie_count', {expires:1,path:'/'});
※taiseicookie:cookie名、cookie_count:書込みする値、expires:データを保持している期限、path:cookieの保存先

以上が、オープニングページの表示非表示するための設定となります。

最後に・・・。

この設定にたどり着くのに半日かかりました・・・。
この半日間、頭を抱えながらなんとかやってみて、何とかなった本日でした。