作成物：名前シャッフリングサイト

2021.09.21
Webアプリ作成物

JavaScriptで、名前をシャッフルできるサイトを作ってみました。

1. 動機
2. 作ったもの
- 2.1. 説明
3. 使用技術
- 3.1. コード
  - 3.1.1. 名前データの作成スプレッドシート
4. まとめ

動機

朝のチームミーティングがオンラインであるのですが、全員が一言ずつ作業の進捗を話します。

その際の話す順番は、Webexに表示されている順で、名前の昇順です。

ただ、システムの都合上、自分自身は必ず一番上に表示されるので、自分が誰の次なのか分かりにくいです。

また毎日順番は変わらないですし、代り映えしません。

…なので、主催者が好きな順番でソートして、表示出来れば良いのではないかと思いました。

作ったもの

下記のようなものを作りました。

説明

ボタンを押すと、その順番に並び変わります。

会議中に開くこともあると思われるので、メモ機能も付けてみました。

ついでに現在時刻の表示機能もつけてみました。

使用技術

技術的に難しいことは何もしていません(笑)

HTMLとCSSとJavaScriptのみです。

少々事情があり、一枚のHTMLファイルにまとめたところが工夫点でしょうか。

コード

下記が実際のコードです。

これをHTMLファイルとして保存すれば動きます。

名前のデータは、85行目以降のところに、データを入れていただければ動きます。

（データの作成用のスプレッドシートを作りましたので、コードの下に載せてあります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel ="stylesheet" href ="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity ="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin ="anonymous">
    <title>morning meeting shuffling</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src ="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity ="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin ="anonymous"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <header>
        <div class="container text-center">
            <h1 class="title">Morning Meeting Shuffling</h1>
        </div>
    </header>
    <main>
        <!-- date and timer -->
        <div class="container text-center">
            <div id="now_time"></div>
        </div>
        <!-- name and memo -->
        <div class="container">
            <div class="row">
                <!-- name -->
                <div class="col-sm-8">
                    <div>NAME</div>
                        <div>
                            <button type="button" class="btn btn-secondary sort-btn" id="name_atoz_btn">名前 A → Z</button>
                            <button type="button" class="btn btn-secondary sort-btn" id="name_ztoa_btn">名前 Z → A</button>
                            <button type="button" class="btn btn-secondary sort-btn" id="lname_aton_btn">苗字 A → Z</button>
                            <button type="button" class="btn btn-secondary sort-btn" id="lname_ntoa_btn">苗字 Z → A</button>        
                        </div>
                        <table class="table table-condensed" >
                            <thead>
                                <th>First name</th>
                                <th>Last name</th>
                            </thead>
                            <tbody id="name-data">

                            </tbody>

                        </table>
                    
                    <div>

                    </div>
                </div>
                <!-- memo -->
                <div class="col-sm-4">
                    <div>Memo</div>
                    <textarea class="form-control" id="memo"></textarea>
                    
                </div>

            </div>

        </div>
    </main>
    <!-- Write all css here for making one html file -->
    <style type="text/css">
        div {color: #0f62fe;}
        #memo {
            width: 100%;
            height: 80vh;
        }
        .table-condensed > thead > tr > th,
        .table-condensed > tbody > tr > th,
        .table-condensed > tfoot > tr > th,
        .table-condensed > thead > tr > td,
        .table-condensed > tbody > tr > td,
        .table-condensed > tfoot > tr > td {
        padding: 3px;  /* 5px の値を変更 */
        }
    </style>
    <!-- Write all js here for making one html file -->
    <script type="text/javascript">
        'use strict';
        // @ironikot made on 9/20/2021
        var MtgSortAPP = window.MtgSortAPP || {};
        

        (function scopeWrapper($){

            MtgSortAPP.init = ()=>{
                setInterval(MtgSortAPP.displayTime, 1000);
                MtgSortAPP.sortChangeByBtn();
            }

            var data_list = [
                // INSERT YOUR DATA BELOW
                {l_name: 'Nishioka', f_name: 'Airi', l_a_to_z: 13, f_a_to_z: 1},
                {l_name: 'Ikemoto', f_name: 'Atsuhiko', l_a_to_z: 5, f_a_to_z: 2},
                {l_name: 'Nagaoka', f_name: 'Ayaka', l_a_to_z: 12, f_a_to_z: 3},
                {l_name: 'Okita', f_name: 'Hanako', l_a_to_z: 14, f_a_to_z: 4},
                {l_name: 'Hagiwara', f_name: 'Hiromi', l_a_to_z: 3, f_a_to_z: 5},
                {l_name: 'Ishiwatari', f_name: 'Kazue', l_a_to_z: 7, f_a_to_z: 6},
                {l_name: 'Miyahara', f_name: 'Kinya', l_a_to_z: 10, f_a_to_z: 7},
                {l_name: 'Honma', f_name: 'Marumi', l_a_to_z: 4, f_a_to_z: 8},
                {l_name: 'Aoyagi', f_name: 'Masaki', l_a_to_z: 1, f_a_to_z: 9},
                {l_name: 'Ootomo', f_name: 'Masato', l_a_to_z: 15, f_a_to_z: 10},
                {l_name: 'Kitagawa', f_name: 'Miku', l_a_to_z: 8, f_a_to_z: 11},
                {l_name: 'Shiga', f_name: 'Ouka', l_a_to_z: 17, f_a_to_z: 12},
                {l_name: 'Yanagihara', f_name: 'Reina', l_a_to_z: 20, f_a_to_z: 13},
                {l_name: 'Mizutani', f_name: 'Ritsuko', l_a_to_z: 11, f_a_to_z: 14},
                {l_name: 'Ishimoto', f_name: 'Susumu', l_a_to_z: 6, f_a_to_z: 15},
                {l_name: 'Kitano', f_name: 'Tatsuo', l_a_to_z: 9, f_a_to_z: 16},
                {l_name: 'Uehara', f_name: 'Toshiyuki', l_a_to_z: 18, f_a_to_z: 17},
                {l_name: 'Wakamatsu', f_name: 'Touya', l_a_to_z: 19, f_a_to_z: 18},
                {l_name: 'Sasaki', f_name: 'Yoriko', l_a_to_z: 16, f_a_to_z: 19},
                {l_name: 'Fukuda', f_name: 'Yuina', l_a_to_z: 2, f_a_to_z: 20},
            ];

            MtgSortAPP.displayTime =()=> {
                var formatData =(num)=>{
                    var ret = 0;
                    if (num < 10) {
                        ret = "0" + num;
                    }else{
                        ret = num;
                    }
                    return ret;
                }
                var time_display = document.getElementById("now_time");
                var now = new Date();
                var year = formatData(now.getFullYear());
                var month = formatData(now.getMonth()+1);
                var date = formatData(now.getDate());
                var hour = formatData(now.getHours());
                var minutes = formatData(now.getMinutes());
                var seconds = formatData(now.getSeconds());
                time_display.innerHTML = year + "年" + month + "月" + date + "日" + hour + ":" + minutes + ":" + seconds;
            }


            
            MtgSortAPP.displayName=(mode)=> {
                var name_data = data_list.sort(function(x, y){
                    if(mode==="name_atoz_btn"){
                        return x.f_a_to_z - y.f_a_to_z;
                    }else if(mode==="name_ztoa_btn"){
                        return y.f_a_to_z - x.f_a_to_z;
                    }else if(mode==="lname_aton_btn"){
                        return  x.l_a_to_z - y.l_a_to_z;
                    }else if(mode=="lname_ntoa_btn"){
                        return y.l_a_to_z - x.l_a_to_z ;
                    }

                })
                for (var i = 0; i < name_data.length; i++){
                    $('tr[class=name_tb]').remove();
                }
                for (var i = 0; i < name_data.length; i++){
                    $('tbody').append('<tr class="name_tb"><td>'+name_data[i].f_name +'</td><td>'+name_data[i].l_name +'</td></tr>');
                }

            }
            
            MtgSortAPP.sortChangeByBtn =()=>{
                let atoz_btn = document.getElementById("atoz_btn");
                var sort_btn = document.getElementsByClassName("sort-btn");
                var sort_btns = Array.from(sort_btn);

                sort_btns.forEach(function(target){
                    target.addEventListener("click",function(){
                        for(let i = 0; i < Object.keys(sort_btn).length; i++){
                            if(sort_btn[i].classList.contains('btn-danger')){
                                sort_btn[i].classList.remove('btn-danger');
                                sort_btn[i].classList.add('btn-secondary');
                            }
                        }
                        if(target.classList.contains('btn-secondary')){
                            target.classList.remove('btn-secondary');
                            target.classList.add('btn-danger');
                        }else if(target.classList.contains('btn-danger')){
                            target.classList.remove('btn-danger');
                            target.classList.add('btn-secondary');
                        }
                        var sort_mode = target.id;
                        MtgSortAPP.displayName(sort_mode);

                    });
                });

            }



        }(jQuery))
        window.MtgSortAPP.init();        

    </script>


</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

<!DOCTYPE html>

<head>

<title>morning meeting shuffling</title>

</head>

<body>

<h1 class="title">Morning Meeting Shuffling</h1>

</div>

</header>

<main>

</div>

<div>

</div>

<thead>

<th>First name</th>

</thead>

</tbody>

</table>

<div>

</div>

</div>

</main>

div {color: #0f62fe;}

#memo {

width: 100%;

height: 80vh;

}

.table-condensed > thead > tr > th,

.table-condensed > tbody > tr > th,

.table-condensed > tfoot > tr > th,

.table-condensed > thead > tr > td,

.table-condensed > tbody > tr > td,

.table-condensed > tfoot > tr > td {

padding: 3px; /* 5px の値を変更 */

}

</style>

'use strict';

// @ironikot made on 9/20/2021

var MtgSortAPP = window.MtgSortAPP || {};

(function scopeWrapper($){

MtgSortAPP.init = ()=>{

setInterval(MtgSortAPP.displayTime, 1000);

MtgSortAPP.sortChangeByBtn();

}

var data_list = [

// INSERT YOUR DATA BELOW

{l_name: 'Nishioka', f_name: 'Airi', l_a_to_z: 13, f_a_to_z: 1},

{l_name: 'Ikemoto', f_name: 'Atsuhiko', l_a_to_z: 5, f_a_to_z: 2},

{l_name: 'Nagaoka', f_name: 'Ayaka', l_a_to_z: 12, f_a_to_z: 3},

{l_name: 'Okita', f_name: 'Hanako', l_a_to_z: 14, f_a_to_z: 4},

{l_name: 'Hagiwara', f_name: 'Hiromi', l_a_to_z: 3, f_a_to_z: 5},

{l_name: 'Ishiwatari', f_name: 'Kazue', l_a_to_z: 7, f_a_to_z: 6},

{l_name: 'Miyahara', f_name: 'Kinya', l_a_to_z: 10, f_a_to_z: 7},

{l_name: 'Honma', f_name: 'Marumi', l_a_to_z: 4, f_a_to_z: 8},

{l_name: 'Aoyagi', f_name: 'Masaki', l_a_to_z: 1, f_a_to_z: 9},

{l_name: 'Ootomo', f_name: 'Masato', l_a_to_z: 15, f_a_to_z: 10},

{l_name: 'Kitagawa', f_name: 'Miku', l_a_to_z: 8, f_a_to_z: 11},

{l_name: 'Shiga', f_name: 'Ouka', l_a_to_z: 17, f_a_to_z: 12},

{l_name: 'Yanagihara', f_name: 'Reina', l_a_to_z: 20, f_a_to_z: 13},

{l_name: 'Mizutani', f_name: 'Ritsuko', l_a_to_z: 11, f_a_to_z: 14},

{l_name: 'Ishimoto', f_name: 'Susumu', l_a_to_z: 6, f_a_to_z: 15},

{l_name: 'Kitano', f_name: 'Tatsuo', l_a_to_z: 9, f_a_to_z: 16},

{l_name: 'Uehara', f_name: 'Toshiyuki', l_a_to_z: 18, f_a_to_z: 17},

{l_name: 'Wakamatsu', f_name: 'Touya', l_a_to_z: 19, f_a_to_z: 18},

{l_name: 'Sasaki', f_name: 'Yoriko', l_a_to_z: 16, f_a_to_z: 19},

{l_name: 'Fukuda', f_name: 'Yuina', l_a_to_z: 2, f_a_to_z: 20},

];

MtgSortAPP.displayTime =()=> {

var formatData =(num)=>{

var ret = 0;

if (num < 10) {

ret = "0" + num;

}else{

ret = num;

}

return ret;

}

var time_display = document.getElementById("now_time");

var now = new Date();

var year = formatData(now.getFullYear());

var month = formatData(now.getMonth()+1);

var date = formatData(now.getDate());

var hour = formatData(now.getHours());

var minutes = formatData(now.getMinutes());

var seconds = formatData(now.getSeconds());

time_display.innerHTML = year + "年" + month + "月" + date + "日" + hour + ":" + minutes + ":" + seconds;

}

MtgSortAPP.displayName=(mode)=> {

var name_data = data_list.sort(function(x, y){

if(mode==="name_atoz_btn"){

return x.f_a_to_z - y.f_a_to_z;

}else if(mode==="name_ztoa_btn"){

return y.f_a_to_z - x.f_a_to_z;

}else if(mode==="lname_aton_btn"){

return x.l_a_to_z - y.l_a_to_z;

}else if(mode=="lname_ntoa_btn"){

return y.l_a_to_z - x.l_a_to_z ;

}

})

for (var i = 0; i < name_data.length; i++){

$('tr[class=name_tb]').remove();

}

for (var i = 0; i < name_data.length; i++){

$('tbody').append('<tr class="name_tb"><td>'+name_data[i].f_name +'</td><td>'+name_data[i].l_name +'</td></tr>');

}

MtgSortAPP.sortChangeByBtn =()=>{

let atoz_btn = document.getElementById("atoz_btn");

var sort_btn = document.getElementsByClassName("sort-btn");

var sort_btns = Array.from(sort_btn);

sort_btns.forEach(function(target){

target.addEventListener("click",function(){

for(let i = 0; i < Object.keys(sort_btn).length; i++){

if(sort_btn[i].classList.contains('btn-danger')){

sort_btn[i].classList.remove('btn-danger');

sort_btn[i].classList.add('btn-secondary');

}

if(target.classList.contains('btn-secondary')){

target.classList.remove('btn-secondary');

target.classList.add('btn-danger');

}else if(target.classList.contains('btn-danger')){

target.classList.remove('btn-danger');

target.classList.add('btn-secondary');

}

var sort_mode = target.id;

MtgSortAPP.displayName(sort_mode);

});

}

}(jQuery))

window.MtgSortAPP.init();

</script>

</body>

</html>

名前データの作成スプレッドシート

こちらがスプレッドシートです。

A列とB列にローマ字で名前を入れてもらえれば、自動で、JavaScriptに挿入用のデータが生成されます。

C列を上から下までコピーして頂いて、上記のHTMLファイルにペーストしてもらえればと思います。

まとめ

簡単ですが、ミーティング用の順番表示のHTMLを作ってみました。

…といってもExcelでやるのが一番速いですかねｗ

ボタンの色の切り替えや、名前リストの切替部分でも、再利用して頂ければと思います。

PS：

1月に１つのソフトを作ると言いながら、その半分くらいしか作れていません…。

んー、作りたいものはたくさんあるんですけどね。。