アドビのAjaxフレームワーク「Spry」を使ってみよう!
画像の上にツールチップを表示するライブラリはかなり多くのものが出回っていますが、今回は米アドビ システムズ社(以下、アドビ社)が提供している「Spry Framework(スプライ・フレームワーク)」を使用します。ちなみに、Spry FrameworkはWebデザイナー御用達の制作ソフトの「Dreamweaver CS3」にも搭載されています。今回は手作業ですが、Dreamweaver CS3を持っているのであれば、より簡単に組み込むことができます。
Spry Frameworkについて、ざっと説明しておきましょう。Spry FrameworkはAjaxライブラリ/フレームワークの1つです。追加したい機能別にファイルが分かれていて、それ単体で使用できるため、ライブラリ/フレームワークのためにファイルサイズが大きくなってしまう心配がありません。ページが表示されるまでに時間がかかるとイライラしてしまいますが、Spry Frameworkであればそのようなストレスはまずないでしょう。
Spry Frameworkはライブラリでなくフレームワークなので、面倒なプログラムを作らずに済むというメリットも見逃せません。元々Webデザイナー向けに作成されているので、決められたルールに従ってHTMLタグとスタイルシートクラス名をつけていけばよいのです。
まずは下準備!
Spry Frameworkのダウンロード
それでは、Spry Frameworkをダウンロードして使用するための準備に取りかかりましょう。Spry Frameworkは以下のURLからダウンロードできます(2008年8月時点でのバージョンは1.6.1)。
http://labs.adobe.com/technologies/spry/
Downloadsの枠の中に書かれている「Get prerelease 1.6.1 of Spry framework now」のリンク文字をクリックして、次のページに移動します。初めてダウンロードする場合はメールアドレスを入力し、「No, I will create one now」のラジオボタンをチェックしてから[continue]ボタンをクリックします。 [1]
次に、必要な項目を入力します。赤い*の部分が必須項目で、*がついていない部分は入力する必要はありません。入力したらページの一番下にある[continue]ボタンをクリックします。 [2]
これでダウンロード可能なページに移動します。「Download for Macintosh and Windows」のリンク文字をクリックすると自動的にダウンロードがスタートします。 [3]
ZIP形式で圧縮されているファイルを解凍(環境によっては自動的に解凍されることがあります)してSpryフォルダを開くと、たくさんのファイルやフォルダがありますが、今回使用するのは「SpryTooltip.js」のファイル1つだけです。 [4]
以上でツールチップに使うSpry Frameworkの準備ができました。次ページでは、実際のサイトへの組み込み方を説明しましょう。