アクセス・カウンタのツールチップについて

質問

今、アクセス・カウンタを自作して HTML ソースに埋め込もうとしています。
最初はテキストタイプ、次にグラフィックタイプを作成する予定ですが
作るにあたってツールチップを出せるように考えています。

カウンタの仕様は
(1)テキスト、グラフィック共に５桁の累計カウンタを表示
(2)カウンタの上にマウスを乗せると今日の訪問者数、昨日の訪問者数を表示
(3)クリックするとアクセス解析のページに移動
という仕組みを考えています。

質問内容:
(1)カウンタの上にマウスを乗せたときにツールチップを出す方法
(2)ツールチップで表示する文字列で改行する方法(有るのならば知りたい)
(3)クリップしたときに別ページに(リンク)移動する方法
上記の３つはどのように作り上げればよろしいでしょうか？

補足情報:
・私の現時点でのスキルは Perl-CGI を HTML ソースに埋め込める程度です。
　別の質問より SSI の #exec 以外で CGI を動かす方法が分かりました。
　(ちなみに http://oshiete1.goo.ne.jp/qa3364805.html です)
・HTML、CSS、JavaScript、Perl-CGI、SSI の基本を少々分かる程度です。
　Perl-GCI でタグを document.write() で標準出力すれば出来ますかね。

グラフィック・カウンタのイメージ(画像)の場合どのようにすべきか
一番お聞きしたいです。
それでは回答をお待ちしています。
よろしくお願いいたします。

回答No.3

Werner · ベストアンサー

> ＞<script type="text/javascript" src="counter_js.cgi"></script>
> の行で CGI が実行され
> その CGI の標準出力に JavaScript で HTML タグを出力する記述をする。
> その後、出力された JavaScript のスクリプトがブラウザで実行されて
> ここで仕様通りのカウンタ表示、ツールチップなどの表示が行われる。
> という解釈であっていますか？
はい、時系列はそれであっています。

> つまり CGI は２つ用意して
> 『counter_js.cgi』は JavaScript で HTML タグを出力する処理のみ。
> 『counter.cgi』で実際のアクセス・カウンタの処理と画像を出力する処理。
> という仕組みになるのでしょうか？
私は、counter_js.cgiでアクセスカウントの処理もまかなうつもりでANo.2の回答をしました。
そうでないと、画像出力（今回の例ではcounter.cgiの役割。名前と役割があってないけど。）が
必要ないテキストカウンタで
アクセス数をカウントすることができなくなってしまうので。

> 最初は１つの CGI で作り上げるのかと思いました。
> ２つ必要なのですね。
counter_js.cgiが出力したJavaScriptだけでは画像を作成できませんから
何らかの方法でカウンタ画像を作成する必要があります。
今回の場合は、画像作成を別のCGIスクリプトに行わせる方針にしたため2つ必要になってます。
（引数によって動作モードを変えるようにすれば1つのCGIスクリプトにまとめられますが、
今回の場合は分けた方が素直な気がします。）

またJavaScriptでは画像を作成できないと書きましたが
以下のような感じで数字(0～9)の画像を並べてカウンタを表現することはできるので、
そのような実装をするなら画像生成CGIは必要なくなりますね。
　<img src="0.gif"><img src="1.gif"><img src="2.gif"><img src="3.gif">

まあ、やり方は1つではありませんからいろいろ試してみるのもおもしろいと思いますよ。
もし時間があるなら、ソースコードが公開されているアクセスカウンタを探して読めば
有用な情報を得られるかもしれません。
# ここでの回答は、私ならこうするというものなので一般的かどうかまでは分かりませんしね。

お礼

回答有り難うございます。

この回答のお陰ですべてが理解できました。
最初アクセス・カウンタを作ろうとしたときに
<img src="0.gif"><img src="1.gif"><img src="2.gif"><img src="3.gif">
を考えていました。でも CGI で画像を結合して渡せることをネット上で
ダウンロード出来るサンプルより知りました。

＞まあ、やり方は1つではありませんからいろいろ試してみるのもおもしろいと思いますよ。
＞もし時間があるなら、ソースコードが公開されているアクセスカウンタを探して読めば
＞有用な情報を得られるかもしれません。
＞# ここでの回答は、私ならこうするというものなので一般的かどうかまでは分かりませんしね。
はい。
多数のサンプルを覗きならが CGI のテストをしている段階です。
CGI にパラメータを渡せば１つでカウント処理、画像出力が可能ですね。
これから色々と試してみます。

３回の回答有り難うございました。
この質問はこれで締め切ります。

回答No.2

Werner

> (1)HTML ページが開かれる時に window.onload の関数で仕様どおりのタグを出力
> (2)ブラウザが出力されたタグにきたときにその記述より CGI でカウンタを表示
> この動作であっていますか？
最後の記述は、
(1) CGIがJavaScriptを出力
(2) (1)で出力されたJavaScriptがwindow.onloadで所望のHTML文を出力
のつもりで書きました。

> タグを JavaScript で出力する前に CGI を先に実行する方法はありますか？
上に書いたように「HTML(タグ)を出力するJavaScript」を出力するCGIスクリプトを書きます。

HTMLには
　<script type="text/javascript" src="counter_js.cgi"></script>
などと書き、counter_js.cgiに(ANo.1の最後のコードのような)JavaScriptを出力させます。
（当然、カウントもcounter_js.cgiでやります。）

もし、
　<img src="counter.cgi" alt="access counter" title="今日の訪問者数XXXXX、昨日の訪問者数YYYYY">
これを出力したときにcounter.cgiの出力画像がずれることを心配しているのなら、
　<img src="counter.cgi?no=ZZZZZ">
のようにcgiの引数でカウンタの数値を渡し
counter.cgiはただ受け取った数値を画像化するだけの機能にする手もあります。
（この場合counter.cgiにもはやカウンタの機能はありませんが。）

お礼

再回答有り難うございます。

＞<script type="text/javascript" src="counter_js.cgi"></script>
の行で CGI が実行され
その CGI の標準出力に JavaScript で HTML タグを出力する記述をする。
その後、出力された JavaScript のスクリプトがブラウザで実行されて
ここで仕様通りのカウンタ表示、ツールチップなどの表示が行われる。
という解釈であっていますか？

つまり CGI は２つ用意して
『counter_js.cgi』は JavaScript で HTML タグを出力する処理のみ。
『counter.cgi』で実際のアクセス・カウンタの処理と画像を出力する処理。
という仕組みになるのでしょうか？

最初は１つの CGI で作り上げるのかと思いました。
２つ必要なのですね。
今度の解釈はあっているでしょうか？
確認の為にまた回答をお願いします。
それでは、お待ちし待ています。

回答No.1

Werner

> 質問内容:
> (1)カウンタの上にマウスを乗せたときにツールチップを出す方法
> (2)ツールチップで表示する文字列で改行する方法(有るのならば知りたい)
> (3)クリップしたときに別ページに(リンク)移動する方法
> 上記の３つはどのように作り上げればよろしいでしょうか？
カウントすることはとりあえず忘れて、
HTML(場合によっては+JavaScript)でそれらを実現する方法は分かりますか？
分かるなら、そのHTMLをカウンタの数値だけは書き換えて出力するような
CGIスクリプトなりを書けば良いと言うことになります。

> (1)カウンタの上にマウスを乗せたときにツールチップを出す方法
例えばHTMLのtitle属性を使えば、
マウスでポイントしたときに説明文を出せます。
テキストなら
　<span title="今日の訪問者数XXXXX、昨日の訪問者数YYYYY">ZZZZZ</span>
画像なら
　<img src="counter.cgi" alt="access counter" title="今日の訪問者数XXXXX、昨日の訪問者数YYYYY">

もしくはJavaScriptとCSSを駆使して実現することも可能だと思いますが、一から作るのはちょっと面倒だと思います。
# 興味あるなら"JavaScript ツールチップ"とかで検索。

> (2)ツールチップで表示する文字列で改行する方法(有るのならば知りたい)
title属性を使う場合はできないと考えておいた方が無難そうです。
# 詳しいことは"title属性 改行"で検索。

> (3)クリップしたときに別ページに(リンク)移動する方法
HTMLのアンカー要素でよいと思います。
（JavaScriptのlocation.hrefでも良いけど、敢えて使う必要もなさそう。）
　<a href="./analyzer.html" title="今日の訪問者数XXXXX、昨日の訪問者数YYYYY">ZZZZZ</a>
とか
　<a href="./analyzer.html"><img src="counter.cgi" alt="access counter" title="今日の訪問者数XXXXX、昨日の訪問者数YYYYY"></a>

実際にはXXXXXやZZZZZの値が変化しますから、
その部分をPerl/CGIで生成します。

JavaScriptをCGIから出力する場合は以下のような感じでしょうか。
（innerHTMLは私の好み。document.writeでやってももちろんかまわない。）
SSIを使うならあまり悩むところはないかな。

-----------------------------------------------------------------
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
/*実際は、このJavaScriptを外部ファイルにしてCGIに出力させる*/
window.onload = function(){
　var counter_element = document.getElementById("counter");
　if(counter_element){
　　counter_element.innerHTML = '<a href="./analyzer.html" title="今日の訪問者数XXXXX、昨日の訪問者数YYYYY">ZZZZZ</span>';
　}
}
</script>
</head><body>
<div id="counter"></div>
</body></html>

お礼

御礼が遅くなりました。
回答有り難うございます。

＞HTML(場合によっては+JavaScript)でそれらを実現する方法は分かりますか？
なんとなく分かります。

＞(1)カウンタの上にマウスを乗せたときにツールチップを出す方法
HTMLの title 属性でツールチップは出せるのですね。
alt 属性は知っていましたが IMG タグでしか使えなかったです。
title 属性なら SPAN タグでも使えますね。

＞(2)ツールチップで表示する文字列で改行する方法(有るのならば知りたい)
検索した結果は IE ブラウザだけルールを無視して改行できるようです。
この辺は任意位置での改行は行わないようにします。というより無理ですね。
了解。

＞(3)クリップしたときに別ページに(リンク)移動する方法
ソースを読み次のように解釈しましたがあっていますか？
(1)HTML ページが開かれる時に window.onload の関数で仕様どおりのタグを出力
(2)ブラウザが出力されたタグにきたときにその記述より CGI でカウンタを表示
この動作であっていますか？
この動作の場合『今日の訪問者数』が CGI が実行されるよりも前で JavaScript として
タグを出力するため CGI で『今日の訪問者数』を +1 するとタイミングにより１つ前の
数が表示されてしまいますね。

タグを JavaScript で出力する前に CGI を先に実行する方法はありますか？
JavaScript の onload 見たいな命令で CGI を真っ先に実行する方法が
あるのか、無理なのか分かりましたら教えて下さい。

無理ならタイミングがずれますがタグ出力後に CGI で『今日の訪問者数』を +1 にして使います。