Cliborを最強にする連携術:AutoHotkeyとVSCodeで定型文入力を自動化する
Webサイト制作、毎日お疲れ様です!HTMLやCSSのコーディング、順調に進んでいますか?
もしあなたが、
- 「毎回同じ
<div class="..."></div>って書くの、地味に面倒…」 - 「
console.log()の入力、もっと楽にならないかな?」 - 「よく使うコードをスニペット登録してるけど、VSCode以外でも使いたい!」
こんな風に感じているなら、この記事はあなたのためのものです。何を隠そう、ほんの数ヶ月前の私が、まったく同じことで悩んでいたのですから。
こんにちは!この記事を書いている私は、プログラミング知識ゼロからAIの力を借りて学習を始め、1ヶ月半で2つのWebサイト(buyonjapan.com, copicode.com)を独力で立ち上げた、元・初心者です。だからこそ、皆さんが「どこでつまずくか」が手に取るように分かります。
この記事では、私が試行錯誤の末にたどり着いた「Clibor × AutoHotkey × VSCode」という三位一体の連携術を、余すところなくお伝えします。専門用語は極力使わず、この記事のコードをコピペするだけで、あなたのPCが最強のコーディングマシンに生まれ変わることをお約束します。「動く」楽しさを、ぜひ体験してください!
準備編:三種の神器をインストールしよう
まずは、今回の主役となる3つのツールを準備します。すでにインストール済みの方は、次の「基礎編」に進んでくださいね。
1. Clibor(クリボー)
ご存知、最強のクリップボード拡張ツールです。コピーした履歴を好きなだけ保存し、いつでも呼び出せます。定型文登録機能も強力ですが、今回はその「定型文機能」をAutoHotkeyでハックしていきます。
インストール方法はとても簡単。上記サイトからダウンロードして、インストーラーの指示に従うだけです。
2. AutoHotkey(オートホットキー)
PC上のあらゆる操作を自動化できる、魔法のような無料ツールです。短いコマンドでキーボード入力やマウスクリックをシミュレートできます。「なんだか難しそう…」と感じるかもしれませんが、大丈夫。今回はコピペで動くコードしか使いません!
【重要ポイント】 AutoHotkeyにはバージョンv1.1とv2.0がありますが、Web上で見つかる多くのスクリプトはv1.1向けです。互換性に悩まないためにも、特別な理由がなければv1.1をダウンロードすることをおすすめします。
(画像はイメージです)
3. Visual Studio Code(VSCode)
多くのWebクリエーターが愛用する、高機能テキストエディタですね。この記事を読んでいるあなたも、きっと毎日お世話になっていることでしょう。今回は、このVSCodeでのコーディング作業を劇的に効率化していきます。
すべてのツールが揃ったら、いよいよ連携の設定に進みましょう!
基礎編:CliborとAutoHotkeyを初めて連携させる「感動」体験
まずは、この連携がいかに簡単で、そしてパワフルであるかを体感していただくための、小さな一歩から始めましょう。目標は、Cliborに登録したキーワード(例: `@あいさつ`)を入力すると、「いつもお世話になっております。」という文章が自動で入力されるようにすることです。
ステップ1: AutoHotkeyスクリプトをCliborに登録する
Cliborの定型文には、実はAutoHotkeyのコマンドをそのまま記述できます。これこそが、今回の連携術のキモです。
- Cliborのメイン画面を開き、「定型文」タブを選択します。
- グループを右クリックし、「新規作成」を選びます。
- 以下のコードを「内容」の欄にそのまま貼り付けてください。
#Persistent
:*?:@あいさつ::いつもお世話になっております。株式会社〇〇の△△です。
Return
コードの簡単な解説:
#Persistent: スクリプトを常駐させるためのおまじないです。:*?:@あいさつ::: 「`@あいさつ`」という文字列が入力されたら、という意味のトリガー(ホットストリング)です。`:`の間にある`*`は「直前が文字でも発動」、`?`は「単語の途中でも発動」を意味します。最初は難しく考えず、この形で覚えておけばOKです!いつもお世話に...: 実際に出力したい文章です。Return: スクリプトの処理をここで終了するという意味です。
ステップ2: Cliborからスクリプトを実行する
- 登録した定型文を右クリックし、「AutoHotkeyで実行」を選択します。
- タスクトレイ(画面右下のアイコンが並んでいる場所)に、緑色の「H」のアイコンが表示されれば成功です。これで、先ほどのスクリプトがPC上で待機している状態になります。
- VSCodeやメモ帳など、好きなテキスト入力画面を開いて、`@あいさつ` と入力してみてください。
どうでしょうか? 入力したそばから、文章がパッと変換されたはずです! これが、CliborとAutoHotkeyの連携の第一歩。簡単すぎて拍子抜けしたかもしれませんね。でも、この単純な仕組みこそが、無限の可能性を秘めているのです。
応用編①:コピー履歴を自在に操るFIFO/LIFO連携
さて、ここからが本番です。Cliborの真価は、その豊富なクリップボード履歴にあります。ですが、「2つ前にコピーしたものを使いたいな…」と思ったとき、わざわざCliborの画面を開いて選択するのは少し手間ですよね。
AutoHotkeyを使えば、Cliborの画面を開かずに、コピー履歴の2番目、3番目、あるいはそれ以前のものを直接貼り付けられます。 これがFIFO(First-In, First-Out)/LIFO(Last-In, First-Out)連携です。
難しそうに聞こえますが、やることは先ほどと同じ。以下のスクリプトをCliborの定型文に登録し、「AutoHotkeyで実行」するだけです。
#Persistent
; Ctrl + Shift + V で2番目の履歴を貼り付け (FIFO)
^+v::
PostMessage, 0x319, 106, 0,, ahk_class TClibor
Return
; Ctrl + Alt + V で3番目の履歴を貼り付け (FIFO)
^!v::
PostMessage, 0x319, 107, 0,, ahk_class TClibor
Return
コードの簡単な解説:
^+v::: `^`はCtrl、`+`はShiftを意味します。なので、これは「Ctrl + Shift + V」が押されたら、というトリガーです。PostMessage, ...: ここが魔法の呪文です。Cliborに対して「〇〇番目の履歴を貼り付けて!」という命令を送っています。`106`が2番目、`107`が3番目に相当します。この呪文の詳細はClibor公式サイトに記載されており、信頼できる情報です。
このスクリプトを実行した状態で、適当な単語を3つ、順番にコピーしてみてください(例:「りんご」→「ゴリラ」→「ラッパ」)。
- 普通に`Ctrl + V` を押すと、最後にコピーした「ラッパ」が貼り付けられます。
- 次に、`Ctrl + Shift + V` を押してみてください。「ゴリラ」が貼り付けられるはずです!
- 最後に、`Ctrl + Alt + V` を押せば、「りんご」が貼り付けられます。
Web制作では、あちこちからクラス名や色コード、テキストなどをコピーしてくる場面が頻繁にありますよね。この連携を使えば、タブの切り替えやCliborを開く回数が劇的に減り、思考を中断させずにコーディングに集中できます。
応用編②:VSCodeでのコーディングを劇的に変える実践的スクリプト
お待たせしました。いよいよ、この連携術の真骨頂であるVSCodeでの活用例をご紹介します。VSCodeにも標準でスニペット機能はありますが、「AutoHotkey連携は、VSCode以外のエディタやブラウザの入力欄でも同じように使える」という圧倒的なメリットがあります。
以下のスクリプトをまとめて一つの定型文としてCliborに登録し、「AutoHotkeyで実行」するだけで、あなたのVSCodeが生まれ変わります。
#Persistent
; =============================================
; HTML コーディング用
; =============================================
; `!html` と入力でHTML5の基本テンプレートを展開
:*?:!html::
(
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{Up 3}{End}{Left 10}
</body>
</html>
)
Return
; =============================================
; CSS コーディング用
; =============================================
; `!flex` と入力でFlexboxの基本形を展開
:*?:!flex::
(
display: flex;
justify-content: center;
align-items: center;
)
Return
; =============================================
; JavaScript コーディング用
; =============================================
; `!log` と入力でconsole.log()を挿入し、カーソルを()内に移動
:*?:!log::
SendInput, console.log();{Left 2}
Return
; `!q` と入力でquerySelectorを挿入し、カーソルを('')内に移動
:*?:!q::
SendInput, document.querySelector('');{Left 2}
Return
; =============================================
; 共通
; =============================================
; `!date` と入力で今日の日付 (YYYY-MM-DD) を挿入
:*?:!date::
FormatTime, CurrentDateTime, , yyyy-MM-dd
SendInput, %CurrentDateTime%
Return
【超重要】カーソル移動の魔法 {Left 2}
このスクリプトの中でも、特に注目してほしいのが `!log` や `!q` の最後についている {Left 2} の部分です。これは「左カーソルキーを2回押す」という命令です。
これにより、例えば `!log` と入力すると、console.log(); と展開された後、カーソルが自動で `()` の中にスッと移動します。そのまま変数名などを入力し始められるので、マウスやカーソルキーで「戻る」という一手間が完全になくなります。この小さな効率化の積み重ねが、1日の作業時間を大きく短縮してくれるのです。
!html の例では {Up 3}{End}{Left 10} を使って、展開後にカーソルが <title> タグの Document の部分に移動するように調整しています。このように、自分の好きな位置にカーソルを動かせるのがAutoHotkeyの強力な点です。
気をつけるべき点とトラブルシューティング
この連携は非常に強力ですが、いくつか知っておくべき注意点があります。私が実際につまずいたポイントなので、ぜひ覚えておいてください。
1. スクリプトが動かない? まずは再実行!
PCを再起動したり、スリープから復帰したりすると、AutoHotkeyのスクリプトが停止してしまうことがあります。「あれ、動かなくなった?」と思ったら、まずはCliborの定型文を右クリックし、再度「AutoHotkeyで実行」を試してみてください。だいたいはこれで解決します。
2. 意図しない変換を防ぐトリガーの工夫
例えば、トリガーを `log` のような一般的な単語にしてしまうと、文章を書いている途中で勝手に `console.log()` に変換されてしまい、非常にストレスです。
これを防ぐため、私はすべてのトリガーの先頭に `!` (エクスクラメーションマーク) をつけるルールにしています。(例: `!log`, `!html`) これなら、普段の文章入力で誤爆することはまずありません。自分なりのルール(`@` や `;` を頭につけるなど)を決めるのがおすすめです。
3. 複数のスクリプトを管理する方法
今回のように、複数の機能を一つの定型文にまとめて登録しておくと管理が楽です。スクリプトを修正したいときは、Cliborの定型文を編集し、再度「AutoHotkeyで実行」するだけで変更が反映されます。(古いスクリプトはタスクトレイのアイコンを右クリックして「Exit」で終了させておきましょう)
まとめ:あなただけの「最強の環境」を育てていこう
今回は、CliborとAutoHotkey、そしてVSCodeを連携させることで、定型文入力を劇的に効率化する方法をご紹介しました。
- Cliborの定型文にAutoHotkeyスクリプトを登録するだけで連携が始まる手軽さ。
- FIFO/LIFO連携で、コピー履歴をキーボードから自在に操る快感。
- VSCodeでの実践的なスクリプトで、コーディング速度を飛躍的に向上させるパワー。
これらを体験し、「動いた!」という感動を味わっていただけたなら、これ以上嬉しいことはありません。
しかし、本当のスタートはここからです。今回ご紹介したのは、あくまで一例に過ぎません。あなたが「面倒だな」と感じる日々の繰り返し作業こそが、新しい自動化スクリプトを作る絶好のチャンスです。「この作業も自動化できないかな?」と思ったら、ぜひAIに相談しながら、あなただけのオリジナルスクリプト作りに挑戦してみてください。そうやって育て上げた環境は、他の誰にも真似できない、あなただけの「最強の武器」になるはずです。
この記事が、あなたのクリエイティブな活動の一助となれば幸いです。
次のステップへ
クリップボード管理ツールの世界は奥が深く、Clibor以外にも強力な選択肢があります。あなたの使い方に本当に最適なツールを見つけるために、こちらの比較記事もぜひご覧ください。