【Cybozu Days 2021】kintone GAME Laboの裏側 ~DARTONE編~

# はじめに

[kintone Advent Calendar 2021](https://qiita.com/advent-calendar/2021/kintone) 25日目の記事です。

今年もkintoneアドベントカレンダーにはたくさんの記事が書かれました！ありがたい限りです！
そして僕はいつも通りぎりぎりの公開ですw
しかも今年は同じ日に2記事書くという暴挙！完全に自分の首を絞めて失敗したなと思っています。。

今年のCybozu Days 2021 のゲームブースについて、技術部分はQiitaに書くよ、とnoteの方で説明しちゃったのでしっかり技術部分メインで書きたいと思います。
 
https://note.com/ryotkbb/n/na8bc22fb8037

もう１本の方はこちら

https://qiita.com/RyBB/items/db196ae38abe9c4bd322

# おさらい：kintone GAME Labo とは

今年2021年の11月1日、2日に幕張メッセで行われたサイボウズのイベント [Cybozu Days 2021](https://days.cybozu.co.jp/days/) のブースです。kintoneを使ったゲームが体験できるブースとして、いろいろ作りました。
![PXL_20211102_035305281_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/e3c4b527-ea37-c286-b118-a68e5d8a5c85.jpeg)

# DARTONEとは

kintone GAME Laboでお披露目した`kintoneでダーツ（の演出と得点管理）ができるゲーム`です！
![CD2021受付_ダーツトップ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/0ad9b9b6-91ca-4df0-03f2-368db1387849.gif)

## なぜkintoneでダーツをやろうと思ったのか

学生のことにダーツにハマって、マイダーツとかも揃えるくらいBBがダーツ好きだからです。
ダーツは基本４人までで、友人と行ったときに`自分だけマイダーツとかずるい｀と言われないよう、４人分のマイダーツを用意しているくらいには好きです。

というのはただダーツ好きな理由でして、なぜkintoneと絡めようと思ったかというと、個人的にDARTS LIVE（ダーツボード）を購入しようと思ってググっていたときに、このブログに出会ったからです。

https://www.infiniteloop.co.jp/blog/2016/01/dartslive_as_keyboard/

このブログ内にこんな記載が！！

> ・PCとペアリングして、200sが投げてるデータをうまく解析できれば、ゲームアプリを自作できるんじゃないだろうか？
> 
> 結論から言いましょう。できました。200sはなんと、ちょっとお高いBluetoothキーボードだったのです!
> 調査の結果、アウター、インナー、ダブル、トリプル、インブル、アウトブルにそれぞれキーコードが割り振られていることがわかりました。

このブログに出会ったときの衝撃はすごかったです！！

> BB) こ、これは・・・PCとつないでダーツができるってことはkintoneとも繋げられるやん！！

すべてはここから始まりました。

## あとづけ理由もばっちり

当然やろうと思った理由は前述の通りなのですが、ふとサイボウズのBAR（日本橋オフィス２７階にある会議室？ラウンジ？キッチン？まぁいわゆるイケイケなスペース）で何かしていたときに、

> BARってことはダーツくらいあってもいいよな〜。kintoneで得点管理したらお客様が来訪したときとかのネタになるし忘年会とかで活躍しそう・・・

と**仕事としても使えますよ**って理由も思いつきました（まぁ未導入なんですけどねw）

ってことで、会社の経費でポチッと。

# 仕組み

ブログに書いてあるとおり、PCと接続するとBluetoothキーボードとして認識されて、`ダーツを投げる→対応するキーが入力される`という動きになりました。なので、あとはJavaScriptの`keydown`イベントを使えばどこのキーが押されたら何点とマッピングすればもういける！

![kintone GAME Labo DARTONEシステム構成図.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/99c781ec-8fee-b9d3-650b-443aa39799c2.png)

# 注力ポイント

今回のDARTONEでのこだわりポイントはずばり音が出るところです！
残念ながらGIFでは音が伝わらないのですが、トップページではBGMが、プレイ中は「チュン（シングル音）」とか「チュチュン（ダブル音）」「デューン（BULL音）」とか効果音が出ています。

ということでYouTubeに音を上げたので気になる方は見てみてください

https://www.youtube.com/watch?v=Ltcyt79UqbQ

# プログラム

今回はDays用にカウントアップの２ターン制でつくってみました。アプリを分けたり一覧を分ければカウントアップ以外に０１などのゲームも作ろうと思えば作れます。kintoneの画面カスタマイズは毎度おなじみのVue.jsで作ってます！

## 音を出す仕組み

普通にaudioオブジェクトで流しています。音楽ファイル自体はkintoneのスレッドに添付して、裏技の直リンクURLでデータを読み込ませています。

```javascript
const bgmUrl = 'https://sample.cybozu.com/k/api/space/blob/download.do/-/MusMus-BGM-016.mp3?hash=6F541&id=5975&.mp3';

const audio = document.createElement("audio");
audio.src = bgmUrl;
audio.play();
```

止めたいときは `audio.pause()`で止まります。

## トップページの音に合わせて色が変わる仕組み

これはライブラリのRythm.jsを使っています。

https://okazari.github.io/Rythm.js/

```javascript
const rythm = new Rythm();

rythm.setMusic(bgmUrl);
rythm.start();

// この処理で色の幅を指定しています。あとはライブラリが勝手に音に合わせて色を変更してくれます。
rythm.addRythm("gaia-header-header", "color", 0, 10, {
  from: [0, 255, 255],
  to: [255, 0, 255],
});
```

パリピ感を出したいときはRythm.jsおすすめですw

## ダーツボードのエリアとキーのマッピングの仕組み

ここは別アプリで

- エリア名
    - single-1とかdouble-15とか
- 得点
    - １とか３０とか
- キー
    - aとかkとか

って感じに管理してマッピングをしています。
![スクリーンショット 2021-12-25 18.26.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153051/efec61fc-56aa-f757-ae84-eec87e0cd619.png)

なので、このデータをまるっと取得して、あとはkeydownイベントでこんな感じの処理を書けばOK！

```javascript
const thisPoint = 0;

// あらかじめマッピングアプリのレコード情報を取得しておく
const keyMapping = [
  {
    key: { value: 'p' },
    point: { value: 1 },
    area: { value: 'inner-single-1' }
  },
  {
    key: { value: '6' },
    point: { value: 1 },
    area: { value: 'outer-single-1' }
  },
  ...
];

document.addEventListener("keydown", async function (e) {
  // キーの値からダーツボードのエリア情報を抽出
  const thisKey = keyMapping.find((v) => v.key.value === e.key);

  // 特定できたオブジェクトのpointを計算に利用する
  thisPoint += Number(thisKey.point.value);

});
```

## その他コード

ぜひいろいろな企業にDARTONEを導入してほしいので、パッケージング化しようかなとか思ってたりします。今回のやつはAWSとかは使っていなくて、kintoneとDARTS LIVE 200SさえあればOKで、

- アプリテンプレートを入れる
- キーマッピングをする
- アプリの紐付けをする

くらいでいけると思うので前向きに検討してみます。

# 今後の展望

4人でダーツをやるならやっぱり**クリケット**が一番楽しいです。
特に僕はスタンダードではなくカットスロート（マークすると相手に得点を与えて、最後一番得点が少ない人が勝ち）が裏でチーム戦とかもできて好きです。

スタンダートは個人戦って感じで、カットスロートは上手い1人を他3人で蹴落とすってことができるので、よりわいわいできる気がしていますw

（いつか）カットスロートクリケットをkintone上に実装してみます！！

# おわりに

ということで、今年のDaysのゲーム DARTONE はこんな感じに作成していました。
まだkintoneカスタマイズをしたことのない人へは今回みたいな「趣味の内容でkintoneカスタマイズを勉強する」ってのをおすすめします。

なぜかというと・・・・時間を気にせず楽しく作れるから！それに尽きます！

もう１本の方もぜひ読んでみてくださいな

https://qiita.com/RyBB/items/db196ae38abe9c4bd322

それでみなさん、良いお年を！ ≧(+･` ཀ･´)≦