ぐうたら備忘録

趣味で作ったものなどをぼちぼち書いていきます。

ニコ動風コメントシステム「Textream」×「EzCommenter」

はじめに

砕けたプレゼンテーションなんかに使えそうなコメントシステムを考えてみました。
今回は、C#×WCFとNode.js×expressを使ってみました。このシステムでは、ブラウザからコメントを打つことができ、端末を選ばないようになっています。

  • Textream」コメントを流すやつ
  • 「EzCommenter」コメントを打つやつ

使い方


1. コメントを受け取りたいPCで「Textream.exe」を管理者権限で起動します。(WCFによる通信機能を使用するため)
2. 以下のような初期画面にIPアドレスが表示されます。
f:id:gootalife:20181224045112p:plain
3. 同PCで「EzCommenter」のディレクトリに移動し、コマンドプロンプト等から

npm start

を実行し、「EzCommenter」を起動します。
4. コメントを打ちたい端末からブラウザで「http://aaa.bbb.ccc.ddd:3000/」のようにアクセスします。aaa~は2.で表示されているIPアドレスです。
5. 以下のような画面が開きます。
f:id:gootalife:20181224050613p:plain
6. コメントを入力し、Enterキーを押すか送信をクリックすると以下のように「Textream」を起動しているPCの画面上にコメントが右から流れてきます。コメントの左に書かれている時間は、「EzCommenter」の起動からの時間となっています。
f:id:gootalife:20181224051000p:plain

上記の手順で画面の最前面に文字列が流れてくるようになります。
終了したいときは、タスクバーから「Textream」のバツから終了できます。
「EzCommenter」は起動した状態でコマンドプロンプトからCtrl+C二回で終了できます。
また、コメントのログが「EzCommenter」のディレクトリに「CommentLog.json」として時間とコメントがそれぞれ保存されています。
f:id:gootalife:20181224052007p:plain

終わりに

WCFというフレームワークを用いると今回実装したかった機能が簡単に実装できました。
ソースコードは以下で公開しています。気になったら見てみてください。
あと「Textream」はWindowsでしか動きません。
github.com
github.com