Windows でカウンターを表示させる

Windows 系 OS 上で Apache を動かし、アクセスカウンターを表示させる場合の方法を記述しています。

基本的な環境

環境は、
Windows XP SP2
Apache/2.0.54 (Win32)
ActivePerl 5.8.6 Build 811
ImageMagick 6.2.0-0 Q16
と言うものです。

ここで、
Apache/2.0.54 (Win32)
ActivePerl 5.8.6 Build 811
はインストール済みとして話を進めます。インストールされていない方はまず、インストールを行ってからこのサイトの説明をお読みください。

さて、自宅で Web サーバーを運営していて感じることは、「プロバイダのサーバーで提供しているような基本的な機能が必要だ。」ということですね。掲示板しかり、カウンターもそうですね。でも、カウンターって意外と面倒だったりしますよね。

今回カウンターを設置する方法をまとめてみました。あまりたいしたことではないのですが、どなたかの参考になればと、アップしました。

カウンター、文字だけであればいいのですが、画像として表示させなければなりません。文字だけであればいいのですがと書きましたが、文字をブラウザで、それも都度変化するものを表示させるのが意外と難しいですね。html ファイルそのものを cgi で出力するのであれば簡単でしょうが、既にある html ファイルのある部分だけを書き変えることって難しいんです。

画像データとして表示させると言っても、実は次のような作業をしなければなりません。それぞれの桁の数値を表す数字画像を一つの画像として連結し、表示させるんですね。これを担当するのが ImageMagic と言うわけです。ImageMagick はフリーソフトですが、その機能は大変豊富です。カウンターだけじゃなく、グラフなどを出力することも可能になります。アンケートなどの結果をすぐにグラフで、たった今回答されたデータも含めてグラフ化するなどの作業が出来ます。また、perl などで画像を読み込み・出力することもとても簡単になります。

ImageMagick のインストール

まずは ImageMagick のダウンロードから行いましょう。
http://www.imagemagick.org/script/index.php
から Windows 版をダウンロードしてください。ダウンロードは、ImageMagick のサイトから Binary Releases にあるものを選びます。Download からだとインストーラが付属しないものとなってしまうようで、注意してください。詳しい方はこちらのものでも可能なのかもしれませんが、私にはわかりません。Windows Binary Release から Dynamic at 16 bits-per-pixel を選択します。どこかに仮保存すればよいでしょう。(参考までに、このようにネットでダウンロードしたファイルは、わかりやすい場所にきちんと保存しておいた方がいいですよね。インストールしてしまえばもう使わないと、すぐに削除してしまうと後で大変。ダウンロードしたサイトが見つからなかったり、あっても該当するファイルはもう一覧になかったり。必ずどこかにとっておきましょう。)

ダウンロードが完了したら、ダウンロードしたファイルを実行すればインストールが始まります。インストールで注意しなければならない点を、インストール画面で説明しておきます。

インストール開始

インストール用のファイルを起動すると、上のような画面が表示され、インストールが始まります。この後、オプションが幾つか表示されます。注意しなければいけないオプションを解説しましょう。

インストール先の選択

インストール先はどこでもいいようです。ImageMagick 既定のフォルダでいいでしょう。

連動して動作するものを選択

上記の選択画面で、
Install PerlMagick for ActiveState Perl v5.8.6 build 811
にチェックを入れます。
ちなみに既定は、
Create a desktop icon
Update executable search path
の二つです。
Install ImageMagickObject OLE Control for VBscript, Visual Basic, and WSH
は必要ありません。Windows プログラムでも ImageMagick を利用するのであれば、チェックしておいた方が便利でしょう。

インストールの完了

インストールが完了すれば、上のようなメッセージが表示されます。OK をクリックして終了してください。

ppm を利用してモジュールをインストール

さらに、perl と連動するモジュールをインストールしなければなりません。これがちょっと面倒というか、コマンドプロンプトから行うので、慣れていないと戸惑いますかね。
ActivePerl には、 ppm と言うモジュール管理ソフトがあります。これを使って ImageMagick の perl モジュールをインストールします。
コマンドプロンプトを起動します。そこでppmと入力、Enterします。
赤字で入力文字を表示、Enterはで記してみました。

C:\Documents and Settings\user>ppm▼
PPM - Programmer's Package Manager version 3.1.
Copyright (c) 2001 ActiveState Corp. All Rights Reserved.
ActiveState is a devision of Sophos.

Entering interactive shell. Using Term::ReadLine::Stub as readline library.

Type 'help' to get started.

ppm>

ppm> というコマンドプロンプトが表示され、ppm が起動しました。

最初に ppm を起動すると、接続先をどうする?等の質問項目があったと思います。そのような問い合わせが出てきた場合には、適当に選びましょう。と言うことで、今まで一度も起動したことのない方は、まず ppm の使い方の解説サイトをご覧になってください。よろしくお願いします。

次に、ImageMagick に関係するモジュールを探します。search コマンドで ImageMagick を探します。

ppm> search ImageMagick▼

Searching in Active Repositories

1. Apache-ImageMagick [2.0b7] Convert and manipulate images on the fly

2. Apache-ImageMagick [2.0b7] Convert and manipulate images on the fly

ppm>

結果は二つです。この二つは、多分同じものなんだと思います。保存されている場所が違うというようなことから、二つ表示されているのでしょう。
ということで、1.をインストールしましょう。install と 1 の間に半角スペースを入れます。

ppm> install 1▼
Package 1:
====================
Install 'Apache-ImageMagick' version 2.0b7 in ActivePerl 5.8.7.813.
====================
Downloaded 10991 bytes.
Extracting 6/6: blib/arch/auto/Apache/ImageMagick/.exists
Installing C:\usr\local\bin\html\site\lib\Apache\ImageMagick.html
Installing C:\usr\local\bin\site\lib\Apache\ImageMagick.pm
Installing C:\usr\local\bin\site\lib\CGI\ImageMagick.pm
Successfully installed Apache-ImageMagick version 2.0b7 in ActivePerl 5.8.7.813.

ppm>

これで Apache-ImageMagick がインストールされました。
せっかくですので、インストールされている perl モジュールを一覧表示させて見ましょう。

ppm> query *
Querying target 1 (ActivePerl 5.8.7.813)
1. ActivePerl-DocTools [0.5] Maintain HTML documentation
2. Apache-ImageMagick [2.0b7] Convert and manipulate images on the fly
3. Archive-Tar [1.23] Manipulates TAR archives
4. Archive-Zip [1.14] Provide an interface to ZIP archive files.
5. Compress-Zlib [1.34] Interface to zlib compression library
6. Data-Dump [1.6] Stringified Perl data structures
7. Digest-HMAC [1.1] Keyed-Hashing for Message Authentication
8. Digest-MD2 [2.3] Perl interface to the MD2 algorithm
9. Digest-MD4 [1.5.0.1] Perl interface to the MD4 algorithm
10. Digest-SHA1 [2.10] Perl interface to the SHA-1 algorithm
11. File-CounterFile [1.4] Persistent counters
12. Font-AFM [1.19] Interface to Adobe Font Metrics files
13. HTML-Parser [3.45] Parsing of HTML documents
14. HTML-Tagset [3.4] Data tables useful in parsing HTML
15. HTML-Tree [3.18] Build and scan parse-trees of HTML
16. Image-Magick [6.2.3] ImageMagick PERL Extension
17. IO-String [1.6] Emulate file interface for in-core strings
18. IO-Zlib [1.4] IO:: style interface to Compress::Zlib
19. libwww-perl [5.803.0~ Web API for Perl
20. MD5 [2.3] Deprecated. Use Digest::MD5 instead.
21. MIME-Base64-Scripts [1.0] Scripts to encode/decode base64 and quoted~
22. SOAP-Lite [0.55.0.~ Interface to the Simple Object Access Prot~
23. Term-ReadLine-Perl [1.0203]
24. TermReadKey [2.30] Change terminal modes and perform non-bloc~
25. Text-Autoformat [1.12] Automatic text wrapping and reformatting
26. Text-Reform [1.11] Manual text wrapping and reformatting
27. Tk [804.27.~ Tk - a Graphical User Interface Toolkit
28. Unicode-String [2.7] Unicode abstraction based on UTF-16
29. URI [1.35] Uniform Resource Identifier references (RF~
30. XML-Parser [2.34.0.~ Parsing of XML documents
31. XML-Simple [2.14] Easy API to maintain XML (esp config files)
ppm>

perl に関係するものを赤字でマークして見ました。これでインストールは終わりですので、q を入力して ppm を終了してください。

ppm> q▼

C:\Documents and Settings\user>

一連の処理で、perl から ImageMagick を利用することが出来るようになりました。最後に cgi スクリプトの一部を載せておきます。参考にしてください。

#!/usr/local/bin/perl

use strict;
#ImageMagick を利用する。
use Image::Magick;

#CGI を利用します。
use CGI;

#ImageMagick CGI 用の変数を準備します。
my $image = Image::Magick->new;

my $q = new CGI;


#カウント数
#(この数はファイルに保存するなどの通常のカウンター処理で算出してください。)
my $c_data;
#$c_data = 520;#適当にこんな数字を入れて、うまく動くか検証するものよいでしょう。

my @c_data;#カウントを一文字一文字入れる変数


#カウンターの値が7桁より小さかったら0で埋めます。
$c_data = substr('000000'.$c_data, -7, 7);

#それぞれの数値を分解します。
@c_data = split //, $c_data;

#下記の処理が要の処理でしょうか。
#それぞれの値に合った画像ファイルを読み込みます。
#count_0_0.gif から count_0_9.gif まで、0から9の数値画像を用意しています。
foreach (@c_data) {
$image->Read('./graphic/count/count_0_'.$_.'.gif');
}

#ImageMagick で合成処理します。
#横に追加合成して行くときは、stack=>"" です。この "" には何も入れません。
$image = $image->Append(stack=>"");


#gif 画像として出力
print "Content-type: image/gif\n\n";
#Windows 固有の処理ですね。
binmode (STDOUT);
#ImageMagick のコマンドです。
#先ほど読み込んで合成したファイルを gif 画像として出力します。
$image->Write('gif:-');





exit ();

以上が処理の流れです。
あくまでも処理の一部ですので、このスクリプトだけでは動きません。

なお、html よりの呼び出しですが、こちらは画像として呼び出します。
<img src=""> とし、"" に cgi ファイルの場所を、html ファイルからの相対位置または絶対位置で指定します。絶対位置での呼び出し以外応答しないようにした方が、セキュリティ上安全のような気がしますね。たとえば <img src="http://www.rinzo2.jp/xxx.cgi"> のように記述します。
html より cgi を起動する方法と言うか、呼び出し方は、詳しいサイトがたくさんあると思いますので、そちらをご覧ください。

画像の用意、カウントデータの保存などは、どこか別のサイトを参考にしてください。
きちんと全部を掲示できず、ごめんなさい。今使っているものをそのまま掲示してしまうことは、フォルダー構造などをそのまま外部に公表してしまい、セキュリティ上問題です。
また、この点をすべて修正し、利用できる状態で公表するためには、かなりの時間を必要とします。申し訳ございません。

最後に、このページは、あくまで私間宮正孝が行った一連の操作をまとめたものです。この記述を参考にしていただくことは大変うれしく思いますが、この記述でうまく行くとは限らないと思います。そのあたりはあくまで自己責任で、ネット上にあるさまざまな情報の一つとしてご利用ください。よろしくお願いいたします。なんせ適当に、やってみたら動いちゃったぞー!ってやり方しかしてません。ちゃんと専門的な知識の裏付けでやってるわけじゃないんですね。それでも動いちゃうところにおもしろさもあるんですけど(^_-)-☆

下のカウンターは、上記で解説したような方法で表示させています。自分で数値画像を幾つか用意すれば、簡単にデザインも変更できます。これであなたもプロバイダのホームページと同じデザインのカウンターを埋め込むことが出来ますね。って、これだけじゃ自慢にはならないよなー。たぶんどこかのフリー cgi を借りてきた方が早いし綺麗でしょうね。でも、商用というか、個人のサイトじゃないものを運営するような時は、フリー cgi は注意しなきゃいけないですよね。やっぱり利用するためにそれなりの費用をお支払しなければならなかったり、そう言うケースが多いです。それがいやだってことになると、私のようにお金がなかったりってね、時間と労力を必要とするってーことでしょうかねー。あーあ、疲れた(~_~)

total
yesterday
today