読者です 読者をやめる 読者になる 読者になる

徒然畑

徒然なるままに。

【Dreamweaver】スニペットが一時期流行ったポストペットの新しいサービスか何かと勘違いするくらいわかっていない人向けのスニペット解説

「そんなやついるわけねえだろ?!?!」と思ったあなた、

今まさに目の前にそんなこと考えた人間がいますので目を疑わないでください。

Webデザイン系の記事を読んでいて出会った言葉なんですけど

「あれかな?CSSアニメーションとかPHPとか駆使してメッセージ送るイマドキなポストペット????」

とかちんぷんかんぷんが足生えて歩いているようなこと出会った当初考えてた自分を

我ながらぶん殴りたいくらいです。今まさに。

 

スニペットソースコードのあんちょこメモ!

さてさて本題。

コーディングを行っているときって、結構自分がよく使うお決まりの定型文だったり、よく使うライブラリだったりをまた使いたいときに

「あれ…前ってどう書いたっけ…」と前に書いたソースを探しては時間を浪費し、やっと見つかったときには結構な時間かかってたアアアアってこと、あるんじゃないかと思います。

(実際SEやってると死ぬほどあります(白目))

 

そんなときにあらかじめよく使うコードや定型文を保存しておいて、いざというときにすぐに取り出せるようにする、それがスニペットなのです。

(仕事でソースいじってるくせに知らなかったとは何事かと思うでしょうけどそれくらいでもSEやってますほんますいません)

 

Dreamweaverスニペットを登録してみる

言葉ばかりの説明ではわかりにくいのでとにかく実践あるのみ。

というわけで普段よくお世話になっているDreamweaverCS6でスニペットを登録してみました。

 

①「ウィンドウ」>「スニペット」(ショートカット:Shift+F9)を選択

f:id:mio_U_M:20161027235658j:plain

 

デフォルト設定のままのワークスペースであれば左下の方にスニペットウィンドウが表示されます。

 

スニペットウィンドウから「新規スニペット」を選択

f:id:mio_U_M:20161027235706j:plain

 

※これを選択する際、あらかじめスニペット一覧のどの階層に設定しておきたいか選んでおくと楽です

 

③「スニペット」ダイアログが開いたら、登録したいスニペットの情報を記入

f:id:mio_U_M:20161027235732j:plain

 

④「OK」をクリックすると、設定したスニペットが登録されます

f:id:mio_U_M:20170227220320j:plain

 

ね、簡単でしょ( ͡° ͜ʖ ͡°)

あとは必要な時にスニペットを呼び出せば良いので

CSSなどで長〜い定型文(clearfix用のCSSなどを私は登録してます)などをいちいち打ち込む手間が省けます。

 

Dreamweaverで登録したスニペットにショートカットを割り当てる

せっかく登録したスニペット

でもいちいちクリックでウィンドウカチカチして呼び出すよりも

ショートカットに覚え込ませてサクッと取り出すのが一番の作業短縮ですよね。

というわけで、さっき登録したスニペットをショートカットキーに割り当てます。

 

①編集>キーボードショートカットを選択する

f:id:mio_U_M:20161027235730j:plain

 

②キーボードショートカットダイアログを開いたら、コマンドから「スニペット」を選択し、ショートカットを割り当てたいスニペットを選択、+ボタンをクリックする

f:id:mio_U_M:20161027235733j:plain

f:id:mio_U_M:20170227220911p:plain

 

 ※注意!

上の状態でスニペットにキーを割り当てようとすると以下のようなダイアログが現れます。

これは何かと言うと、現在のアセットが「Dreamweaver Default」を選択して変えようとしていることに対する警告です。

f:id:mio_U_M:20170227220943j:plain

Dreamweaver Default」のアセットは変更することができないので、キーボードショートカットを割り当てる際は自分のオリジナルアセットとして割り当てる必要があるのです。

こんな時は焦らずに、上記ダイアログのOKを押してオリジナルアセットの名前を決定し、新しいアセットとして登録してしまいましょう。

f:id:mio_U_M:20170227220952j:plain

 そうすると、もともと選択していた「Dreamweaver Default」をベースとして新しいアセットが保存されます。この状態で+ボタンをクリックしましょう。

f:id:mio_U_M:20170227221441j:plain

 

④割り当てたいキーを入力する

例えばCtrl +/ に登録したい場合は、カーソルがフォーカス当たってるのを確認してCtrlと/を同時押しすれば良いです。読み取ってくれます。

f:id:mio_U_M:20170227221454j:plain

 内容に問題がなければOKを押して、登録完了です。

f:id:mio_U_M:20161028000606j:plain

うん、eclipseJavaいじってる時と感覚が同じになった。やったね。 

 

そんな感じで、スニペットはゴリゴリコードを書くにつれて不可欠となってくるので

「これを何回も書くのはどう考えても時間の無駄無駄無駄アアア」と思ったものはポイポイ登録して

「これを何回もスニペットから呼び出すのはどう考えても体力の無駄無駄無駄アアア」と思ったものはショートカットも一緒にしちゃえば良いのです。

CSSJavascriptとか書く時に重宝しそうですね。

 

[今回お世話になったサイト]

参考にさせてもらいました。ありがとうございます!

webnaut.jp

delaymania.com