本文へスキップ

Clamini library

アクセスカウンター2

 CANVASを活用して、アクセスカウンターを作ってみたよ。数値をJavaScriptで表示するタイプで、 ちょっとした実験気分で楽しめるかも。なので、画像ファイルを用意する必要はないです。

アクセスカウンターの仕様


 個人サイトでの使用を想定した、アクセスカウンターを作ってみました。JavaScriptを使ってCANVASに表示させていて、 Perl部では、数値のカウントアップやファイルへの読み書きなどの内部処理を行わせています。画像ファイルなしで、GIFアニメっぽく表示させることを目指してみました。 カウントアップ処理に、連続カウントの防止機能を付加しています。なお、一部の環境では動かない可能性がありますので、ご了承ください。

出力サンプル


 左右に数字が揺らめきます。サンプル画像では、数値の加算等は行われません。

ダウンロード用ファイル


 下のリンクからファイルをダウンロードできます。

 ※ZIP形式で圧縮されてるので、使う前に解凍してください! count2.zip

圧縮ファイル展開後のファイル構成


 count.cgi・・・メインプログラム(Perl)
 count.js・・・メインプログラム(JavaScript)
 ./dat/access.log・・・データ保存用ファイル
 ./dat/count.txt・・・データ保存用ファイル
 ./dat/ip_limit.txt・・・データ保存用ファイル
 readme.txt・・・注意事項記載ファイル(実行時不要)

設置方法と使い方


 展開したファイルを、使用する環境に合わせてアップロードしてください(readme.txtはアップロードしないで下さい)。 その後、設置するサーバーに合わせてパーミッションの設定を変更しましょう。 フォルダ名等が、デフォルトの設定と異なる場合は、コードに記載されているコメントなどを見て変更を行います。 あとは、カウンターを設置したいところ(HTMLファイル内など)に、以下の記述を行います。スクリプト(count.js)の呼び出しは、自身が設置した場所を記述しましょう。


<canvas id="counter" width="80" height="20"></canvas>
<script src="./count.js" defer></script>