29分でできる！あのサイトの“技”を盗め ― 第1回

チッちゃい画像にはデッカいツールチップを！

2008年09月01日 18時33分更新

文● 古籏一浩、ASCII.jp

アドビのAjaxフレームワーク「Spry」を使ってみよう！


米アドビの「Adobe Labs」からダウンロードできる「Spry Framewor」。ダウンロードは、矢印で示した「Downloads」から


[1] メールアドレスは必須項目。一度ダウンロードしている場合にはメールアドレスとパスワードを入力し[continue]ボタンをクリック


[2] *印の項目は必須なので必ず入力すること


[3] 必要項目の入力が一通り済むと、画面のページからZIPファイルがダウンロードできます

　画像の上にツールチップを表示するライブラリはかなり多くのものが出回っていますが、今回は米アドビシステムズ社（以下、アドビ社）が提供している「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]

	[4] ZIPファイルを解凍するとかなりたくさんのファイルが入っていますが、今回使用するのは「SpryTooltip.js」のみ