2013-10-11
ドットインストールで知った Emmet のちょっと便利なショートカットキー
ドットインストールで知った Emmet のちょっと便利なショートカットキーの紹介。
最近実装された機能ではないとは思うので、なぜ調べなかったんだろうという思いです。
Emmet/Zen-coding入門 (全9回) – プログラミングならドットインストール
ドットインストールおよび以下の内容については、Sublime Text 2 に Emmet をインストールした場合のショートカットキーになります。
編集可能な場所へ移動
ctrl + option + ← で前、ctrl + option + → で次の編集可能な場所へ移動します。
以下の様な HTML があり、ul 開始タグの前にカーソルがある場合、ctrl + option + → で最初の li 開始タグの直後にカーソルが移動します。
その次は href のダブルクォートの間にカーソルが移動します。
地味だけど便利。
参考: #02 まずは基本をマスターしよう | Emmet/Zen-coding入門 – プログラミングならドットインストール
参考: Go to Edit Point （Emmet の公式ページ）
右側にある、「Try it yourself」を押すとブラウザでこの機能を試すことができます。
画像のサイズを取得
画像の挿入については、AutoFileName というパッケージを使っています。
初回はこれでいいですが、画像の差し替えが発生した場合に自動でサイズ変更をしてくれません。
Dreamweaver では、プロパティパネルからを「元のサイズに戻す」ボタンをクリックするとサイズが正しいものに修正されます（コードビューではでません）。
それと同じことを shift + ctrl + I で実現できます。
参考: #09 actionを使ってみよう | Emmet/Zen-coding入門 – プログラミングならドットインストール
こちらの動画では img タグについての紹介だけでしたが、background プロパティでも使用できます。
.block{
background: url(sample.png);
}このような場合、background: url(sample.png); のどこかにカーソルがあるようにして、shift + ctrl + I を押すと、以下のようになります。
.block{
background: url(sample.png);
width: 100px;
height: 100px;
}こちらについては、必ずしも画像のサイズでボックスのサイズが決まるわけではないので、どこまで使えるのかは微妙なところ。
参考: Update Image Size （Emmet の公式ページ）
ショートカットキーは Sublime Text 2 のものと異なりますが、動作の確認はできます。
AutoFileName の補完について
AutoFileName はデフォルトで height → width の順番での補完ですが、width → height の順番が好きなので、以下の設定をしています。
- メニューバーから Preferences -> Settings – User を開く
"afn_insert_width_first": trueを追記し、保存
まとめ
普段使っている機能以外にもまだまだ知らない機能があるので、まだ作業効率は上げられそうですね。
公式ドキュメントを見ながら色々試してみようと思います。
なお、Sublime Text については、ショートカットキー違うからなのか、GitHub にアクションのショートカットキー一覧が載っているので、こちらを参考にしてみてください。