カウントアップクリックカウンター

Question

お世話になっております。

ボタンをクリックしたらカウントアップされていくもので

例

○人が○回押しました

のようなものを作りたいのですが

①○人の部分はIPアドレス？クッキー？等で区別し重複しないように
②○回の部分は単純にクリック数のカウントアップ
③次回アクセスした場合もリセットされることなく記憶されてある
④ブラウザの更新をしなくてもリアルタイムに反映

ご教授のほど宜しくお願いいたします。

Answer

ECマスターズの田中です。

カウンターの件、
確認の上、改めてご返信させていただきます。

なお、クリック数をサーバ上に保存する仕組みが必要となるため、
サーバ上でプログラムの実行ができるWebサーバが必要となること、
モールから外部サイトへリンクを張る必要があること、
（たとえば、楽天では外部リンク申請が必要となります）
以上を予めお含みおきください。

Answer

田中様

ありがとうございます。

言葉足らずで申し訳ございません。
楽天ではなく自社サイト(Eストアー)での実装となります。

Eストアーのサーバーで不可の場合は
別のサーバーで考えております。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

株式会社Eストアーが提供している、
ショップサーブでの実装ということですね。

ショップサーブでは、
https://sps.estore.jp/faq/spec_answer03/
上記URLの通り、PHPをご利用いただくことができますので、

例えば、
http://satohmsys.info/likebutton/
上記URLの自作いいねボタンのような
PHPプログラムを作成することで、
実装していただくことができます。

※上記いいねボタンの場合、
２を実現するために、別枠でクリックをカウントする仕組みと、
４を実現するために、JavaScriptによるAJAXなどで、数を自動更新する仕組みを
改変して追加する必要がございます。

Answer

田中様

ありがとうございます。

http://81wind.com/like/like.html

●index.phpの内容

     

   人が、「良かった！」と言っています。



●function.phpの内容

//function.php

function getVoteCount($id){
//カウント数を書きだしてあるファイル名
$fileName = "log/" . $id . ".count";

//fopenでファイルを読み込む (読み込みモード)
$fp = @fopen($fileName , "r");

if($fp){
//カウント数書き込み済みのファイルの内容を取得
$vote = fgets($fp , 9182);
}else{
$vote = 0;
}

return $vote;
}


●vote.phpの内容

//vote.php

//////ajaxデータを受信1
$file_id = $_POST["file_id"]; //ファイル名
$count = $_POST["count"]; //投票数
$cookieName = "vote_" . $file_id; //クッキー名。
$cookieTime = time() + 10; //クッキーの有効期限（投票を制限する秒数）

///////クッキーが有効
if(isset($_COOKIE[$cookieName])){
     echo "クッキー制御により投票不可です。";

}else{
///////クッキーが無効＝カウントアップ
     $count = $_POST["count"]; //投票数

     //カウント数を書き出すファイル名
     $fileName = "log/" . $file_id . ".count";

     $fp = @fopen($fileName , "w"); //書き込みモードで開く
     
     flock($fp , LOCK_EX); //排他的ロック(書く準備) 他のロックをすべてブロック
     fputs($fp , $count); //カウント数を書き込み
     flock($fp , LOCK_UN); //ロック開放
     fclose($fp);

     setcookie($cookieName , $count , $cookieTime); //10秒有効のクッキーをセット

     echo "Complete"; //clickCount.jsにはここの値を返す
}

●clickCount.jsの内容

$(function(){

     $('.letsVote').on('click' , function(){
          
          $this = $(this);
          var id = $this.data("id"); //識別用ID（重複NG）
          var numHtml = "." + $this.data("numhtml"); //カウント数を表示するHTML
          var nowCount = Number($(numHtml).html()); //現在のカウント数
          var newCount = nowCount + 1;

          $.ajax({
               type : "POST",
               url : "vote.php",
               data: {
                    "file_id" : id,
                    "count" : newCount
               }
          }).done(function(data , datatype){
                    //送信先のvote.phpから、Completeが返ってきたらカウント更新
                    if(data == "Complete"){
                         $(numHtml).html(newCount);
                    }else{
                         alert("押しすぎ(´・ω・｀)");
                    }
               }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
                      $("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status);
                      $("#textStatus").html("textStatus : " + textStatus);
                      $("#errorThrown").html("errorThrown : " + errorThrown.message);
                  });
　　　　});
});

としておりますが
動作していないようです…

何が悪いのかわかりません。
ご教授頂けますでしょうか？###HR######IMG0a3014850af3eedd1a28ade0ca335a4ea.jpegIMG0######BR###

Answer

ECマスターズの田中です。

like.html と js/clickCount.js の文字コードが異なるため、
like.html 読み込み中に  js/clickCount.js を読み込んだ時に文字化けが起こり、
ボタンを押してJavaScriptを実行しようとしたときにエラーが発生しております。

like.html は EUC、 js/clickCount.js は シフトJISで
それぞれ作成されておりますので、
普段扱うことの多い方、などの基準で
文字コードを統一していただきますようお願いします。

Answer

田中様

ありがとうございます！

何とか少し実装できたように思えます。

とりあえずこれで動作していますでしょうか？

テストページ
http://w81.php.xdomain.jp/like2/like2.php

動作確認お願いいたします。

Answer

ECマスターズの田中です。

動作確認したところ、基本的には問題なく動作しているようですが、
ページを更新したところ、再度ボタンを押下することができました。

setcookieの周辺で、クッキーが正しく設定できているか、
また有効期限の設定は想定通りになっているか、
ご確認をお願いします。

Answer

現在のファイル内容が以下のようになります。

●like2.php






ほっこりカウンター



$(function() {
	allowAjax = true;
	$('.btn_vote').click(function() {
		if (allowAjax) {
			allowAjax = false;
			$(this).toggleClass('on');
			var id = $(this).attr('id');
			$(this).hasClass('on') ? Vote(id, 'plus') : Vote(id, 'minus');
		}
	});
});
function Vote(id, plus) {
	cls = $('.' + id);
	cls_num = Number(cls.html());
	count = plus == 'minus' ? cls_num - 1 : cls_num + 1;
	$.post('vote.php', {'file': id, 'count': count}, function(data) {
		if (data == 'success') cls.html(count);
		setTimeout(function() {
			allowAjax = true;
		}, 1000);
	});
}









真心Cookies


人をほっこりさせました










●vote.phpの内容

Answer

ECマスターズの田中です。

いただいたソースの中には、先に紹介した
http://satohmsys.info/likebutton/
上記ページに含まれております、

クッキーを設定する
setcookie($cookieName , $count , $cookieTime);
や、クッキーを読み込んで判定する
if(isset($_COOKIE[$cookieName])){
     echo "クッキー制御により投票不可です。";
}else{ (後略)
といった処理が含まれておりませんでした。
改めて、ページをご確認いただいた上で、
cookie周りの処理を追加していただきますようお願いします。

setcookie関数、$_COOKIE変数の使い方は
下記ページの例にあるコードをご参照ください。
http://php.net/manual/ja/function.setcookie.php