社内ツールで、webページにコメントを付ける機能が欲しくなったのでjQueryプラグインを作りました。
デモ：http://wmoai.github.io/nncomment/
ソース：https://github.com/wmoai/jquery.nncomment
使い方
- jQueryと、nncomment.jsおよびnncomment.cssを読み込む
- コメントを表示したい要素に対して、comment()で文字列を渡す
- 流れるコメント要素はncc-comment-customクラスを持っているので、このスタイルを記述することでコメントのデザインを変更
sample.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="nncomment.js"></script>
<link rel="stylesheet" type="text/css" href="nncomment.css" />
<script>
$(function() {
$('#comment').on('submit', function() {
var message = $('#message').val();
$('#message').val('');
// 表示したい要素に対してコメント
$('#screen').comment(message);
return false;
});
});
</script>
<style>
.nnc-comment-custom {
font-size: 1.2em;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<form id="comment" action="#">
<div id="screen" class="nnc-screen" style="width:400px;height:200px;background-color:whitesmoke;" >
</div>
<input id="message" />
</form>
</div>
</body>
</html>
実装の方針
- jQueryプラグインとして作成
- コメント要素を生成・追加して、アニメーションで流す
- コメント表示時間はとりあえず一律10秒
- なるべくコメントが重ならないように、相対速度計算して表示する行を選択
- 表示を終えたらコメント要素は消す
- （コマンド機能っぽいものは無い）