アクセスカウンターCANVAS出力仕様
HTMLのCANVAS機能を活用して、アクセスカウンターを作ってみたよ。画像ファイルを用意する必要はないです。
アクセスカウンターの仕様
個人サイトでの使用を想定した、アクセスカウンターを作ってみました。JavaScriptを使ってCANVASに表示させて、
画像ファイルなしでGIFアニメっぽく表示させることを目指してみました。
Perl部では、数値のカウントアップやファイルへの読み書きなどの内部処理を行い、連続カウントの防止機能を付加しています。
なお、一部の環境では動かない可能性がありますので、ご了承ください。
出力サンプル
左右に数字が揺らめきます。サンプル画像では、数値の加算等は行われません。
ダウンロード
下のリンクからファイルをダウンロードできます。
count.zip ※ZIP形式で圧縮されてるので、使う前に解凍してください!
圧縮ファイル展開後のファイル構成
| count.cgi | メインプログラム(Perl) |
| count.js | メインプログラム(JavaScript) |
| ./dat/access.log | データ保存用ファイル |
| ./dat/count.txt | データ保存用ファイル |
| ./dat/ip_limit.txt | データ保存用ファイル |
| ./dat/index.html | ダミーファイル |
| ./dat/.htaccess | 不正閲覧防止用ファイル |
| readme.txt | 注意事項記載ファイル(実行時不要) |
設置方法と使い方
設置の際は、展開したファイルを使用する環境に合わせてアップロードしましょう(readme.txtはアップロードしないで下さい)。
その後、設置するサーバーに合わせてパーミッションの設定を変更します。フォルダ名等がデフォルトの設定と異なる場合は、コードに記載されているコメントなどを見て変更が必要です。
呼び出し側(カウンターを設置したいところ)には、以下のように記述を行います。スクリプト(count.js)の呼び出しは、自身が設置した場所を記述しましょう。
|
<canvas id="counter" width="80" height="20"></canvas> <script src="./count.js" defer></script> |