こんにちは！ジョイゾーTech.チームの藤原と齋藤です。
Cybozu Days 2025、大盛況でしたね！ブースにお立ち寄りくださった皆さん、本当にありがとうございました！
今年の展示企画の一つとして、弊社の Tech.チームが出展した、kintoneとIoTを組み合わせた「火山の模型」をご紹介します。模型の下に設置されたフットペダルを踏み込むと、その信号が裏側でkintoneのデータ操作として反映され、模型が実際に噴火するという仕組みです。
私達はこの火山プロジェクトにおいて、地響き音やLEDの点灯、煙の発生といった、視覚的・聴覚的に「噴火感」を出す部分の制御を担当しました。
今回は、そのエフェクトの裏側を少しだけご紹介したいと思います！
※火山本体の作成についてはnoteに記載しています！ぜひこちらもご覧ください！
https://note.com/joyzojp/n/n7abc642caed4
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
物理ギミックをkintoneで制御する仕組み
今回の火山模型の目標は「kintoneのデータ連動によって物理的なギミックを制御すること」でした。kintoneにキーが入力されると、直接 SwitchBot APIを呼び出し、模型に組み込まれた各種デバイス（SwitchBot Plug Miniなど）を操作しています。
私たちが担当した主なデバイスは以下の通りです。
• BGM（…は、PCで特定のMP3ファイルを再生）
• LED（光）
• スモーク（煙）
• バブル（シャボン玉）
ペダル入力によるkintoneレコード作成
USBフットペダルはPCに接続すると外部キーボードとして認識され、踏んだペダルに応じてキー入力（KeyX, KeyY, KeyZ）として認識されるようになっています。ペダルが踏まれると、以下の動きをするように実装しました。
- SwitchBot APIを呼び出す制御関数を実行し、ギミックを動かす
- kintoneアプリにその該当するキーがレコード情報として保存される
フットペダルを踏むという動作が、物理ギミックの操作とkintoneへのレコード作成を同時に引き起こすトリガーとなっているのです！
kintone.events.on("app.record.index.show", async (event) => {
// keydownイベント
document.addEventListener("keydown", async (event) => {
if (event.code in util.KEYDOWN) {
// 押されたキーを記録
pressedKeys.add(event.code);
if (!flag[event.code]) {
flag[event.code] = true;
// XYZキーの組み合わせチェック
if (event.code === "KeyX" || event.code === "KeyY" || event.code === "KeyZ") {
console.log(`${event.code}キーが押されました。1秒後に判定します...`);
checkKeyCombinationAfterDelay(event.code);
}
エフェクトを実現した制御ロジック
1. 地響きBGM！！
火山の「臨場感」を演出する核となるのが地鳴り音源です。フットペダルが踏まれると、大地が震えるような音源が再生されます。
この音源は、kintoneのスレッドにアップロードされたMP3ファイルを使用しており、5秒間再生された後、システムが自動で音源をストップする仕組みです。
function playExternalAudio(url) {
if (window._createAudio) {
window._createAudio.pause();
window._createAudio.currentTime = 0;
}
const audio = new Audio(url);
window._createAudio = audio;
audio.volume = 1.0;
audio.play()
.then(() => {
console.log(`SUCCESS: Audio started from: ${url}`);
})
.catch(e => {
console.warn('WARNING: Audio playback was blocked by browser policy or URL issue.', e);
});
setTimeout(() => {
if (window._createAudio === audio) {
audio.pause();
audio.currentTime = 0;
}
}, 5000);
}
2. 溶岩が光る！LED制御エフェクト
火山の「マグマ」感を表現するパートには、SwitchBot テープライトを使用しました。フットペダルを踏むことで点灯と消灯が行われます。電球を turnOn で点灯させた後、10秒間待機し、自動で turnOff して消灯する仕組みです。
const startLight = async () => {
console.log("電球を点灯します");
try {
// 電球を点灯
await callSwitchBotAPI(util.SWITCHBOT.DEVICE_IDS.light, "turnOn");
console.log("電球の点灯が完了しました");
await sleep(10000);
await callSwitchBotAPI(util.SWITCHBOT.DEVICE_IDS.light, "turnOff");
console.log("電球の消灯が完了しました");
} catch (error) {
console.error("電球の点灯に失敗しました:", error);
alert("電球の点灯に失敗しました: " + error.message);
}
};
3. 立ち上る煙！スモーク制御エフェクト
火山の臨場感を一気に高めるのがスモークです。スモーク発生器をSwitchBot Plug Miniと繋ぎ、動きを制御しました。SwitchBot Plug Miniはいわゆるコンセントの電流ON/OFFが切り替えられる仕組みで、スモーク発生器の電源ON/OFFを切り替えることでスモークのタイミングを操作しています。
さらに、噴火の段階的な迫力を演出するため、4台用意したスモーク発生器をsmoke1とsmoke2の2つに分け、煙がリアリティをもって立ち上るように工夫しました。コードでは、まず片方 (smoke1) を起動し、0.5秒の遅延を置いてからもう一方 (smoke2) を起動しています。これにより、単なるON/OFFではなく、煙が段階的に広がる様子を表現できました。
const startSmoke = async () => {
console.log("煙を発生させます");
try {
// 煙発生器を起動（PlugMiniを使用）
await callSwitchBotAPI(util.SWITCHBOT.DEVICE_IDS.smoke1, "turnOn");
sleep(500);
await callSwitchBotAPI(util.SWITCHBOT.DEVICE_IDS.smoke2, "turnOn");
console.log("煙発生器の起動が完了しました");
await sleep(6000);
await callSwitchBotAPI(util.SWITCHBOT.DEVICE_IDS.smoke1, "turnOff");
await callSwitchBotAPI(util.SWITCHBOT.DEVICE_IDS.smoke2, "turnOff");
console.log("煙発生器の停止が完了しました");
} catch (error) {
console.error("煙の発生に失敗しました:", error);
}
};
4. スペシャルタイム！
この展示の最大の見どころとして用意していたのが、フットペダルを同時に3つ踏むことで発動する「スペシャルタイム」でした。
3つのキーの同時押しが検出されると、上記3つの仕組み（BGMの再生、LED点灯、スモーク放出）に加えて、さらにシャボン玉（バブル）排出がすべて同時に発動し、火山が大噴火する仕組みです。
すべての物理ギミックが起動するまさにスペシャルなタイムです！
kintoneと物理世界を繋ぐ面白さ
今回の火山プロジェクトを通じて、kintoneが単なるデータベースではなく、外部連携によって物理的な現実世界に影響を与えることができるプラットフォームであることを再認識しました！
今回のように、フットペダルというアナログな入力装置と、kintoneのJavaScriptカスタマイズ機能を組み合わせるだけで、派手な物理制御が可能になりました。デジタルとアナログの融合の面白さを体現できたかと思います。
なお、イベント終了後、kintoneアプリを確認したところ、延べ446回ギミックが動作していました！！動作した回数分のレコードがkintoneにしっかりと登録されています。
kintoneの可能性は無限大！今後もユニークな活用方法があれば、紹介していきますね。
弊社では初回開発無料の定額39万円でkintoneアプリを開発する定額型開発サービス「システム３９」を提供しております。kintoneの導入やアプリ開発でお困りの方は、お気軽にご相談ください。
＊Webでの打ち合わせも可能です。
