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

はじめに

kintone Advent Calendar 2021 25日目の記事です。

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

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

もう１本の方はこちら

おさらい：kintone GAME Labo とは

今年2021年の11月1日、2日に幕張メッセで行われたサイボウズのイベント Cybozu Days 2021 のブースです。kintoneを使ったゲームが体験できるブースとして、いろいろ作りました。

DARTONEとは

kintone GAME Laboでお披露目したkintoneでダーツ（の演出と得点管理）ができるゲームです！

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

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

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

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

・PCとペアリングして、200sが投げてるデータをうまく解析できれば、ゲームアプリを自作できるんじゃないだろうか？

結論から言いましょう。できました。200sはなんと、ちょっとお高いBluetoothキーボードだったのです!
調査の結果、アウター、インナー、ダブル、トリプル、インブル、アウトブルにそれぞれキーコードが割り振られていることがわかりました。

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

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

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

あとづけ理由もばっちり

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

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

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

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

仕組み

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

注力ポイント

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

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

プログラム

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

音を出す仕組み

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

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を使っています。

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とか

って感じに管理してマッピングをしています。

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

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カスタマイズを勉強する」ってのをおすすめします。

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

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

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