[JavaScript]ニコニコ風コメントを作ってみた[リメイク] #JavaScript

はじめに

結構前に、「JavaScriptだけでニコニコ動画風コメントを作ってみた」でニコニコ風コメントを作ったんですが、それのリメイク版を最近作ったので公開します。

つかいかた

sample.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ニコニコ風コメント</title>
    <script src="nico.js"></script>
    <script src="sample.js"></script>
</head>
<body>
<div id="nico"></div>
<input type="text" id="comment" placeholder="コメント" />
<button id="btn">送信</button>
</body>
</html>

sample.js

var nico = new Nico({
    ele: document.getElementById('nico'), // スクリーンになる要素
    width: 400,                           // スクリーン幅
    height: 400,                          // スクリーン高さ
    font: 50,                             // フォントサイズ
    color: '#fff',                        // フォントカラー
    speed: 3                              // 流れるスピード
});

特定のコメントを流し続ける場合

sample.js

nico.loop(['88888', 'かわいい', 'なんだこれw']);

※画質が悪くてすみません。

任意のタイミングでコメントを送信

sample.js

nico.listen();
document.getElementById('btn').onclick = function() {
    var text = document.getElementById('comment').value;
    nico.send(text);
    nico.send(text, '#ff0000'); // 色変更
}

※画質が悪くてすみません。

止める

sample.js

nico.stop();

さいごに

単純なコードですが、
これからニコニコ風コメントを使ったサービスを作る人へのヒントにでもなれば幸いです。

GitHubにあげたのでよかったらみてください。

追記

canvas版とcssアニメーション版を追加しました。
不完全なところがまだありますが、徐々に修正していきます。
npm i nicojsでインストールできるようにしました。