Gliderとは?

Gliderはスライド表示を行うためだけのシンプルなライブラリです。ただ動作がユニークで、コンテンツ次第ではなかなかユニークな印象を与えられる機能を備えています。下の図はGliderを使った画面の移り変わりです。左から右へと流れるようにコンテンツを表示させることができます。コンテンツにアクセントを付けたいような場合などに有用なライブラリとなります。

Gliderサンプルの実行。左から

右へと流れるようにスライドする

Gliderはprototype.jsライブラリとscript.aculo.usライブラリを利用して作成されています。シンプルなライブラリなので単純にスライド表示を行うだけであればスクリプトを数行記述するだけで動作します。GliderはこのURLにあるページからダウンロードすることができます。

project page to download or check out the source via SVNと書かれた文字をクリックするとダウンロードページに移動します

You can also download a zipped version here.のhereの文字をクリックし、次に表示されるサイトでglider-0.0.3.zipの文字をクリックするとダウンロードが行われます

ダウンロードされたファイルはZIP形式になっているので解凍します。解凍すると図のファイル構成になります

ここで必要になるファイルはexample.html以外全てのファイル / フォルダです。javascriptsフォルダ、stylesheetsフォルダの名前は状況に合わせて書き換えても問題ありません。ここではjavascriptsフォルダはjsフォルダに、stylesheetsフォルダはcssフォルダに名前を変えて使用します

Gliderは環境によって不具合が発生することがあります。現時点では以下の不具合があります。

  • MacOS X版Safari 2でFlashムービーを貼り付けるとスライド処理時に画面にゴミが残る
  • MacOS X版Firefoxでインラインフレームを指定し、インラインフレームにスクロールバーが表示されているとスライド処理時に画面にゴミが残る

いずれも最初のページにFlashムービー、インラインフレームを指定しスライド領域を画面左端にくっつけておけばゴミが残ることはありません。Flashムービーやインラインフレームを使用しなければ不具合は発生しません。

ここではGliderのバージョン0.0.3で説明しています。