【初投稿】HTML, CSS, JavaScriptで掲示板システムを作ってみた

はじめに

普段は競技プログラミングやアルゴリズムを勉強しているのですが、今回はWebプログラミングに挑戦してみました!今回はその成果として、作ったシステムとJavaScriptフロントエンドについて紹介させていただきます！

掲示板の概略

【今回作った掲示板】

まずトピック画面からトピック選択

次にトークに参加または自分でトークを開始

メッセージを送信して会話します

フロントエンドの紹介

フロントエンドはJavaScriptを使っています。今回は当掲示板で使用されているアンカーシステムについて紹介します。基本的には正規表現で>>1などの列を置き換えて色をつけ、それをクリックするとポップが表示されます。再帰することでポップ上のアンカーでも作用するようになっています。現在、新しいポップが下に表示されてしまっているのでそのうち頑張って直そうと思います。

(function ($) {
           $("#comment").html($("#comment").html().replace(/&gt;&gt;(\d)/g,"<span x=id$1 class='anc text-primary id$1'>" + "&gt;&gt;$1" + "</span>"));

          
           console.log(document);
           func(0);
           function func(n) {
               var l = 0;

               $(".anc").on("click", function (e) {
                   if (l == 0) {//ポップは一つだけ
                       l += 1;
                       $(".container").prepend("<div class='pop" + n + "'>");

                       $(".pop" + n).css({//ポップの修飾
                           position: 'absolute',
                           border: '1px solid #ccc',
                           'background-color': 'white',
                           top: '0',
                           left: '0',
                           'z-index': 1,
                           width:'50%',
                       })
                       console.log($("#" + anc).html());
                       var anc = $(this).attr("x"),//アンカーのx取得
                           res = "<table class='table'> <tr><th>番号</th><th class='mes'>メッセージ</th></tr><tr>" + $("#" + anc).html() + "</tr></table>",//id検索
                           x = e.pageX,
                           y = e.pageY;
                           console.log($("#" + anc).html());
                       $(".pop" + n)
                           .append(res)
                           .css({
                               transform: "translate3d(" + x + "px," + y + "px,0)"
                           })
                           .show();
                       $(".pop" + n).on("mouseleave", function () {//マウスが離れた時削除
                           $(this).remove();
                       })
                       $(".pop" + n).on("touchmove", function () {//画面をスワイプしたとき削除
                           $(this).remove();
                       })
                       func(n + 1);
                   }
               });
           }
       

       })(jQuery);

参考リンク
Simplicity
Simplicity 1 「某スレッド掲示板風」にレスアンカー機能を付けたい
https://wp-simplicity.com/suport/topic/simplicity-1-「某スレッド掲示板風」にレスアンカー機能/
(2016年4月25日)