今回のねらい いよいよ登場した、Adobe Creative Suite 3。Dreamweaverのバージョンも、Dreamweaver CS3 となりました。
今回は、Dreamweaver CS3 バージョンアップされた機能を紹介します。 第二回目は、「Spry Widgetの“Spryタブ付きのパネル”」について見てみましょう。
Spry効果Dreamweaver CS3には、新しく「Spry Widget」(スプライ ウィジェット)という機能が追加されました。 今回は、Spry Widgetの“Spryタブ付きのパネル”を紹介します。 ■ ここで作成したサンプルページ “Spryタブ付きのパネル”の作成方法 - 新規ページを作成し、ファイル名をつけて保存します。
- [挿入バー]を「Spry」に切り替えます。
 - タブ付きパネルを挿入するページの場所にカーソルを移動します。
 - [Spryのタブ付きのパネル]をクリックします。
 - Spryのタブ付きパネルが作成されます。「タブ付きパネル」の青色のタブをクリックします。
 - 「タブ付きパネル」のプロパティで、+ボタンをクリックして、タブを追加します。
 - ページにあるタブ名をクリックし、タブ名を直接書き換えます。
 - 一番手前のタブの内容を書き込みます。
 - 次のタブ名をクリックしてマウスポインタを置き、タブの右に表示される目のアイコンをクリックします。
 - 次のタブの内容を書き込みます。
 - 同様の方法で、次のタブの内容も書き込みます。
 - ページを保存します。「依存ファイルのコピー」画面が表示されるので、「OK」ボタンをクリックします。
 ※“Spryタブ付きのパネル”では、Javascriptファイル(SpryTabbedPanels.js)とCSSファイル(SpryTabbedPanels.css)を必要とします。その2つのファイルがこのタイミングでSpryAssetsフォルダに保存されます。 - ページをブラウザで確認すると、タブで切り替えることが出来るコンテンツが作成されています。
 用語解説Spry(スプライ)とは?Adobeによって開発されたAjaxライブラリです。 XMLデータ処理するライブラリ、エフェクト効果のためのライブラリ、ユーザーインターフェースのためのライブラリがあります。 今回ご紹介したSpry wigietの「Spryのタブ付きパネル」は、ユーザーインターフェースのためのライブラリの一つです。 プログラミング技術がないと使えないAjaxをライブラリ化することで、手軽に利用することができます。
Ajax( Asynchronous JavaScript:エイジャックス )とは?JavaScript言語を拡張したもので、ブラウザでページの再読み込みをしなくてもページに変化をつけるようなコンテンツを作成することができます。 技術には、従来から使われていたJavascript言語にXMLによる非同期なデータ送受信機能やDHTML(ダイナミックHTML)を加えたもの。これらの技術の総称ともいえます。 Ajaxを利用した、代表的なコンテンツには、Googleマップなどがあります。
※Googleマップの地図を操作するためのインターフェースはAjaxにて作られています。
Widget(ウィジェット)とは?Webページで特定の機能を実行するアプリケーションの総称です。 「Yahoo! Widgets」、「MovableTypeのWidget機能」など、さまざまな場所で、Widgetの形態が利用されています。
r360studioからのお知らせ
|