ブログTOP > Javascript > Horizontal Tiny Scrolling クロスブラウザ修正版

2010年09月20日

Horizontal Tiny Scrolling クロスブラウザ修正版

Horizontal Tiny Scrolling (thw.js) (旧horizontinyscrolling.js) は、
マウスホイール操作などによるページ全体の横スクロールUI(ユーザーインターフェイス)を実装するためのjavascriptライブラリです。
(インラインコンテンツの水平スクロールインターフェイスのためのライブラリではありません)
jQueryライブラリのプラグインではなく、単体で動きます。

/* Horizontal Tiny Scrolling - a smooth scrolling script for horizontal websites
(the brother of the vertical "Tiny Scrolling")
by Marco Rosella - http://lab.centralscrutinizer.it/the-tiny-scrollings

v0.8 - July 7, 2009
(ソースコード冒頭の署名から)


このプログラムはMarco Rosellaさんがライセンス形態=GPLで公開しています。
以前は horizontinyscrolling.js として公開されていましたが、現在は thw.js というファイル名に変わっています。ライブラリの名称としては「Horizontal Tiny Scrolling」のままです。

現時点での最新版は2009/7/7にリリースされたバージョン0.8ですが、相変わらずOperaで動作しないなどいくつかの問題が残ったままになっていました。
そこで今回、クロスブラウザ向けに修正・検証しましたので、ダウンロードできるように公開します。


■ 公開にあたっての経緯


経済産業省のオープンガバメント実証実験のためのサイトの一つ「がばったー」で、この Horizontal Tiny Scrolling ライブラリを利用する事になり、私が修正・検証することにしました。

GPLで公開された成果物は、改変・再配布が可能であると同時に、改変・再配布する成果物もGPLでなけれなばらないとされています。
つまり、原則として私が修正したソースコードは開示されなければなりません。
そのため、この場を使ってGPLの制約である再頒布可能性を担保させていただきたいと思います。
(ただし一意のURLでの永続的な公開を保証するものではありません。
ダウンロードURLが変更になった場合にはなるべくこの記事に追記する形でお知らせしようと思います。)


■ ダウンロード
Horizontal Tiny Scrolling ライブラリ:クロスブラウザ修正版(2010/09/20)
thwFIXED.js


■ ライセンス
前述のとおり、GPL(GNU General Public License)に準拠します。
どなたでもご自由にご利用下さい。


■ デモ
経済産業省のオープンガバメント実証実験サイトのひとつ「がばったー」に実装しています。
http://govtter.openlabs.go.jp/

(ただし「がばったー」では、画面上部のみでマウスホイール操作出来るようにライブラリにさらにカスタマイズを加えていますのでご注意ください。また、画面左右クリックによる横スクロール動作は、このライブラリを使わず、jQueryで別途実装しています。同じような実装をしたい方はそちらのソースもご参考になさってください。)


■ 修正・改善内容

(1) クロスブラウザ対応
  • Mac Firefox3.6
  • Mac Safari
  • Mac Chorome6
  • Mac Opera10
  • WinXP IE6
  • WinXP IE7
  • WinXP Firefox3.6
  • WinXP Safari5
  • WinXP Chorome6
で動作するように修正しました。

※もとのままではOpera10では動かず、また少し修正しただけでは逆にMozillaエンジン(Firefox)やAppleWebKit(SafariやChrome)などで動かなくなってしまう恐れがありました。


(2) スクロール幅を変数として変更可能に

(3) 明示的な縦スクロール禁止(preventDefault)



■ さらに、実装時に気をつけたいポイント

必ず、ページ中のすべての箇所できちんとマウスホイールが動作しているか確認しましょう。
ページレイアウトによって documentオブジェクトがページ全体よりも横に小さく解釈されてしまうことがあります。
ブロック要素がないところ(きれたところ、終わったところ)で唐突に<body>タグや<html>タグのブロック範囲も途切れてしまうのです。
つまり、document.onmousewheelイベントハンドラを使う必要のあるSafariやChromeなどでは、マウスホイールイベントを取得出来ない箇所が生まれる可能性があります。

これは通常の縦長ページコーディングではあまり考える必要のなかった厄介な問題です。
これを防ぐためには、コーディング的には非常にかっこわるくなりますが、ページ全体を

<body>
  <table id="wrapper"><tr><td>

    (ページコンテンツ)

  </td></tr></table>
</body>

のようにして<table>タグをラッパーにして囲みましょう。
<div>ではなく<table>タグにするのは、documentオブジェクトをぴったりページサイズにフィットさせるためです。
これですべてのエリアでマウスホイールが使えるようになるはずです。


■ キーボード操作について

このライブラリではキーボード操作はサポートしていません。つまり普通のページを見ている時と同じように「いつも通り」動作します。
同じくオープンガバメント実証実験プロジェクトに参画なさっているcognitomさんが公開しているbookreader.jsのようなキーボード操作を組み込んでもいいかなという気がしましたが、今回の本来の目的である「がばったー」サイト組み込みには現時点で不要だと判断したために見送っています。
キーボード操作の実装についてはbookreader.jsなどこの他のライブラリを参考にしてください。



以上です。
なお、この修正コードはMarco Rosellaさんご本人にもお送りしようと思います。

この修正版ソースコードが少しでも日本のWeb開発者の役に立てば幸いです。

Have fun!(・ω・)
このエントリーをはてなブックマークに追加
posted by taichistereo at 05:20 | Comment(0) | Javascript
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
カテゴリクラウド
トップページへ戻る
Blog Widget by LinkWithin