kintone에 색종이를 내리자!

kintone Advent Calendar 2019 14일째의 기사입니다.

소개

kintone으로 이슈 관리나 태스크 관리를 하고 있는 분은 많은 것이 아닐까요?
작업이 완료되었거나 사건을 주문할 때 성취감을 느끼고 싶지 않습니까? (((갑자기)))

그런 분들을 위해,
레코드의 상태가 완료되면 레코드 상세 화면에 색종이를 불러 축하해주는 커스터마이즈를 해 보았습니다 🎊

앱 준비

앱 스토어에서 '이슈 관리' 앱을 추가하세요.
"프로세스 관리 활성화"에 ☑하는 것을 잊지 마세요!

맞춤형

색종이가 춤추는 처리는 Snowfall 라는 라이브러리를 사용하고 있습니다.
Github에서 소스 코드를 다운로드합니다.

snowfall.jquery.js

기본 설정이라면

여러 이미지를 설정할 수 없습니다

이미지가 회전하지 않음
그리고 조금 짜증나지 않기 때문에 조금 "snowfall.jquery.js"로 변경합니다.

1. 복수의 이미지 지정

변경 부분

//Snow flake object의 상당에 이하의 코드를 추가합니다.

snowfall.jquery.js

function randArray(_str) {
  var i = _str.length;
  while (i) {
    var y = Math.floor(Math.random() * i);
    var t = _str[--i];
    _str[i] = _str[y];
    _str[y] = t;
  }
  return _str;
}

// Snow flake object

그리고 다음 부분을 변경합니다.

변경 전

snowfall.jquery.js

if (options.image) {
  flakeMarkup = document.createElement("img");
  flakeMarkup.src = options.image; //←この行を変更
} else {
  flakeMarkup = document.createElement("div");
  $(flakeMarkup).css({ background: options.flakeColor });
}

변경 후

snowfall.jquery.js

if (options.image){
  flakeMarkup = document.createElement("img");
  flakeMarkup.src = options.image[random(0,options.image.length-1)]; //←この行を変更
}else{
  flakeMarkup = document.createElement("div");
  $(flakeMarkup).css({'background' : options.flakeColor});
}

2. 이미지 회전

변경 부분

snowfall.jquery.js 중에서 위치를 결정하는 것은 다음 부분입니다.

변경 전

snowfall.jquery.js

// Update function, used to update the snow flakes, and checks current snowflake against bounds
this.update = function(){
    this.y += this.speed;

    if (this.y > (elHeight) - (this.size  + 6)){
        this.reset();
    }

    this.element.style.top = this.y + 'px';
    this.element.style.left = this.x + 'px';

다음 두 줄을 추가합니다.

this.element.style.transform = 'rotateY('+(this.x+this.y)%360 + 'deg)'; //←この行を追加
this.element.style.transform = 'rotateX('+(this.x+this.y)%360 + 'deg)'; //←この行を追加

변경 후

snowfall.jquery.js

// Update function, used to update the snow flakes, and checks current snowflake against bounds
this.update = function(){
    this.y += this.speed;

    if (this.y > (elHeight) - (this.size  + 6)){
        this.reset();
    }

    this.element.style.top = this.y + 'px';
    this.element.style.left = this.x + 'px';
    this.element.style.transform = 'rotateY('+(this.x+this.y)%360 + 'deg)'; //←この行を追加
    this.element.style.transform = 'rotateX('+(this.x+this.y)%360 + 'deg)'; //←この行を追加

금과 소리

상태가 「완료」가 되었을 때의 처리를 기입합니다.
Snowfall 옵션은 원하는대로 변경하십시오.

kamifubuki.js

(function() {
  "use strict";

  kintone.events.on("app.record.detail.process.proceed", function(event) {
    var status = event.nextStatus.value;
    if (status === "完了") {
      $(document).ready(function() {
        $(document).snowfall({
          // 紙吹雪の量
          flakeCount: 100,
          // z-indexの値
          flakeIndex: "888",
          // 最小サイズ
          minSize: 8,
          // // 最大サイズ
          maxSize: 10,
          // 最低速度
          minSpeed: 1,
          // 最高速度
          maxSpeed: 3,
          // 影をつける
          shadow: false,
          // 画像
          image: [
            // "画像へのパス"
          ]
        });
      });
    }

    return event;
  });
})();