『Smooth scrolling』は、アンカータグを使用してページ内のスムーススクロールを実現できるJavaScriptです。
通常アンカータグだけを用いてページ内の移動を行うと、いきなりそのアンカー部分に移動してしまい、ページ内移動なのか別ページへ移動したのか分かりづらいことがありますが、これを用いればページ内のアンカー部分まで画面をスクロールさせながら移動できるのでまぎらわしさがなくなります。
スムーススクロールを実装できるJavaScriptはこれ以外にも色々あるのですが、いくつか試したところ、これが今のところ一番簡単に実装できました。他のJavaScriptのライブラリを用いず単独で使え、アンカータグに追加記述する必要がないのが非常に便利で、既存のページにすぐに導入できます。
以下、実装方法詳細。とはいえ、詳細といえないほど簡単です。
◆IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 (マイコミジャーナル)
IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。
IE5やIE6のHTML/CSSまわりの表示処理をよりWeb標準に近づけることが出来るJavaScriptライブラリ『IE7.js』が公開されました。
◆新春特別企画・2008年を展望する!：2008年Webデザインに使えるJavaScriptライブラリ （gihyo.jp 技術評論社）
2008年も活躍しそうなJavaScriptライブラリが6種類紹介されています。デザインをいじるものや、ユーザビリティを向上させるものが多いようです。
以下、簡単にご紹介。
■Ajaxorized ≫ 3d image reflection with javascript
（情報元：Appleサイトの画像っぽく3Dで鏡面反射画像を作るJSライブラリ:phpspot開発日誌）
画像に鏡面反射の処理を施してくれるJavaScriptです。
■PopBox! - Javascript Image Magnification
（情報元：JavaScriptでの画像プレビュー自由自在「PopBox」:phpspot開発日誌）
『PopBox』は画像操作を可能にしてくれるJavaScriptです。
■Welcome to Tablecloth
（情報元：HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」:phpspot開発日誌）
HTMLテーブルにカーソルハイライト機能を付けられるJavaScriptライブラリ。
HTMLテーブルにカーソルをもっていくと、そのテーブルの現在のセルがハイライトされます。 クリックすることで、ハイライトの位置を固定できます。 固定したハイライトを消すときは、テーブル外をクリックするだけでOK。
使い方は、ダウンロードしたファイルの中にある「tablecloth.css」と「tablecloth.js」をHTMLのhead内から参照すればいいだけです。 ダウンロードしたファイルにはサンプルのHTMLファイルもあるので、そちらも参考に。 ハイライトの色はCSSをいじれば変更できるっぽいです。
大きめのテーブルを作成するようなとき、ユーザビリティを向上させるのに役立ちそうです。
■画像に鏡面効果を与えるreflection.js[to-R]
1つ前のエントリーで、 鏡面効果を画像に施すジェネレータを紹介しましたが、今回のものは、これをJavaScriptで行うものです。 手順はリンク先にありますのでそちらをご覧ください。
実際にファイルを落としてローカルで試してみましたが、見事に鏡面効果が画像に適用されました。 いちいち鏡面効果をつけた画像を作らないですむうえに手間もほとんどかからないので、非常に便利。 1つ欠点があるとすれば、JavaScriptがオフになっているユーザーに対しては当然ですが効果がないということ。 この点は注意が必要ですが、そこに目をつぶれば画像を用意するよりも断然楽ですね。
JavaScriptがオフになっているユーザーまで考慮に入れるにしても、これを使って鏡面画像を表示させ、 それをスクリーンショットにとって不要な部分を切り取って画像を作るという手もあるので、 いずれにせよ鏡面画像を作る手間はこれによって大幅に省けそうな気がします。
■画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs） - youmos
視覚的な効果が強いので、使う場面がけっこう限られてくるかな、というのが第一印象ですが、逆に言えば、視覚に訴えるインパクトのあるページで利用するのには向いているかもしれません。ただ、JavaScriptによるものなので、JavaScriptがOFFになっているユーザー相手だと意図した動作にならないのが欠点ですが…。
使用には別途jQueryというのが必要ですので、使う方は以下からダウンロード。
■jQuery: The Write Less, Do More, JavaScript Library
■メアドをスパムに利用されないように暗号化する「emailProtector.js」 - GIGAZINE
まだ試してすらいないので評価できませんが、このメアドの対スパム問題は非常に頭が痛い問題でして、普通にメアドを掲載すればあっという間にスパムまみれにされ、画像にすると利便性が大きくダウンします。（画像にしても、alt属性にメアドいれたりmailto入れたりしたら当然無意味です。）
また、メールアドレスをエンティティ表記に変換して対策するという方法もあります。実際に使って見ましたが、これはあまり効果がないように感じます。そのままメアドを掲載するよりはよっぽどマシですが。
そんなわけで、JavaScriptを有効にしないとダメなようですが、こういう方法があるのは選択肢の一つとして十分入れられるのではないかと思います。ただ、すでに着信しまくっているスパムメールを減らす効果がどれだけあるかは分かりません。しかし、新規に別の収集BOTの被害に遭う確率は減るかも。
コナミコマンドと聞いて、即座に「↑↑↓↓←→←→BA」を思い出しました。このコマンド名をきいてすぐにピンとくるのは世代的にどこまでなんだろうか？
こういう遊び心でスクリプトが書けるっていいですね。
