1.簡易ぎじりんの製作
IE,NNに対応

 通常のリンクをつくるには、<A>タグを使って

<A HREF="http://www.yahoo.co.jp/">YAHOO</A>
のようにするのが普通である。こうすると、ブラウザで表示したときには、<A>タグで囲まれた部分の文字色が青くなり下線が引かれる1。そこで、我々はまず、文字の色を青色にして、下線を引くところから始めた。ソースは、
<FONT COLOR="blue"><U>YAHOO</U></A>
のようになる。そして、その出力結果を表1.0に示す。

表1.0 文字を青色にして、下線を引いた場合

通常リンクぎじりん
出力結果YAHOOYAHOO
ソース<A HREF="http://www.yahoo.
co.jp/">YAHOO</A>
<FONT COLOR="blue"><U>YAH
OO</U></FONT>

 我々は、上の二つの出力結果を比較して、ぎじりんの完成度を検討してみた。二つの出力結果は一見したところ、全く同じ物であるかのように見える。実際に、見かけ上は全く同じである。

 違いが出るのはマウスをリンク上に載せたときである。通常のリンクにマウスを載せると、マウスのポインタが指のマークになるが、このぎじりんの場合は他の文字部分と変わらない(下図参照)。

図1.1 インターネットエクスプローラーの場合

図1.2 ネットスケープナビゲータの場合

この点を除けば、ぎじりんは完璧であり、マウスをリンクの上に乗せない限りは両者の差は分からないのだ。最初にしては、なかなか完成度の高いぎじりんを作ることができたことは、我々の大きな喜びであった。

 しかし、ぎじりんに完成度を求める我々としては、この程度で満足するはずもなく、よりよいぎじりんを目指して更なる開発に着手するのであった。

1ブラウザ側の設定で、リンクの色を変えたり、下線を引かなくする事も可能である。しかし、<BODY>タグの属性やスタイルシートなどを用いれば、リンクの色やで下線の有無を設定することができる。WEBサイトのほとんどが上記の方法でリンクカラーや下線の有無を設定していることから考えても、ブラウザ側でのこの設定をすることの意味はないように思える。そんなこともあってか、実際に筆者の周辺でリンクの色を変えている人を見たことはない。


2.マウスがリンクにのったときの処理
IE4以上に対応

 我々は、前回の問題点を解決する方法をもとめて、WEB上をさまよった。すると、どうもスタイルシートという技術を使えば、文字列にマウスがのったときのマウスのカーソルを変えられることを突き止めた。ただし、この方法はインターネットエクスプローラー(以下IE)4.0以上でないとできないことも分かった。この方法ではIE3以下や、ネットスケープナビゲーター(以下NN)では、カーソルを変えることができず、別の方法もないようである。

 このことは、当委員会にとっては非常に悔しいことであったが、現在のインターネット人口のうち、IE4.0以上の使用者は70%をこえているらしいので、十分に実用的であるといっていいと思う。

表2.0 マウスをのせたときの問題回避−その1

通常リンクぎじりん
出力結果YAHOOYAHOO
ソース<A HREF="http://www.yahoo.
co.jp/">YAHOO</A>
<FONT COLOR="blue" STYLE="c
ursor:hand"
><U>YAHOO</U></F
ONT>

ここまで来ると、IE4以上のユーザーには、クリックするかHTMLソースを見るまでは、ぎじりんとは分からないだろう。初心者なら、ぎじりんを何回もクリックして、「あれ?なんでヤフーに行かないんだろう?WINDOWSが壊れたんだろうか?」と迷ってしまうに違いない。かなりいいできになってたぞ。我々は、にやけざるを得なかった。

 しかし、まだ完璧ではなかったのだ。ブラウザの最下部に表示されている、通称「ステータスバー」という部分に、本物のリンクとぎじりんの差が現れてしまっているではないか!この部分を改善してはじめて、クリックするまでは外見がまったく同じぎじりんが完成するといえるだろう。

図2.1 IEのステイタスバー
IEのステータスバー



3.マウスがリンクにのったときの処理2
IE4以上に対応

 我々は、ここで大きな壁につまずいた。はたして、ぎじりんの上にマウスがのったときに、ステータスバーに「疑似リンク先」を表示することができるのだろうか。そんな技術は知らなかったのだ。しかし、この関門さえ抜ければ、外見上も、マウスを乗せたときも、通常のリンクと寸分たぐわぬ「ぎじりん」を作ることができるのだ。我々は、自分たちにそう言い聞かせて、調査の手をゆるめなかった。そのことが効を奏したようである。長時間に渡るネットサーフィンの末に、とうとう見つけたのだ!!

表3.0 マウスをのせたときの問題回避−その2

通常リンクぎじりん
出力結果YAHOOYAHOO
ソース<A HREF="http://www.yahoo.
co.jp/">YAHOO</A>
<FONT COLOR="blue" STYLE="c
ursor:hand" onMouseOver="st
atus='http://www.yahoo.co.j
p/';" onMouseOut="status=''
;"
><U>YAHOO</U></FONT>

 ひやっほう!完成じゃないか!これで、見かけは愚か、マウスを乗せたときでさえ同じように振る舞う「ぎじりん」の完成だ!クリックしてみないと普通のリンクか「ぎじりん」かどうか判断できないときた!

 しかし、喜ぶのもつかの間。これもやはり、NNではうまく行ってくれない。どうも、ネットスケープ社というのは、ぎじりん製作委員会に冷たいようである。まあいいや。アメリカでもIEの使用率が80%超えたっていうし、IEユーザーのみ騙せればいいか。我々は、そう結論を下した。

 聞くところによると、セキュリティー面を重視するならNNの方がいいらしい2。ネットスケープ社は、初めっから「ぎじりん」のような、ユーザーを混乱させるようなことを行えないようするために、わざと「ぎじりん」を作る手だてをなくしたのかもしれない。おそるべし、ネットスケープ社・・・。

2さらにセキュリティーを追求するなら、OSにwindowsを使わずにUNIXを使用するようだ。どちらにせよ、マイクロソフトの製品は、セキュリティーに欠陥が多いらしく、そこらへんをアンチマイクロソフトの人は突っ込んでいる。


4.上品なぎじりん
IE4以上に対応

 さて、前回の調査までで、ぎじりんの製作は終わったかにみえた。しかし、我々はまだ、発展の余地があるとして、製作の手をゆるめなかった。そう、調査においては、向上心こそが最も重要なのだ。

 我々の次なる目標は、「通常のリンクと同様に振る舞うぎじりん」を製作することである。つまり、ヤフーのぎじりんをクリックすると、本当にヤフーに飛んでいくようにしよう、ってこと。なに?これじゃあ、本物のリンクと変わらないじゃないかって?ちっちっち。甘いな。これこそ、ぎじりんの真骨頂だと思いません?だって、一般ピープルは、ぎじりんと気付かないまま、ぎじりんをクリックして気付かないまま次のページへといく・・・。嗚呼、なんと上品なぎじりんであることか。人々は、その存在さえも気付かないまま通り過ぎて行く・・・。しかし、彼はあくまでもぎじりんとして存在する。まるで、平安貴族の女性であるかのような、しとやかな振る舞いではないか。

 さて、前置きはこれくらいにして、我々はこの人をだますということを知らない、清純なぎじりんの製作にとりかかった。今回は前回ほど調査は難航しなかった。我々の調査技術も、だいぶ向上してきたようである。

表4.0 クリックすると本当にヤフーに行けるぎじりん

通常リンクぎじりん
出力結果YAHOOYAHOO
ソース<A HREF="http://www.yahoo.
co.jp/">YAHOO</A>
<FONT COLOR="blue" STYLE="c
ursor:hand" onMouseOver="st
atus='http://www.yahoo.co.j
p/';" onMouseOut="status=''
;" onClick="location.href='
http://www.yahoo.co.jp';"
><
U>YAHOO</U></FONT>

 上の「ぎじりん」をクリックしてみると・・・。ほら、ちゃんとヤフーに行ったでしょ?あ、ちゃんとこのページに戻ってきてくださいね(笑)。

 これこそ、自分が「ぎじりん」であると自己主張をしないおしとやかな「ぎじりん」なのだ。しかし、全く通常のリンクと同じというわけではない。やっぱり、ぎじりんは所詮ぎじりんなのだ。例えば、右クリックしたとき、両者の動作は大きく異なる。さらに、すでに訪れたことのあるリンク先でも、同じ色で表示してしまっている3。これはもう、しょうがない。我々の力の及ぶ範囲ではない。非常に残念ではあるが、しかたがないだろう。

 あ、言い忘れてたけど、やっぱりNNではクリックしても、何も起こりません。おそるべし、ネットスケープ社4

3一回行ったことのあるページ(厳密には、ハードディスクにキャッシュ済み)の場合、リンクが別の色で表示される機能のこと。キャッシュ済みのリンク色は、<BODY VLINK="#色">やスタイルシートで指定できる。

4NN4.Xでは「onClick」属性が有効になるタグは、<A>タグ、<INPUT>系タグのみだから。それに対し、IEではたいていのタグで「onClick」が使える模様。NNでも、レイヤー機能を使えば上記のような方法でぎじりんを作成できそうだが、そこまでするか・・・って感じでしょ?(笑)



5.下品なぎじりん
IE4以上に対応

 お上品なのを作ったら、次は下品なのを製作しちゃおう。「ぎじりん」を本物のリンクであると思ってクリックした一般ピープルを、大混乱におとしいれてやろうってのが、この「下品なぎじりん」。早速、下のサンプルをクリックしていただきたい5

表5.0 ヤフーがサーバーダウン!?

通常リンクぎじりん
出力結果YAHOOYAHOO
ソース<A HREF="http://www.yahoo.
co.jp/">YAHOO</A>
<FONT COLOR="blue" STYLE="c
ursor:hand" onMouseOver="st
atus='http://www.yahoo.co.j
p/';" onMouseOut="status=''
;" onClick="alert('インター
ネットサイト http://www.yaho
o.co.jp/を開けません。\n\nサ
ーバーに接続できませんでした')
;
"><U>YAHOO</U></FONT>

 これはかなり悪質な「ぎじりん」ですな。きっと、この「ぎじりん」をクリックした人は、あれ?ヤフーがサーバーダウンだぞ?って思うか、接続が切れたかな?もう1回ダイアルアップしてみよう、とか思うはず。

 嗚呼、なんと悪質な「ぎじりん」だろうか6。我々は、この「ぎじりん」を闇に葬ることを決意したのであった・・・。

5やはり、NNではクリックしてもなにも起こりません。あしからず・・・。

6IEで見ていただければわかると思うけど、まじでサーバーに繋がらないときと一緒でしょ?ただ、「サーバーに接続できません」っていうメッセージが出るのが早いけどね。onClickの中に、「for(i=0;i<500;i++){;}」とかを入れれば、出るのが遅れるけど・・・。って、マネして信用失っても知りませんよ?(笑)



6.画像ぎじりんを作れ!
IE4以上に対応

 文字の「ぎじりん」は大体こんなもんであろう。次に、我々は画像ぎじりんの製作に全力を費やすことにした。一見難しそうに思えたが、我々には文字のぎじりんを製作する際のノウハウを最大限に生かすことによって、比較的容易に「画像ぎじりん」を作成することができた。

表6.0 画像ぎじりん(クリックしても反応なし)

通常リンクぎじりん
出力結果
ソース<A HREF="http://www.yahoo.
co.jp/"><IMG SRC="http://w
ww.yahoo.co.jp/images/reci
p_sm.gif" BORDER=0></A>
<SPAN STYLE="cursor:hand" onM
ouseOver="status='http://www.
yahoo.co.jp/';" onMouseOut="s
tatus='';"><IMG SRC="http://w
ww.yahoo.co.jp/images/recip_s
m.gif"></SPAN>

表6.1 画像ぎじりん(クリックするとちゃんと機能)

通常リンクぎじりん
出力結果
ソース<A HREF="http://www.yahoo.
co.jp/"><IMG SRC="http://w
ww.yahoo.co.jp/images/reci
p_sm.gif" BORDER=0></A>
<SPAN STYLE="cursor:hand"
onMouseOver="status='http:
//www.yahoo.co.jp/';" onMo
useOut="status='';" onClic
k="location.href='http://w
ww.yahoo.co.jp';"
><IMG SRC
="http://www.yahoo.co.jp/i
mages/recip_sm.gif"></SPAN>

表6.2 画像ぎじりん(BORDER属性がない場合)

通常リンクぎじりん
出力結果
ソース<A HREF="http://www.yahoo.
co.jp/"><IMG SRC="http://w
ww.yahoo.co.jp/images/reci
p_sm.gif"></A>
<TABLE BGCOLOR=blue CELLPA
DDING=2 CELLSPACING=0 BORD
ER=0><TR><TD><TABLE BGCOLO
R="#背景色" WIDTH="100%" B
ORDER=0 CELLPADDING=0 CELL
SPACING=0><TR><TD>
<SPAN ST
YLE="cursor:hand" onMouseO
ver="status='http://www.ya
hoo.co.jp/';" onMouseOut="
status='';"><IMG SRC="http
://www.yahoo.co.jp/images/
recip_sm.gif"></SPAN></TD>
</TR></TABLE></TD></TR></T
ABLE>

 勢いあまって、3パターンも作ってしまった。悲しいことに、やっぱりいずれもNNでは、うまいこと動作してくれないようだ。やはり、NNユーザーをだますことはできないらしい。それでも、まぁ、IEユーザーなら、きっとだまされるだろう。

 このことは、「ぎじりん」にだまされたくなかったら、ネットスケープナビゲーターを使うべしということを示唆しているのかもしれない。



7.<A>タグを改造して
IE4,NN3以上に対応

 さて、画像ぎじりんも完成して一段落していたところに、我々の相談役でもあるY氏から一つの重要なアドバイスが舞い込んできた。「別に<A>タグを使って、『ぎじりん』を作ってもよいのでないかえ?」 我々は、この言葉にはっとさせられた。

 そうだ、今までリンクを偽造しようとムキになっていたが、<A>タグを改造してもよいのではないか。我々は、頭が凝り固まっていたようである。やはり、他人のアドバイスというのは心強い。視野を、一気に広げてくれたY氏に感謝である。

 周知の通り、<A>タグはリンクをはるときに使うHTMLタグである。そのタグを機能させなくするにはどうしたらいいのであろうか。この命題は、予想以上にわれわれを悩ませた。久々の難題である。一体、どういう方向からアプローチすればよいのか、全く検討がつかないのだ。しかし、乗りかかった船。こんな所で挫折するわけにはいかない。我々は、全く新しいタイプのぎじりんを製作できるかもしれないのだ。そして・・・、遂に完成したのである。

表7.0 <A>タグ改造型ぎじりん

通常リンクぎじりん
出力結果YAHOOYAHOO
ソース<A HREF="http://www.yahoo.
co.jp/">YAHOO</A>
<A HREF="http://www.yahoo.co.
jp/" onClick="return false;">
YAHOO</A>

 我々は、この多機能ぶりに驚愕した。すごい、すごすぎる。今まで、なぜこのアプローチに気付かなかったのだろう。<A>タグを使って「ぎじりん」を製作することに、多少プライドが許さない部分もあるにはあるが、ここまでの高機能さを見せつけられると、認めざるをえなくなるものだ。どう高機能であるかというと・・・

おそるべし長所
1.IEでもNNでも、どっちでもOK♪
2.右クリックしたときの反応も、本物のリンクと同じ
3.なによりも、ソースが簡潔

こんなところでしょうか。いや、すごいでしょ?特にすごいのが、1。今まで、だませなかった・・・もとい、無力であったNNユーザーに対しての対抗策が見つかったのである。素晴らしいじゃないですか。恐れ入ったか、ネットスケープ社!!もう、我々に向かうところ敵なし、という感じですわ。おほほほほ♪

 さらに、恩恵は続くわけで、2もなかなかでしょ?試しに「ぎじりん」の上で右クリックしてみると・・・ほらね。さらに、キャッシュ済みリンクの色7、クリックしたときのリンクの色8も対応しているし、スタイルシートのhover9にも対応してるしさ。もう、今まででいちばんの優秀作ですわ♪

 しかし、やっぱり弱点はあるもの。更なる追跡の結果、いくらかの弱点が浮かび上がってきたのだ。今までのが、一から作った「ぎじりん」であるのに対して、本物のリンクの働きを封じることによって完成したのが、この「ぎじりん」。どうしても完全に封じ切ることの出来ない場合だって出てくるようである。

残念ながらの短所
1.右クリックのメニューから開くことができる
2.JavaScriptをオフにすると無力
3.IE3、NN2以下では、動作しない?

先程、「ぎじりん」の上で右クリックしても、本物と変わらないって書いたけど、実はそのあとに落とし穴があったわけ。右クリックして出てくるメニューの中の「新しいウインドウで開く」(IEの場合は「開く」でもOK)を選択すると、、、ちゃんとヤフーに飛んでいっちゃうわけ。また、ブラウザの設定をJavaScriptオフにしておくと、普通にクリックしただけで、ヤフーに飛んで行ってしまう模様。これじゃ、普通のリンクと変わらないぢゃん。3つ目は未確認。なんせ、今時、IE3かNN2のユーザーなんて、周りにいないし・・・。

 なにはともあれ、我々は完成度に満足し、この「ぎじりん」を完成品と位置づけて、さらに『文字ぎじりん(完全型)』と名づけることにした。



 さて、こんなに高機能な「ぎじりん」を作ったからには、応用しない手はない。もう、<A>タグを使わないことにこだわっていたプライドなど、我々は忘れてしまっていた。なんせ、NNにも対応していて、右クリックにもある程度反応する「ぎじりん」である。プライドなどという些細なものにしがみついていては、いいものはできないものである。今までのアプローチが遠回りであったと認めざるをえないようだ。

 我々は、意気揚々と「画像ぎじりん(完全型)」の製作をすることにした・・・。

7一回行ったことのあるページ(厳密には、ハードディスクにキャッシュ済み)の場合、リンクが別の色で表示される機能のこと。キャッシュ済みのリンク色は、<BODY VLINK="#色">やスタイルシートで指定できる。

8リンクをクリックしたとき、リンクが別の色で表示される機能のこと。実際には、クリックした直後にリンク先が表示されるので、あまり意識されることはないと思う。IEでは、ブラウザのバックボタン等で戻ってきたとき、クリックしたリンクが、その色で表示されている。<BODY ALINK="#色">やスタイルシートで指定できる。

9スタイルシートで、A:hover{color:#色}とすると、マウスが上に乗ったときのリンク色を変更できる。同じようにして、マウスが乗ったときの下線の有無なども指定することができる。これはIEのみで有効だが、この機能を使用しているwebページは多い。その部分がリンクであると分かるし、視覚的にも印象的なので、好んで使用している人が多いようである。



8.最終章−画像ぎじりんの完成−
IE4,NN3以上に対応

 前回で、「ぎじりん」は大幅なパワーアップをした。これにより、「文字ぎじりん」の開発は終了した。同じ手法によって「画像ぎじりん」をレベルアップさせさえすれば、我々の任務は終結する。フィナーレに向かって、作業の進度もますます加速していったのだ。

表8.0 画像ぎじりん(完全型)

通常リンクぎじりん
出力結果
ソース<A HREF="http://www.yahoo.
co.jp/"><IMG SRC="http://w
ww.yahoo.co.jp/images/reci
p_sm.gif" BORDER=0></A>
<A HREF="http://www.yahoo.
co.jp/" onClick="return fa
lse;"><;IMG SRC="http://www
.yahoo.co.jp/images/recip_
sm.gif" BORDER=0><;/A>

表8.1 BORDER属性のない画像ぎじりん(完全型)

通常リンクぎじりん
出力結果
ソース<A HREF="http://www.yahoo.
co.jp/"><IMG SRC="http://w
ww.yahoo.co.jp/images/reci
p_sm.gif"></A>
<A HREF="http://www.yahoo.
co.jp/" onClick="return fa
lse;"><;IMG SRC="http://www
.yahoo.co.jp/images/recip_
sm.gif"><;/A>

ついに、「画像ぎじりん」も完成である。いろいろ、紆余曲折あったが、遂にここまでたどり着いたのだ。

 完成品のソースは、その長い道のりと我々が注いだ情熱のわりには非常に簡潔である。学問の世界においては、結論はそれを導くまでの道のりに比べれば非常に単純な形をしている。「ぎじりん」もそれに当てはまるといっていいかもしれない。これは、「ぎじりん」の崇高さを表しているといっても、過言でないかもしれない。



 途中、重要なアドバイスを下さったY氏には大変感謝している。Y氏の助言がなければ、きっとこの日は迎えられなかっただろう。そして、「ぎじりん」を全国の WEBMASTER および CHATER に捧げる。彼らが、この「ぎじりん」をよき方向に使用することを切に願う次第である。

 「ぎじりん」を完成させた今、我々に残された仕事はなくなった。これをもって、当委員会は散会とする。ぎじりん製作委員会よ、永遠なれ・・・。



9.エピローグ〜終わりは始まり〜

 「大変ですぜい、親分!」

 ネットサーファーの龍が私の自宅にやってきたのは、ぎじりん製作委員会の活動が終わって早1ヶ月が過ぎようとしていたある日のことであった。彼は、委員会活動時に持ち前の情報収集力を生かして、ずいぶんと活躍してくれたものである。

「どうしたんだっていうんだい。騒々しい」
「そ、それが・・・。ぎじりんが悪用されてるんです」

 なに?私は一瞬耳を疑った。我々の技術が悪用されている?

そうなんですぜい。いや、いろいろHPを見てまわってて偶然見つけたんですけどね。リンクをクリックしても、反応しないんですよ。で、まさかと思ってソースを見たら、やっぱりそうでして・・・




メンバーが再び集結した・・・。
スローガンは、
悪意のある『ぎじりん』を討つ!

 笑える『ぎじりん』こそホンマモン!


この日が来ることの予感はあったものの、こんなにも、、、こんなにも早く再結成の日が来るとは・・・。