Loading
|
|
|
|
Loading
|
| ＠IT > 開発者のお仕事を楽にするための「Dreamweaverコーディング」のヒント |
 |
|
|
|
Dreamweaver® 8には、「Dreamweaver Extension」と呼ばれるモジュールの組み込み機能を拡張できる仕組みがある。具体的には拡張子が「.mxp」となっているのがエクステンションファイルで、「Extension Manager」を用いてインストールし、Dreamweaver 8内部から利用する。「Extension Manager」はDreamweaverやFlashを拡張するために製品と同時にインストールされるアプリケーションだ。「プラグイン」と似たようなものであると考えると分かりやすい。 Dreamweaver 8の拡張機能の場合、モジュールそのものはJavaScriptあるいはC言語で記述され、多くのモジュールがOSを問わずインストール可能だ。Dreamweaver 8にはこれらモジュールから呼び出せるAPI群が用意されており、モジュールは内部からこれらの関数を利用する。ファイル入出力やHTTPを用いたWebベースのファイルへのアクセス、Dreamweaver 8そのものや外部アプリケーションの制御など、用意された関数の種類は非常に豊富だ。Dreamweaver 8本体に搭載されている機能の多くがこれらのAPIからアクセスできるようになっている。 JavaScriptをモジュールの開発に用いる場合、その文法やプログラムの方法は通常Webの開発で使われているJavaScriptとまったく同じだ。通常のJavaScriptにDreamweaver 8内部からのみ利用可能な関数が付け加えられたイメージで、JavaScriptを使える開発者であれば、誰でもDreamweaver 8用の拡張機能を組むことができる。 機能の概略ばかりを示されても分かりにくいと思うので、実際にDreamweaver 8上で動く拡張機能の実例を見てみよう。
「Dreamweaver 8.0.1 機能拡張 for Movable Type 3.2」は、アドビシステムズとシックス・アパートが共同開発したDreamweaver 8用の拡張機能だ。Dreamweaver 8にMovable Typeのテンプレート編集機能を加えるためのもので、Movable Type用タグの自動補完やタグリファレンスをサポートしたものだ。この拡張機能をDreamweaver 8にインストールすることで、Dreamweaver 8上でMovable Typeのテンプレートを作成、編集できるようになる。
特にタグの自動補完は便利な機能だ。属性の入力支援機能と併せ、作業にかかる負担を大きく軽減してくれる。タグ名の先頭数文字を入力すれば候補はある程度絞られるので、後はその中から選べばいいというわけだ。タグ名を確定させた後はスペースを置くと再びプルダウンメニューが表示され、今度はそのタグの中で使える属性をリスト表示してくれる。長いタグ名を入力する際に入力し間違えるといったミスがなく、素早くテンプレートを組み立てていけるのは使っていても気持ちが良いものだ。 またこの拡張機能には、Movable Typeのタグリファレンスも備わっている。
使い方はDreamweaver 8本体のリファレンスと同様で、タグ名を選んで右クリックメニューから「リファレンス」を選べば、パネルにその解説が表示される。またそのタグのアトリビュート、図の場合は「language」と「format」になるが、これについてもメニューから一発で解説を呼び出すことができるのだ。 このタグの自動補完、属性の入力、タグリファレンスの機能は、すべてエクステンションを用いて実現されている。つまり知識さえあれば誰でもこれと同等のものを開発することが可能ということだ。 この他のDreamweaver 8用拡張機能は、アドビシステムズのサイト「Dreamweaverデベロッパーセンター」からダウンロードできる。これは日本のチームが先行して開発した拡張機能とのことで、現在は日本語版のみの提供となっている。 またユーザーが開発した拡張機能については、「Dreamweaver徹底活用」というサイトでさまざまな種類のものが紹介されている。
実際のところ、Dreamweaver 8の拡張機能開発はそれほど難しいものではない。ある程度JavaScriptが使えて、HTMLについての基本的な知識があれば誰にでもできてしまうようなものだ。 Dreamweaver 8のヘルプには、「Dreamweaver 拡張ガイド」として拡張機能を自作するための基本的な情報が、「Dreamweaver APIリファレンス」としてAPIのリファレンスマニュアルが用意されている。特にAPIリファレンスは量も非常に豊富で、非常に詳細に各APIについて解説されているのだ。
基本的な情報とリファレンスがあれば、欲しくなるのはサンプルソースだ。これには、Dreamweaver 8に元からインストールされているものが使える。 上にも書いたようにDreamweaver 8の一部機能はこのエクステンションの仕組みを用いて実装されており、そのファイルはDreamweaver 8がインストールされたフォルダにある「Configuration」フォルダ以下に収められている。 「Extension Manager」を用いてインストールされた拡張機能の場合、配置される場所は、Windowsでは C:\Documents and Settings\[ユーザー名]\Application Data\Macromedia\Dreamweaver 8\Configuration 、Mac OS X版では /ユーザ/[ユーザー名]/ライブラリ/Application Support/Macromedia/Dreamweaver 8/Configuration だ。なおWindowsでは「Application Data」フォルダはデフォルトで隠しフォルダとなっている。
Dreamweaver Extensionの正体は、拡張機能そのものを定義したHTMLと、実行コードであるJavaScriptあるいはCである。拡張子が「.mxp」となっているエクステンションファイルはこれらをパッケージとしてまとめたものであり、「Extension Manager」はそれを読み取って適切な場所へインストールするためのソフトだ。 また「Configuration」フォルダの中の「Menus」フォルダにある「menus.xml」には、Dreamweaver 8の各メニュー項目とそのメニューを選択した際に実行される拡張機能の対応が記述されている。これを見てそのメニューを実行しながら、拡張機能の挙動を見ていくのも参考になるだろう。
例えば図にあるのは、挿入メニューにある「コメント」を選んだときに呼び出される「Comment.js」だ。Dreamweaver 8のエクステンションはイベント駆動型であり、この場合は「objectTag」関数がイベントハンドラになっている。 19行目から23行目にかけての部分は、デザインビューあるいはスプリットビューでフォーカスがデザインビュー側にある際の処理だ。26行目から28行目にかけては逆に、コードビューあるいはスプリットビューでフォーカスがコードビュー側にある際の処理となっている。28行目にある「dom.source.wrapSelection」は「選択部分を指定された文字列で囲む」というもので、Dreamweaver 8のJavaScript APIにあるメソッドの1つだ。 このようにDreamweaver 8における新規拡張機能の開発は、さほど難しいものではない。ニーズに合わせて自分で拡張機能を開発し実装していくことで、Dreamweaver 8はより使いやすいツールとなるだろう。
Dreamweaver 8にはXSLTオーサリング機能も搭載されている。XSLTとは簡単にいえば、XMLで記述されたデータを別の形式へと変換するための言語だ。XMLはデータを汎用的に記述することがが可能なので、XSLTを用いて別の形式へと変換することでデータの再利用性を最大限に高めることができる。特にデータを頻繁に差し替える必要のあるWebページ、カタログサイトなどでは、XSLTを用いることで管理も楽になるだろう。なお、サポートされているXSLTとXPathのバージョンは、XSLT 1.0、XPath 1.0となっている。 Dreamweaver 8では、XSLTをグラフィカルなユーザーインターフェイスでオーサリングしていくことが可能だ。基本的な作業の手順はXSLTファイルを新規に作成し、XMLファイルを指定して、その中のエレメントをバインディグしていくというものになる。
XML内の各エレメントはファイルを読み込んだ時点で解析され、パネルに一覧表示されるようになっている。パネルに表示されたエレメントはダブルクリックでカーソル位置に配置されるので、これとドラッグ＆ドロップでXSLTの大枠はでき上がってしまうというわけだ。XPathクエリーはDreamweaver 8が自動的に生成してくれるので、ユーザーの側にその知識は必要ない。 XMLファイル内の要素の数が一定していない場合は、Dreamweaver 8の「リピート領域」と呼ばれる機能を用いることになる。これも大仰なものではなく、リピート領域として指定する範囲を選択し、そこにXMLエレメントをバインディングするだけだ。例えばカレンダーに関連するデータなど月ごとに日数が違うデータであっても、リピート領域を用いることで適切な回数だけ再帰的に処理を行ってくれる。
またDreamweaver 8はXSLTプロセッサとしての機能を備えており、例えばXMLとXSLTを用いてHTMLを動的に作成し、ブラウザでプレビューさせることも可能だ。XSLTにはクライアントサイド変換とサーバサイド変換があるが、Dreamweaver 8ではもちろん両方に対応している。
では最後に、Dreamweaver 8のコーディング支援機能の柱の1つであるコードリファレンスについて見ていこう。
コードリファレンスはDreamweaver 8に内蔵された各言語のリファレンスマニュアルで、コードビューで語句を選択して右クリックメニューで検索を行うことができる。用意されたリファレンスはPHPやASP、JSPの他、Dreamweaver 8がサポートするほぼすべてのスクリプト言語に及ぶ。図にMovable Typeのタグリファレンスがあることからも分かるように、このリファレンスそのものも拡張機能により追加登録が可能だ。 各言語についての解説は単なるリファレンスに留まらず、極めて詳細なものとなっている。例えばJavaScriptなどの場合も、1つ1つのプロパティやメソッドの解説についてもそれぞれ独立した項目が設けられており、使い勝手は良い。何より、分からないことがあるたびに書籍をひっくり返す手間がないのがありがたい。スクリプト言語などのリファレンスについては技術書の出版で有名なオライリー提供によるもので、内容についても万全だ。
もちろん、リファレンス中にはコード例が示されていることもある。解説を読むよりサンプルコードを見た方が理解の早いこともあるので、これも行き届いた配慮だ。サンプルコードはワンクリックで選択状態にできるので、そのままコピーして自分が組んでいるコードの中にペーストすることも可能だ。 あらゆる現場にとって、作業効率の向上は至上命題の1つでもある。ユーザーにストレスを感じさせない開発環境は、その効率の向上に寄与することも明らかだ。豊富な開発支援機能を搭載しユーザーの作業を確実にサポートするDreamweaver 8は、正に開発者こそ利用すべきツールであろう。 最終回の次回は、実際のWeb開発の現場でどのようにDreamweaverが活用されているのか、一線で活躍するエンジニアのインタビューを掲載する予定だ。
提供：アドビシステムズ株式会社 企画：アイティメディア 営業局 制作：＠IT 編集部 掲載内容有効期限：2006年12月16日 |
|
