JS memo

お洒落にJavaScript。

2019年2月25日21:31

Djangoとjavascriptでいいね!ボタンを自作<後半戦>

DjangoとJavaScriptでいいねボタンを作成して見ました後半戦!

前回はDjangoでバックエンドを構築しました。今回はJavaScriptでフロントエンドを構築していきます。

前回の記事はこちら いいねボタンのソースはこちら(GitHub)
  1. 前回のおさらい
  2. 今回の概要
  3. フロントエンドの構築
  4. まとめ

前回のおさらい

前回やったことを軽くまとめておきます。

  • app/models.pyにユーザー情報(user)といいね情報(like)を格納するデータベースを作成
  • いいねの数とユーザーのいいねの状態を操作するページのURLをurl.pyに設定
  • views.pyにいいねボタンがクリックされた時にユーザーのいいねの状態といいねの数を更新するよう設定

参考にした動画

今回の概要

今回行う実装を簡単に説明します。

  • htmlでいいねボタンの枠組みを作成
  • cssでいいねボタンの押された時とされてない時のデザインを設定
  • JavaScriptでユーザーがページにアクセスした際のステータス(いいねの数とユーザーがいいねしているか)を取得し、表示する
  • JavaScriptでユーザーがいいねボタンをクリックした時のステータスを変更するよう設定

では実際に実装していきましょう。

フロントエンドの構築

1. htmlでいいねボタンの枠組みを作成する

<p class='like-btn' data-href="{{ app.get_api_like_url }}">
  <span class="liked-cnt">{{ app.like.count }}</span>
  <i class="fas fa-kiss-wink-heart"></i>
 </p>

pタグでボタンの枠組みを形成し、spanタグにいいねの数を表示します。ちなみにiタグはfontawsomeのアイコンを表示します。

data-href="{{ app.get_api_like_url }}"

このdata-hrefはユーザーのいいねのステータスを記録しているURLを指定していて、ボタンが押された際にそのURLをJavaScriptで取得しリクエストを送ります。

2. cssでデザインをする。

好みでデザインは変えてください。今回は私が実装したもののcssを載せておきます。

<style>
  p { width: 100px;height: 50px;line-height: 50px;font-size: 30px;color: #F75D5D;text-align: center;background: #fff;border: solid 1px #F75D5D;border-radius: 10px;padding: 10px;}
  .on { background: #F75D5D; color: #fff; }
</style>

いいねボタンが押されていない時のデザインをpタグに指定し、いいねが押された時のデザインをクラス名onに設定しておきます。

今回はいいねが押された時にボタンがピンクになるよう設定しました。

3. JavaScriptでページにアクセスした際のステータスを取得し表示する。

jQueryでajaxを使用したので、jQueryを記述して置いてください。

以下実装したjsです。

$(function(){
  const this_ = $(".like-btn");
  const likeUrl = this_.attr("data-href"); // ユーザーのステータス情報
  $.ajax({
    url: likeUrl,
    method: "GET",
    data: {"status":0}, // ユーザーのステータス情報を変更しないように
    success: function(data){
      if (data.liked){ // もしユーザーが既にいいねをしていた場合
          this_.addClass("on"); // ボタンをピンクにする
      }
    }, error: function(error){
      console.log("error")
    }
  })
});

ユーザーのいいねしているかどうかのステータスを格納しているURLを取得し、
もしいいねされて入れば、ボタンをピンクにするという作業を行います。

この際、"status=0"を送って、見に来ただけですよ〜と伝えます。
そうすることでこのURLにアクセスした際にユーザーのステータスを変更せずにデータを取得できます。

3. いいねがクリックされた時にいいねの数とユーザーのステータスを更新する。

実装したコードです。

$(".like-btn").click(function(e){
  e.preventDefault()
  const this_ = $(this);
  const like_cnt = $(".liked-cnt");
  const likeUrl = this_.attr("data-href");
  if (likeUrl){
      $.ajax({
      url: likeUrl,
      method: "GET",
      data: {"status":1}, // いいねが押されましたと伝える
      success: function(data){
        let change_like = like_cnt.text();
        if (data.liked){ // もしいいねされていなかったら
          like_cnt.text(++change_like); // いいねの数を1追加
          this_.addClass("on"); // ボタンをピンクに
        } else {  // もしいいねされていたら
          like_cnt.text(--change_like); // いいねの数を1減らす
          this_.removeClass("on"); // ボタンのデザインを初期状態に
        }
      }, error: function(error){
        console.log("error")
      }
    })
  }
})

いいねボタンがクリックされるとまず初めにいいねの数とユーザーのステータスが更新されます。

次に表示するいいねの数とボタンのデザインを更新します。

表示するいいねの数はいいねの数をそのままデータベース(like)から引っ張ってくると、非同期なので正常な数が表示されないことがあります。
そのためhtml側を上書きします。

また"status=1"とすることでユーザーのステータス情報をもつURLに「今回はクリックされた際のリクエストです」と伝え、情報を更新してもらいます。

これでいいねボタンの完成です。

まとめ

動画は基本的ないいねボタンの実装方法の説明だったので、クリックされた時のデザイン変更などについては自分で実装しています。

また動画ではクリックした時に非同期でlikeのカウントが更新され、正常に数が表示されていなかっ他ので、そこも自分なりにアレンジしています。

もっと効率的な方法があれば、共有してください!

お疲れ様でした。