jQuery + PHPでHTMLに画像アクセスカウンターを設置する

作成日: 2014/09/09

更新日: 2016年8月16日

アクセスカウンターの設置は最近減ってきたかもしれませんが、作ることがあったのでメモ。アクセスカウンターはフリーのcgiなどが落ちていましたが、デザインを決めれたり著作権表示をしなくてくていいので、自作した方が早いと思いました。
今回はHTMLからjQueryのAjax()からPHPを実行させ、あらかじめ用意しておいた画像で+1したアクセス数を出力させる方法です。PHPファイルで表示している場合はそのままPHPで表示させればいいのですが、HTMLファイルの場合は静的ページとなるので、Ajaxを利用してPHPを実行させます。
PHPは動作するけど既にあるHTMLファイルにアクセスカウンターを表示させたい場合に便利かと思います。

必要なファイル

以下のファイルをサーバに準備します。

index.html: アクセスカウンターを表示させるHTMLファイルです。
count.js: AjaxによりPHPを実行させるJavascriptファイルです。
0.gif ～ 9.gif: カウンター表示用の0～9までの画像を用意します。拡張子はgifでなくてもかまいません。
count.txt: カウンターの数値を記録するテキストファイルです。
count.php: カウンターの数値をプラスし、画像の表示を渡すPHPファイルです。

下準備

自分でデザインした0～9までの画像を用意します。
また、テキストエディタでテキストファイルを新規作成し、半角数字で「0」とだけ書いたものを「count.txt」として保存します。数字以外のものが入ると、途中でエラーになるかもしれません。

【HTML】index.html

まずはHTMLの記述です。GoogleからjQueryを読み込み、「count.js」を読み込むように設定します。
また、アクセスカウンターを表示させる「<div id”Counter”></div>」を用意しておきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-type" content="text/css" />
<meta http-equiv="Content-Script-type" content="text/javascript" />
<title>ｊQuery + PHPでHTMLに画像アクセスカウンターを設置する</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="count.js"></script>
</head>
<body>
<div id="Counter"></div>
</body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>ｊQuery + PHPでHTMLに画像アクセスカウンターを設置する</title>

</head>

<body>

</body>

【javascript】count.js

次にjQueryの記述です。PHPを実行し、指定したIDに表示させます。
「TargetID」にHTMLで指定したアクセスカウンターを表示させるタグのIDを指定してください。
また、PHPファイルのパスをしています。

$(function(){
TargetID = 'Counter';//---------------------------HTMLで指定したカウンターを表示するIDを指定
$.ajax({
	url:'http://domain.com/count.php', //-----読み込むPHPファイルのパスを指定
	success: function(data){
		$("#"+TargetID).prepend(data);
	},
	error: function( data ) {
		$("#"+TargetID).text('エラー');//--エラーの場合の表記
	}
});
});

$(function(){

TargetID = 'Counter';//---------------------------HTMLで指定したカウンターを表示するIDを指定

$.ajax({

url:'http://domain.com/count.php', //-----読み込むPHPファイルのパスを指定

success: function(data){

$("#"+TargetID).prepend(data);

error: function( data ) {

$("#"+TargetID).text('エラー');//--エラーの場合の表記

}

});

【PHP】count.php

最後に、PHPの記述です。基本的には設定の部分を変更するだけで大丈夫かと思います。
「count.txt」を読み取ってプラス1させた後、新しいカウントをファイルを書き換えます。
最大桁数で足りない部分は「0」の画像で先に埋め、str_splitによって1文字ずつ配列にしたものを画像として「$html」につき足していきます。

<?php 
/*設定
==================================================*/
$imgBefore = '<img src="http://domain.com/';//--------------------画像ファイルの数字の前まで
$imgAfter = '.gif" />';//-----------------------------------------画像ファイルの数字の後から
$MaxNum = 7;//----------------------------------------------------最大桁数
$countFile = 'count.txt';//---------------------------------------カウント用ファイル
$html = '';//-----------------------------------------------------書き出すHTMLを初期化
/*ファイルの読み込み
==================================================*/
$fp = fopen($countFile, 'r');
$line = fgets($fp);
fclose($fp);
/*カウントのプラス
==================================================*/
$line++;
/*カウントの書き込み
==================================================*/
$fp = fopen($countFile, 'w');
fwrite($fp, $line);
fclose($fp);
/*桁数の足りないところを「０」に
==================================================*/
$numLen = mb_strlen($line, 'UTF-8');//----------------桁数取得
$numRest = $MaxNum - $numLen;//----------------------残りの桁
if($numRest > 0){
	for($i = 0; $i < $numRest; $i++){
		$html .= $imgBefore.'0'.$imgAfter;
	}
}
/*画像にする
==================================================*/
$numArr = str_split($line, 1);//---------------------一文字ずつ分けて配列に
foreach($numArr as $num){
	$html .= $imgBefore.$num.$imgAfter;
}
/*出力
==================================================*/
echo $html;
 ?>

<?php

/*設定

==================================================*/

$imgBefore = '<img src="http://domain.com/';//--------------------画像ファイルの数字の前まで

$imgAfter = '.gif" />';//-----------------------------------------画像ファイルの数字の後から

$MaxNum = 7;//----------------------------------------------------最大桁数

$countFile = 'count.txt';//---------------------------------------カウント用ファイル

$html = '';//-----------------------------------------------------書き出すHTMLを初期化

/*ファイルの読み込み

==================================================*/

$fp = fopen($countFile, 'r');

$line = fgets($fp);

fclose($fp);

/*カウントのプラス

==================================================*/

$line++;

/*カウントの書き込み

==================================================*/

$fp = fopen($countFile, 'w');

fwrite($fp, $line);

fclose($fp);

/*桁数の足りないところを「０」に

==================================================*/

$numLen = mb_strlen($line, 'UTF-8');//----------------桁数取得

$numRest = $MaxNum - $numLen;//----------------------残りの桁

if($numRest > 0){

for($i = 0; $i < $numRest; $i++){

$html .= $imgBefore.'0'.$imgAfter;

}

/*画像にする

==================================================*/

$numArr = str_split($line, 1);//---------------------一文字ずつ分けて配列に

foreach($numArr as $num){

$html .= $imgBefore.$num.$imgAfter;

}

/*出力

==================================================*/

echo $html;

まとめ

以上で完了です。各ファイルのパスやIDにさえ注意すれば表示されると思います。PHPが吐き出すタグの部分をいじれば、「ul」にしたり、クラス指定して背景画像で読み込むようなカスタマイズもできると思います。
更新ボタンを押したりなど、更新すればするだけカウントされてしまうので、キャッシュなどを利用するにはもうちょっといじらないといけないかもしれません。また、直接「count.php」にアクセスしてもカウントされてしまうので、どこから呼び出されたかなどの指定も必要かもしれません。

jQuery + PHPでHTMLに画像アクセスカウンターを設置する