今回のミッションを行うには、サーバー環境が必要です。
サーバーにアップロード、もしくはローカルに環境構築しなければ、基本的に機能しません。
サーバーをレンタルされる方はこちらで取得してから進んでください。
クッキーとは何かと言うと、ゲームの「保存」機能のようなものです。
ウェブサイトでは、基本的に画面を遷移すると前の画面で行ったデータは引き継げません。
ページ別に処理で行われているため、前の画面で行った処理は消えてしますのです。
しかし、次の画面にもデータを引き継ぐ方法はいくつかあります。
その1つの方法がクッキーです。
クッキーとは「ブラウザそのもの」にデータを保存できる機能です。
パソコン上でデータを保存すれば、ページが変わってもデータを引き継げます。
こうした機能をクッキーとよびます。
ミッションの内容
今回は、クッキー機能を使って「いいね！」ボタンを作ってみましょう。
クリックすると、ボタンがグレーに変わります。
画面を呼び込み直しても、再度ボタンを押すまでは、グレーのままになります。
さっそく、ミッションの内容を確認してみてください。
まず、ソースコードの解説を確認した後に、進めていきましょう。
もし、どうしても再現できない場合は、下記のファイルを参考にしてください。
本来いいね！ボタンはクッキーではなく、データベースを活用することが多いと思います。
データベースに関してはphp編でご説明させて頂きます。
ソースコードの解説
今回はクッキーを扱いやすくするライブラリ「jquery.cookie.js」を使っていきます。
まずは、jquery.cookie.jsをCDNでhead内に設置してみてください。
■ jquery.cookie.js
https://cdnjs.com/libraries/jquery-cookie
もちろん、jQueryを使っていますので、jQueryの本体ファイルも読み込む必要があります。
jQueryは必ずjquery.cookieの「前」に読み込みましょう。
ひとまず、これで、jquery.cookie.jsを使う準備は完了です。
まず、全体のソースコードを通して見てみましょう。
<!--いいね！ボタンです。-->
<div style="width:100px;background:#000;text-align: center;padding:10px;box-sizing: border-box;color:#ffff;" id="btnArea">いいね！</div>
<script>
//testdataというcookieを呼びだします。
var cookiedata = $.cookie("testdata");
//もしcookieが空だったら、、
if(cookiedata == ""){
//ボタンの背景色を黒に変えます。
$("#btnArea").css("background","#000");
//もしcookieが空じゃなければ、、
}else{
//ボタンの背景色をグレーに変えます。
$("#btnArea").css("background","#afafaf");
};
//いいね！ボタンをクリックした時、、
$("#btnArea").click(function(){
//クッキーのデータが空だったら、、
if(cookiedata == ""){
//cookiedataにtrueを入れて、、
cookiedata = "true";
//cookieに保存します(expires: 7は7日間データを保持するという意味)。
$.cookie("testdata", cookiedata, { expires: 7 });
//ボタンの背景色をグレーに変更。
$("#btnArea").css("background","#afafaf");
}else{
//cookiedataが空じゃなければ、、
//cookiedataを空にし、、
cookiedata = "";
//cookieに保存します。
$.cookie("testdata", cookiedata, { expires: 7 });
//ボタンの背景色を黒に変更。
$("#btnArea").css("background","#000");
};
});
</script>
全体の流れはご理解いただけましたでしょうか。
まず、最初の変数から見ていきましょう。
//testdataというcookieを呼びだします。
var cookiedata = $.cookie("testdata");
上記のタグは、testdataというクッキーが持つ値を取得するものです。
変数cookiedataに、testdataの中身が入力されます。
しかし、最初は何のデータも入っていませんから、空のままになります。
もしデータが入っていたら、cookiedataにクッキーのデータが入ります。
//もしcookieが空だったら、、
if(cookiedata == ""){
//ボタンの背景色を黒に変えます。
$("#btnArea").css("background","#000");
//もしcookieが空じゃなければ、、
}else{
//ボタンの背景色をグレーに変えます。
$("#btnArea").css("background","#afafaf");
};
次にif文で、cookiedataに値が入っていた場合と、空だった場合の処理を書きます。
いいね！ボタンは、すでに押されていたら「灰色」に変更します。
押されていなかったら「黒」に変更します。
まず、ページを開いた瞬間に押されているかどうかを判別し、ボタンの状態を変えます。
初期状態である「cookiedataが空」だった場合。
空であればボタンの色は黒なので、黒に変えています。
そして「cookiedataに値が入っていた」場合。
ボタンの色を灰色にします。
これで、クッキーの値を見て、ボタンの状態を変化させることができました。
次は、ボタンを押した時の処理を書いていきます。
//いいね！ボタンをクリックした時、、
$("#btnArea").click(function(){
//いいね！ボタンのステータスがfalseだったら、、
if(cookiedata == ""){
//cookiedataをtrueにし、、
cookiedata = "true";
//cookieに保存します。
$.cookie("testdata", cookiedata, { expires: 7 });
//ボタンの背景色をグレーに変更。
$("#btnArea").css("background","#afafaf");
}else{
//cookiedataを空にし、、
cookiedata = "";
//cookieに保存します。
$.cookie("testdata", cookiedata, { expires: 7 });
//ボタンの背景色を黒に変更。
$("#btnArea").css("background","#000");
};
});
上記は、ボタンを押した後の処理です。
もしcookieに何の値も入っていない場合「true」を入れます。
これで「押されているか」判別できます。
一方でcookieにtrueがはいっている場合。
今後は逆にcookieの中身を空にします。
これで「押されていないこと」が判別できます。
あとは、ボタンの色を変えるだけです。
これで、一通りの処理は完成です。
jquery.cookie.jsを使うと、シンプルなソースコードでクッキーを扱えます。
素のJavaScriptで扱うと、さらに複雑化します。
WEBアプリケーションを作る時に使いますので、ぜひ、練習してみてください。