xterm.jsってなんすか？
「コマンドシェルをブラウザで動かして遊びたいな～」
「おっ、xterm.jsていうのがあるんだ」
「楽しそう！！！」
ということではじまったアドベントカレンダー。
学業のほうもあるのでどれくらい続くか不明だが、
xterm.jsを体系的にまとめてくれてる人はいなさそうだった。
アウトプットして整理しとこう。
というやつです。
なに
xterm.jsはシェルのエミュレータ。
コマンドの処理ができるー、とかそういうのではなくて、
見た目と入出力を提供するライブラリ。
公式サンプル
https://xtermjs.org/
js(tsのコンパイル)で提供されてるからフロントエンドですぐ動かせる。
現在の最新は5.5.0ですが、jsdeliverは5.3.0が最新なので間違えないように。
間違えて1時間潰れたなんて言えない...
インストール
npm推奨だけど、普通にcdn経由でもいける。
npm
npm install xterm@5.5.0
cdn
cssも読み込まないといけないからちょっとめんどくさいが。
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css"/>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
</body>
次回は基本のオブジェクトを作りましょう。
参考
https://github.com/xtermjs/xterm.js/tree/5.3.0
https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js
https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.css