ブラウザからターミナル! XTerm を試してみる。

こんにちは k-jun です。今回はブラウザでターミナルが再現できるライブラリ XTerm を試してみます。

https://github.com/xtermjs/xterm.js

以前カロリーメイトのドリンク版の広告サイトが似たようなことをやっていた気がします。これ や。

久しぶりに遊んでみたら、前からあったのか面白い機能を見つけましたw。宗教戦争はごめんとw。

caloriemateliquid $ vim
DON’T FIGHT ANY MORE!
This is a neutral zone.
caloriemateliquid $ emacs
DON’T FIGHT ANY MORE!
This is a neutral zone.

Setup

$ mkdir xterm
$ cd xterm
$ npm install xterm

# xterm/index.html
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
    <script src="node_modules/xterm/lib/xterm.js"></script>
  </head>
  <body>
    <div id="terminal"></div>
    <script>
      var term = new Terminal();
      term.open(document.getElementById('terminal'));
      term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
    </script>
  </body>
</html>

Run

作成した index.html にブラウザからアクセスしてみます。

f:id:K-jun1221:20211127170825p:plain

なんか違う...。何も入力できないし...。本当にただターミナルっぽいものが出現しただけじゃん...。 調べてみると input と output は自分で設定する必要があるんだとか。えぇ...

Xterm.js is not bash. Xterm.js can be connected to processes like bash and let you interact with them (provide input, receive output).

なんのためのライブラリ...。まあ、Terminal に接続するとかではなく完全に Terminal が画面に現れただけでしたし。 それでは今回はこのへんで。