隠し画像ファイルを使ったテキスト型のアクセスカウンタ (unibon)

2000年04月23日: 新規作成。
2002年09月02日: 画像データをキャッシュするように修正(textcounter.asp)。Application 変数名が他と重なっていたので変更。

静的コンテンツ(ASP でない HTML)に埋め込んで使う、隠し画像を使ったテキスト型のアクセスカウンタの一例です。
ややこしいですが、これは、IMG タグを使い、画像ファイルは使うが、カウンタの数字の表現には画像ファイルを使わず、テキストで表示するというものです。
従来、アクセスカウンタには IMG タグを使い、カウンタの数字を画像ファイルとして表示するのが一般的です。これは、画像なので、いろいろな表現ができて便利な反面、表現に凝ると、画像ファイルの大きさが大きくなって通信に時間がかかったり、また、表現のバリエーションとしてはせいぜい GIF アニメーションどまりになります。
最近は、なまじ画像ファイルをつかうよりも、ダイナミック HTML での表現のほうが、表現力が豊かになってきているため、画像は使わずにアクセスカウンタを実現したいと考えました。しかし、HTML に埋め込むには、やはり IMG タグを使わざるを得ず、そこで折衷案として、IMG タグでアクセス数の数値情報のみをサーバサイドからクライアントサイドに伝え、クライアントサイドのスクリプトにより、アクセス数を表現する方法を示します。

このページにこのカウンタを組み込んであります。実際に ASP のサーバにアクセスしています。こんな感じです。

あなたは

人目のアクセスです。

ここでのサンプルは、基本機能だけを実装しています。その他の、アクセス数のディスクへの保存や、複数ユーザへの対応などの拡張は別途おこなってください。
ちなみに、従来型の画像ファイルを使うものはこちらです。

使用例(アクセスカウンタを埋め込む静的コンテンツ textcounter.htm):

<HTML>
<HEAD>
<TITLE>隠し画像ファイルを使ったアクセスカウンタ</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function dispFunc(s) {
    if (navigator.appName.indexOf("Internet Explorer") >= 0 && parseInt(navigator.appVersion) >= 4) {
        document.all.counterstring.innerText = s;
    } else if (navigator.appName.indexOf("Netscape") >= 0 && parseInt(navigator.appVersion) >= 4) {
        var l = document.layers["counterilayer"].layers["counterlayer"];
        l.document.open();
        l.document.write("<FONT SIZE=+5>" + s + "</FONT>");
        l.document.close();
    } else {
    }
}

function loadFunc() {
    var f = 2; // オフセット
    var i = new Array(6); // 6 桁
    for (var c = 0; c < i.length; c++) {
        var g = document.images["image" + c];
        var w = g.width;
        var h = g.height;
        if (h == 1 && w >= f && w < f + 10) {
            i[c] = w;
        } else {
            dispFunc("(カウンタを表示できません)");
            return;
        }
    }

    var s = "";
    for (var c = 0; c < i.length; c++) {
        s = ("" + (i[c] - f)) + s;
    }

    dispFunc(s);
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="loadFunc()">
あなたは<H1><SPAN ID=counterstring STYLE="width:100%; filter:Glow(color=red)"><ILAYER NAME="counterilayer" width="100" height="50"><LAYER NAME="counterlayer"></LAYER></ILAYER></SPAN></H1>人目のアクセスです。
<IMG NAME=image5 SRC="textcounter.asp?col=5">
<IMG NAME=image4 SRC="textcounter.asp?col=4">
<IMG NAME=image3 SRC="textcounter.asp?col=3">
<IMG NAME=image2 SRC="textcounter.asp?col=2">
<IMG NAME=image1 SRC="textcounter.asp?col=1">
<IMG NAME=image0 SRC="textcounter.asp?col=0">
</BODY>
</HTML>

アクセスカウンタ本体(textcounter.asp):

<%@Language=VBScript EnableSessionState=False%><%Option Explicit%><%
Function getColumn(ByVal x, ByVal c)
    Dim y
    y = CLng(Left(Right("0000000000" & CStr(x), c + 1), 1))
    getColumn = y
End Function

If IsEmpty(Application("dummygifs")) Then
    Dim a
    a = Array( _
    &H47, &H49, &H46, &H38, &H39, &H61, &H01, &H00, _
    &H01, &H00, &H80, &HFF, &H00, &HFF, &HFF, &HFF, _
    &H00, &H00, &H00, &H2C, &H00, &H00, &H00, &H00, _
    &H01, &H00, &H01, &H00, &H00, &H02, &H02, &H44, _
    &H01, &H00, &H3B)

    Dim g(9)
    Dim h
    For h = 0 To 10 - 1
        a(6) = h + 2
        a(24) = h + 2
        Dim x
        x = ""
        Dim i
        For i=0 To UBound(a)
            x = x & ChrB(a(i))
        Next
        g(h) = x
    Next
    Application("dummygifs") = g
End If

Dim c
c = Request.QueryString("col")
If IsEmpty(c) Then
ElseIf Not IsNumeric(c) Then
ElseIf CLng(c) >= 0 And CLng(c) < 10 Then
    Dim k
    k = getColumn(Application("textcounter"), CLng(c))
    If CLng(c) = 0 Then
        Call Application.Lock()
        Application("textcounter") = CLng(Application("textcounter")) + 1
        Call Application.Unlock()
    End If
    Response.ContentType = "image/gif"
    Call Response.AddHeader("Cache-Control", "no-cache")
    Call Response.AddHeader("Pragma", "no-cache")
    Call Response.BinaryWrite(Application("dummygifs")(k))
Else
End If
%>

ASP の目次
ホーム
(このページ自身の絶対的な URL)