【kintone定制】我做了一个轮盘app

介绍

仅在团队内部进行定制和共享是不够的“输出”。
像 Hazime 风格一样，我会意识到未来的输出。

你做了什么

这次，我创建了一个带有kintone自定义的“任务决策轮盘应用程序”。

作为创作背景，我目前所在团队的任务决定就是这个神App”网络轮盘赌”，我下定决心要赌小鸡了。
轮盘赌会让您在每项任务中都感到兴奋。我们的团队对轮盘赌如此着迷，以至于让我们说：“你想今天决定吗？”

决定一天的任务后，
“岩君，你能用kintone试试这个吗？”

这是此轮盘赌定制的触发器。

这将是一个很长的故事，所以让我们立即向您展示一个演示。

演示

【kintoneカスタマイズ】ルーレットアプリを作ってみた

开发需要什么

金
- 轮盘赌应用
js文件
css 文件
库 CDN URL（这次是 Chart.js 和 Chart.js 插件）

钱

应用配置

表格1

字段名称	字段格式	域代码	评论
标题	字符串（1 行）	标题	ex. 下一个土豆罐MC就是你！！！！
-	空间	圆圈	轮盘显示
-	空间	开始按钮	用于开始按钮放置
有趣的按钮	单选按钮	有趣的按钮	选择：开/关有无趣味元素
肌肉轮盘赌	单选按钮	肌肉轮盘赌	让轮盘赌似乎已经决定了一次，然后再次旋转
随机比率	单选按钮	随机比率	随机确定轮盘的划分
桌子	桌子	桌子	（见表2）
-	团体	结果	（见表3）

表2

字段名称	字段格式	域代码	评论
添加到轮盘赌	单选按钮	添加单选按钮	选择：开/关是否反映在轮盘赌中
姓名	字符串（1 行）	姓名	添加到轮盘赌的名称

表3

字段名称	字段格式	域代码	评论
决策者	字符串（1 行）	决策者	轮盘赌后的数据保留
比率	字符串（1 行）	比率	轮盘赌后的数据保留
转数	字符串（1 行）	转数	轮盘赌后的数据保留

js和css文件的放置

（空间名称）>（应用名称）>应用设置
在“设置”选项卡中使用 JavaScript/CSS 进行自定义
按以下顺序添加到“PC 的 JavaScript 文件”
1. https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js
2. https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js
3. 轮盘赌.js
4. 将 CSS 文件添加到“PC 的 CSS 文件”
  1. 轮盘赌.css

【kintoneカスタマイズ】ルーレットアプリを作ってみた

代码注释

有一个轮盘可用作此 kintone 轮盘定制的参考。 (https://jp.piliapp.com/random/wheel/)

参考这个轮盘赌，用kintone实现以下四点。

轮盘赌的名称
显示轮盘赌
轮盘赌
轮盘审判

此外，我们还将解释使赌徒嬉戏的有趣元素。

肌肉轮盘公式
随机比例

然后我会解释。

1. 轮盘名称

首先，我们需要保存一个字符串以添加到轮盘赌中。这次，我将单选按钮和字符串（一行）放在表中，原因如下。

我想轻松选择是否加入轮盘赌
除了人名，还有任务名称等你想在轮盘中转的东西

在此自定义中，考虑到单选按钮的状态，将表中的名称分配给数组。（这是因为人名需要是数组，后面会解释。）

const inputLables = [];

//テーブルの配列を取得
const tblDataArray = event.record.テーブル.value;  ///event: kintoneイベントによるeventオブジェクト
//ラジオボタンでフィールド変更不可, 名前の配列を取得
Object.keys(tblDataArray).forEach((key) => {
  if (tblDataArray[key].value.ラジオボタン_追加.value === '追加'){
    tblDataArray[key].value.名前.disabled = false;
    if (tblDataArray[key].value.名前.value) {
      inputLabels.push(tblDataArray[key].value.名前.value);   //名前を配列に追加
  } else {
    tblDataArray[key].value.名前.disabled = true;
  }
})

例子：

console.log(inputLabels)   ///['いわくん', 'いわちゃん', 'いわさん']

【kintoneカスタマイズ】ルーレットアプリを作ってみた

2.轮盘展示

这是这段时间最重要的部分。

看轮盘赌，
“数据一圈一圈，五彩缤纷……不就是饼图吗？？”
我想。

搜索：JavaScript饼图→图表.js很成功！

因此，轮盘赌决定使用 Chart.js 饼图。

由于这是我第一次使用 Chart.js，我将在下面将其作为备忘录发布。

通过指定 Canvas 标签进行渲染
将标签、背景颜色和饼图百分比放入数组中

//円グラフを作成する関数
const showChart = (element, labels, splitRatio, color) => {
  const myChart = new Chart(element, {
    type: 'pie',
    data: {
      labels: labels,   ///ラベル
      datasets: [{
        backgroundColor: color,   ///背景色
        data: splitRatio,   ///円グラフの割合
        borderColor: '#fff',
        borderWidth: 1
      }]
    },
    options: {
      plugins: {
        tooltip: {
          enabled: false
        },
        //凡例を消す
        legend: {
          labels: {
            fontColor: 'black'
          },
          display: false   ///falseで非表示、デフォでtrue
        },
        datalabels: {
          color: 'black',
          anchor: 'center',
          font: {
            weight: "bold",
            size: 35,
          },
          formatter: (value, element) => {
            let label = element.chart.data.labels[element.dataIndex];
            return label;
          },
        },
      },
      animation: false,   //グラフを表示させたときのアニメーションを消す
    },
    plugins: [
      ChartDataLabels,   //プラグインを使えるようにする
    ]
  });
};

例子：

kintone.events.on('app.record.create.show', (event) => {
  ///canvasタグを生成
  const circleElement = document.createElement('canvas');
  circleElement.id = 'roulette';

  ///関数の引数を定義（今回はデモ用に変数を定義）
  const inputLabels = ['いわくん', 'いわちゃん', 'いわさん'];
  const backgroundColor = ['red', 'orange', 'yellow'];
  const splitRatio = [33.3, 33.3, 33.3];

  ///関数の呼び出し
  showChart(circleElement, inputLabels, splitRatio, backgroundColor);

  ///kintoneへ表示
  kintone.app.record.getSpaceElement('circle').appendChild(circleElement);
})

结果
【kintoneカスタマイズ】ルーレットアプリを作ってみた

3.轮盘旋转

我可以写一个轮盘赌。
接下来是轮换。

轮盘旋转是动画对象我通过使用旋转画布元素来实现这一点

const startRotating = (initialDegree, finalDegree, duration) => {
  return new Promise((resolve) => {
    const keyFrames = new KeyframeEffect(
        document.getElementById('roulette'),   ///作成したルーレットのid
        [
        {transform: `rotate(${initialDegree}deg)`},   ///回転する前の角度（初期値）
        {transform: `rotate(${finalDegree}deg)`}   //回転した後の角度（終値）
        ],
        {
          duration: duration,   ///１つのアニメーションにかかる時間(ミリ秒)
          easing: 'ease-in-out',   ///始めゆっくりで、その後定回転で、終わりゆっくり
          iterations: 1,   ///指定した動作の繰り返し数 ⇄ infinite でずっと
          fill: 'forwards',   ///終わったときにどういう状態で止めるか　(forwardsで終わったときの状態で止める)
        }
      );
    const playAnimation = new Animation(keyFrames);
    playAnimation.play();
    playAnimation.onfinish = () => {resolve()};   ///アニメーションが終わったらresolveを返す
  })
};

生成一个 KeyframeEffect 对象，并基于此生成一个 Animation 对象。
首先，关键帧是一个创建动画运动的函数，我将 KeyframeEffect() 解释为生成运动的内容。
在关键帧效果中，
new KeyframeEffect(動かしたい要素, 動き, オプション)
通过指定它来使用它
这里的重点如下。

将随机生成的旋转角度替换为自变量的旋转角度。
-> 从轮盘的角度来看，旋转的次数和停止的地方需要是随机的
除非使用.play() 播放，否则动画对象不起作用
将动画放入 Promise 对象
-> 因为我想做同步处理（我会用肌肉轮盘公式解释）

例子：

///キリが良い回転角にならないように7倍をかけて、10回転 + 0~7回転のランダムな回転角を生成
const revolution = 3600 + 7 * Math.floor( Math.random() * 361);

///上で生成したランダムの回転数でルーレットを回転
startRotating(0, revolution, 8000);

【kintoneカスタマイズ】ルーレットアプリを作ってみた

4、轮盘的判断

这是我最用脑子的部分。

轮盘赌的判断标准是它从 0 度（时钟的 12 点钟部分）从 0 度旋转到 360 度。
这是因为饼图实际上是从 12 点位置开始增加的，所以初始值永远不会偏移。

由于生成的随机旋转数为3600度或更多，因此执行计算以确定旋转从初始值在0到360度处停止了多少。
这可以使用余数。
例子：

console.log(3750 % 360)   ///150

接下来，我们需要确定这个角度在哪个人里面。
这是使用 Array.reduce() 计算的，用于比较饼图的百分比和旋转角度的大小。

//判定関数
const judgeSelectedLabel = (labelLength, revolution, splitRatioArray) => {
  const remainder = revolution % 360;
  let selectedLabel = 0;
  const splitDegreeArray = [];
  splitRatioArray.forEach((key) => {
      splitDegreeArray.push(key * 360 /100);
  });
  const reversedSplitDegree = splitDegreeArray.reverse();
  reversedSplitDegree.reduce((previousValue, currentValue, currentIndex) => {
      if (previousValue <= remainder && remainder < previousValue + currentValue) {
        selectedLabel = (labelLength - 1) - currentIndex;
      }
      return previousValue + currentValue;
  }, 0);
  return selectedLabel;
};

这里的重点是

顺时针旋转必须以 inputLabels 的相反顺序确定
-> 使用 Array.reverse() 反转
不要乱用角度和分数
-> 因为图假设了100个分数，但是旋转角度是360度

例子：

const inputLabels = ['いわくん', 'いわちゃん', 'いわさん', 'いわきん'];
const labelLength = inputLabels.length;   ///今回は4
const revolution = 3601;
const splitRatio = [25, 25, 25, 25]

const result = judgeSelectedLabel(labelLength, revolution, splitRatio);
console.log(result);   ///3
console.log(inputLabels[result]);   ///いわきん

现在轮盘的基本动作都OK了！

趣味元素（肌肉轮盘式）

接下来，我将解释让赌徒心动的功能，“肌肉轮盘”。

肌肉轮盘是一种让你认为轮盘已经停止并决定，然后轮盘再次旋转的动作。

关键帧对象选项包括多个缓和但是，由于没有任何动作会撞到肌肉轮盘，

正常转动
在静止的时候有点挑逗
再次开始旋转
打印结果
实现。
这就是 Promise 早期的动画发挥作用的地方。（后来我发现我需要一个 Promise 哈哈）
使用 async/await 重复动画，如下所示。
```
  await startRotating(0, revolution/2, 4000);   /// (revolution÷2) まで4秒で回す
  await startRotating(revolution/2, revolution/2, 500);   ///止まった状態で0.5秒間停止
  await startRotating(revolution/2, revolution, 4000);   /// (revolution÷2) -> revolution まで4秒で回す
```
如果动画最后没有转到旋转角度，那么可见的结果和判断的结果可能会有所不同，所以我设置它总共旋转一圈。

趣味元素（随机比例）

接下来，我将再次解释让赌徒心痒痒的功能，“随机比率”。
这个函数是一个恶魔函数，可以随机改变饼图的比例，甚至随机化获胜的概率。

当除以人数时，变化率基于角度在±50％的范围内变化。随机比率的细节在下面解释。
- 假设 360° 为 100%，N = 人数，(-0.5 <= σ <= 0.5)，轮盘赌均分为 (100 / N) * N 或 {(100 / N) * 除以 σ } * N
- 在 (-0.5 <= σ <= 0.5) 到第 [N-1] 个范围内生成随机数，并通过 (100 / N) * σ 确定比率
- 对于第 N 个，计算直到第 N 个的比率之和，-0.5 * (100 / N) <= 100 - SUM(1 ~ (N-1)) <= 0.5 * (100 / N) 如果在范围内，第N个比例为100 - SUM(1 ~ (N-1)) 否则从第一个开始重复计算，直到在范围内
函数定义
```
//円の分割の配列を等分割で出力する関数(ランダムレシオのラジオボタンがオフの時には等分割)
const normalSplitRatio = (labelLength) => {
  const ratioArray = [];
  for (let count = 0; count < labelLength; count++) {
      ratioArray.push(100 / labelLength);
  }
  return ratioArray;
};

//円の分割の配列をランダムで出力する関数(100/labelLength の値の ±50% の変動率)
const randomSplitRatio = (labelLength) => {
  const ratioArray = [];
  const calculateRatio = () => {
      for (let count = 0; count < labelLength - 1; count++) {
          const random = Math.floor(Math.random() * 101) -50;
          const variation = (100 + random) / 100;
          const ratio = Math.floor(100 * variation / labelLength);
          ratioArray.push(ratio);
      }
      const sum = ratioArray.reduce((previousValue, currentValue) => previousValue + currentValue, 0)
      ratioArray.push(100 - sum);
  }
  calculateRatio();
  while (ratioArray[labelLength - 1 ] < 0.5 * 100 / labelLength || 1.5 * 100 / labelLength < ratioArray[labelLength - 1]) {
      ratioArray.splice(0);
      calculateRatio();
  }
  return ratioArray;
};
```
例子：
```
const inputLabels = ['いわくん', 'いわちゃん', 'いわさん', 'いわきん'];

const splitRatio = randomSplitRatio(inputLabels.length);
console.log(splitRatio);   ///[24, 28, 29, 19]
```
源代码

我没有解释一切，但如果你对整个事情是如何实现的感到好奇，GitHub由管理，请参考。

外表
- 添加了轮盘赌声音
- 体现在任务管理应用中
- 《Periperi！！其实是这样的》的动画（不知道有没有这样的事情……）
- 插入
在最后

这是一篇很长的文章，但感谢您的阅读。

定制不只是简化和自动化操作吗？我认为。

你为什么要做这个任务？

让您期待决定任务的“轮盘定制”，如果您能与您的团队一起尝试，我会很高兴。
即使你在做同样的事情，仅仅拥有一个有趣的氛围也可以创造良好的团队合作。

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308631563.html

介绍

你做了什么

演示

开发需要什么

评论

钱

应用配置

js和css文件的放置

代码注释

1. 轮盘名称

2.轮盘展示

3.轮盘旋转

4、轮盘的判断

趣味元素（肌肉轮盘式）

趣味元素（随机比例）

源代码

外表

在最后