がっくり

 現在進行形であるプログラムを作っている。プログラムと言ってもCGIだ。実際には、CGI自体はもう大分前にできあがっており、今取り組んでいるのはHTMLやJavaScriptの部分だ。

 ある程度形になってきたある日、敵の名前やマップ名、そしてアイテム名を入力するのにオートコンプリートを付けてみたら楽かもしれないなあとふと思いついた。

 まずはすでにそれを実装している人はいないかと思いぐぐってみる。トップにいきなりそれに関して書いたサイトが出てきた。面白いけど使い道がなさそうだとの意見が…。いきなり出鼻をくじかれる。ある海外のサイトが紹介されていたが、英語なのでよく分からなかった*1

 仕方がないから一から作ることにする。まあこの時点でアイデアは頭に浮かんでいたからけっこうすんなりと進んだ。とは言ってもフォームに入力された文字が、データベース(まあそんな大げさな物でもないが)の一部分と一致するか、すればリストで出すと言うだけのことだからそんな難しい物ではない。

 そこはすんなり進んだものの、リストがウインドウに入りきらなかった場合にスクロールさせる方法がかなり苦労した。ここでもアイデア自体はすぐに浮かんだ。テーブルを使い、<TD>のボーダーをスクロールバーに見立てる方法だ。できるだけ普通のIE等のスクロールバーと同じ挙動になるようにするために試行錯誤を繰り返し、なんとか完成。

 スクロールバーをドラッグすれば上下にスクロールするし、バーの上下の空白を押せばそっちの方向にスクロール、上端、下端にある三角を押せばそっちにスクロールする。友達に「ホイールでは動かせないの?」と言われ、「IEにはそれを検知する機能が無いから無理」っていたが、後で調べてみるとそういうイベントがあるらしい。ブラウザ依存にはなるが、まあほとんどの人がIEを使ってるからいいだろうってことで実装。

 ドラッグさせるとズレるという問題も発生した。これは、スクロール幅を計算するときに、スクロールさせるたびに四捨五入し、そこから再計算していたためにその誤差が蓄積されて…ということのようだ。原因が分かったのでクリックされた場所から現在地までの絶対的な差を使って計算するように変更。これで直った。

 そしてそれからしばらく経って、まあかなり最近の話。そんなことをしなくてもブロック(div)とoverflowを使えば同じ事が出来ることがわかった。今までの苦労は一体なんだったのか…あんだけ苦労したってのに、ブラウザが多少限定されるとはいえ標準の機能だけで出来てしまうとは…。もうがっかりですよ。

 まあ、オートコンプリートの機能自体はブラウザだけでは出来ないため*2、それに関しては問題ない。

 そういえばAIBOの公式ページにスクロールバーのギミック(?)が付いていた。矢印やバーの上下にある空白を押すことでスクロールが出来るが、バーをドラッグしてのスクロールは出来ないらしい。どうしてもやりたくなっちゃう…。まあホイールに対応してないのは仕方ない。対応しているブラウザがIE6しかないんだから。

*1:今もう一度見てみると分かった。なんか全然アプローチが違うらしい。なんでこんなややこしいことをしてるんだろうと思ったが…

*2:もちろん全てのデータを一度フォームに入力してしまえば出来るがあまりにも非現実的な話だ