niconicomments documentation
-[重要]このライブラリを使用される方へ
-ニコニコ運営が画面にコメントを流すアドオンを特許侵害だと騒ぎ立てて潰して回っているようです
-このライブラリ本体は描画部分のみのため特許侵害に当たるとは考えていませんが、ニコニコ動画運営(とその近辺の人)に叩かれる可能性があります
++ ニコニコ運営が画面にコメントを流すアドオンを特許侵害だと騒ぎ立てて潰して回っているようです +
++ このライブラリ本体は描画部分のみのため特許侵害に当たるとは考えていませんが、ニコニコ動画運営(とその近辺の人)に叩かれる可能性があります +
(すでに一部OSSに被害が出ています)
-また、このライブラリを使用するかどうかに関わらず、リアルタイムでコメントを取得、画面を描画、コメントの投稿という一連の流れを実装した場合、ニコニコの特許を侵害する可能性があります
-詳しくはこちらニコニコが保有する特許についてを参照してください
++ また、このライブラリを使用するかどうかに関わらず、リアルタイムでコメントを取得、画面を描画、コメントの投稿という一連の流れを実装した場合、ニコニコの特許を侵害する可能性があります +
++ 詳しくはこちらニコニコが保有する特許についてを参照してください +
※当ライブラリを削除する予定は一切ありません
-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
-+ ニコニコ動画の公式プレイヤーに多少の互換性を持つコメント描画ライブラリです +
++ ドキュメント： + 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
-
-
- サンプル -
- レッツゴー！陰陽師(CodePen) +
- + サンプル +
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");
@@ -109,177 +153,405 @@ Example
const res = await req.json();
const niconiComments = new NiconiComments(canvas, res);
setInterval(() => niconiComments.drawCanvas(Math.floor(video.currentTime * 100)), 10);Class
-class NiconiComments(canvas:HTMLCanvasElement, data:[], options:InitOptions)
++ class NiconiComments(canvas:HTMLCanvasElement, data:[], options:InitOptions) +
このライブラリの本体です
-Parameters
+このライブラリの本体です
+Parameters
++ canvas:HTMLCanvasElement +
+コメント描画用のキャンバスElementを渡してください
++ このライブラリはキャンバスサイズが1920x1080である前提で描画を行います +
+サイズ設定をミスるとコメントが正常に描画されません
+data:[]
+コメントデータを渡してください
++ 対応フォーマットはformatを確認してください +
++ options:InitOptions +
++ config:ConfigNullable + = {} +
++ このオプションは弄らないことを推奨します。描画が崩れる場合があります +
+内部処理用のマジックナンバーを上書きすることができます
++ 各変数の詳細はsrc/definition/config.ts内のdefaultConfigのコメントを参照してください +
++ debug:boolean = + false +
+処理の所要時間をブラウザコンソールに出力します
++ また、各コメントの左上に適用されているコマンドを表示します +
++ デフォルト(false)の場合は出力を行いません +
++ drawAllImageOnLoad:boolean = + false +
++ このオプションはv0.2.28で廃止されました +
+コメントの描画をどのタイミングで行うかを指定します
++ デフォルト(false)の場合は初めてコメントが画面に描画されるタイミングで生成されます +
++ trueの場合は、初期化時にすべてのコメントを生成します +
++ enableLegacyPiP:boolean = + false +
++ 初期化後も随時設定の変更が可能です +
+PiPの出力形式を変更します
++ デフォルト(false)の場合は画面全体を覆うように動画を描画します +
++ trueの場合は画面内に全体が収まるように動画を描画します +
++ 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 +
++ 別のCAや関係ないコメントによってCA(主に積み絵)が崩壊するのを抑制します +
++ デフォルト(false)の場合は通常通り位置決定を行います +
++ trueの場合はCAを投稿していると推定されるユーザーのレイヤーを分けて位置決定をおこないます +
+また、該当CAの拡大縮小を抑制する効果もあります
++ mode:modeType + = "default" +
+処理モードを指定します
++ デフォルト("default")の場合はコメントごとに動作モードを自動で切り替えます +
++ "html5"の場合は、現行のhtml5プレイヤーに近い動作をします +
++ "flash"の場合は、Saccubus/ZenzaWatchなどFlash時代の互換プレイヤーに近い動作をします +
++ "default"または"flash"の場合はFlashプレイヤー当時のフォント変化文字や分割コメントなどをサポート(仮)します +
++ scale:number = + 1 +
+表示コメントサイズを拡大縮小します
+keepCAを併用することを推奨します
++ showCollision:boolean = + false +
++ 初期化後も随時設定の変更が可能です +
+コメントの当たり判定を描画するか指定します
++ デフォルト(false)の場合は描画を行いません +
++ trueの場合は、コメントの当たり判定と行の区切りを描画します +
++ HTML5版のコメントは水色に、Flash版のコメントは紫に外枠線の色が変化します +
++ showCommentCount:boolean = + false +
++ 初期化後も随時設定の変更が可能です +
+描画されているコメント数を画面上に描画するか指定します
++ デフォルト(false)の場合は描画を行いません +
++ trueの場合は、画面内に描画されているコメントの総数を描画します +
++ showFPS:boolean = + false +
++ 初期化後も随時設定の変更が可能です +
+FPSを画面上に描画するか指定します
++ デフォルト(false)の場合は描画を行いません +
+trueの場合は、FPSを表示します
++ useLegacy:boolean = + false +
++ このオプションは非推奨です。modeオプションを使用してください +
+公式プレイヤー互換モードを有効にするか指定します
++ デフォルト(false)の場合はsans-serifを使用します +
+この場合、windows環境において、macOSに近い表示になります
++ trueの場合は公式プレイヤーと同じフォントを使用します +
++ video:HTMLVideoElement | null = + null +
++ 初期化後も随時設定の変更が可能です +
+背景に描画する動画を指定します
++ デフォルト(null)の場合は描画を行いません +
++ 指定されている場合は、背景に指定された動画を描画し、その上にコメントを描画します +
++ この機能を応用すると、Picture in + Pictureにもコメントを表示できるようになります +
+Methods
++ drawCanvas(vpos:number):void +
canvas:HTMLCanvasElement
-コメント描画用のキャンバスElementを渡してください
-このライブラリはキャンバスサイズが1920x1080である前提で描画を行います
-サイズ設定をミスるとコメントが正常に描画されません
-data:[]
-コメントデータを渡してください
-対応フォーマットはformatを確認してください
-options:InitOptions
-config:ConfigNullable = {}
-このオプションは非推奨です。適当に変更を行うと描画が崩れる場合があります
-内部処理用のマジックナンバーを上書きすることができます
-各変数の詳細はsrc/definition/config.ts内のdefaultConfigのコメントを参照してください
-debug:boolean = false
-処理の所要時間をブラウザコンソールに出力します
-デフォルト(false)の場合は出力を行いません
-drawAllImageOnLoad:boolean = false
-コメントの描画をどのタイミングで行うかを指定します
-デフォルト(false)の場合は初めてコメントが画面に描画されるタイミングで生成されます
-trueの場合は、初期化時にすべてのコメントを生成します
-enableLegacyPiP:boolean = false
-初期化後も随時設定の変更が可能です
-PiPの出力形式を変更します
-デフォルト(false)の場合は画面全体を覆うように動画を描画します
-trueの場合は画面内に全体が収まるように動画を描画します
-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
-別のCAや関係ないコメントによってCA(主に積み絵)が崩壊するのを抑制します
-デフォルト(false)の場合は通常通り位置決定を行います
-trueの場合はCAを投稿していると推定されるユーザーのレイヤーを分けて位置決定をおこないます
-また、該当CAの拡大縮小を抑制する効果もあります
-mode:modeType = "default"
-処理モードを指定します
-デフォルト("default")の場合はなんとなくCAを再現します
-"html5"の場合は、現行のhtml5プレイヤーに近い動作をします
-"flash"の場合は、Saccubus/ZenzaWatchなどflash時代の互換プレイヤーに近い動作をします
-scale:number = 1
-表示コメントサイズを拡大縮小します
-keepCAを併用することを推奨します
-showCollision:boolean = false
-初期化後も随時設定の変更が可能です
-コメントの当たり判定を描画するか指定します
-デフォルト(false)の場合は描画を行いません
-trueの場合は、コメントの当たり判定と行の区切りを描画します
-showCommentCount:boolean = false
-初期化後も随時設定の変更が可能です
-描画されているコメント数を画面上に描画するか指定します
-デフォルト(false)の場合は描画を行いません
-trueの場合は、画面内に描画されているコメントの総数を描画します
-showFPS:boolean = false
-初期化後も随時設定の変更が可能です
-FPSを画面上に描画するか指定します
-デフォルト(false)の場合は描画を行いません
-trueの場合は、過去0.5秒間のデータをもとにFPSを計算し、描画します
-useLegacy:boolean = false
-このオプションは非推奨です。modeオプションを使用してください
-公式プレイヤー互換モードを有効にするか指定します
-デフォルト(false)の場合はsans-serifを使用します
-この場合、windows環境において、macOSに近い表示になります
-trueの場合は公式プレイヤーと同じフォントを使用します
-video:HTMLVideoElement | null = null
-初期化後も随時設定の変更が可能です
-背景に描画する動画を指定します
-デフォルト(null)の場合は描画を行いません
-指定されている場合は、背景に指定された動画を描画し、その上にコメントを描画します
-この機能を応用すると、Picture in Pictureにもコメントを表示できるようになります
-+ vpos(動画のcurrentTime*100)を元にキャンバスにコメントを描画します +
++ vposは整数(int)である必要があります +
Methods
+clear():void
drawCanvas(vpos:number):void
-vpos(動画のcurrentTime*100)を元にキャンバスにコメントを描画します
-vposは整数(int)である必要があります
-clear():void
-キャンバスを消去
-キャンバスを消去