#kintone100日チャレンジ Day069：データ入力をゲーム感覚で！「ゲーミフィケーション入力支援プラグイン」を組んでみた

記事

IT・テクノロジー

森田ユウゴ

2026/06/08 15:45

面倒解決エンジニアの森田ユウゴです。

台湾からお届けする「#kintone100日チャレンジ」の69日目。

台湾は先週から大雨が降ったり、強い日差しが出てきたり安定しない天気です。

本日のテーマは、レコードを日々入力する現場の方向けの「ゲーミフィケーション入力支援プラグイン」。

必須項目の入力を「ゲームの達成体験」に変えるという発想で、進捗バー・スロット・レベルアップまで、外部ライブラリを一切使わず素のCSSとJavaScript APIのイベントだけで組んでみました。

「ゲーミフィケーション入力支援プラグイン」について

🎯 どんな課題に向き合ったか（現場の不とベネフィット）

現場の「不」: kintoneへのレコード入力は、どうしても単調になりがちです。「あと何項目埋めればいいのか」が分かりづらく、入力途中で離脱したり、必須漏れで保存エラーに弾かれてやる気が削がれたり…。地味な入力作業はモチベーションが続きません。

導入後の世界（ベネフィット）: 必須項目の充足率が画面全体の枠と巨大な％でリアルタイムに見えるので、「あと2件」が一目で分かります。さらに保存するたびにレベルが上がり、スロットの当たり演出が出る。入力という作業に「もう1件やろう」という小さな達成感が生まれます。

💡 着想・こだわり（既存との違い）

調べてみると、「条件付き必須」や「入力制御」「進捗の見える化」といった領域には、すでに完成度の高い既製プラグインがたくさんあります。ただ、その多くは管理側が入力を統制するためのもの。今回こだわったのは逆の視点で、入力する本人の気持ちを上げるという、あまり見かけない切り口です。

技術的なこだわりは3点あります。

1つ目は、保存演出が詳細画面に残らない設計です。保存成功のハンドラが「演出が終わるまで待つPromise」を返すと、kintoneはそれを待ってから画面遷移してくれます。これを使い、スロットやレベルアップ演出を元の編集画面で完結させ、保存後の詳細画面に演出が残らないようにしました。

2つ目は、演出のドライバがCSS変数1本という点です。進捗率を1つのCSS変数（0〜100）に流し込むだけで、枠の太さ・色・濃さや中央の％が動きます。5つのモードは色違いではなく、この変数の見せ方をCSS側で別物に作り分けています。紙吹雪に至るまで外部ライブラリはゼロです。

3つ目は、端末ローカルなのに全員リセットできる仕掛けです。レベルは端末ごとに保存しているので、本来は管理者が他人の分を消せません。そこで共有のプラグイン設定にリセットの合図だけを置き、各端末がその変化を検知して1回だけ初期化する、という疎結合な作りにしました。サーバにスコアは一切保存していません。

✨ これで出来ること（機能概要）

まずはこちらをご覧ください。

必須項目の進捗を全画面で可視化: 追加画面で必須項目の充足率を、画面中央の巨大な％と画面全体の枠で表示。埋めるほど枠が太く濃くなります。ラジオボタンなど最初から選択済みの型は進捗に数えないので、初期％が水増しされません。

入力・保存のたびにリアクション: フィールドを変更するたびに全画面パルスとスパークル。保存に成功すると3桁スロットが回り、777＝ジャックポット／ぞろ目／はずれを確率抽選。保存ごとに+50EXP、当たりでボーナスが付き、貯まるとレベルアップ演出が出ます。

5つの演出モードと細かな設定: ネオン／キャンディ縞／8bit／オーラ／水槽の5モードを設定画面でプレビューしながら選択。スロットの当たり確率調整、レベルバッジの表示位置、保存演出のオンオフ、シーズン切替用の全員リセットまで設定できます。

課題

現時点では下記のような課題が残っています。

DOMを直接操作している点（コーディングガイドライン上の例外）

画面全体の枠・巨大％・紙吹雪といった演出は、kintoneのJavaScript／REST APIだけでは実現できず、DOMを直接操作しています。これは「DOM操作はできるだけ避ける」というコーディングガイドラインに反する点で、ユーザーの明示許可を得たうえでの例外としています。緩和策として、kintone内部のクラス名や構造には依存せず、bodyの直下に最前面のオーバーレイ層を重ねる方式にしました。

bodyの余白を直接変更している点

枠をかぶせて隠すと入力欄が見えなくなるため、枠を出すモードではbodyに余白を当ててフォームを内側へ寄せています。標準UIのレイアウトに介入するため、枠表示は既定オフにし、設定で明示的にオンにしたときだけ働くようにしました。

レベルは端末ローカル保存という割り切り

今回はプロトタイプレベルのデモのためスコアをサーバに持たせていません。レベルやEXPはブラウザ・端末をまたいで同期されず、ブラウザのデータ消去でリセットされます。チーム横断のランキングなどは今回スコープ外です。