TUIカレンダーアプリをBlessedで作ってみた

こんにちは．M1の細川です．アドベンドカレンダー9日目を担当します．本日は，私と研究室の有志が開発したTUI (Text User Interface)カレンダアプリ「Gcal.js」と，その作成に用いたライブラリ「Blessed」をご紹介します．

開発背景

研究室では，共有カレンダーとしてGoogleカレンダーを採用しています． GoogleカレンダーではGUI中心の操作が前提です． GUIアプリを使うとCLI中心の作業環境から一時的に離れる必要があり，作業効率が下がることがあります．そこで，CLI環境に統合できるカレンダーアプリの必要性を感じ，このアプリの開発に至りました．

Gcal.jsの紹介

Gcal.js は，以下の機能を提供します：

カレンダー表示：カレンダーをTUI上に表示します．イベント管理：イベントのコピー，削除，追加，編集が可能です．キーボード操作：マウス不要の完全なキーボード操作を実現しています．

Blessedの紹介

Blessed は，Node.jsでCLIアプリを構築するためのライブラリです． TUIを簡単に作成できる点が魅力で，ウィジェット，イベントリスナーなどが簡単に利用できます．

Blessed を使ったTUIアプリの作成は以下の手順で行います：

Blessedスクリーンの作成
Blessedウィジェットの作成
スクリーンにウィジェットを追加
スクリーンの描画

Blessedの使い方

1. Blessedスクリーンの作成 `blessed.screen`を使用してアプリの基盤となるスクリーンを作成します． ```javascript const blessed = require('blessed'); const screen = blessed.screen({ smartCSR: true, title: 'TUI Calendar' }); ```

Blessedウィジェットの作成 blessed.boxを使用してカレンダー用のボックスを作成します．位置指定やサイズ指定，コンテンツの内容，枠線の色などを設定します．また，sampleBox.on('keypress')を用いて，特定のキー入力（qやCtrl+C）に反応するリスナーを設定できます．

const sampleBox = blessed.box({
  top: 'center',
  left: 'center',
  width: '50%',
  height: '50%',
  content: 'Welcome to TUI Application!',
  border: {
    type: 'line'
  },
  style: {
    border: {
      fg: 'cyan'
    },
    fg: 'white',
    bg: 'black'
  }
});
sampleBox.on('keypress', (ch, key) => {
  if (key.name === 'q' || (key.ctrl && key.name === 'c')) {
    process.exit(0);
  }
});

スクリーンにウィジェットを追加 2で作成したsampleBoxをスクリーンに追加します．

screen.append(sampleBox);

スクリーンの描画スクリーンを描画し，TUIアプリケーションを表示します．

screen.render();

おわりに

今回は，TUIカレンダーアプリ「Gcal.js」の開発背景，特徴，そして作成に使用したライブラリ「Blessed」についてご紹介しました．もしこの記事を読んで「自分でも作ってみたい！」と思ったら，ぜひGitHubリポジトリを訪れてみてください． TUIで操作できるカレンダーが日常の中で少しでも役に立てば幸いです．最後までお読みいただき，ありがとうございました！