こんにちは．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アプリの作成は以下の手順で行います：

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

Blessedの使い方

1. Blessedスクリーンの作成
   blessed.screenを使用してアプリの基盤となるスクリーンを作成します．

   const blessed = require('blessed');
   const screen = blessed.screen({
     smartCSR: true,
     title: 'TUI Calendar'
   });
   

2. 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);
     }
   });
   

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

   screen.append(sampleBox);
   

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

   screen.render();
   

おわりに

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