Scrumblr 레이블의 색상을 임의로 고정 및 재구성
입문
이 팀에서 원격 작업도 확대되고 있습니다. 원격으로도 되돌아갈 수 있는 도구를 원합니다. 로컬 환경에서 라벨보드를 사용할 수 있는 Scrumblr가 팀에서 핫이슈가 되고 있습니다.
하지만 메모지를 추가할 때 색이 무작위여서 사용하기 어려워서 Fork를 사용자 정의해 보았습니다.
(사실 Trello나 Jamboard는 모두 사용할 수 있지만 프로젝트 관계로 외부에 업무 정보를 쓰는 것은 금지됩니다.)
움직이는 물건
동작 확인 환경
버전
Windows10 Home Edition
버전 2004
Docker for Windows
2.3.0.3
※ 드디어 HomeEdition Docker for Windows가 시작됩니다!
선생님의 기사를 참고로 흔쾌히 도입했습니다.환경 구축
Docker에서 CentOS7 구축
항상 참고tomokei5634 사이트의 컨테이너 이미지를 바탕으로 사용합니다
이번 추가분은 아래와 같습니다.
# 初期構築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
Scrumblr 구축
이번 환경 구축은 모든 셸화 순서를 시험해 보았다
#!/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
Scrumblr 소스 사용자 정의
여기서부터 본론이지만 개축량은 최소한이다
우선, 화면 측면. "＋"단추가 생성되는 상황은 다음과 같다.
index.jade
i#create-card.fa.fa-plus-circle.fa-2x.bottom-icon
이 대량 생산을 아래와 같이 하면 "＋"단추도 증가한다
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());
});
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');
});
･
･
･
이제 "+"단추마다 색상이 고정된 메모지를 만들 수 있습니다
지금까지 굴러가기 전에 목표 색깔이 나타나기 전에 클릭 연타로 분배하는 작업이 있었다(웃음)
뱀발
, 단계는 다음과 같다.재건
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
Scrumblr 시작(통과된 명령)
docker run -it --rm --name scrumblr --link redis-scrumblr:redis -p 8080:8080 timmit/scrumblr
마지막
우리 집 컴퓨터에 Docker for Windows를 넣으려고 했는데 스크럼블러 맞춤 제작을 해봤어요.
아무거나 시원하게 움직여서 너무 좋아요.
앞으로 메모지 색깔을 추가하거나 성장시키고 싶습니다. (메모 자체가 이미지 이미지이기 때문에 품위 없는 메모지를 추가해야 할 것 같습니다.)
Reference
이 문제에 관하여(Scrumblr 레이블의 색상을 임의로 고정 및 재구성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shimi58/items/624ca2535d09f6571e6c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
