2008-06-26

Dreamweaver Extensionの開発にチャレンジしてみる (その2)

Dreamweaver CS3の体験期間が過ぎてしまい記事の確認ができなくなってしまうという何とも情けない状態に陥っていたのですが、何とか確認環境を整えたので続きを投稿しますw

前回はmicroformats拡張機能を参考にmxiファイルを作るところまででした。ではまず作成したmxiファイルの中身を簡単に説明します(※)。

※ファイルフォーマットの詳細が知りたい方は「The Extension Instration File Format」を参照してください。
<macromedia-extension name="Aiueo" version="0.1.0" type="Suite">
<author name="aquilegia" />
<products>
<product name="Dreamweaver" version="9" primary="true" />
</products>
<description><![CDATA[
あいうえお機能拡張。
]]></description>
<ui-access><![CDATA[
「ヘルプ」メニューから「Aiueo.htmlを開く」を選択して実行する。
]]></ui-access>
<license-agreement><![CDATA[
]]></license-agreement>
<files>
<file source="Aiueo.html" destination="$dreamweaver\Configuration\Menus\Aiueo\" />
</files>
<configuration-changes>
<menu-insert insertAfter="DWMenu_Help_About">
<separator />
<menuitem id="DWMenu_Help_Aiueo" name="Aiueo.htmlを開く"
enabled="true" file="Menus/Aiueo/Aiueo.html" />
</menu-insert>
</configuration-changes>
</macromedia-extension>

このファイルはXML形式でmacromedia-extensionタグをルート要素に拡張機能の情報を記述しています。中には日本語を含めることができ、今回はWindows-31Jで保存したところencoding属性を指定しなくても文字化けすることなく表示されました。

ルート要素のname属性、version属性と子要素として追加したauthor要素、description要素、ui-access要素、license-agreement要素はAdobe Extension Managerで拡張機能をインストールした際に表示される情報のようで、今回は適当な内容です。

重要なのはproducts要素、files要素、configuration-changes要素です。
products要素にはどのAdobe製品の拡張機能をサポートしているかを書きます。今回はDreamweaver CS3(バージョン9)なので「<product name="Dreamweaver" version="9" primary="true" />」と書きました。primary属性はオプションで、今回指定したプロダクトは一つなので付けなくても問題ないです。version属性は間違えると拡張機能をインストールする際にAdobe Extension Managerに怒られます。試しにversion属性に10を指定してインストールすると次のダイアログが表示されました。


次のfiles要素は「この拡張機能はこれらのファイルを使ってますから、拡張機能ファイル(xmp)を作る際は取り込んでくださいね。」というもので、files要素の配下にfile要素で使用ファイルを書いておくと、拡張機能ファイルを作成する際に取り込んでくれます。今回はAiueo.htmlファイルを作ったのでそれを書きました。
最後にconfiguration-changes要素ですが、これが一番厄介でした。microformats拡張機能はバーに項目を追加してますが、メニューには追加していないのでそのまま真似ることができず、しょうがないので説明書(The Extension Instration File Format)を眺めたところ、configuration-changes要素の下にはmenu-insert要素を書けることがわかり、そこから順々に調べていってメニュー項目を追加する設定を書くことができました。ポイントはmenu-insert要素のinsertAfter属性で、この属性には追加したい場所の直前の項目IDを設定する必要があるのですが、どうやって調べてよいのかわかりませんでした。その為、一度この属性に適当な値を指定して拡張機能をインストールし、以下のパスにMenus.xmlというDreamweaverのメニュー構成ファイルが出力されるので、その中身からIDを取得しました。
C:\Documents and Settings\(ログインユーザ)\Application Data\Adobe\Dreamweaver 9\Configuration\Menus\Menus.xml

今回は「ヘルプ(H)」メニューの一番下に追加するので、直前の項目IDは"DWMenu_Help_About"(「Dreamweaver について(_A)」)を設定。

これで拡張機能情報ファイルの作成は終わりです。次は実行するHTMLファイルを作成します。
<html>
<head>
<title>Aiueo</title>
<script language="javascript">
function canAcceptCommand(){
return true;
}
function receiveArguments(){
alert("Aiueo");
}
</script>
</head>
<body>
</body>
</html>

HTMLファイルにはscript要素を追加し、二つの関数を定義しています。canAcceptCommand関数はメニューを選択した際にreceiveArguments関数を呼び出すかどうかを判定する関数です。今回は必ず呼び出すので常に true を返しています。receiveArguments関数にはメニューを選択したときに実行させたい処理を記述します。今回は"Aiueo"と表示する処理を書きました。このファイルを「Aiueo.html」の名前で保存すればHTMLファイルの作成は終了です。

次は作成した二つのファイル(拡張機能情報ファイルとHTMLファイル)を同じディレクトリに置き、Adobe Extension Managerを使って次の手順で拡張機能ファイルを作成します。
  • Adobe Extension Managerを起動。
  • メニューから「ファイル(F)」->「拡張機能の作成(C)」を選択。
  • 表示されたファイルダイアログで作成したmxiファイルを開く。
  • 拡張機能ファイルの保存先を聞かれるので適当な場所へ保存する。

最後に「拡張機能ファイルが正常に作成されました」と表示されれば成功です。下の画像はAdobe Extension Managerを起動したところです。


次は作成した拡張機能を次の手順でDreamweaverへインストールします。
  • Adobe Extension Managerを起動。
  • メニューから「ファイル(F)」->「拡張機能をインストール(I)」を選択。
  • 拡張機能ファイルの選択ダイアログが表示されるので作成したmxpファイルを指定する。
  • 免責事項が表示されるので「承諾する(A)」ボタンを押下。

最後に「拡張機能'Aiueo'のインストールが正常に終了しました」と表示されれば成功です。下の画像はインストールを終えた後のAdobe Extension Managerです。


いよいよDreamweaverの起動です。Dreamweaverを起動して、メニューから「ヘルプ(H)」->「Aiueo.htmlを開く」を選ぶと「Aiueo」とダイアログ表示されます。



一度インストールしてしまえば、インストール先のAieuo.htmlファイルを編集することで手軽に色々と試すこともできます(※変更後二度呼び出さないと反映されませんが・・・)。
C:\Documents and Settings\(ログインユーザ)\Application Data\Adobe\Dreamweaver 9\Configuration\Menus\Aiueo\Aiueo.html

以上でDreamweaver Extensionの開発は終了です。色々と躓くことが多かったですが、拡張機能情報ファイルから拡張機能を作成する方法はWeb上であまり見かけなかったので参考になれば幸いです。

0 件のコメント: