画像のアクセスカウンタ

前回の例でカウンタを指定の桁数まで0詰めで表示しましたが、今度は画像を使ってアクセスカウンタを表示してみます。

手順としてはカウンタを表す文字列の中の数字を、それぞれ対応する<img>タグに変換してあげるだけです。

まず0から9にそれぞれ対応する画像を用意します。例えば下記のようなものです。

それぞれの画像には「b0.png」から「b9.png」までの名前が付けてあるものとしてます。

次に前のページでカウンタを出力していた部分を見てください。

$counter_lenght = 8;

// .. 途中略 ..

$format = '%0'.$counter_lenght.'d';
$new_counter = sprintf($format, $counter);
print('訪問者数:'.$new_counter.'人目です');

カウンタとして表示される「$new_counter」には文字列として「00000012」などのように最終的に表示される値が文字列として格納されています。その為、この文字列の中で0なら<img src="./img/b0.png">、1なら<img src="./img/b1.png">などのように変換した結果を表示すれば自動的に文字が画像に置き換わって表示されます。

文字列の中のある値を別の値に置き換えるには「str_replace」を使って下記のように記述します。例えば0の場合は下記のようになります。

$new_counter = sprintf($format, $counter);
$new_counter = str_replace('0', '<img src="./img/b0.png">', $new_counter);

※「str_replace」関数に関しては『文字列の一部を他の文字に置き換える(str_replace)』を参照して下さい。

0から9をまとめて変換するには下記のようになります。

$new_counter = sprintf($format, $counter);
for ($i = 0 ; $i <= 9 ; $i++){
    $num = (string)$i;
    $img_num = '<img src="./img/b'.$i.'.png">';
    $new_counter = str_replace($num, $img_num, $new_counter);
}

これでカウンタの値として保存されていた文字列は全て画像を表す<img>タグに置き換わりました。画像のサイズとかが記述されていませんので、最後に「>」という文字を「 width="16" height="18" border="0">」に一括変換します。

$new_counter = sprintf($format, $counter);
for ($i = 0 ; $i <= 9 ; $i++){
    $num = (string)$i;
    $img_num = '<img src="./img/b'.$i.'.png">';
    $new_counter = str_replace($num, $img_num, $new_counter);
}

$size = ' width="16" height="18" border="0">';
$new_counter = str_replace('>', $size, $new_counter);

なぜ分けて変換しているかというと、サイズの指定の中で記述してある数字も<img>タグに置き換わると困るからです。画像ファイル名にも数字が使われていますけど、変換しようとしている数字と同じ数字以外の文字を使っていなければ大丈夫です。

では実際に試して見ます。

counter3.php

<html>
<head><title>PHP TEST</title></head>
<body>

<?php

$counter_file = 'counter.txt';
$counter_lenght = 8;

$fp = fopen($counter_file, 'r+');

if ($fp){
    if (flock($fp, LOCK_EX)){

        $counter = fgets($fp, $counter_lenght);
        $counter++;

        rewind($fp);

        if (fwrite($fp,  $counter) === FALSE){
            print('ファイル書き込みに失敗しました');
        }

        flock($fp, LOCK_UN);
    }
}

fclose($fp);

$format = '%0'.$counter_lenght.'d';
$new_counter = sprintf($format, $counter);

for ($i = 0 ; $i <= 9 ; $i++){
    $num = (string)$i;
    $img_num = '<img src="./img/b'.$i.'.png">';
    $new_counter = str_replace($num, $img_num, $new_counter);
}

$size = ' width="16" height="18" border="0">';
$new_counter = str_replace('>', $size, $new_counter);

print('訪問者数:'.$new_counter.'人目です');

?>
</body>
</html>

カウンター保存用ファイルは今までと同じ「counter.txt」というファイルを使っています。

counter.txt

では「couner3.php」と「counter.txt」をWWWサーバの同じディレクトリに設置しブラウザ経由で「counter2.php」を見ると下記のように表示されます

アクセスカウンター

ブラウザの再読み込みなどを使って同じページを再度見てみます。

アクセスカウンター

上記のようにカウンターの値が画像で表示されます。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。