伊藤清徳の垂直落下式ムーンサルトプレス

PerlとかPHPとかMySQLとか…がんばっても8割だ。
10月 20

IEでJSからsubmit()できないことがある件。


<a href="javascript:;" onclick="doSubmit();">送信!</a>

<form action="test.php" method="POST" id="testForm" name="testForm">

<input name="testVal" type="hidden" value="テストだよ">

</form>

上記のようなHTMLがあるとして、

function doSubmit(){

	document.getElementById('testForm').submit();

}

上記のようなJS関数を実行してフォームを送信しようとすると、

Firefoxでは問題なく送信できるが、IEでは送信できない(>_<)


まず、HTMLを

<a href="javascript:void(0);" onclick="return doSubmit();">送信!</a>

<form action="test.php" method="POST" id="testForm" name="testForm">

<input name="testVal" type="hidden" value="テストだよ">

</form>

と修正して、

function doSubmit(){

	document.getElementById('testForm').submit();

	return false;

}

JSはこのように変更。

何をしたかというと、<a>のhrefをvoid(0)で無効化して、さらに、onclickはfalseを返すようにする。IEではどうやら、JS関数の中のsubmit()より、<a>の働きが優先されるようで、これらをすべて無効化する必要があるよう。

これで半日悩んだ。
ある意味正しいような、でも、なんか納得いかない(>_<)

IEはツンデレだ・・・いやツンツンしてるだけか(爆


ちなみに、

<a href="javascript:void(0);" onclick="return doSubmit();">送信!</a>

<form action="test.php" method="POST" id="testForm" name="testForm">

<input name="testVal" type="hidden" value="テストだよ">
<input type="submit" name="submit" id="submit" value="送信" />

</form>

こんな風に<form>タグの中に「submit」という名前の要素が入ると、submit()ができなくなる。これも注意。

JSは何でもかんでもオブジェクトなので、同じ名前のものがあれば、当然そちらで上書きされる。

迂闊な名前をつけるのはやめよう。

8月 24

今日は前回に引き続きお友達のWEBデザイナーさんからの依頼で、プログラミングにおける「関数」とは何ぞやという話をしてくれということで書いてみます。

高卒以上のレベルの人でプログラム言語に慣れ親しんでない人が「関数」と聞くと、数学で習った「二次関数」とかの「関数」を思い出すと思います。
※「高卒レベルの人」でと誤解される書き方をしていました。申し訳ありません。正しくは上記の通り「高卒以上のレベルの人」です。

数学で習った「関数」は、ちょっと意味は似ているところがありますが、この際きれいさっぱり忘れたほうがいいです。ということで数学の関数は忘れて話をすすめます。

で、関数っていうのはプログラミング言語やプログラマーによって結構考え方や概念が異なりますので、BASIC(VBではない)やPerlで育ってきた僕の個人的な考えで書いていきます。

お友達デザイナーがActionScriptを勉強していて躓いたらしいですので、僕はASが書けないってことでJSで書いていきます。




まず、簡単なお話から。

Javascriptの入門向け命令辞典を読んでいて、たとえば、「特定の文字列をURLエンコードしたい」というときは以下のような命令を書けと書いてあることがあります。

var str = '文字列';
str = encodeURIComponent(str);
document.write( str );

これを実行すると、「%E6%96%87%E5%AD%97%E5%88%97」と表示されると思います。

encodeURIComponent()という命令を使うことで、「文字列」という文字列を簡単にURLエンコードできます。

実はこの「encodeURIComponent()」が「関数」です。




関数とは、ざっくりと簡単に言えば、決まった手順を一まとめにしておいて、再利用できるようにしたものです。

Javascriptの入門書などで「関数」と言えば、上記のような説明をした上で、

function 関数名( 引数1, 引数2... ){
    手順;
    return 返り値;
}

と書け。みたいなことが書いてあります。

まったくもって、間違いじゃないんですけど、その前に、自分で作らなくても、

Javascriptには最初から前述「encodeURIComponent()」のような便利な関数はたくさん用意されているんです。

たとえば他に
document.write()
alert()
confirm()
window.close()
などなどあります。

こうやって書いてみると、どうでしょうか?プログラミングの初心者でも、これまで書いたプログラムのコードの何割かは関数を使っている部分で埋められているのではないでしょうか?関数は現在の発展したプログラミングにおいては、とても有用なもので、プログラミング言語によって最初からたくさんの関数が用意されています。

前述の「function」を使った「自分で作る関数」は、最初から用意されている関数のほかに、決まった命令をまとめておいたり、それを再利用したりしたい時に作る関数で、一般的に「ユーザー定義関数」などと呼ばれます。言語が最初から用意している関数に対して、自分で作る関数だから「ユーザー定義関数」。分かりやすいネーミングです。はい。

※完全な低級言語やC言語のような低級に近い言語は関数は少なくなるかも。
※window.close()などはオブジェクトのメソッドなので厳密には「最初から用意された関数」ではない。
↑ここの※部分はお友達デザイナは無視したほうがいいですwwww



まず、関数の使いどころです。ここからは入門書を片手に読んでください。

前述の通り、関数は決まった手順をまとめておくもの、そしてそれを再利用できるようにしたものです。

料理で言うと、ダシとかスープみたいなものかな。前もって「一番ダシ」とか用意しておくことがあると思います。関数は、それに近いかな。

「引数」は、そこに醤油や塩などの追加調味料や、メインとなる食材など、目的とする料理に合わせて何かを追加してひとつの料理として完成させたり、また違うひとつの材料にしていったりして行くわけですね。材料を入れたりして加工したものが「返り値」に近いですかね。

では実例。まず関数を使わない例です。

例1

var str_1 = 250;
str_1 = Math.floor( str_1 * 1.05 );
alert( str_1 + '円です。' );

var str_2 = 500;
str_2 = Math.floor( str_2 * 1.05 );
alert( str_2 + '円です。' );

端数切捨てで消費税額を計算して、その結果をalert()するという内容ですね。

上記例の場合、2つの額に対して消費税計算をしていて、同じような処理を繰り返しています。
この場合同じパターンが2つですから、まだマシですけど、3つ4つ・・・となっていくとなんだかなぁとなります。

こういった決まったパターンがあるときに使うのが関数というわけですね。




では、実際に関数を使って書き直してみましょう。

関数を使うといっても、プログラム全体の設計によっていくつかの関数の実装が考えられます。
例1においてもそうです。




関数実装例パターン1

例1のプログラムを見て重複している部分は、
・変数に1.05をかける。
・1.05をかけた変数を小数点以下切り捨てる。
・この変数のあとに「円です」をつけてalert
という流れです。

ここを関数にします。

例2

//↓ここで関数定義!
function taxAndAlert( str ){
	str = Math.floor( str * 1.05 );
	alert( str + '円です。' );
}


//↓ここから実行文
var str_1 = 250;
taxAndAlert( str_1 );

var str_2 = 500;
taxAndAlert( str_2 );

こんな感じです。 例1と比べるとMath.floorなどの何回もあった面倒な手続き一式がまとめられています。ここが関数。実行文のところでは作った関数「taxAndAlert」を実行しているだけで、Math.floorを何度も書いたりなど面倒が少しラクになります。




関数には、手続きをまとめてラクにするだけではなくて、後々修正がラクになるという効果もあります。例1・2では消費税計算をしているわけですが、2009年8月現在では、そう遠くない未来に消費税率アップがされることが目に見えています。仮に消費税率が8%になったとすると、例1では「1.05」を「1.08」へ書き換える箇所が複数ありますが、例2ではそれが関数の中1箇所だけで済みます。これは大きなプログラムにとってはメンテ性の向上につながります。


関数実装例パターン2

さて、話は少し戻り、関数の実装パターンはいくつか考えられるということを書きました。次のパターンを考えてみましょう。

例3

//↓ここで関数定義!
function taxAndReturn( str ){
	str = Math.floor( str * 1.05 );
	return str;
}

//↓ここから実行文
var str_1 = 250;
alert( taxAndReturn( str_1 ) );

var str_2 = 500;
alert( taxAndReturn( str_2 ) );

↑ 例2と比べてみると、関数の中でalertを実行していないことが分かります。

ぱっと見、「あれ?繰り返しやっていることをなぜ関数にしないのだ」と思うかもしれません。確かに例1を関数で書き換えるのであれば、例2が最もいい例なのかもしれません。しかし、消費税計算というのは非常によく使う計算ではありますが、alertを使って表示するということはそれほど多くありません。

関数には返り値(かえりち)というものが用意されていて、返り値を使うことで、関数の中で計算させた結果を、元のプログラムに戻してやることができます。元のプログラムはその返り値を使って、好きなことができるわけですね。たとえば、返り値を積算していけば、合計値を計算することができたりします。返り値をうまくつかうことで、関数の機能をシンプルにして、関数の再利用性をあげることもできるのです。

このように関数は、すべてをひとつにまとめるのではなく、本当に繰り返しが多く、まとめるべき手続きをまとめるのも、関数の利用価値を高めるポイントです。



関数実装パターン3

でも、やっぱりこの際、alertも関数でやっちゃいたいよ!と思うこともありますよね。
次の例はどうでしょうか。

例4

//↓ここで関数定義!
function taxAndReturn( str ){
	str = Math.floor( str * 1.05 );
	return str;
}
function taxAndAlert( str ){
	alert( taxAndReturn( str ) );
}

//↓ここから実行文
var str_1 = 250;
taxAndAlert( str_1 );

var str_2 = 500;
taxAndAlert( str_2 );

例4では、関数を二つ作りました。関数の中から関数を呼び出しています。そう、消費税計算をする関数と、その関数を呼び出してalertする関数の二つを作ったわけです。こうすれば、消費税計算に限定することで利用価値をあげた関数の価値をそのままに、alertを呼び出すという手続きも再利用できるようになったわけです。




かなーりざっくりした話でしたが、以上が、関数の使いどころです。

・繰り返しを関数にすることで、プログラムの可読性があがる。何度も同じことを書かなくていい。
・繰り返しを関数にすることで、プログラムを後日改修するときにラクになる。

というところがポイントで、

・関数はプログラム全体を見渡して、関数の内容はシンプルに。
・関数をいくつかつくり、関数と関数を関連させていくことでさらに便利に。

ここが関数の運用・設計において重要な点です。

個人的には、関数は、プログラミングを嫌いにならないためのひとつの道具でもあると思います。何度も同じことして「うがぁっ!!!」みたいなストレスが一番人間にとってよくないと思うからです。関数。頑張って覚えましょう。

8月 14
switchな話
icon1 admin | icon2 Javascript | icon4 08 14th, 2009| icon3No Comments »

お友達のWEBデザイナーが switch文の使いどころが??みたいな話をしてました。

私は、職業プログラミングをPerlからはじめたのですが、Perlにはswitchがない。その影響からか他の言語を書くときもめったにswitchは使いません。要するに使わなくても困りません!これ結論。(笑

まぁそれじゃだめなので、色々例示してみましょう。

意味としてはelse ifの構文とほとんど一緒ではあるのですが。。。。以下JSで書きます。



まず、基本。

例1:

var i = 1;
if( i == 0 ){
    document.write( '0だよ!' );
}
else if( i == 1 ){
    document.write( '1だよ!' );
}
else if( i == 2 ){
    document.write( '2だよ!' );
}
else{
    document.write( '0から2以外だよ!' );
}

例2:

var i = 1;
switch( i ){

    case 0 :
        document.write( '0だよ!' );
        break;

    case 1 :
        document.write( '1だよ!' );
        break;

    case 2 :
        document.write( '2だよ!' );
        break;

    default :
        document.write( '0から2以外だよ!' );

}

例2は例1をswitch文で書き換えたものです。

結果はどちらも「1だよ!」と表示されます。

switchは基本的には、判定する変数がひとつの複数条件分岐に使います。



switch文につき物の「break;」。

「break」はブロックを抜けろという意味の命令文。ブロックとはものすごくざっくり言うと「{」と「}」に囲まれた部分。switch構文の中に書けば、switch構文のところを抜けろという意味になります。

これを踏まえて、以下を。

例3:

var i = 1;
switch( i ){

    case 0 :
        document.write( '0だよ!' );

    case 1 :
        document.write( '1だよ!' );

    case 2 :
        document.write( '2だよ!' );

    default :
        document.write( '0から2以外だよ!' );

}

例3は例2から「break;」を取り払った内容です。

これを実行すると結果出力は「1だよ2だよ0から2以外だよ!」になるはずです。

ここがswitch文の特徴のひとつです。
else if構文では、条件にあったところだけを実行して、その後のブロックは無視されます。
switch構文では、条件にあったところ以降(breakが出てくるまで)すべてのステートメントを実行してしまいます。



例3を踏まえて、以下を。

例4:

var i = 1;
switch( i ){

    case 0 :
    case 1 :
        document.write( '0か1だよ!' );
        break;

    case 2 :
        document.write( '2だよ!' );
        break;

    default :
        document.write( '0から2以外だよ!' );

}

この場合、結果は「0か1だよ!」になるはず。まぁ当たり前。で「var i = 1;」を「var i = 0;」にしても結果は同じく「0か1だよ!」になります。
switch構文は、条件に合致したところ以下、break;が出てくるまで実行し続けます。
上記の例なら、「iが0だったとき」にbreakが用意されていないので、その下の「iが1だったとき」のステートメントが実行され、その中にbreakがあるので、そこでswitch文を抜けます。

つまり意味としては
「iが0だったとき」または「iが1だったとき」
という意味になるんですね。

例5

var i = 0;
if( (i == 0) || (i == 1) ){
    document.write( '0か1だよ!' );
}
else if( i == 2 ){
    document.write( '2だよ!' );
}
else{
    document.write( '0から2以外だよ!' );
}

例4をif/else if構文で書き換えるとこんな感じ。「または」の意味を「||」でつないでいるのが分かります。例5の場合、「または」の条件が2つなのでまだマシですけど、これが3つ4つになると鬱陶しいですよね?

要するに可読性が上がるというわけですな。(案外これ重要)
どこのサイトか忘れましたけど、JSでswitch使ったときと、else ifを使ったときでどっちが早いかということを実験してたところがありました。switch構文を使ったほうが早いということだったのは覚えています。




ちなみに!逆転の発想でこんなこともできたり・・・。

var array = new Array();
array[0] = false;
array[1] = false;
array[2] = true;
array[3] = false;
array[4] = false;

switch( true ){

    case array[0]:
        document.write( '0がTRUE!' );
        break;

    case array[1]:
        document.write( '1がTRUE!' );
        break;

    case array[2]:
        document.write( '2がTRUE!' );
        break;

    case array[3]:
        document.write( '3がTRUE!' );
        break;

    case array[4]:
        document.write( '4がTRUE!' );
        break;

    default:
        document.write( 'どれもTRUEじゃなかった(T_T)' );
}

条件にtrueを渡しておいて、caseに出てくる変数のどれがtrueかを判定する。
上記例の場合は、true|falseですが、数値とか文字列もいけるはず。

多少パフォーマンスを犠牲にしてますが、可読性はあがるのでは。と。。。




まとめ!

あまり使いどころの説明にはならなかったなこの記事・・・。反省。

6月 17

クライアントさんから先日リリースしたKIYOVBSが動作しないとご指摘頂きました。
多謝です。

環境によりVC++2008ランタイムが必要です。

インストールしてみて動作しないということであれば、
ランタイムをインストールしてみてください。

ランタイムはマイクロソフトサイトより
http://www.microsoft.com/downloads/details.aspx?familyid=A5C84275-3B97-4AB7-A40D-3802B2AF5FC2&displaylang=ja
こちらからダウンロードしてください。

5月 25

何かと便利なLightbox。

だが、Lighbox2をSSL通信領域で使うと、

ブラウザ界を代表する困ったちゃんIEでセキュリティ警告が出る。


SSL通信になってない項目がページの中にあるよ。っていう警告なんだけど、

いくら調べてもそんなのページの中にない(>_<)
何が原因なのかさっぱりで、丸二日悩んだ・・・。Lightboxが悪いのか、IEが悪いのか。


で、最終的に、Lightboxディレクトリ中「/css/lightbox.css」に原因があることが判明。
13行目の記述。

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

「background-image: url(data:image/gif;base64,AAAA);」
↑どうやらこれが問題らしい。。。見慣れない記述だ。
おそらく、BASE64エンコードしたときに値が「AAAA」となる、Content-typeが「image/gif」のデータを背景として読み込んでいる様子。

だったら、こういうファイルを実際につくればいいのでは。
ってことで、そのファイルをまずPerlで作る。

#!/usr/bin/perl -w

use strict;
use MIME::Base64;

my $fh;
open( $fh,'> hover.gif') || die("だめだった...orz\n");
print $fh decode_base64('AAAA');
close( $fh );

print "できた!\n";

まあこんな感じ。適当で申し訳ない(^-^;

それで、このスクリプトで作った「hover.gif」を、
lighbox内のディレクトリ「images」へアップロードし、
「/css/lightbox.css」の13行目を

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(../images/hover.gif); /* Trick IE into showing hover */ display: block; }

に変更したら、警告は出なくなった。


今回は、一応CSSに記述されている内容にしたがって改造したけど、
そもそもBASE64にしたとき「AAAA」なGIF画像なんて意味があるわけがないので、
もしかしたら、そんな画像をわざわざ作らなくても、何か適当なGIFを背景に指定してやればよかったのかも。

5月 18

script.aculo.usが何かと便利だ。

とか書いていると、

「prototype.jsマンセーな人か?}
という突っ込みを受けそうですが、
否定はしません。
jQueryよりprototype.jsが好きです。
HTML制作をする上で、使いやすいのは多分圧倒的にjQueryなんだと思いますが、
いかにもjavascriptを拡張したっぽいprototype.jsのが親しみを感じるのです。個人的に。

閑話休題・・・いや、、、本題へ。




script.aculo.usには便利な機能が満載。フロートできる要素の設定も簡単だったので紹介。



まずは、例のごとくHTMLにライブラリをロードしなければお話になりません。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>

うえの二つは、script.aculo.usのベースライブラリ。
最後のひとつは、フロートできる要素を作ったり、ドロップできる要素をつくったりしたいときに呼び出すライブラリです。

script.aculo.usのダウンロードはこちらから。



次に、フロートしたいブロック要素をつくります。

<div id="float">これをフロート</div>

当たり前ですが、IDはページ内でユニークなものを設定しましょう。




最後にjavascriptでフロートを作成です。

<script type="text/javascript">
	new Draggable('float');
</script>


↑これだけです。引数には、フロートしたい要素のIDを指定します。

まぁ、普通は、onloadで呼び出す関数などに入れておいて、
ページ読み込み完了時 にこの命令が有効になるようにしたほうがいいので、
実際は、

<script type="text/javascript">
	function loadFunction(){
		new Draggable('float');
	}
</script>


↑JSソースにはこのように書いておき、

<body onload="loadFunction();">

↑<body>
タグにこのようにonload属性をつけて、関数を呼び出すのが筋でしょうか。

onload属性を使うのがかっちょわりぃなぁという人もいると思いますが、
ソース書くのが面倒なので、自分で考えて書いてください。




あとは、フロートしたDIVにスタイルシートで飾りをつけてやれば、そこそこWindowっぽいものが出来上がります。

色々ゴニョゴニョしてやれば、擬似ウィンドウもできますから、自分専用の擬似ウインドウライブラリを作っておくと何かと便利だと思ったり。




上記例では、関数「Draggable」にはひとつしか引数を渡していませんが、
第二引数でオプションを設定可能です。

<script type="text/javascript">
new Draggable(
	'float',
    	{
        		ghosting : true,//ゴーストを表示させるか? true|false
                revert : true,//移動後元の位置に戻すか? true|false
                starteffect: function() {//ドラッグ開始時によばれる関数
                },
                endeffect: function() {//ドラッグ終了時に呼ばれる関数
                }
         }
);
</script>

だいたいこんな感じです。

ほかにも沢山オプションがありますし、
フロート指定した要素に「onDrag」(ドラッグ開始のとき)などの、
イベントハンドラが追加されます。
詳しくは公式ページをご覧下さい。

handleというオプションを使うとD&Dできるようになるらしいですが、
未確認のため、今回は記事には書きません。




javascriptで広告とかをフロートさせるライブラリが何万円で売ってることがありますが、
これなら安上がり?
script.aculo.usはMITライセンスだから、自分でつくって売ってもウマー(←あんまり感心しませんがね)

5月 15

PHPは何かと叩かれやすい言語。

私もPHP使う人間だが、
PHPだけを利用するのはあまりよくないと思っている。
個人的には、PHPはプログラミング言語というよりは、
ほかの言語での勉強や経験を、
実践の場で簡単にフィードバックできる「ツール」くらいの感覚で利用している。
その辺の議論は、ググるといっぱいでてくるので、ここまで。

「ツール」という言葉を出したとおり、
PHPは、良くも悪くもWEBで利用するには
とても便利な便利な関数がそろえられている。

この関数をJavascriptへユーザー定義関数として実装してしまおう!
というのが「PHP.js」です。

http://kevin.vanzonneveld.net/techblog/article/phpjs_licensing/

関数別に説明ページとソースがある。

すべての関数をまとめたJSファイルをダウンロードもできるようだが、
ほかのJSライブラリと重複する機能も多々あるので、
関数別にソースを拝借して、利用したほうがよさそうだ。

個人的にmd5()、file_get_contents(),basename(),dirname()あたりを良く使いそうな予感。

5月 14

スムーススクロールを使いたいときのメモ。




今回はすでにprototype.jsが導入済みのサイトへの導入のため、
jQeuryを使わずに prototype.js + scriptaculous.js でスクロールする方法です。

jQueryの場合は、
http://coliss.com/articles/build-websites/operation/javascript/296.html
↑こちらが良さげです。
(さまざまなエフェクトが用意されているjQueryに標準で用意されていないのが意外でした。)

あ、そうそう、scriptaculous.jsのダウンロードはこちらで、、、
http://script.aculo.us/




では、実装。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>

↑まずはライブラリをHTMLにロードしてやらないことにはお話にならないので、
ロードしましょう。




で、スクロール先のエレメントを用意します。

<div id="scrollToID"></div>

とか

<a name="scrollToID" id="scrollToID"></a>

とか。

とにかくエレメントがあればブロック要素だろうがアンカーだろうがスクロールしてくれるみたいです。
便利。




で、スクロールする関数を用意しましょう。

<script type="text/javascript">
function _scrollTo( id ){
    new Effect.ScrollTo(id);

}
</script>

たったこれだけ。

new Effect.ScrollTo(スクロールさせたいエレメントのID);

↑そう、たったこれだけなのだ。

上記例では、第二引数は省略してあるけれど、
第二引数でオプションを指定して、スクロールする時間を変えたり、スクロール完了後のコールバック関数を指定できたりするらしい。めちゃ便利。詳しくはこちらをご覧下され。



じゃあ最後は、定義した関数を呼び出すだけ。

<a href="javascript:_scrollTo('scrollToID');">クリックしてね☆</a>

リンクでやるならこんな感じね。
アンカーへジャンプするのの代わりに使うとかっちょいいサイトになるんじゃないかな。
当然、ボタンでやるならonclick属性で関数を呼び出してあげましょう。



ちなみに、アニメーションなしでスクロールするには、

Element.scrollTo(スクロール先のエレメントID);

を使います。こちらは、よりアンカータグへのジャンプに似た動きをします。<a>タグを使ってアンカーへジャンプした場合、ジャンプ前のURLとジャンプ後のURLが、WEBブラウザの履歴に残ってしまい、エンドユーザーに迷惑をかけることが多々ありますが、この方法なら、そんなことはありません。




ちなみに、当然といえば当然ですが、CSSで「display:none;」などを指定して見えていないエレメントへはスクロールしません。たとえばscriptaculous.jsのEffect.BlindDown関数などを使って表示/非表示の切替を行っている場合などは、確実に表示が完了した時点で、スクロールを開始しなければ、ページ最上部へスクロールされてしまうので注意が必要です。




で、まぁ動かしてみたところ、私の環境では、Firefoxでうまく動いてくれませんでした。
なんだかよく分からず小一時間悩んだところ、
http://d.hatena.ne.jp/zariganitosh/20081006
こちらのページの「スクロールアニメーションしない時…」を実践したところ、うまく動きました。

読んでも理屈が良く分からない・・・。うーむ・・・。

が、とりあえず動作は満足。ありがとうございます。




さらに、#を使ったアンカーへのジャンプを自動でscriptaculous.jsのスクロールに振り替えてくれるという話も見つけた。
http://www.u-ziq.com/blog/2007/03/prototypejs.html
今回は未実装だけど、使うケースは増えそうな予感。




【2009年5月21日追記】

名古屋のWEB開発業者さん「音生(ねお)」さんが、
スクロール専用のライブラリをリリースしてらっしゃいます。
ほかのライブラリと競合しないことがすばらしい。

scriptaculous.jsのスクロールを数日試してみましたが、
バグなのか仕様なのか、環境によって動作が????なところが沢山ありました。
こちらのライブラリのがよさそうです。
おかしな動作がないわけではないですが、
ページのつくり方、スクリプトの書き方でほとんど改善できました。
ちなみにライセンスはMITなので、使いやすいです。

 ANZXCvg