ブラウザウィンドウの画面共有でターミナルを映す

背景

業務において画面を共有しながら会議や会話をする機会が多々ある。世間的にもリモートワークの普及に伴ってそういった機会が増えたのではなかろうか。

画面共有に際しては対象の領域を決める必要があるが、多くの場合はスクリーン全体かウィンドウの 2 種類から選ぶことになるだろう。 個人的にはサイズを調節して見やすくする意図があったり、散らかった画面を共有するのに気が引けたりと様々な理由でもってウィンドウ単位の共有を選択することが多い。

大抵はブラウザのウィンドウで事足りるのだが、まれにターミナルでコマンドを実行する様子を共有したくなることがある。その度に共有を停止して別のウィンドウを選択して…といった手間は地味に面倒なものだ。

ttyd を使ってブラウザでシェルを開く

ウェブでターミナル (TTY) を共有することを目的としたコマンドラインツールの 1 つに ttyd というものがある。これは homebrew-core 経由で提供されている。

brew install ttyd

以下のコマンドを叩けば規定のブラウザでシェルが開く。

ttyd -B "$SHELL"

ttyd 自体はサーバーとして機能し、WebSocket を介してターミナルを開放している。同時にクライアント向けの静的ファイルをサーブしており、それをブラウザで読み込んでターミナルにアクセスする形。 クライアントは Xterm.js がベースになっており、後述のオプションから設定を弄ることができる。

今回はコマンドとして現在のシェル ($SHELL) を指定しているが、シェルに限らず任意のコマンドが指定できる。

カスタマイズ

主題である画面共有での利用を主な目的として個人的によく使っているオプションを紹介する。

ttyd -B -i lo0 -t 'macOptionIsMeta=true' -t 'fontFamily=MesloLGM Nerd Font' -t 'theme={"background": "#000000"}' "$SHELL"

-B はサーバーを立ち上げると同時に規定のブラウザでページを開くためのオプション。

-i lo0 はループバックインターフェースにバインドするよう指定している。

-t はクライアント側の設定を操作するためのオプション。主に Xterm.js のオプションを上書きするのに使う。

macOptionIsMeta=true は macOS において option キーを meta キーとして扱うための指定である。 VS Code の Integrated Terminal にも Mac Option Is Meta という設定項目があるが、それと同じもの。 例えば Option + F で ƒ が入力されたりするが、そうでなく key binding として機能するのが望ましい場合には必須。

fontFamily はその名の通りフォント指定のためのオプション。筆者は starship のプロンプトに合わせてカスタムフォントを導入しているのでそれを指定している。 環境によってはブラウザから対象のフォントを読み込めるかどうかに注意するとよい。

theme はテーマに関するオプション。JSON でオブジェクトを渡す形になる。Xterm.js の ITheme インターフェースを参照。

詳細については各種ドキュメントを参照されたい。

まとめ

ブラウザウィンドウを共有したまま必要に応じてサッとシェルを共有できて非常に便利。

付録

環境及びバージョン等