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

[PR]記事内のアフィリエイトリンクから収入を得る場合があります
  • URLをコピーしました!

古くからインターネットを利用している方は、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.com

terminal-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で公開されています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次