ghostty-webを活用してターミナル操作をブラウザのみで完結する
はじめに
Claude Code をはじめとする AI コーディングツールの普及により、登壇や顧客向けデモなどでターミナル操作を見せる機会が増えています。
このとき地味に面倒なのが画面共有の切り替えです。
デモを伴う場合資料とターミナルを行き来することもあり、頻繁に画面共有を切り替える必要があります。
画面共有の切り替え頻度が上がるほど、意図せぬものを共有してしまう等の事故リスクが高まります。
ここで役立つのが、ブラウザ上で動くターミナルエミュレータ（Webターミナル）です。
Webターミナルをブラウザのタブとして開いておけば、スライド資料とデモをタブの切り替えのみで対応可能です。
今回はghostty-webを使用して上記を実現したいと思います。
ghostty-webとは
Coder社が開発したブラウザ向けターミナルエミュレータライブラリでxterm.js APIと互換性があります。
現在ではv0.4.0までリリースされています
やってみた
ghostty-web のセットアップ
ghostty-webは本来Webアプリケーションに組み込んで使うターミナルエミュレータライブラリですが、デモ用のコマンドも用意されています。
今回はこのコマンドを使い、ローカルにHTTP サーバーを立ててブラウザから直接利用します。
bunx @ghostty-web/demo@0.4.0
実行するとローカルにHTTPサーバーが起動し、ブラウザでターミナルが開きます。
GitHub Codespaces のようなクラウド開発環境とは異なり、ローカルのシェルをそのままブラウザに映す仕組みのため、普段使っているローカル環境（設定、ツール、認証情報等）をそのまま操作可能です。
登壇や顧客向けデモ時のワークフロー
実際の登壇や顧客向けデモでは以下の流れで運用します。
- 事前に
bunx @ghostty-web/demo@0.4.0を実行しておく - ブラウザで以下のタブを開く
- タブ1: スライド（Google Slides, Speaker Deck 等）
- タブ2: Webターミナル（
localhostで開いたghostty-webのデモ）
- ブラウザウィンドウだけを画面共有
- スライド説明 → タブ切り替え → デモ → タブ切り替え → スライドに戻る
ブラウザウィンドウだけを共有しているのでアプリの切り替えは発生せず、切り替え時に余計なものが映るリスクを低減できます。
まとめ
デモを伴う登壇や顧客向けの説明での画面切り替え問題は、Webターミナルを使うことで解消できます。
ghostty-webなら1コマンドでブラウザターミナルが起動し、ブラウザウィンドウだけの共有 + タブ切り替えでスライド資料とデモの切り替えをシームレスに実行できます。
どなたかの参考になれば幸いです。
