Travelogue(トラベローグ)

Travelogue

スニペットをショートカットにすると便利(Dreamweaver)

2010.07.01

Dreamweaverの「スニペット」という機能、使ってますか?
僕は何年もDreamweaverを使い続けていますが、この機能を使い始めたのはごく最近です。
別に必要性を感じなくてこれまで使っていませんでしたが、ショートカットキーとあわせて使うことによって意外と便利になることに気がついたので、いまさらですがちょっと書いときます。

スニペットでできること

Dreamweaverのスニペットは、頻繁に使うHTMLやCSS等のコードを登録しておいて、ボタンひとつで挿入できる機能です。
何でもいいので、自分でしょっちゅう手で打って入力しているコードがあればそれを登録してみましょう。

手で打っても、あるいは別のファイルからコピーペーストしても、そんなに時間がかかるわけではありません。そのため、スニペットを単体で使うなら(多少は便利でしょうが)そんなに変わらないような気がしてしまって、以前はスニペットの便利さを実感できずにいました。

しかしスニペットにショートカットキーを割り当てて使ってみると、一度の小さな作業がこれまでより「少し」早くできることと思います。
一度の作業は「少し」でも、それが頻繁に発生するケースなのでその積み重ねによる明らかな労力軽減を実感することができました。

参考例

例えば僕の場合、CSSのコメントタグを登録しています。長いCSSファイルの中身を整理するために小見出しとして設けておくコメントタグです。CSSを書くときはほぼ毎回使いますし、ひとつのファイルの中にいくつも書きます。

CSSのコメントタグは以下のように書きます。

/* コメント */

しかし、これだけだとパッと見た感じソース中であまり目立たないので、目印としての役割に期待して書くならもう少し大げさに書いておいたほうがソースを読みやすくなります。
そのため僕の場合はたいていはこんな感じにしています。

/* コメント
---------------------------------------------------- */

しかしこれを毎回手で打つのはちょっと長いです。さらに、毎回ラインの長さが揃ってないのも綺麗じゃないですし、以前は自分で作った別のCSSファイルから該当部分をコピーして持ってきていました。前述の通りそれでもそんなに手間がかかるわけではありませんが、これをスニペット&ショートカットキーに登録するとちょっと便利さがレベルアップします。

具体的な手順

スニペットパネルの右下の「新規スニペット」ボタンで追加します。

「新規スニペット」ボタン

「スニペット」というダイアログボックスに必要事項を入力します。
「選択範囲を囲む」か「ブロックの挿入」を選択できるのが便利です。「選択範囲を囲む」にすれば、選択中のコンテンツを開始タグと終了タグで囲むことができます。

「スニペット」ダイアログボックス

メニュー>編集>キーボードショートカットを選択します。
もし現在のセットが最初から用意されたもののままになっているなら、一応、複製したセットを編集することをおススメします。
「コマンド」のプルダウンメニューで「スニペット」を選択すると、事前に用意してあるスニペットの一覧が出てきます。
あとは好きなショートカットを設定すれば完了です。

メニュー>編集>キーボードショートカット

ちなみに僕が思うに、あまり使わないようなコードまでスニペットにしても、使わないのでスニペットになっていることすら忘れ、ましてやショートカットキーを何に設定しているのかなんて覚えていることは難しいと思われます。
これでは意味がないですし設定する手間が無駄になってしまうので、本当に頻繁に使うものだけを数個登録するだけで十分かと思います。

※本エントリーの内容は、DreamweaverのバージョンCS3の仕様を対象として執筆しています。その他のバージョンでは仕様が異なる可能性があります。

Copyright © 2004-2017 Travelogue.

Pagetop