ニコニコ互換コメント描画ライブラリを作ってみた

ニコニコ動画流星群より

ざっくり説明すると

• 個人的に欲しかったのでニコニコ互換のコメント描画ライブラリを作った
• コメント職人を再現する方向で開発中
• 意見や要望があればぜひ聞かせてください
• リポジトリ：https://github.com/xpadev-net/niconicomments

使い方

<canvas id="canvas" width="1920" height="1080"></canvas>
<video id="video" src="hoge"></video>
<script type="text/javascript" src="https://xpadev.net/niconicomments/niconicomments.js"></script>

const canvas = document.getElementById("canvas");
const video = document.getElementById("video");
const data = ニコニコのコメント(api.json)のデータ;
const niconiComments = new NiconiComments(canvas, data);
setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime*100)),10);

サンプル1(レッツゴー陰陽師) https://xpadev.net/niconicomments/sample.html
サンプル2(ニコニコ動画流星群) https://xpadev.net/niconicomments/ryuuseigun.html
※safariだとyoutubeの埋め込みが下にずれるようです。他のブラウザをご利用ください。

制作経緯

ローカルに9TB弱のアニメデータがあり、中にはコメント無しで見るのが苦痛なもの(某スマホとか)も含まれていたため、勉強を兼ねて作成しました。

使用言語

javascript

公式との仕様の違い

	公式	NiconiComments
当たり判定処理	随時	データ取得時に一括
コメントの動的追加	可	不可
デフォルトフォント	Arial	sans-serif
キャンバスサイズ	640x360	1920x1080
画面内コメント数制限	あり	なし
NG共有	あり	なし

当たり判定処理

コメントデータを最初にまとめて読み込むことで再生中の処理を軽減しています。
この影響で動的なコメントの追加ができなくなっていますが、そもそもニコニコから動的にコメントを受け取ることなんてCROSのせいでほぼ無理ゲーなので需要はないでしょう。

使用フォント

公式プレイヤーではArialがデフォルトで採用されていますが、環境によってスペースの幅が異なり、職人のコメントが崩れてしまうことをよく見かけます。
そのため、このライブラリでは見た目にあまり差がなく、主なプラットフォームで同じように表示できることを確認したsans-serifを採用しています

キャンバスサイズ

これは特に意味ありません。(開発開始時になんとなく決めた)
ただ、高解像度ディスプレイが普及してきていることを考えるとこっちのほうがいいんじゃないかなとは思っています。

画面内コメント数制限

現状確認している限りではコメントが大量に流れる場面でも20FPSを下回ることがなかったため、負荷軽減策としてのコメント数制限は導入しなくても問題ないと考えています。

NG共有

現状個人的にしか利用していないため実装していませんが、もし仮に多少でも要望があれば考えようと思います。

開発方針

なるべくコメント職人のコメントを再現できるように開発を行っていきたいと思っています。
(正直ただのコメントであれば画面上にあろうが画面下にあろうが読めれば大差ないので)

現状対応している機能

機能名	対応状況
サイズ指定	○
場所指定	○
色指定	○
フォント指定	○
full	○
@逆	○
画面外へのはみ出しを含むコメント	△

動作確認をした動画

動画名	現状
Fate/Zero 15話 OP	若干のはみ出しあり
Fate/Zero 15~25話 ED	問題なし
ニコニコ動画流星群	千本桜ミクが崩れる

2021/12/04追記

npm(とjsdelivr)に公開しました
npm: https://www.npmjs.com/package/@xpadev-net/niconicomments
jsdelivr: https://www.jsdelivr.com/package/npm/@xpadev-net/niconicomments

今後の予定

npm及びcdnへの公開
コードの整理
~~https://www.nicovideo.jp/watch/sm21172249 この動画に対応する