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';
以下の2行を追加します。
.js
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)'; //←この行を追加
kintone
ステータスが「完了」になったときの処理を書きます。
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;
});
})();
PC用のJavaScriptファイル
以下の3つを適用します。
- https://js.cybozu.com/jquery/3.4.1/jquery.min.js
- snowfall.jquery.js
- kamifubuki.js
結果
ステータスを完了に進めると・・・
わ～！ 紙吹雪が降ってきました！
よくみると、星とかハートとかも散ってます
おめでとうございます 🥳🎊
終わりに
実用性はきっとあまりないですが、なんだか楽しい気分を味わえたのでいいのです！
ポータル画面が表示された時のイベントもありますし、kintoneのポータル画面に桜や落ち葉を降らせたりしても季節を感じられていいかも、と思いました。