kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Keycastr と VS Code Screencast Mode を使って Mac で入力したキー操作を画面表示する

ブラウザ/エディタ/ターミナルなどを使いながら「入力したキー操作」を画面表示したデモ動画を収録する機会がたまにある.今回は Mac で使える選択肢として「Keycastr」「VS Code (Visual Studio Code) Screencast Mode」を紹介する.Mac で幅広く使うなら Keycastr を使って,エディタ操作に限定するなら VS Code Screencast Mode を使う.今すぐ必要じゃなくても「知っておくと便利な」ツールだと思う!

1. Keycastr

まず Keycastr を紹介する.brew でインストールしたらすぐに使える.

$ brew cask install keycastr

github.com

Keycastr を起動し,Mac のメニューバーに常駐している Keycastr のメニューから Start Casting を選べば,キー操作を画面表示できる.以下に iTerm2 で Linux コマンド(サンプル)を実行した画面を載せておく.

f:id:kakku22:20200605145611p:plain

要件次第では「ショートカット操作のみ」を表示したい場合もあると思う.Keycastr では Preferences にある Display only command keys を有効化すると,通常のキー操作は画面表示されず,Mac の Command に限定して画面表示できるようになる.例えば Command + A -> Command + C -> Command + V(全選択コピペ) や VS Code でよく使う Shift + Command + P(コマンドパレット) など.

f:id:kakku22:20200605150130p:plain

また Keycastr は,サイズや色などの設定をカスタマイズすることもできる.以下は極端な例として,Bezel Color を黄色にした.

f:id:kakku22:20200605150704p:plain

2. VS Code Screencast Mode

次に VS Code Screencast Mode を紹介する.VS Code ならデフォルトで使える機能となり,コマンドパレットで screencast と入力する.

f:id:kakku22:20200605151956p:plain

同じく Shift + Command + P(コマンドパレット) を画面表示すると,エディタにオーバレイされる.個人的には消えるまでの時間は短いと思う.なお,オーバレイする場所(高さ)は Vertical Offset 設定で変更することもできる.

f:id:kakku22:20200605152007p:plain

まとめ

「入力したキー操作」を画面表示したデモ動画を収録する場合「Keycastr」「VS Code Screencast Mode」を知っておくと便利!Mac で幅広く使うなら Keycastr だけど,設定をデフォルト値にリセットしたり,カスタマイズした設定を保存する機能はなく,今後まだ改善される可能性もありそう.GitHub のリリース情報を確認しよう!