WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： いっちー
カテゴリー： プログラム >JavaScript

ロゴアニメーションを作ってみたけど、ページを開くたびにアニメーションが出てしまって困っている。そんな方はいませんか？
今回はjquery.cookie.jsというjQueryプラグインを使った簡単に初回のみアニメーションさせる方法を紹介します！

jquery.cookie.js

jquery.cookie.jsの使い方

さっそくjquery.cookie.jsの使い方を紹介していきたいと思います。

保存方法

$.cookie('test','green');

上記が基本形の形となります。
testには保存したいcookieの名前を、greenには値を入れます。

.cookie('test','1',{expires:1, path:'/', domain:'test.jp', secure:true});

オプション

cookieにはオプションを設定することができます。
オプションを付ける場合は、{}を後ろにつけて記述します。
※任意の値になるので省略可能です。

• expires
• path
• domain
• secure

expires

expiresは有効期限の日数を指定することが可能です。1週間の場合は下記のようになります。

$.cookie("test", "green", { expires:'1'});

path

pathは有効なパス（ドメイン全体で利用したい場合は’/’)を設定する際に使用します。

$.cookie('test','green',{path:'/'});

domain

domainは有効なドメインを記述します。

$.cookie('test','green',{domain:'test.jp'});

secure

セキュア通信時のみ送信するものです。

$.cookie('test','green',{secure:true});

取得方法

var testcookie = $.cookie('test');

上記のような記述の場合、testcookieには保存したgreenが取得される。

削除方法

$.removeCookie( "test" );

上記のような記述の場合、testcookieには保存したgreenが削除される。

アニメーションを1日1回にする方法

var cookie = $.cookie('cookie');
if (!cookie) {
    // 1回目の処理（アニメーションの処理）を書いてください。
} else {
    // 2回目以降の処理を書いてください
}

$.cookie('cookie', 'value', { expires: 1 });

cookieの値を参照して変数「cookie」に代入してif文で分岐をしています。
最後にcookieがリセットされない限り、1日1回のみ表示にするようにしています。

まとめ

今回はcookieを使って初回アクセス時にアニメーションを簡単に表示する方法を紹介しました。
ぜひ活用してみてください。