（著者：サイボウズ 大竹 遼）
Index
はじめに
ハードウェア (IoT機器)と kintone の連携Tips はすでにいくつかありますが、そのほとんどがハードウェア側の知識も必要なことが多いです。
ハード側で利用する言語もCやJavaなどWebとは異なる言語を利用することが多いため、その点でもWebエンジニアからは敷居が高かったりします。
obniz(オブナイズ) はJavaScriptでプログラムを書くことができ、Webの知識でハードウェアの操作が可能なデバイス (IoTプラットフォーム) です。
JavaScriptでカスタマイズすることができる kintone とはいろいろと相性が良く、今回はその obniz と kintone を連携させて 物理ボタンクイズ を実現してみます。
obniz とは
現実とコンピューター世界をつなぐデバイスやクラウドを提供しているオールインワンのIoTプラットフォームです。
obniz board と呼ばれるデバイスの他に、obniz OS という市販の開発デバイスにインストールすることで obniz として扱うことが可能なOSも提供しています。
特徴はなんといっても クラウドで動かすことができる ところで、従来の「デバイスにプログラムを書き込む」タイプではなく、クラウド上にプログラムを配置してそれをWi-Fi経由でデバイスが読み通り、デバイスが動くという仕組みを実現させています。
そのためWebエンジニアでも簡単にハードウェアをいじることができるのでとてもおすすめです！
構成
obniz に接続した物理ボタンを押すと、ブラウザが切り替わる仕組みでクイズを作っています。
ポイントは obniz のプログラムを kintone 上にアップしている 点です。
obniz のプログラムはクラウド上に配置すればよく、クラウド製品である kintone 上に配置しても動かすことができます。
さらに、kintone上に配置することでkintoneが用意している kintone JavaScript API も一緒に利用することができるため、かなり連携がしやすくなります！
実際の動き（デモ）
まるでマウス操作をしているかのように、物理ボタンで kintone が操作できます！また、同アプリに正誤率を貯めるようにもしているので、あとで「どの問題が難しいか」なども把握できます。
kintoneの設定
クイズ出題アプリ、クイズマスタアプリの2つのアプリを用意しています 。
クイズ出題アプリ
アプリの構成は以下のようになっています。(正誤を貯める用)
| フィールド名 | フィールドタイプ | フィールドコード |
|---|---|---|
|
クイズレコードURL |
文字列（１行） |
url |
|
問題 |
文字列（１行） |
question |
|
正誤 |
ドロップダウン |
result |
|
作成日時 |
作成日時 |
CreateTime |
さらにこちらのアプリには、カスタマイズビューとして「出題ビュー」「正解ビュー」「不正解ビュー」を作成しています。
(カスタマイズビューのHTML自体については プログラム部分 で説明しています。)
クイズマスタアプリ
アプリの構成は以下のようになっています。
| フィールド名 | フィールドタイプ | フィールドコード |
|---|---|---|
|
問題 |
文字列（１行） |
question |
|
選択肢1 |
文字列（１行） |
choice1 |
|
選択肢2 |
文字列（１行） |
choice2 |
|
選択肢3 |
文字列（１行） |
choice3 |
|
選択肢4 |
文字列（１行） |
choice4 |
|
正解 |
文字列（１行） |
answer |
本当は正解フィールドはラジオボタン等の選択式にしたかったですが、今回はコードのわかりやすさ重視で文字列１行フィールドとしています。
プログラム
今回作成した JavaScript、CSS、カスタマイズビュー用HTMLは以下となります。
script.js
※ ES6の書き方で記述しています。
style.css
出題ビュー
正解ビュー
不正解ビュー
プログラムの配置
jQuery と obniz のライブラリ、上記script.js を以下の順番で配置します。
| 順番 | 詳細 | URL / JSファイル |
|---|---|---|
|
1 |
jQuery |
https://js.cybozu.com/jquery/3.4.1/jquery.min.js |
|
2 |
obniz のライブラリ |
https://unpkg.com/obniz@2.0.3/obniz.js |
|
3 |
上記JSファイル |
script.js |
おわりに
まるで JavaScript のライブラリのように obniz (ハードウェア) が操作できます！
obniz 側のプログラム次第では LED を光らせたり、 サーボモータを動かしたりできるので、kintoneとの連携の夢が広がりますね！！
このTipsは、2019年7月版 kintoneで確認したものになります。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。