jquery クッキーを使っていいね!ボタンを作ろう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

クッキーを使っていいね!ボタンを作ろう

jQuery|2018年11月06日

2018年11月06日
  • このエントリーをはてなブックマークに追加

今回のミッションを行うには、サーバー環境が必要です。
サーバーにアップロード、もしくはローカルに環境構築しなければ、基本的に機能しません。
サーバーをレンタルされる方はこちらで取得してから進んでください。

クッキーとは何かと言うと、ゲームの「保存」機能のようなものです。
ウェブサイトでは、基本的に画面を遷移すると前の画面で行ったデータは引き継げません。
ページ別に処理で行われているため、前の画面で行った処理は消えてしますのです。

しかし、次の画面にもデータを引き継ぐ方法はいくつかあります。
その1つの方法がクッキーです。

クッキーとは「ブラウザそのもの」にデータを保存できる機能です。
パソコン上でデータを保存すれば、ページが変わってもデータを引き継げます。
こうした機能をクッキーとよびます。

ミッションの内容

今回は、クッキー機能を使って「いいね!」ボタンを作ってみましょう。
クリックすると、ボタンがグレーに変わります。

画面を呼び込み直しても、再度ボタンを押すまでは、グレーのままになります。
さっそく、ミッションの内容を確認してみてください。

まず、ソースコードの解説を確認した後に、進めていきましょう。
もし、どうしても再現できない場合は、下記のファイルを参考にしてください。

本来いいね!ボタンはクッキーではなく、データベースを活用することが多いと思います。
データベースに関してはphp編でご説明させて頂きます。

ソースコードの解説

今回はクッキーを扱いやすくするライブラリ「jquery.cookie.js」を使っていきます。
まずは、jquery.cookie.jsをCDNでhead内に設置してみてください。

もちろん、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アプリケーションを作る時に使いますので、ぜひ、練習してみてください。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら