皆さんはクッキーを利用されたことはありますか？
ここでいうクッキーはお菓子のクッキーではなくWeb技術のcookieのことです。
cookie は、最初にアクセスした Web サイトからコンピュータのハード ディスク ドライブ上に保存されるファイルのことを指します。
cookieにはWebサイトが指定したデータを保存しておくことができます。
ショッピングサイトなどでよく利用されている技術です。
顧客のログイン情報の保持、訪問回数のカウントなどに使われていますね。
このcookieはjQueryを利用して簡単に発行することができます。
具体的にcookieの使用方法を見ていきましょう。
jquery.cookie.jsを設置しよう
jquery.cookie.jsはこちらからダウンロードできます。
https://github.com/carhartl/jquery-cookie
設置は簡単です。
①まずjQuery本体を読み込んでください。
<script type=”text/javascript” src=”jquery.js”></script>
②次にcookie.jsを読み込みます。
<script type=”text/javascript” src=”jquery.cookie.js”></script>
cookieを発行しよう
cookieの発行は以下の記述でできます。
$.cookie( ” cookie の名前” , ” cookie の値” , { expires: 5 , path: “/”, domain: “ドメイン” , secure: true });
基本的にcookie の名前とcookie の値が入っていれば発行はできます。{}内はオプションになります。
オプション1：expires
クッキーを保存する期間になります。例では値が5とはいっているので、5日間保存するということになります。
ここをマイナスの値にすることで、クッキーを削除できます。
設定しなければブラウザ終了時にクッキーは削除されます。
オプション2：path
ｃookieを保存するパスを設定します。
オプション3：domain
ｃookieが有効となるドメインを設定します。
オプション4：secure
クッキーの送信をセキュアな通信の時のみにするかどうかを設定します。値はtrueかfalseになります。
発行したcookieを取得しよう
発行したｃookieは以下の記述で取得できます。
$.cookie( “cookieの名前” );
発行したcookieを削除しよう
発行したcookieは以下の記述で削除できます。
$.removeCookie( “cookieの名前” );
cookieの使い道を考えよう
cookieを利用したWebサービスを考えてみましょう。
どのようなものが思いつくでしょうか？
2つのサービス例とそのアルゴリズムをご紹介します。
Aボタンを押した回数をカウントアップする
これは次のようなアルゴリズムで実現できます。
①変数countを設定
②cookieが発行されていないときにはcount=0としてcountを表示。
③ボタンが押されたときにcountに1加算する。さらにcookie を発行する。
④変数countを表示する
ポイントはcookieが発行されているかいないかで条件分岐を行い、countの表示をさせることです。
Bレスポンシブサイトのスマートフォン表示とパソコン表示の切り替えをボタンで行う
こちらはより実用的な例ですね。
スマートフォンでもパソコン用の表示でサイトが見られるようにしてあげましょう。
これはviewportの設定を書き換えることで実現できます。
サイトには「パソコンサイトをみる」と「スマートフォンサイトをみる」ボタンがあるとします。
ではアルゴリズムをご紹介します。
①「パソコンサイトをみる」ボタンを押すと、$.cookie(“view”,”pc”,{path:’/’});でcookieを発行し、「スマートフォンサイトをみる」ボタンを押すと、$.cookie(“view”,”sp”,{path:’/’});でcookieを発行するよう設定します。
②スマートフォンで見ているかどうかを判定します。
③スマートフォンで見ているときのｃookie「view」の値を取得します。
④cookie「view」の値が「pc」の時にviewportのcontent属性をパソコンサイト用に変更します。
ポイントは③の工程です。スマートフォンで見ているときのcookie「view」の値によってサイトの表示方法を切り替えます。
Bのスマートフォンサイトとパソコンサイトの切り替えはよく出会うパターンなので、アルゴリズムを理解してスクリプトを書けるようにしておくとよいかもしれません。
クッキー操作はjquery.cookie.jsを使用することで容易にできます。
クッキーを利用して制作の幅を広げてみませんか？
- 2616 views
- キム
