【Dreamweaver】スニペットが一時期流行ったポストペットの新しいサービスか何かと勘違いするくらいわかっていない人向けのスニペット解説
「そんなやついるわけねえだろ？！？！」と思ったあなた、
今まさに目の前にそんなこと考えた人間がいますので目を疑わないでください。
Webデザイン系の記事を読んでいて出会った言葉なんですけど
「あれかな？CSSアニメーションとかPHPとか駆使してメッセージ送るイマドキなポストペット？？？？」
とかちんぷんかんぷんが足生えて歩いているようなこと出会った当初考えてた自分を
我ながらぶん殴りたいくらいです。今まさに。
スニペット＝ソースコードのあんちょこメモ！
さてさて本題。
コーディングを行っているときって、結構自分がよく使うお決まりの定型文だったり、よく使うライブラリだったりをまた使いたいときに
「あれ…前ってどう書いたっけ…」と前に書いたソースを探しては時間を浪費し、やっと見つかったときには結構な時間かかってたｱｱｱｱってこと、あるんじゃないかと思います。
（実際SEやってると死ぬほどあります（白目））
そんなときにあらかじめよく使うコードや定型文を保存しておいて、いざというときにすぐに取り出せるようにする、それがスニペットなのです。
(仕事でソースいじってるくせに知らなかったとは何事かと思うでしょうけどそれくらいでもSEやってますほんますいません)
Dreamweaverでスニペットを登録してみる
言葉ばかりの説明ではわかりにくいのでとにかく実践あるのみ。
というわけで普段よくお世話になっているDreamweaverCS6でスニペットを登録してみました。
①「ウィンドウ」＞「スニペット」（ショートカット：Shift+F9）を選択
デフォルト設定のままのワークスペースであれば左下の方にスニペットウィンドウが表示されます。
※これを選択する際、あらかじめスニペット一覧のどの階層に設定しておきたいか選んでおくと楽です
③「スニペット」ダイアログが開いたら、登録したいスニペットの情報を記入
④「OK」をクリックすると、設定したスニペットが登録されます
ね、簡単でしょ( ͡° ͜ʖ ͡°)
あとは必要な時にスニペットを呼び出せば良いので
CSSなどで長〜い定型文(clearfix用のCSSなどを私は登録してます)などをいちいち打ち込む手間が省けます。
Dreamweaverで登録したスニペットにショートカットを割り当てる
せっかく登録したスニペット。
でもいちいちクリックでウィンドウカチカチして呼び出すよりも
ショートカットに覚え込ませてサクッと取り出すのが一番の作業短縮ですよね。
というわけで、さっき登録したスニペットをショートカットキーに割り当てます。
①編集>キーボードショートカットを選択する
②キーボードショートカットダイアログを開いたら、コマンドから「スニペット」を選択し、ショートカットを割り当てたいスニペットを選択、＋ボタンをクリックする
※注意！
上の状態でスニペットにキーを割り当てようとすると以下のようなダイアログが現れます。
これは何かと言うと、現在のアセットが「Dreamweaver Default」を選択して変えようとしていることに対する警告です。
「Dreamweaver Default」のアセットは変更することができないので、キーボードショートカットを割り当てる際は自分のオリジナルアセットとして割り当てる必要があるのです。
こんな時は焦らずに、上記ダイアログのOKを押してオリジナルアセットの名前を決定し、新しいアセットとして登録してしまいましょう。
そうすると、もともと選択していた「Dreamweaver Default」をベースとして新しいアセットが保存されます。この状態で＋ボタンをクリックしましょう。
④割り当てたいキーを入力する
例えばCtrl ＋/ に登録したい場合は、カーソルがフォーカス当たってるのを確認してCtrlと/を同時押しすれば良いです。読み取ってくれます。
内容に問題がなければOKを押して、登録完了です。
うん、eclipseでJavaいじってる時と感覚が同じになった。やったね。
そんな感じで、スニペットはゴリゴリコードを書くにつれて不可欠となってくるので
「これを何回も書くのはどう考えても時間の無駄無駄無駄アアア」と思ったものはポイポイ登録して
「これを何回もスニペットから呼び出すのはどう考えても体力の無駄無駄無駄アアア」と思ったものはショートカットも一緒にしちゃえば良いのです。
CSSやJavascriptとか書く時に重宝しそうですね。
[今回お世話になったサイト]
参考にさせてもらいました。ありがとうございます！
