文書の過去の版を表示しています。

commentableを作る

commentable（コメンタブル）は馬場が2020年4月からオンライン授業用に開発を始めたチャットシステムです．詳しくはgithubをご参照ください．

このページではコメンタブルみたいなシステムを実際に作成してみようと思います．コメンタブル自体は至ってシンプルなシステムになっています．

配信者と視聴者の2つにユーザが分かれる
- 配信者：視聴者が投稿したコメントがp5のcanvas上にアニメーションされる
- 視聴者：リアクションボタンやテキストボックスを利用して配信者側にメッセージを送信できる

というものです．細かな機能がその他にもありますが，基本的にはこの構成になっています．配信者側は OBSという配信用ソフトを利用して配信者用ページを開き，canvas画面をそのまま配信ページにのっけて，zoom等で放送しています．

コメンタブルはnode.jsを利用しているので，まずはnode.jsを利用してシンプルなチャットシステムを開発するところから始めましょう．これに関してはすでに別ページに記事があるので，そちらを参照してください．

まずは上記内容をしっかり理解した上で次に進めていきます．

上記のチャットシステムではcommentableのように配信側と視聴者側がないため，同じファイルを利用しているため，まずはこの修正から始めます．現在のファイル構成は

├── public
│   ├── index.html
│   ├── p5.js
│   ├── p5.sound.min.js
│   ├── sketch.js
│   └── style.css
└── server.js

となっているかと思います（node.js類のファイルは省いて表示しています）．ここにファイルを追加して，以下の構成にします．

├── public
│   ├── index.html
│   ├── p5.js
│   ├── p5.sound.min.js
│   ├── sketch.js
│   └── style.css
└── server.js