Scrumblrの付箋の色ランダムを固定化して再構築してみる

はじめに

　当チームでもリモートワークが広がってきており､遠隔でもふりかえりができるツールが欲しいということで､ローカル環境で付箋ボードが利用できるScrumblrがチーム内でホットになっています｡
しかし､付箋追加の際､色がランダムになっているのが使いづらく､､Forkしてカスタマイズしてみました｡
(本当はTrelloなりJamboardなり使えればいいのですが､プロジェクトの都合上､外部への業務情報の書き込み禁止となっており､､)

動くもの

• GitHub上に置いている(https://github.com/shimi58/scrumblr/tree/master/dockerenv) ので､こちらからすぐに環境自体は立ち上がるかと｡

動作確認環境	バージョン
Windows10 Home Edition	バージョン2004
Docker for Windows	2.3.0.3

※いよいよHomeEditionでもDocker for Windowsが動くようになりました！
tomokei5634さんの記事を参考にサクッと導入ができました｡

環境構築

Docker上でCentOS7構築

いつも Tips of Rubbishさんのサイトを参考にしたコンテナイメージをベースにして使いまわしています｡
今回追加部分は以下の通り｡

# 初期構築Shell起動用サービスを登録
COPY ./docker_data/autorun.service /etc/systemd/system/

RUN systemctl enable autorun.service

サービスについては以下のように､OS起動時に立ち上げるようにしています｡

[Unit]
After=network-online.target

[Service]
User=root
ExecStart=/root/docker_data/scrumblrInit

[Install]
WantedBy=multi-user.target

サービス起動方法は3244さんの記事を参考にしました｡

Scrumblr構築

今回の環境構築では手順を全てShell化してみました｡

#!/bin/sh

# redisのインストール
cd /root
wget http://download.redis.io/releases/redis-5.0.0.tar.gz
tar xzf redis-5.0.0.tar.gz

cd /root/redis-5.0.0
make distclean
make
make install

# radis起動
redis-server &

# nodeインストール
curl -sL https://rpm.nodesource.com/setup_10.x | sudo -E bash -

yum -y install nodejs

# Scrumblr構築
cd /root
git clone https://github.com/aliasaria/scrumblr
cd /root/scrumblr

npm install

# Scrumblr起動
node server.js --port 80

こちらはkazosawaさんの記事を参考にしています｡

Scrumblrソースのカスタマイズ

ここからが本題ですが､改修量は最小限です｡

まず､画面側｡｢＋｣ボタンを生成しているのは以下っぽいです｡

index.jade

i#create-card.fa.fa-plus-circle.fa-2x.bottom-icon

っぽいというのも､jadeファイル初めて触りました｡｡

これを以下のように量産すると､｢＋｣ボタンも増えました｡

index.jade

i#create-card.fa.fa-plus-circle.fa-2x.bottom-icon
i#create-card2.fa.fa-plus-circle.fa-2x.bottom-icon
i#create-card3.fa.fa-plus-circle.fa-2x.bottom-icon
i#create-card4.fa.fa-plus-circle.fa-2x.bottom-icon

引き続きソースの中身を見てみると､｢＋｣ボタン押下時のfunctionがありました｡

script.js

$("#create-card")
    .click(function() {
        var rotation = Math.random() * 10 - 5; //add a bit of random rotation (+/- 10deg)
        uniqueID = Math.round(Math.random() * 99999999); //is this big enough to assure uniqueness?
        //alert(uniqueID);
        createCard(
            'card' + uniqueID,
            '',
            58, $('div.board-outline').height(), // hack - not a great way to get the new card coordinates, but most consistant ATM
            rotation,
            randomCardColour());
    });

randomCardColour()というメソッドが呼ばれていて､その中身は以下の通り､

script.js

function randomCardColour() {
    var colours = ['yellow', 'green', 'blue', 'white'];

    var i = Math.floor(Math.random() * colours.length);

    return colours[i];
}

ランダムに色を選んでいます｡
ので､｢#create-card｣を以下の通り書き換えてみました｡

script.js

$("#create-card")
    .click(function() {
        var rotation = Math.random() * 10 - 5; //add a bit of random rotation (+/- 10deg)
        uniqueID = Math.round(Math.random() * 99999999); //is this big enough to assure uniqueness?
        //alert(uniqueID);
        createCard(
            'card' + uniqueID,
            '',
            58, $('div.board-outline').height(), // hack - not a great way to get the new card coordinates, but most consistant ATM
            rotation,
            'yellow');
    });

$("#create-card2")
    .click(function() {
        var rotation = Math.random() * 10 - 5; //add a bit of random rotation (+/- 10deg)
        uniqueID = Math.round(Math.random() * 99999999); //is this big enough to assure uniqueness?
        //alert(uniqueID);
        createCard(
            'card' + uniqueID,
            '',
            58, $('div.board-outline').height(), // hack - not a great way to get the new card coordinates, but most consistant ATM
            rotation,
            'green');
    });
･
･
･

単純に引数の色指定を固定化しただけです^^;

これで各｢+｣ボタン毎に色が固定化された付箋を作ることができるようになりました｡
いままでは､ふりかえり前に狙った色が出るまでクリック連打して振り分けるという作業が発生してました(笑)

蛇足

DockerHubに公開されているイメージの構築手順ですが､手順上以下の通りとなっています｡

• Redis構築

  docker run -d --name redis-data -v /redis-data:/data redis redis-server --appendonly yes
  
  docker run -d --name redis-scrumblr --volumes-from redis-data redis
  

• Scrumblr起動

  docker run -it --rm --name scrumblr --link redis-scrumblr:redis -p 8080:8080 scrumblr
  

Redis構築はこれでいいのですが､scrumblrイメージはscrumblrではなく､timmit/scrumblrとしなければ取れません！！(これで小一時間悩んでました｡｡)

• Scrumblr起動(通ったコマンド)

  docker run -it --rm --name scrumblr --link redis-scrumblr:redis -p 8080:8080 timmit/scrumblr
  

さいごに

　もともと､我が家のPCにDocker for Windowsを入れてみたかったついでにScrumblrカスタマイズをやってみました｡
どれもサクッと動いてよかったなと｡
　これからについては､付箋の色を追加するなり成長させたいなと｡(付箋自体は画像イメージなので､センスのない付箋を追加することになりそうです｡｡)