1. wmoai

    Posted

    wmoai
Changes in title
+jQueryを使って某サービスっぽいコメント機能を実現
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,57 @@
+社内ツールで、webページにコメントを付ける機能が欲しくなったのでjQueryプラグインを作りました。
+![demo](https://raw.githubusercontent.com/wmoai/jquery.nncomment/master/demo.gif)
+
+# ソース
+
+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秒
+* なるべくコメントが重ならないように、相対速度計算して表示する行を選択
+* 表示を終えたらコメント要素は消す
+* (コマンド機能っぽいものは無い)