ターミナルエミュレータを自作してみた

真夏の自由研究〜AIを使って雑にアプリを作ろう！〜 8日目は jaxx が担当します。子どものリアル夏休みの工作ではアイデアを Gemini に壁打ち相手にしてもらって作り方やイメージ図を作ってもらいました。アイデアはあるけど実現方法に自信が持てない子どもにとってはAIは強い味方ですね。

今回雑アプリを作ろうということで、今回はターミナルエミュレータを自作してみて、ちょっとした機能を追加してみました。

自作 PC といえば RGB ライティング

趣味が自作PCなのですが、自作PCといえば何を思い浮かべるでしょうか。

CPUクーラーの選定
グラフィックボードの性能比較
電源容量の計算
ケースの拡張性

色々ありますが、やはり自作PCといえばRGBライティングですよね。

なぜRGBライティングが我々を魅了するのか

それはCPUやGPUの性能上の数値だけじゃなく、単純に光るものはカッコいいからです。メモリ、CPUクーラー、ケースファン、マザーボード、全てが虹色に輝いているPCを見ると、なんだか高性能になった気がしませんか？（実際の性能向上は0%ですが）

そこで、ふと思ったのが「ハードウェアだけじゃなく、ソフトウェアも光らせたいと」何を光らせるか？そう「自作ターミナルを光らせよう」と

作ったもの

というわけで作りました。RGBライティング機能付きのターミナルエミュレーターです。

見てください、この美しいRGBライティング！ターミナルの周囲が虹色に光っています。コマンドを打つたびに気分が上がります。夏の夜にこれを使っていると、なんだかサイバーパンクな世界にいる気分になれます。

技術的な実装

アーキテクチャ

基本的には Electron で Xterm.js を使った普通のターミナルエミュレーターです。そこに CSS Animations と requestAnimationFrame を使ったRGBライティング機能を追加しています。

Electron: デスクトップアプリケーションフレームワーク
Xterm.js: ターミナルエミュレーター
node-pty: 疑似端末インターフェース

Xterm.jsについて

Xterm.js は本格的なターミナルエミュレーターライブラリで、VT100/VT220 エスケープシーケンスの完全サポート、Unicode 対応、カーソル制御、色表示など、実際のターミナルと同等の機能を提供します。VS Code の Integrated Terminal でも使用されており、信頼性と性能の両面で優れています。

今回はこの堅実なライブラリをベースに、ちょっとした遊び心を加えてみました。

RGBライティングシステム

ライティングシステムは完全に自作で、以下の特徴があります：

10種類のライティングパターン: Static、Breathing、Rainbow、Gradient、Wave、Comet、Starry Night、Strobe、Sequential、Rain
リアルタイム制御: 明度、速度、色の動的調整
グローバルショートカット: アプリケーション外からの制御

それぞれのパターンは数学的な計算に基づいて生成されており、HSV色空間での色相変化や三角関数を使った波形生成など、意外と本格的な実装になっています。

// レインボーパターンの例
updateRainbow(time) {
  for (let i = 0; i < this.ledCount; i++) {
    const hue = (i / this.ledCount + time * 0.5) % 1;
    this.currentLeds[i] = this.hsvToRgb(hue, 1, this.brightness);
  }
}