Dreamweaver CS4のWeb Widgetを使ってみよう

今月号の記事

最近、豊富な量のページ内コンテンツをセクション毎にまとめてタブで切り替えて表示させることや、階層型メニュー、アコーディオン表示、また、Googleが提供しているGoogle Mapsやその他ガジェットなどを用いて、サイトを効果的にみせるといったことが一般化してきました。これらの多くは、Web標準に準拠したクリーンなHTMLとJavaScript、CSSによって実現されています。Dreamweaver CS4に新しく追加されたWeb Widget機能は、これらのJavaScriptをベースにしたリッチなUI、コンテンツを実現することができる機能で、難しい操作をすることなく、誰でも簡単にページやサイトに導入することができます。

Web Widgetのダウンロード

まずは、Web Widgetをインストールするところから始めてみましょう。
Dreamweaver CS4をインストールすると、デフォルトではWeb Widgetはインストールされていません。Web Widgetは、アドビシステムズが提供しているWeb Widgetのダウンロードサイト「Dreamweaver Web Widgets」からダウンロードして各自でインストールする必要があります。

Dreamweaver Web Widgetsのサイトへは、Dreamweaver CS4のアプリケーションバーにある、「Dreamweaverの拡張」ボタンをクリックし、「Web Widgetを参照…」からアクセスできます。
Dreamweaver Web Widgetsのサイトでは、用途に応じて沢山のWidgetが登録されています。フリーウェアだけでなく、シェアウェアとして登録されているものもあります。また、使用にあたりライセンス形態も確認することができます。これらは、License Typeのメニューから、使用用途にあったWidgetを探すことができます

今回は、オープンソースのWidgetをここから絞り込んで探してみます。License TypeからOpen Sourceを選択し、「Filter」をクリックします。
絞り込まれたWidgetを見てみると、YUI Tree Viewというのがあります。これは、Yahoo!が提供しているYUIコンポーネントの1つで、これを簡単に導入するためのDreamweaver Widgetです。このWidget以外にも、YUIのWidgetがあり、またYUI同様制作者の多くに馴染みのあるJQueryを活用したWidgetもあります。

このWidgetのページには、各Widgetの概要とスクリーンショットが掲載されており、直ぐに使いたい場合は、「Download」ボタンをクリックすることで、ダウンロードすることができます（※注意：ダウンロードには、Adobe ID（無償）でログインする必要があります）。また、各Widgetの名前をクリックすると、そのWidgetの詳細ページが表示されます。詳細ページには、どのフレームワークを使用しているのかだけでなく、そのWidgetのライセンス形態や費用、Widgetを利用できるOSが記載されています。
それでは、リストから、YUI Calendarというものを探して、ダウンロードしましょう。

アプリケーションバーから「Web Widgetを参照…」をクリックします。

Webブラウザが立ち上がり、Dreamweaver Web Widgetsページが表示されます。
Webブラウザが立ち上がり、Dreamweaver Web Widgetsページが表示されます。

License Type メニューで、提供されているWidgetのライセンス仕様を選択し絞り込むことができます。
License Typeメニューで、提供されているWidgetのライセンス仕様を選択し絞り込むことができます。

ツリービューやツールチップを表示させるといった様々なWidgetを見ることができます。
お馴染みのjQueryを利用したWidgetもあります。

Widgetの名称をクリックすると、より詳しい内容を見ることができます。
YUIのCalendar Widgetの詳細ページです。

Widgetをダウンロードするには、「Download」ボタンをクリックします。

アドビのWebサイトにログインしていない場合は、ログイン画面が表示されるので、
Adobe IDとPasswordを入力して「Sign in」をクリックします。

ログインが完了すると、このような画面に変わりWidgetのダウンロードが始まります。

Web Widgetのインストール

ダウンロードしたWeb Widgetは、拡張子が.mxpという名前のファイルです。拡張子.mxpのファイルは、DreamweaverやCreative Suiteをインストールする際に同時にインストールされるExtension Managerで読み取ることができます。Extension Managerは、Dreamweaverだけでなく、FireworksやFlashなどに拡張機能を加える際にも利用されるアプリケーションで、Dreamweaver Widgetも同様の形式のファイルでExtension Managerを用いてDreamweaverにインストールします。
ダウンロードした「YUI_Calendar.mxp」をダブルクリックすると、Extension Manager CS4が起動し、このYUI Calendar Widgetをインストールする際の注意事項が表示されます。ここで、「承諾する」を選ぶとインストールが始まります。「承諾しない」を選ぶとインストールされない仕組みになっています。
Dreamweaverが起動している状態で拡張機能をインストールした場合は、拡張機能のインストールが完了する際、図のようなダイアログが表示されるので、OKをクリックし、Dreamweaver CS4を終了して、再度起動します。

ダウンロードしたWidget。Extension Managerのパッケージ形式のファイルです。
ダウンロードしたWidget。
Extension Managerのパッケージ形式のファイルです。

ダウンロードしたWidgetをダブルクリックすると、Extension Manager CS4が起動しインストールが始まります。
ダウンロードしたWidgetをダブルクリックすると、
Extension Manager CS4が起動しインストールが始まります。

インストールが完了したら、必要に応じてDreamweaverを再起動します。

インストールされたWidgetやその他拡張機能はここにリストされます。
削除する際には、図の「削除」をクリックします。

Web Widgetを使ってみよう

Dreamweaver CS4を起動したら、新規ドキュメントを作成し、任意の名前で保存しておきます（既存のドキュメントでも良いですが、ここでは新規ドキュメントで行います）。さきほどインストールしたYUI Calendarを挿入しましょう。
Web Widgetは、次の場所からアクセスすることができます。

挿入メニュー
挿入パネル

まず、挿入メニューからの挿入方法を紹介します。挿入メニューをクリックすると、メニューの最下部にYUIというメニュー項目があります。このYUIから、YUI Calendarを選択します。
次に、挿入パネルからの挿入方法です。挿入パネルのメニュー項目を選択すると、「お気に入り」の下にYUIという項目があるので選択し、YUI Calendarをクリックします。

　＊※ YUIのWeb Widgetは、Calendar以外にもTabViewやDataTableといったWidgetがあるので、それらをインストールすると、この項目にリストされます。

どちらかの方法でYUI Calendarを選択またはクリックすると、ドキュメントウィンドウにカレンダーオブジェクトが挿入されます。ひとまず、このドキュメントを保存しておきます。Ctrl+Sで保存すると、図のようなダイアログボックスが表示されます。これは、YUI Calendarを利用する際に必要なコンポーネントを保存する旨のもので、OKをクリックします。
保存が完了したら、「ライブビュー」をクリックしてみましょう。

カレンダーが表示されました。YUIやその他Web Widgetの多くは、JavaScriptによって実現されているものなので、通常の編集状態ではプレビューすることができません。そこで、Dreamweaver CS4の新機能である「ライブビュー」を使うことで、AjaxなどのJavaScriptを活用したコンテンツをDreamweaverから離れることなく確認することができるのです。

新規のドキュメントを作成。
既存のページに挿入する際には、ページを開きます。

「挿入」-「YUI」を選択。
インストールされたWidgetは、挿入メニューの一番下にメニューとして追加されます。

挿入パネルの「お気に入り」の下にも追加されます。
ここで、使用したいWidgetを選択します。

メニューを選択すると、「挿入」ボタンが追加されています。
このボタンをクリックしてWidgetを挿入します。

水色のタブ付きの枠で囲まれたところが、挿入したWidgetオブジェクトです。

初めて使用するWidgetの場合、ファイルを保存すると
オブジェクトに関連するファイルをサイトルートに保存する必要があります。

サイトルートにYUIというフォルダがコピーされています。

Dreamweaver CS4から追加された「ライブビュー」ボタンをクリックします。

ライブビューに切り替わり、動作を確認することができます。

Widgetのリスト

Widget名	フレームワーク	概要
lightbox gallery	jQuery	有名なライトボックスを実現するWidgetです。
Spry Rating	Spry	Spryを利用したレーティングです。
Digg Widget	jQuery	Diggのオブジェクトを追加します。
Google Gadgets	Google	Googleの様々なガジェットを導入することができるWidgetです。
thickbox gallery	jQuery	リッチUIなスライドショーを公開できます。
YUI TreeView	Yahoo	サイト内でWindows Explorerライクなツリーを表示します。
YUI Tooltip	Yahoo	オブジェクトにマウスをのせた際にツールチップを表示させます。
YUI TabView	Yahoo	ページ内でタブによる表示切り替えが可能になります。
YUI Slider	Yahoo	ページ内にスライドバーを導入します。
YUI Menu	Yahoo	メニューボタンを追加します。
YUI DataTable	Yahoo	ソート可能なデータテーブルを追加します。
YUI Calendar	Yahoo	ブログなどでもお馴染みのカレンダー機能を追加します。
YUI Button	Yahoo	リッチUIなボタンを追加します。
jQuery UI Tabs	jQuery	ページ内でタブによる表示切り替えが可能になります。
jQuery UI Slider	jQuery	ページ内にスライドバーを導入します。
jQuery UI Dialog	jQuery	オリジナルのダイアログボックスを追加します。
jQuery UI Calendar	jQuery	ブログなどでもお馴染みのカレンダー機能を追加します。
jQuery UI Accordion	jQuery	アコーディオンUIを追加します。
Ken Burns Slideshow	MooTools	リッチUIなスライドショーを公開できます。
phatfusion sortableTable	MooTools	ソート可能なデータテーブルを追加します。
phatfusion slideShow	MooTools	リッチなスライドショーを公開できます。
phatfusion slider	MooTools	スライドバーを追加します。
phatfusion roundedCorners	MooTools	角丸のボックスを実現させるためのWidgetです。
phatfusion multiBox	MooTools	flv、wmv、mp3などの動画ファイルやHTML、Ajaxを使用したHTMLページ、画像などのフォーマットポップアップさせることができるようになります。
phatfusion imageMenu	MooTools	イメージを利用したメニューを追加します。

(2009年3月現在)

いかがでしたか？　これまでこうしたリッチなUIを持つオブジェクトを利用するには、ソースコードを貼り付けて、関連するファイルをディレクトリにコピーして、関連するファイルへのリンクを貼って……といった作業が必要でしたが、Dreamweaver Web Widgetsを活用すると、簡単にリッチなUIを実現させることができるのです。
是非皆さんも、Web Widgetを利用して、コンテンツリッチなWebサイトを作ってみませんか？