⌨️

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

2021/12/01に公開



ニコニコ動画流星群より

ざっくり説明すると

  • 個人的に欲しかったのでニコニコ互換のコメント描画ライブラリを作った
  • コメント職人を再現する方向で開発中
  • 意見や要望があればぜひ聞かせてください
  • リポジトリ: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 この動画に対応する

Discussion