尝试固定Scrumblr便签的随机颜色并重新构建

3 年 ago
科, 颖
3 minutes

首先

在我们团队中，随着远程工作的普及，我们需要一种能够远程进行回顾的工具。因此，Scrumblr这个可以在本地环境使用便签板的工具在我们团队内非常流行。
然而，在添加便签时，颜色是随机的，使用起来不太方便，于是我进行了分支并进行了自定义。
（如果可以使用Trello或Jamboard就好了，但基于项目的需要，我们禁止向外部写入工作信息。）

移动的东西

    GitHub上に置いている(https://github.com/shimi58/scrumblr/tree/master/dockerenv) ので､こちらからすぐに環境自体は立ち上がるかと｡
image.png
動作確認環境バージョンWindows10 Home Editionバージョン2004Docker for Windows2.3.0.3

终于，Docker for Windows也能在HomeEdition上运行了！我轻松地按照tomokei5634的文章成功进行了安装。

环境设置

使用Docker在CentOS7上建立。

我一直以来都是根据Rubbish先生的网站上提供的垃圾桶图像为基础进行再使用的。
这次的新增内容如下。

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

RUN systemctl enable autorun.service

关于服务，我们已经设定为在操作系统启动时自动启动。

[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源码进行自定义

以下是正题，但是改动量是最小的。

首先，请生成屏幕上的“+”按钮，以下是可能的选项。

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

我第一次碰到了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
image.png

继续查看源代码，会发现有一个与“+”按钮按下时的功能相关的函数。

$("#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）方法被调用，其内容如下所示：

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

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

    return colours[i];
}

我随机选择了一种颜色。所以，我尝试将”# create-card”以下方式改写。

$("#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镜像，而应该使用timmit/scrumblr才能获取！！（我为此纠结了一个小时）。

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

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

最后一点

最初，我想在家里的电脑上安装Docker for Windows，顺便尝试了一下定制Scrumblr。整个过程都很顺利。对于未来，我想要添加一些便签的颜色或者使其更加丰富。（由于便签本身是图像形式的，所以可能会添加一些没有创意的便签…）

bannerAds