このマスターシリーズでは、Dreamweaver CS5.5の新機能の中からモバイル開発機能を中心に解説します。

Dreamweaverはデザイナー向けの製品であると思われがちですが、実はJavaScript/PHP/ASPなどのプログラムを行うデベロッパー向けの機能も充実しています。例えば、PHPなどのコードヒントや、MySQLと接続するプログラムをマウス操作で開発できる機能など。さらに新しいDreamweaver CS5.5では、近年注目を浴びているjQueryのコードヒント機能も搭載されました。本記事では、簡単なサンプル作成を通して、Dreamweaver CS5.5で充実したjQuery開発環境を解説します。

作成するサンプルについて

今回作成するサンプルは、「ヘルプ」部分をクリックするとコンテンツが見え隠れするというものです。

コンテンツの準備

Dreamweaverを起動して新規ファイルを作りましょう。どのHTMLバージョンを選んでもかまいませんが、ここではHTML5を選んで通常のHTMLファイルを作成します。

次に以下のHTMLコードを記述します。各要素に付加したid属性に注目しておいてください。

<dl id="help"> <dt><a href="#helpDoc">ヘルプ</a></dt> <dd id="helpDoc">jQueryを読み込んで、「$(」と打ち込めばコードヒントが表示されます。</dd> </dl>

そして、スタイルシートを記述してスタイルを整えます。この段階では、ヘルプ内容は表示されたままです。

#help { width: 320px; border: 1px solid #174cec; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #help dt { background-color: #174cec; color: #fff; padding: 5px; font-weight: bold; } #help dt a { color: #fff; } #help dd { padding: 5px; margin: 0; }

jQueryを使った開発

コンテンツが用意できたら、jQueryを使ってクリック時の動作を実装していきます。コンテンツを表示した際に初期状態ではヘルプ内容を隠しておき、ヘルプリンクをクリックするとスライドダウンしながらヘルプ内容を表示し、再度ヘルプリンクをクリックすると隠れるといったスクリプトを作成します。

まずは、jQueryを読み込みます。</body>タグの直前に記述するとよいでしょう。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

読み込むjQueryのURLは、jQuery公式サイトのDownloadコーナーをご覧ください。直接CDN(Contents Delivery Network)へ参照してもよいですし、ファイルをダウンロードして参照してもよいでしょう。

続いてJavaScriptを記述していきましょう。ここでは、ドキュメント内の</body>タグの直前に記述します。

<script type="text/javascript"> </script>

まずは、ヘルプ内容を隠します。次のように打ち込みましょう。

$(

するとコードヒントが表示され、はじめに「document」か「this」かを選べます。続けて「'#」と打ち込むと、現在のHTML内のDOMを解析してid属性がリストアップされます。

マウスやキーボードで選んで、次のように記述しましょう。

$('#helpDoc')

続いて「.」を打ち込むと、関連付いたメソッドやプロパティの一覧が表示されます。

ここでは「hide()」と打ち込むため、「h」を打ち込んでみましょう。候補が絞り込まれます。次のようになるように記述してください。

$('#helpDoc').hide();

候補が1つに絞りこまれたら、打ち込んでいる途中でもEnterキーを押すとコードが補完されます。ここまでのスクリプトは以下のようになります。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $('#helpDoc').hide(); </script>

ライブビューで動作を確認

それでは、ここまでの動作を確認してみましょう。Dreamweaverの「ライブビュー」では、JavaScriptの動作もサポートしているため、動作確認もソフトウェア内で行うことが可能です。図6の[分割]ボタンをクリックして分割ビューにします。さらに、図7の[ライブビュー]ボタンをクリックしてライブビューに切り替えます。

すると、図8のようにヘルプ内容が隠れます。コードを書き換えるとほぼリアルタイムでライブビューにも反映され、動作をその都度確認することができます。このまま開発を続けていきましょう。

クリックイベントを実装する

続いて、ヘルプリンクをクリックしたら、ヘルプ内容がスライドダウンで表示されるプログラムを作ってみましょう。前述のプログラムに続きを記述していきます。

$('#help

id属性を選択した後、半角空白を打ち込むとDOMをたどってさらに候補が表示されます。

ここでは「dt」を選んでさらに「a」を選んで、次のようなセレクタになるように記述してきます。

$('#help dt a')

続けて、次のように記述していきます。

$('#help dt a').bind(

すると、bindメソッドのパラメータがコードヒントとして表示されます。パラメータの候補が複数ある場合は小さな矢印が表示されるので、クリックすると別候補を見ることができます。

ここでは3番目の書き方をしていきます。続きを記述していきましょう。

$('#help dt a').bind('click', function() { });

これで、クリックしたときのイベントを定義できました。後はスライドアニメーションのスクリプトを記述します。最終的に次のようなプログラムになります。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $('#helpDoc').hide(); $('#help dt a').bind('click', function() { var href = $(this).attr('href'); $(href).slideToggle(300); }); </script>

ライブビューで動作を確認すると、ヘルプリンクをクリックする度にヘルプ内容が開いたり閉じたりするようになりました。

その他の役立つ機能

こうしてJavaScriptで開発していくと、括弧の書き忘れなどといった文法エラーが発生することがあります。そんな時も、Dreamweaverはリアルタイムでプログラム内容を解析しているためエラーを通知してくれます。

また、[ライブコード]ボタンをクリックすると、JavaScriptがHTML内容を書き換える様子を確認することもできます。

例えば、サンプルの表示直後にヘルプ内容が非表示になるのは、図13のように「display: none」というCSSが割り当てられているからだとわかります。

外部ファイルでのコードヒント

ここまでドキュメント内にJavaScriptを記述してきましたが、大規模なJavaScriptの場合は外部ファイルに記述をすることが多くなります。外部ファイルの場合、単純にファイルをDreamweaverで開いてしまうと、コードヒントを利用できません。

そこで、一度JavaScriptを読み込んでいるHTMLファイルを開いて、関連ファイルツールバーからJavaScriptファイルを開いて編集しましょう。そうすれば、元のHTMLファイルのDOMを保持してコードヒントなどが表示されるようになります。

注意点

Dreamweaver CS5.5に搭載されているjQueryのコードヒントの内容はバージョン「1.5」相当のものです。jQuery自体は2011年3月に1.6にバージョンアップしています。新しいパラメータなどはコードヒントに表示されないので注意しましょう。

おわりに

Dreamweaverを利用すれば、動きを持ったWebサイトを簡単に作成することができます。今後ますます、WebサイトにJavaScriptを活用することが求められることもあり、これを機会にjQueryを学習してみてはいかがでしょうか。

関連記事