実例で小さくはじめる Dreamweaver 拡張機能の開発 (その4)

実例で小さくはじめる Dreamweaver 拡張機能の開発 (その3)

ツールバーのボタンに使う画像の話題です。ツールバーのボタンの画像ファイルは "Objects\Text\EscapeHTML.png" として保存しました。... 途中、省略 ... 今回はここまで。まだ続けます。

Dreamweaver 拡張機能の JavaScript を含む HTML ファイルと、ツールバーのボタンの画像ファイルを保存しても、まだその拡張機能は無効です。拡張機能を有効にするには "Objects\insertbar.xml" ファイルを編集して、挿入ツールバーのボタンを定義して、HTML ファイルと画像ファイルを関連付ける必要があります。

拡張機能のボタンは、挿入ツールバーの任意の位置に追加できます。ツールバーの構成は "Objects\insertbar.xml" の XML ドキュメントを編集して定義します。

今回は、挿入ツールバーの一般カテゴリの末尾に区切りとボタンを追加しました。"ここから" から "ここまで" が追加した部分です。

<category
  MMString:name="insertbar/category/common"
  folder="Common"
  id="DW_Insertbar_Common"
>
  (途中、省略)
<button
  MMString:name="insertbar/tagChooser"
  codeOnly="TRUE"
  command="dw.showTagChooser()"
  id="DW_TagChooser"
  image="Common\Tag Chooser.png"
/>
<!-- ここから --/>
<separator />
<button 
  id="Text_EscapeHTML"
  image="Text\EscapeHTML.png"
  file="Text\EscapeHTML.htm"
  enabled="_VIEW_CODE"
/>
<!-- ここまで --/>
</category>

category 要素はツールバー内の分類を表し、ツールバー上はタブとして表示されます。button 要素はツールバーのボタンを表します。menubutton 要素でグループ化した button 要素は、ドロップダウンリストを表します。separator 要素はその名のとおり、ツールバーの区切りを表します。

button 要素の id 属性には、他の要素を重複しない識別子を指定します。この識別子の名前付けのルールは明示されていませんが、Dreamweaver CS3 拡張ガイドの中では、フォルダ名とファイル名を連携したものを使っています。ですので、今回も同じように "Text_EscapeHTML" としました。

button 要素の image 属性には、保存しておいた画像ファイルを指定します。また、file 属性には、保存しておいた HTML ファイルを指定します。

button 要素の enabled 属性は、いつボタンを有効にするかその条件を指定します。今回は、コードビューの文字列を HTML エスケープすることが目的なので、"_VIEW_CODE" を指定して、コードビューでのみボタンが有効になるようにしました。

実例で小さくはじめる Dreamweaver 拡張機能の開発 (その2)

今回は、コードビューを開きかつフォーカスがあるときのみ、コマンドを実行するよう制限しているので、false としています。この制限については、後日説明します。デザインビューかつその最新の編集結果を対象とするなら、true とすべきでしょう。

この制限については、後日説明します。とは、このことでした。

その1からその4まで続きましたが、説明はここでおしまいです。

ここで取り上げた実例は、挿入ツールバーの拡張でしたが、Dreamweaver 拡張機能には、挿入ツールバー以外にも、紹介しきれないほど、もっと多くの拡張の仕組みがあります。私も全貌を把握できていませんが、Dreamweaver のあらゆる部分が拡張できると捉えてよいと思います。

はじめからその広大な拡張性に向き合うと、どうしてよいのか分からなくなってしまいますが、実例で体感しながら小さくはじめてみると、だんだんと雰囲気が掴めてきて、Dreamweaver CS3 拡張ガイドや API リファレンスの読みどころも見えてきたりしました。

今後も自らのために、拡張機能を活用していく機会が増えますので、その中で発見がありましたら、その都度お伝えできればと思います。