niconicomments documentation
About
https://xpadev-net.github.io/niconicomments/
TypeDoc: https://xpadev-net.github.io/niconicomments/type/
https://github.com/xpadev-net/niconicomments
npm: https://www.npmjs.com/package/@xpadev-net/niconicomments
Sample
Install
NodeJS:
npm i @xpadev-net/niconicommentsWeb:
<script src="https://cdn.jsdelivr.net/npm/@xpadev-net/niconicomments@latest/dist/bundle.min.js"></script>Example
const canvas = document.getElementById("canvas");
const video = document.getElementById("video");
const req = await fetch("sample.json");
const res = await req.json();
const niconiComments = new NiconiComments(canvas, res);
setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)), 10);const canvas = document.getElementById("canvas");
const video = document.getElementById("video");
const req = await fetch("sample.json");
const res = await req.json();
const renderer = new NiconiComments.internal.renderer.CanvasRenderer(canvas);
const niconiComments = new NiconiComments(renderer, res);
setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)), 10);Class
class NiconiComments(canvas:HTMLCanvasElement | IRenderer, data:inputFormat, options:InitOptions)
このライブラリの本体です
Parameters
canvas:HTMLCanvasElement | IRenderer
data:inputFormat
options:InitOptions
config:Config = {}
debug:boolean = false
enableLegacyPiP:boolean = false
format:inputFormatType = "legacy"
入力フォーマットを指定します
対応しているフォーマットは以下のとおりです
| 名前 | dataのtype | 備考 |
|---|---|---|
| niconicome | XMLDocument | XMLをDOMParserでparseFromStringしたものを渡してください |
| formatted | formattedComment[] | formattedLegacyComment[] | user_idとlayerが含まれない場合はformattedLegacyCommentになります |
| legacy | rawApiResponse[] | legacy apiのレスポンスをJSON.parseしたものを渡してください |
| owner | ownerComment[] | 投稿者コメント編集画面のエディータのjsonをそのまま渡してください |
| legacyOwner | string | 旧投稿者コメント編集画面のエディータの文字列(改行含む)をそのまま渡してください |
| v1 | v1Thread[] | v1 apiのdata以下threadsの内容を渡してください |
formatted:boolean = false
このオプションは非推奨です。formatオプションを使用してください
コメントデータが独自フォーマットかを指定します
デフォルト(false)の場合は独自フォーマットに変換を行ってから処理を行います
trueの場合はそのまま処理を行います
keepCA:boolean = false
mode:modeType = "default"
scale:number = 1
showCollision:boolean = false
showCommentCount:boolean = false
showFPS:boolean = false
useLegacy:boolean = false
video:HTMLVideoElement | null = null
Methods
addComments(...comments:formattedComment):void
addEventListener(eventName:CommentEventName, eventHandler:CommentEventHandler):void
removeEventListener(eventName:CommentEventName, eventHandler:CommentEventHandler):void
drawCanvas(vpos:number):void
clear():void
Custom Commands
niconicomments独自のコマンド
Flash
format
nico:flash自動モード時にFlash版コメントとしての処理を強制します
※HTML5モード時は無視されます
※自動モード時にHTML5版コメントとしての処理を強制させたい場合はdefont、mincho、gothicのいずれかを使用してください
Stroke Color
format
nico:stroke:(color|color code)example
nico:stroke:red
nico:stroke:#f0f
nico:stroke:#fff5コメントの縁取りの色を変更するできます
色の指定は色コマンドまたはカラーコードで行ってください
カラーコードは透明度も指定可能です
Waku
format
nico:waku:(color|color code)example
nico:waku:red
nico:waku:#f0f
nico:waku:#fff5コメント単位で枠の表示を制御できます
色の指定は色コマンドまたはカラーコードで行ってください
カラーコードは透明度も指定可能です
Fill
format
nico:fill:(color|color code)example
nico:fill:red
nico:fill:#f0f
nico:fill:#fff5コメント単位で背景色の表示を制御できます
色の指定は色コマンドまたはカラーコードで行ってください
カラーコードは透明度も指定可能です