Mac × Dash × command + Eで爆速HTMLコーディングを極める!

fVSwTG05QIaE9FN7tLQ5_IMG_1122

僕のコーディング人生の中でもなくてはならないものの一つが、この「Dash」のスニペット機能。今回はこのDashのスニペット機能を使っていかに快適に、かつ確実に爆速コーディングを目指すエントリです。

Dashとはなんぞ

「Dash 3 - API Docs & Snippets. Integrates with Xcode, Alfred, TextWrangler and many more.」のリンクが見つかりませんでした: (WP Applink Shortcode)

Dashは、一口に言うと、登録した略語を入力すると、対で登録した文字列を瞬時に入力してくれるアプリケーションです。例えば、あらかじめ登録しておいた略語 ttel と打つと、瞬時に文字列 000-123-4567 に変換してくれる、といったあんばい。他に、様々な言語のリファレンス機能があり、そっちがメインなのかもしれませんが。

で、このDashのスニペット機能をHTMLコーディングに応用して、爆速コーディングを極(究)めよう、というお話です。なお、インストールや設定については割愛させていただきます。よしなに。

以前スニペット系アプリはTextExpanderを使ってましたが、最近Dashに移行しました。使い心地はほとんど変わりませんが、dashの場合、日本語入力状態でスニペット名入力を行うと、直前の文字が消えるなどの不都合が生じる場合がありますので、そこだけ注意が必要です。

本エントリの動画で使うテキストエディタ

Atom.ioを使っています。このため、改行時にインデントが自動的に付与される時があります。

本エントリで使う用語について

スニペット名

Dashの登録上「Abbreviation」にあたるもの、つまり展開前の文字列を「スニペット名」と表記します。

スニペット

展開後の文字列およびそのソースを「スニペット」と表記します。

Macのキーボードショートカットについて

最低限覚えて欲しいカーソル系のMacキーボードショートカットを紹介。ホームポジションから離れずカーソルを移動できるため、爆速目指すためには無理にでも使って覚えていただきたいところであります。中でも今回のエントリではcommand + Eを多用、むしろ乱用します。

command + A 行の最初に移動
command + E 行の最後に移動
command + P 上の行に移動
command + N 下の行に移動

スニペット名のルールを決める

さて、いよいよ本題。スニペット名のルールを決めておくことは、地味ですが重要なこと。スニペット名は、例えば「tel」というスニペット名を使うと、いつでもどこでも「tel」と打ったら登録済みのスニペットに変換されてしまいます。これではtelと打ちたいのに打てない。また、意図せずスニペット変換されてしまう可能性もあります。

なので、日常用語ではない名前で、かつなにかしらのトリガー(きっかけ)を含み、自分が忘れず混乱せず、かつ爆速変換するためのトリガーが必要になってくるわけです。

例えばですが、;(セミコロン)をトリガーにして、;tel というスニペット名にすれば、上記のような意図しないスニペット変換や混乱は免れられるわけですが、ここではさらなる速さを求めます。

スニペット名の頭文字を重複させる

僕のおすすめは、略語の頭文字を重複させること。例えば、li なら lli 、table なら ttable といったあんばい。これは、HTMLタグに限らず決めておくと、自分自身が混乱しない。

HTMLタグ名をスニペット名として頭文字を重複させる

上記とかぶりますが、例えば、ulタグのスニペットなら uul 、h3タグのスニペットなら hh3 でスニペット名を登録する。

1文字のHTMLタグなら3回重複させる

2文字のスニペット名は避けるべきと考えますので、例えばpタグなら ppp 、 aタグなら aaa といったあんばいにすることで、意図しないスニペット変換を免れることができ、自分も忘れることはありません。「ああああ」と打ちたい場合は知りません。

クリップボードを使う時は頭にcをつける

後述のクリップボードを使ってスニペットに埋め込む時は、頭にcをつける。pタグならcppp。h2タグならchh2。

例外を作る場合は慎重に

スニペット名が重なるなどの理由で、ルールに例外を作らなければならないことがあります。その時は、副次的なルールを作るなどしてできるだけ混乱しないようにしましょう。

実践1. カーソル位置を指定する

スニペット変換後、カーソルをどの位置に置くか指定できます。例えば、h2タグ。略語はhh2。スニペットは

@cursorがカーソルの位置。このようにスニペット登録することで、任意の位置にカーソルを置くことができます。この場合、スニペット名入力後、即座にpタグに変換され、さらにタグの間にカーソルが移動するため、hh2と打った後そのまま文章を入力することができます。

pタグの場合は、スニペット名はppp。同様にスニペットは

hh2 と打った後、カーソルがタグの間に移動するため、即座に文字列の入力が可能。文字列入力後、カーソルが閉じタグの前にあるので、command + E で行の最後へ移動し、Enterで改行。ここまでが一連の流れです。

pタグも同様に、pppと打った後即座に文字列の入力をします。文字列入力後、command + E → Enter。この流れを体に染み付けるのが爆速コーディングの第一歩。

必ずネスト(入れ子)が必要なタグは以下のように登録しておくと楽かも知れません。

ulタグの場合は、スニペット名は uul 。

liタグは略語は lli。

lli → 文字列入力後は command + E → Enter です。

実践2. クリップボードにコピーした文字列をスニペットにに埋め込む

例えば↓

本日は雨天です。

という文にpタグをつけたい時。上記スニペット名のルールに従い、頭にcをつけてcpppとスニペット名を登録。スニペットは

とします。 @clipboard の部分に、クリップボードにコピーされている文字列が埋め込まれて変換されます。なので、本日は晴天なり を選択してコピーし、任意の場所で cppp と打つことで、pタグで囲まれた文字列に変換されます。

実践3. カーソル位置とクリップボードの複合技

例としてはaタグ。スニペット名はcaaa。コピーした文字列がaタグに囲まれ、カーソルはhrefの値の位置に。

実践4. スニペット変換後プレースホルダーで文字を入力する

スニペットに変換後に出てくる入力画面で、5行目, 9行目の __Test__ の部分に入力できます。同じ文字列を複数入力する際に便利。2箇所に別々の文字列を入れたい場合は、片方を __Test2__ などとします。ちなみに、__(アンダースコア2つ)に囲まれた文字列がプレースホルダーで入力できる部分。この場合は Test がデフォルトの値になります。

下記略語は hhtml

実践5. 実践的なコーディング

こんなHTMLを作成してみます。今までの内容の組み合わせです。

まとめ

さて、Mac × Dashを使ってのコーディングはいかがでしたか?この方法では command + Eがキーとなります。身につければ一段速いコーディングを可能にしてくれることうけあい!ぜひともお試しくださいまし。それでは。