【ツール/エディタ】DreamweaverCC2017でなくなった「選択範囲を囲む」スニペットを拡張機能で再現する | Wood-Roots:blog

2016
11/09

DreamweaverCC2017でなくなった「選択範囲を囲む」スニペットを拡張機能で再現する

Dreamweaver CC2017がリリースされました。

エディタ部分にBracketsを組み込んだりSass/Lessがコンパイルできたりと新機能に注目が集まりますが、その影でひっそりとなくなった機能もあります。

Dreamweaver CC 2017 で非推奨扱いになった機能について

個人的にはスニペットの弱体化が痛い、痛すぎる。

ショートカットを設定できなくなり、さらに選択範囲を囲むスニペットが使えなくなりました。

snipet

工エェ工エェ(゜Д゜(゜Д゜)゜Д゜)ェエ工ェエ工
使ってる人あんまりいないの？？？？？？？なかったら仕事にならないんだけど？？？？？？？

…なくなったものはしょうがない。
幸い同等の拡張機能を自作することでなんとかなりそうですので、作ってみました。

※Windows10を使用しています。

ADs

例えば：選択範囲の前後に<p></p>を入れる拡張機能をつくる

sandwitchp

例えば、選択範囲の前後にpタグを入れる機能を作ります。
名称は「sandwichp」とするとします（ダサいかもしれませんが）。

必要なファイル

file

実際の処理の内容であるスクリプトを記述した.htmlファイルと、拡張機能としての定義を記述した.mxiファイルが必要です。

.htmlファイル

実際に行われる処理を書きます。

1.選択範囲の開始位置、終了位置を取得
2.開始位置に「<p>」、終了位置に「</p>」を入力する

という簡単な処理をJavascriptで記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<HTML>
<HEAD>
<TITLE>前後にPタグ</TITLE>
<SCRIPT LANGUAGE="javascript">
<!--
 
function runCommand(){
//現在のドキュメントを取得
var dom = dw.getDocumentDOM();
//dom.source.getSelection()で選択範囲の開始位置、終了位置が取得できる
var select = dom.source.getSelection();
//開始位置に「<p>」、終了位置に「</p>」を入れる。
//開始位置に入れた文字数分をずらす
dom.source.insert(select[0],'<p>');
dom.source.insert(select[1]+3,'</p>');
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="runCommand()" >
</BODY>
</HTML>

このファイルを「sandwichp.html」として保存します。

.mxiファイル

拡張機能の名前は何か、処理が記述されたファイルはどこにあるか、メニューのどこに挿入するか、などを記述したファイルです。
配布などを考えない場合は以下が最小限になります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="UTF-8"?>
<macromedia-extension
name="前後にPタグ"
version="0.1.0"
type="Suite"
locked="false">
 
<products>
<!-- Dwのバージョンを指定。CC2017以降だと「17」を指定するが、過去のバージョンでも使いたい場合は小さな数字を指定する -->
<product name="Dreamweaver" version="17" primary="true" />
</products>
 
<files>
<!-- スクリプトを記述したHTMLファイル名を「source」に、「destination」にインストール後に保存するフォルダを指定。
以下の場合は
C:\Program Files\Adobe\Adobe Dreamweaver CC 2017\configuration\Commands\mysets\
に置かれる -->
<file source="sandwichp.html" destination="$dreamweaver/Configuration/Commands/mysets/" file-type="ordinary" />
</files>
 
<configuration-changes>
<!-- 「DWMenu_Tools_Commands」でメニューの「ツール→コマンド」に表示される -->
<menu-insert appendTo="DWMenu_Tools_Commands">
<!-- 「id」は他のメニュー類のIDとかぶってはいけない。
C:\Program Files\Adobe\Adobe Dreamweaver CC 2017\configuration\Menus\menus.xml
で確認できる。
「file」は上記のdestinationで指定したパスのcommand以下のパスを指定 -->
<menuitem id="DW_SandwichP" name="前後にPタグ" file="Commands/mysets/sandwichp.html" />
</menu-insert>
</configuration-changes>
<signatures />
 
</macromedia-extension>

このファイルを「sandwichp.mxi」として保存します。

ZIPで圧縮し、拡張子を「.zxp」に変更する

zip

拡張機能としてインストールするには、.mxpか.zxpという形式でないといけません。
.zxpは通常のZIPファイルと同じで拡張子が違うだけですので、ZIPに圧縮してから拡張子を.zxpにすればできあがります。

DMXZone Extension Managerにドラッグ＆ドロップ

exmanager

DMXZONE Extension ManagerはAdobe Extension Managerの代用どころか上回る機能を持つ拡張機能管理アプリケーションです。

使用するためにメールアドレスの登録が必要なのですが捨てアドでも問題ないです、そういう手間をかけてでも使う価値のある便利なツールです。Dreamweaverで拡張機能を使われている方にはぜひお勧めします。

DMXZone Extension ManagerについてはQOOPU.NET様の記事が詳しいです。
【Dreamweaver CC 2015】Emmetのキーボードショートカットを変更する方法

DMXZone Extension Managerに先ほど作成したsandwitchp.zxpをドラッグ＆ドロップして、インストールは完了です。

shortcut
拡張機能ですのでショートカットを設定することもできます。
スニペットを追加するような手軽さはなくなりましたが、なんとか同じ機能を再現することができました！

…DreamweaverはHTMLの編集においては他の追随を許さない機能を持っているのだから、変にIDE化を目指す必要はないと思うのですよね…。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

スニペットでspan挿入を登録していましたが、改悪により絶望しておりました。
記事を参考にさせて頂き、なんとかspan挿入できるようになりました。
良記事ありがとうございました！本当に助かりました！

QOOPU.NET様のリンク先がDNSエラーになっていました。

  • 匿名
  • 2016年11月11日 4:59 PM

Category

Archive

Search

Social