【JS】Webブラウザにターミナルを表示したい

Question

質問概要

Learn Git Branchingのような、Webブラウザ上でターミナルを表示させている方法を知りたい。

質問詳細

Learn Git Branchingのような、Web上に、ターミナル風のコマンドラインを表示させるやり方を知りたいと思っております。
これはどのようなロジックで動いているのでしょうか。

xterm.jsなど出てきたのですが、少し違うと思います……
プラグインなどをご存じの方がいらっしゃいましたら、是非ご教授頂きたく存じます。
よろしくお願いいたします。

Answer 1

今ぱっと調べた感じですが、
あの中には見える部分でtextareaやinputタグ等はありません。
terminalの部分も全てspanタグ等で作れラています。

windowにフォーカスした状態で、keyを押すと、そのイベントを取得し、見えない部分のtextareaに打ち込む、それをterminalの中の実行部分である$の後に追加していっています。
で、エンターが押されたタイミングで、コマンドの中身を解析して、実行したような挙動にしているようですね！

以下は見えない部分のtextareaを無理やり表示させている画面です。

でっかく表示させていますが、そこに文字が打ち込まれてそれがterminalの一番下の部分に同期されている感じです！

Answer 2

対象サイトのソースを見てみると次のJSを読み込んでいます。
この中で処理しているようですね。

http://k.swd.cc/learnGitBranching-ja/build/bundle-ja.js

ターミナル画面の枠等は画像リソースの組み合わせなので、CSSでやっていると思います。

Comments

[nnahito]

ご回答有り難うございます。

これはつまり、独自で作ったものということになるのでしょうか？
こういったもので、一般公開されているものはなさそうなのでしょうか…