« エディタを使いこなしてHTML&CSSコーディングの速度を上げる | Back To Blog Top | ブログ再考 ~livedoor Blog管理画面がリニューアルしたよ!~ »
AutoHotkeyでHTML&CSSコーディングの速度を上げる
シリーズ目次
- マルチモニタ編
- キーボード・マウス編
- ツール編
- エディタ編
- AutoHotkey編
ちょっとした工夫で作業スピードを上げるシリーズの最後は、AutoHotkeyです。
マークアッパーでAutoHotkeyを使っている人はこれまでに見た事が無いのですが、コーディングがかなり快適になるので試してみると良いと思います。
AutoHotkeyとは、ホットキーへの機能の割り当てなど常駐ソフトの作成に特化したスクリプトエンジン
(autohotkeyとは - はてなキーワードより引用)です。
エディタからブラウザを遠隔更新するAHK
元ネタはmalaさんの最速インターフェース研究会 :: AutoHotkeyを使ってFirefoxをリロードするだけのexeファイルを作ってみたです。 使っているスクリプトもほぼ同じものですが、IE7用も使っています。
これをエディタの外部アプリケーション呼び出し機能に設定しているので、Ctrl+S → Ctrl+Dという動作で、保存 → Firefoxリロードがエディタから行えます。 一々FirefoxをアクティブにしてF5、とかやらずに済むのでとても便利です。
ただ、このスクリプトの効果を100%発揮するには、デュアル以上のディスプレイ環境が必要です。
キーボードショートカットを追加するAHK

CSSを書く時に、セミコロンを忘れないように先に書いておく書き方をする人は多いと思います。
でもそうすると、値を書く時に一つ左へカーソルを移して、書き終わった時に一つ右へカーソルを移さないといけないんですよね。

HTMLでも同じ事が言えます。 こんな時はどうしていますか? マウスでクリック? 矢印キーで移動? それともENDキーでしょうか。
どれも面倒
ぶっちゃけ、上記の3つの方法は全てキーボードのホームポジションから手を離さないといけないので、すごくすごく面倒です。 少しならいいんですが、CSSなんか一行ごとにその作業が発生するのでイライラしますね。
この問題を、AutoHotkeyで解決してみます。
矢印キーとHOME・ENDキーをホームポジションのままで使うAutoHotkeyスクリプト
$^h::
Send, {left}
return
$^j::
Send, {down}
return
$^k::
Send, {up}
return
$^l::
Send, {right}
return
$^+h::
Send, {Home}
return
$^+l::
Send, {End}
return
同じ種類の記述が続くからもうちょっと省略できるんじゃないかな、と思いつつもとりあえず動いているので妥協><
exeファイルのダウンロードを用意しました。 exeなのが心配な人は、AutoHotkey 公式サイトからエンジンをDLして上記コードをコピペして自作してください。
矢印キーとHOME・ENDキーをホームポジションのままで使うAutoHotkeyスクリプト のダウンロード(exeファイル)
解説
Ctrl+HJKLで、矢印キーになります。 Shift+Ctrl+HLで、HOME・ENDキーになります。
ブラウザにF5を送るAHKとは違い、これは起動しっぱなしで使うタイプです。
起動すると、全てのアプリケーションに適用されます。 設定を書き加えれば、エディタのみに効かせる事もできると思います。
「ブラウザの検索窓にフォーカスできないよ!」という人は、Ctrl+Eを試してみると良いと思います。
オマケ:キーボードのCtrlとCaps Lockを入れ替えておくと更に便利
ベクター辺りに色々あるので入れ替えると小指が攣らずに済みます。