このページの本文へ

チッちゃい画像にはデッカいツールチップを! (2/5)

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

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

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


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

Adobe Spry

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

Adobe Spry

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

Adobe Spry

[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]

使用するSpry

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

 以上でツールチップに使うSpry Frameworkの準備ができました。次ページでは、実際のサイトへの組み込み方を説明しましょう。

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています