nicomment-js

某ニ〇ニコ動画ライクなコメントを描写する為のJavaScriptライブラリです。

対応ブラウザ

Windows

• Google Chromeの最新版
• Mozilla Firefoxの最新版
• Microsoft Edgeの最新版

Android

• Firefoxの最新版

デモ

こちらをご覧下さい。

usage

読み込み

• html

<script src="/path/to/NicommentJS"><script>

• または、Type Scriptファイルをダウンロードして、

import  NicommentJS  from '/path/to/NicommentJS';

初期化

const comment=new NicommentJS(id,width,height,{options});

変数	値
id	canvasのID
width	描写領域の横幅
height	描写領域の高さ
options	オプション(詳細)

コメントを追加する

comment.send(text,{type:fuga,color:hoge});

send(表示したいコメント,オプション(オブジェクト))の形式です。

key	説明	デフォルト値
text	コメント	必須
layer	レイヤー名(詳細)	base
type	コメントの描写位置。naka,ue,shitaのいずれか。	naka
customAttr	カスタム属性(オブジェクト)	-
size	コメントの大きさ(big/small/demiumのいずれか)	medium
color	コメントの描写色	white
fontNam	フォント名	MS Pゴシック
opacity	コメントの透過度(0～1)	1

画面上に描写されているコメントを削除する

• 全て削除

comment.clear();

• 特定のレイヤーのコメントのみを削除

comment.clear('レイヤー名');

処理を一時停止する

comment.pause();

処理を再開する

comment.play();

処理を終了する

comment.dispose();

注意:
この処理は取り消すことが出来ません。
再開する予定がある場合は、pause()を使用して下さい。

初期化オプションについて

オプション名	説明
bigLines	bigコメントの行数
mediumLines	通常コメントの行数
smallLines	smallコメントの行数
duration	コメントの表示時間
duration	コメントの表示時間
layerName	デフォルトのレイヤー名(詳細)

レイヤーについて

本ライブラリは、描写位置などの計算をする上で、互いに干渉しない「レイヤー」を定義することが出来ます。 デフォルトのレイヤー名は"base"ですが、初期化の際にオプションでレイヤー名を指定することも出来ます。(参考:初期化オプションについて」)
また、デフォルトのレイヤー以外にコメントを追加したい場合には、レイヤー名を指定する必要があります。(参考:コメントを追加する)

• レイヤーを追加する

comment.addLayer('レイヤー名');

• レイヤーを削除する

comment.removeLayer('レイヤー名');

デフォルトの設定について

本ライブラリは、デフォルトではニコ動におけるコメント機能の仕様と互換性を持つように設定されています。したがって、下のような二重リサイズを前提としたコメントアート(CA)も描写することが出来ます。

また、アスキーアート型のCAも描写可能です。

コード例 (Type Script)

import {NicommentJS} from '/src/index.ts';
const comment=new NicommentJS('comment',400,800);
comment.send('Hello World!',{color:'green'});//Hello World
comment.pause();//一時停止
setTimeout(()=>{
  comment.play();//3000ms後に処理再開
},3000);
comment.dispose();//終了

コメント機能の仕様関連で、参考にさせていただいたWebサイト

• コメントアートwiki②
• ニコニコ大百科: コメント

権利関係

諸般の事情により本ライブラリの公開を予告なしに停止する場合がございます。 ご了承下さい。
また、何か権利上の問題がございましたら、GitHubのissueから連絡して下さると幸いです。