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

アクセスカウンターの設置は最近減ってきたかもしれませんが、作ることがあったのでメモ。今回はHTMLでjQueryを読み込み、Ajax()でPHPを実行させ、あらかじめ用意しておいた画像でアクセス数を出力させる方法です。PHPは動作するけど既にあるHTMLファイルにアクセスカウンターを表示させたい場合に便利かと思います。

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>」を用意しておきます。

【javascript】count.js

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

【PHP】count.php

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

まとめ

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

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Category

Archive