kakakakakku blog

Weekly Tech Blog: Keep on Learning!

Mac でターミナル操作をレコーディングしてシュッと公開できる「asciinema」

Mac で「ターミナル操作」をレコーディングしたくなる場面がある.ブログに載せたり,GitHub リポジトリの README.md に載せたり,プレゼンテーションでデモを行う場合のバックアップ用途として使ったりする.今までは Terminalizerttyrec + ttygif を使っていたけど,今回は別の選択肢として「asciinema」を試す.発音は [as-kee-nuh-muh] だから「アスキーヌーマ」とか?簡単に紹介すると「asciinema」を使うと「ターミナル操作」をレコーディングして,サービス側にアップロードできる.そしてブログに載せることもできる.

asciinema.org

f:id:kakku22:20201018094006p:plain
GitHub - asciinema/asciinema-logo: Official asciinema logo より引用

インストール 📹

asciinema コマンドは Homebrew で簡単にインストールできる.Homebrew だけじゃなく,pip3 でもインストールできるし,yumapt-get でもインストールできる.Docker を使って docker run コマンドで実行することもできる.今回インストールした最新バージョン v2.0.2 は2019年9月にリリースされているため,直近1年ほどはアップデートされていない?

$ brew install asciinema

$ asciinema --version
asciinema 2.0.2

asciinema.org

ログイン 📹

「asciinema」はサービス登録をしなくても使える.しかし,レコーディングデータは「7日間」で自動的にアーカイブされてしまうため,ブログに載せたりすることを考えると使いにくいと思う.今回はまずサービス登録(メール認証)をしてから,asciinema auth コマンドを実行してアカウント連携をしておく.これで準備完了!

$ asciinema auth
Open the following URL in a web browser to link your install ID with your asciinema.org user account:

https://asciinema.org/connect/00000000-1111-2222-3333-444444444444

This will associate all recordings uploaded from this machine (past and future ones) to your account, and allow you to manage them (change title/theme, delete) at asciinema.org.

レコーディング 📹

asciinema rec コマンドを実行すると,新しく /bin/zsh などのシェルプロセスが立ち上がり,レコーディング状態になる.適当にコマンドを実行して,最終的に ctrl-d でプロセスを落とせば,レコーディングは完了する.

レコーディング後に enterctrl-c を入力するように求められる.挙動の差は以下に簡単にまとめた.なお,asciinema にアップロードをした場合,private とは言え URL を直接指定すればアクセスできるため「限定共有」のような仕組みになる.

  • enter : asciinemapriavate 状態でアップロードする
  • ctrl-c : ローカルファイル (.cast) に出力する
$ asciinema rec
asciinema: recording asciicast to /var/folders/xx/yyy/T/zzz-ascii.cast
asciinema: press <ctrl-d> or type "exit" when you're done

(中略)

asciinema: recording finished
asciinema: press <enter> to upload to asciinema.org, <ctrl-c> to save locally
asciinema: asciicast saved to /var/folders/xx/yyy/T/zzz-ascii.cast

以下に echokubectlcowsay を実行した(本当に適当な👻)サンプルをレコーディングした.asciinema にアップロードすれば,Markdown 形式でブログに載せることもできる.ターミナルデザインはレコーディング時のものではなく,以下から選べるようになっている.今回は Tango を選んだ.

  • Default (asciinema)
  • asciinema
  • Tango
  • Solarized Dark
  • Solarized Light
  • Monokai

asciicast

ローカルファイル (.cast) 📹

レコーディング完了時に ctrl-c「ローカルファイル (.cast)」を出力した場合,asciinema play コマンドを使えばレコーディングを再生できる.本当にコマンドを再実行するわけではなく,実行結果がそのまま表示される仕組みになっている.よって .cast ファイルを一部修正することもできる.そして「ローカルファイル (.cast)」の仕様は GitHub に公開されていて,現在は asciicast file format v2 が使われている.実際に .cast ファイルを読むのは難しいけど,仕様が公開されているのは良いことだと思う.

$ asciinema play zzz-ascii.cast
 ~ echo 'hello'
hello
 ~ k get nodes
NAME             STATUS   ROLES    AGE   VERSION
docker-desktop   Ready    master   13d   v1.18.8
 ~ cowsay kakakakakku
 _____________
< kakakakakku >
 -------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

設定ファイル 📹

「asciinema」には「設定ファイル機能 (Configuration file)」もある.api(API)record(レコーディング)play(再生) の挙動を細かく設定できる.設定ファイルは ${HOME}/.config/asciinema/config に置く.特に recordidle_time_limit はデフォルト off なので,設定しておくと便利.レコーディング時にコマンドを実行せずに静止している時間が続いた場合に指定した秒数に詰めてくれるため,変に間延びしたレコーディングにならない.asciinema rec コマンドのオプションに --idle-time-limit を設定することもできるけど,デフォルトで入れておくのが良さそう.

[record]

idle_time_limit = 2

asciinema.org

GIF 📹

レコーディングデータを GIF に変換したいこともある.GitHub に公開されているツール asciicast2gif を使えば実現できそうだけど,実際に試したところ,うまく変換できなかった.Docker も npm も試した.GitHub で2018年頃からアップデートされていないことを考慮すると,asciicast file format v2 に対応していなさそうだった.README.md に載っている拡張子も .cast ではなく demo.json になっていた.

github.com

まとめ 📹

Mac で「ターミナル操作」をレコーディングできる「asciinema」を試した.簡単に使えるし,サービス側にアップロードできるのも便利だった.しかし asciinema コマンドは直近1年ほどはアップデートされてなく,関連ツールの asciicast2gifasciinema-player もうまく動かなかった.asciinema Blog も接続できず,今後も継続的に使えるのかは判断が難しいところ.

asciinema.org

Brewfile で Homebrew のライブラリを管理しよう!

Homebrew で Mac の環境構築をする機会は多いと思う.ライブラリをインストールするときに brew install xxx と実行すればすぐに使える.ただし,Mac を移行したり,再インストールするときに brew install を再実行するのは面倒で,今回は Homebrew Bundle (Brewfile) を紹介する.同僚に Brewfile を紹介する機会があり,今後もサッと紹介できるようにブログにまとめておくことにした.

github.com

Homebrew Bundle (Brewfile) とは?

Homebrew Bundle を使うと Homebrew でインストールするライブラリを Brewfile というファイルで管理できる.プログラミング言語だと Gemfilepackage.jsonpom.xml のような感じ.さらに Brewfile を GitHub の dotfiles リポジトリに置いておけば,プルリクエストを使って個人設定をうまく管理することもできる.以下に Brewfile のサンプルを載せておく.

brew "ghq"
brew "git"
brew "kubernetes-cli"
brew "peco"
brew "vim"

インストールするときは brew bundle コマンドを実行すれば OK!便利!僕は「80個」も管理している...!

$ brew bundle
Installing ghq
Installing git
Installing kubernetes-cli
Installing peco
Installing vim

Homebrew Bundle complete! 80 Brewfile dependencies now installed.

Brewfile 構文 🍺

よく使う Brewfile 構文を「4種類」紹介する.基本的には brew コマンドに対応している.

1. brew

brew 構文を使うと,Homebrew に正式に登録されたライブラリをインストールできる.brew install コマンドと同じくライブラリ名を引数に記述する.

brew "ghq"
brew "git"
brew "kubernetes-cli"
brew "peco"
brew "vim"

2. tap

tap 構文を使うと,Homebrew に正式に登録されていないライブラリをインストールできる.brew tap コマンドに対応している.以下のサンプルは mkrmobeksctl など,よく使うライブラリをインストールするように記述している.

tap "mackerelio/mackerel-agent"
tap "remotemobprogramming/brew"
tap "weaveworks/tap"

brew "mackerelio/mackerel-agent/mkr"
brew "remotemobprogramming/brew/mob"
brew "weaveworks/tap/eksctl"

なお,brew tap は指定した GitHub リポジトリを Homebrew に登録する仕組みとなり,${userName}/homebrew-${repositoryName}${organizationName}/homebrew-${repositoryName} という命名規則でリポジトリがある.サンプルとして載せたライブラリのリポジトリもある.このあたりを調べていくと Homebrew に詳しくなれるはず!

3. cask

cask 構文を使うと,Google Chrome など,Mac アプリをインストールできる.brew cask install コマンドに対応している.個人的には直接 .dmg でインストールすることも多く,あまり活用できていないけど,例えば BlackHoleKeycastr OpenInTerminal など,最近ブログで紹介したライブラリなどは Brewfile に記述している.

tap "homebrew/cask"

cask "blackhole"
cask "keycastr"
cask "openineditor-lite"
cask "openinterminal-lite"

4. mas

mas 構文を使うと,App Store から Mac アプリをインストールできる.mas コマンドに対応している.個人的に必須な CotEditorTomato OneMagnet などを Brewfile に記述している.

brew "mas"

mas "CotEditor", id: 1024640650
mas "Tomato One", id: 907364780
mas "Magnet", id: 441258766

今から Brewfile に移行できる?

今まで個別に brew install コマンドを実行していて,今後 Brewfile に移行したい人もいると思う.実は brew bundle dump コマンドを実行すると,自動的に現在の環境から Brewfile を生成できるようになっている.生成された Brewfiletapbrewcaskmas の順番でキレイに並んでいるし,ライブラリ名もアルファベット順に並んでいるので,非常に見やすいと思う.

$ brew bundle dump

また Brewfile をよく見ると「これ何だっけ?」というライブラリが入っていると思う(僕だけ?).ライブラリをアンインストールするときに brew uninstall コマンドを実行する必要はなく,Brewfile からエントリーを削除して brew bundle cleanup コマンドを実行すればアンインストールできる.たまにアンインストールされないこともあり,その場合は brew uninstall コマンドを実行している.

$ brew bundle cleanup

フォント管理も Brewfile で!

最後に Brewfile でフォント管理をする Tips を紹介する.フォントをインストールする機会は多くないけど,Keynote を作るときに使う「MigMix フォント」など,Mac を移行するときに毎回サイトからダウンロードするのは面倒だと思う.既に紹介した tap 構文と cask 構文を組み合わせて,以下のように Brewfile に設定できる.

tap "homebrew/cask-fonts"

cask "font-migu-1p"

フォントは多くあり,brew search コマンドを使えば検索できる.例えば Noto Sans CJK JP など.

$ brew search font-

$ brew search font-noto-sans-cjk
==> Casks
font-noto-sans-cjk
font-noto-sans-cjk-jp
font-noto-sans-cjk-kr
font-noto-sans-cjk-sc
font-noto-sans-cjk-tc

まとめ

同僚に Homebrew Bundle (Brewfile) を紹介する機会があり,ブログにまとめておくことにした.Brewfile ファイル管理して brew bundle コマンドを実行すれば,ライブラリを簡単にインストールできる.tap / brew / cask / mas など,Homebrew の機能もサポートしている.もし今後 Brewfile に移行するなら brew bundle dump コマンドも使える.便利!

github.com

Finder で開いているディレクトリを VS Code や iTerm2 ですぐに開ける「OpenInTerminal」

macOS を使っていると,Finder で開いているディレクトリを Visual Studio Code (VS Code)iTerm2 で開きたくなる.誰しもあるシチュエーションだと思う.今までは cdtoを使ったり,AppleScript を実装したこともあるけど,最近 OpenInTerminal に移行した.積極的にメンテナンスされているし,インストールも簡単だし,よりシンプルな「Lite 版」もある.個人的にとても気に入っている.

github.com

OpenInTerminal とは?

詳しくは OpenInTerminal の GitHub に機能比較表が載っているけど,正確には以下のように「3種類」のツールがある.簡単に言うと OpenInTerminal「全部入り」となり,設定画面も付いているし,Finder で開いているディレクトリパスをクリップボードにコピーする「コピーパス機能 (Copy path)」も付いている.OpenInTerminal-LiteOpenInEditor-Lite は独立して使える.

自分の操作に合ったツールを選べば良いと思うけど,僕は OpenInTerminal-LiteOpenInEditor-Lite の組み合わせを選んだ.個人的に「コピーパス機能」が不要だったことと,1 クリックで素早く開きたかった.筆者も「Lite 版」推しだと README.md に書いてあった.

  • OpenInTerminal
  • OpenInTerminal-Lite
  • OpenInEditor-Lite

インストールする

brew を使って簡単にインストールできる.

# OpenInTerminal なら
$ brew cask install openinterminal

# OpenInTerminal-Lite なら
$ brew cask install openinterminal-lite

# OpenInEditor-Lite なら
$ brew cask install openineditor-lite

セットアップする

インストールをしたら,アプリケーション一覧で command を押しながら Finder のメニューバーにドラッグする.初回は macOS でパーミッション許可をしておく必要もある.今回は VS CodeiTerm2 を選択した.他にも AtomIntelliJ IDEATerminal も選べる.

検索バーの隣にあるアイコンを押すと,すぐに VS CodeiTerm2 を開ける.シンプルだけど,とても便利!

f:id:kakku22:20200901185523p:plain

アイコンを変える

GitHub の Releases から icons.zip をダウンロードして設定すると,アイコンを差し替えられる.僕はダークテーマにした.

f:id:kakku22:20200901185537p:plain

まとめ

OpenInTerminal-LiteOpenInEditor-Lite を使えば,Finder で開いているディレクトリを VS CodeiTerm2 ですぐに開ける.便利!

関連機能

例えば iTerm2 には Finder で「ディレクトリを右クリック」して「New iTerm2 Tab Here」メニューを選ぶ機能がある.個人的には「ディレクトリを右クリック」するのではなく「今いるディレクトリで」iTerm2 を開きたくて,使えなかった.

www.iterm2.com

Mac の「画面共有」を使って「配信用 Mac」と「デモ用 Mac」を使い分ける

「リモート研修」を配信する場合「配信アプリ / 配信機材 / Chrome / PowerPoint / Visual Studio Code / iTerm2」など,必要最低限なアプリに限定したとしても,Mac の負荷(特に CPU と Network)が高くなってしまう.なお,環境としては MacBook Pro 2017 (2.3 GHz Intel Core i5) を使っていて,MacBook Pro を新しくする選択肢もある.

少し重めのデモを紹介する場合

Mac の負荷が高いとは言え,配信自体は遅延も少なく実施できる.しかし,最近悩んでいるのは「配信中に少し重めのデモを紹介する場合」で,例えば Docker Desktop for Mac を使ってコンテナイメージをビルドをしたり,実装したコードをコンパイルしたり,ローカル環境に API サーバを起動したり.通常なら問題なくても,配信中だと顕著に遅くなってしまう.Amazon EC2 など,クラウド上にデモ環境を構築して SSH をしたり VS Code Remote Development を使う案もあるし,実際に使っているけど,やはり「ローカル環境で動かしたい場合」もある!

Mac の「画面共有」を使う

そこで今回は Mac の「画面共有」を使う案を考えた.特にアプリをインストールする必要はなく,Mac を複数台持っていればすぐに使える.簡単に言えば Windows で使える「リモートデスクトップ」と同じ.今回はドキュメントを参照しながら試していく.なお「画面共有」を使った構成図も載せておく.

support.apple.com

f:id:kakku22:20200710161923p:plain

1. デモ用 Mac(サブ)

まず「デモ用 Mac(サブ)」「画面共有」を有効化する.「システム環境設定 ➔ 共有」と選んだら「画面共有」にチェックを入れる.「アクセス許可」など,制限は適切に設定しておく.簡単!使わなくなったら無効化するのも忘れずに!

f:id:kakku22:20200710165839p:plain

2. 配信用 Mac(メイン)

Mac を同じネットワーク (WiFi) に接続しておくと「配信用 Mac(メイン)」Finder から「ネットワーク ➔ ${コンピュータ名} ➔ 画面を共有」と選べるようになっている.

f:id:kakku22:20200710165335p:plain

もしくは Mac の「画面共有アプリ」を使って ${コンピュータ名}.local と入力しても同じ.

f:id:kakku22:20200710164402p:plain

接続すると,以下のように Mac から Mac を操作できるようになる.まさに「リモートデスクトップ」と同じ!クリップボードも共有できるし,ショートカットも使えるし,レイテンシーも問題なく使える.今後は「少し重めの処理」「デモ用 Mac(サブ)」で実施してみようと思う.検証環境で配信をしながら試したら「画面共有」自体の負荷は高くなく,問題なく使えていた.

f:id:kakku22:20200710164214p:plain

まとめ

「リモート研修」を配信する場合に限らず,Mac の「画面共有」は知っておくと便利に使える場面もありそう!実際に使うと「解像度」を合わせておかないと,ウィンドウサイズを最大化できなかったり,気になるところはあるけど,使いながら模索しようと思う.

関連記事

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 のリリース情報を確認しよう!