ターミナルで本物のブラウザを動かす時代へ。「terminal-browser」がひらく新しい開発体験

Wait 5 sec.

古くからインターネットを利用している方は、Lynxやw3mといったテキストベースのWebブラウザを覚えている方もいるかもしれません。本日紹介する「terminal-browser」はこれらと似ているものの実態は大きく異なり、本物のGUIブラウザをターミナルで動かすことができるという最新世代の注目ツールです。terminal-browserは通常のCLIツールとは異なり、Chromiumの描画をターミナル上に直接表示することで、まるでGUIブラウザをターミナルに埋め込んだような体験を実現しています。AIエージェントとの共同作業や、HTMLのプレビュー、SSH先のウェブアプリの確認などに利用することが可能です。インストール方法インストールはcurlコマンドで行います。curl -fsSl https://terminal-browser.sh/install | bash使用方法は対応ターミナル(ghostty、kitty、cmux、vscodeなど)から、terminal-browserコマンドを実行するだけです。例えば以下のように実行します。terminal-browser open terminal-browser.comterminal-browserの公式サイトは次のように表示されます。URL を開いたり、右側に分割表示したり、開いているブラウザ一覧を確認したりと、操作体系もシンプルです。なぜターミナルでブラウザを動かせるのかこのプロジェクトの肝はkitty graphics protocolにあります。kittyやghostty、cmux、VS Codeなどkitty graphics protocolに対応したターミナルはピクセル描画が可能で、terminal-browserはこの仕組みを使ってChromiumの描画結果をそのままターミナルに表示します。さらに、ElectronのオフスクリーンレンダリングAPIを利用し、GPUからピクセルを直接読み取ることで、フレーム落ちのない滑らかな描画を実現しています。ユーザー入力についても工夫が凝らされています。ターミナルから取得できるマウス位置やクリック、キーボード入力はそのままChromiumに送信し、ターミナルでは取得できないトラックパッド操作などはバックグラウンドのSwiftアプリが補完しています。これにより、通常のブラウザ同様のスクロールや操作感を維持しています。外側のUIはRust製のグラフィックスエンジンで描画され、UIロジックはReactとTypeScriptで構築されています。ブラウザコンテンツとUIを同じキャンバスに描画することで、ターミナル上でもリッチなUIを重ね合わせられる設計になっています。どんな場面で役立つのかterminal-browserのユースケースはかなり幅広いものとなっています。エージェントとブラウザを同じタブで扱えるコーディングエージェントとウェブページを並べて作業できるため、AIと人間の共同作業がスムーズに。HTMLのプレビューが簡単エージェントにHTMLを生成させ、そのまま隣のペインでプレビュー可能。SSH先のウェブアプリを手軽に確認リモート環境で動かしているアプリを、ローカルのターミナル上でブラウザ表示できる。まとめterminal-browserは現在macOSを中心にサポートしていますが、今後はLinuxサポートも計画されています。そのほかChrome拡張機能への対応やデザインモードの実装なども計画されており、活発に開発が行われています。ソースコードはGitHubで公開されています。