1. この記事について

  • xterm.jsを利用して、キーボード入力を受け付けるhtmlを作成する。
  • 本記事ではCDNサイトを利用してHTMLのみで実装する

2. 早速試す

まず公式ページにあるとおり、html上にterminal windowを表示する。

まずはブラウザにterminalの画面だけを表示する

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

3. キーボード入力の実験をする

上記のhtmlを開いた状態で、Chromeの開発者モードで実験する。

xterm1.png

  • Chromeの開発者モードのConsoleを開き以下のように打ち込んで見ると画面が更新される。
term.write("書き込んでみた")

xterm2.png

  • 書き込んで改行する
term.writeln("改行する")

xterm3.png

  • 書き込んでpromptを表示する。 今後Enterを押した時に必ずこれを実行すれば良さそう。
term.write('\r\n$ ')

xterm4.png

  • terminalに書き込まれたものをresetする。 clearが入力された時にこれを実行すれば良さそう。
term.reset()

xterm5.png

4. キーボード入力を受け付けるように変更する

<!doctype html>
  <html>
    <head>
      <link rel="stylesheet" href="https://unpkg.com/xterm@4.9.0/css/xterm.css">
      <script src="https://unpkg.com/xterm@4.9.0/lib/xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
      <script>
        let term = new Terminal();
        term.open(document.getElementById('terminal'));
        function runFakeTerminal() {
          if (term._initialized) {
            return;
          }
          term._initialized = true;
          term.prompt = () => {
            term.write('\r\n$ ');
          };

          term.writeln('Welcome to xterm.js');
          term.writeln('This is a local terminal emulation, without a real terminal in the back-end.');
          term.writeln('Type some keys and commands to play around.');
          term.writeln('');
          term.prompt();

          term.onKey(e => {
            console.log(e)
            const ev = e.domEvent
            const printable = !ev.altKey && !ev.ctrlKey && !ev.metaKey

            if (ev.keyCode === 13) {
              term.prompt();
            } else if (ev.keyCode === 8) {
              if (term._core.buffer.x > 2) {
                term.write('\b \b');
              }
            } else if (printable) {
              term.write(e.key);
            }
          });
        }
        runFakeTerminal()
      </script>
    </body>
  </html>

  • 下記のように表示される


xterm6.png

  • キーボード入力が受け付けられるようになった。
  • 説明
    • term.prompt関数は呼ばれるとterm.write('\r\n$ ‘)を実行しバッファ2の『$ 』を書き込みます。
    • keyCode === 13はEnter
    • keyCode === 8はBackspace
    • term._core.buffer.x > 2はtermのバッファが3以上の時1文字消します。
    • printable = !ev.altKey && !ev.ctrlKey && !ev.metaKeyはこの条件がtrueの時の判定に利用
    • else if (printable) {term.write(e.key);でprintableがtrueの時にterm.write(e.key)して入力をterminal上に書き込みます。