カテゴリー内の他の記事

obnizとkintoneでIoT連携してみよう!

フォローする

(著者:サイボウズ 大竹 遼) 

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___kintone__2019_0626.png

obniz に接続した物理ボタンを押すと、ブラウザが切り替わる仕組みでクイズを作っています。
ポイントは obniz のプログラムを kintone 上にアップしている 点です。
obniz のプログラムはクラウド上に配置すればよく、クラウド製品である kintone 上に配置しても動かすことができます。

さらに、kintone上に配置することでkintoneが用意している kintone JavaScript API も一緒に利用することができるため、かなり連携がしやすくなります!

実際の動き(デモ)

まるでマウス操作をしているかのように、物理ボタンで kintone が操作できます!また、同アプリに正誤率を貯めるようにもしているので、あとで「どの問題が難しいか」なども把握できます。

kintone-obniz.png

kintoneの設定

クイズ出題アプリ、クイズマスタアプリの2つのアプリを用意しています 。

クイズ出題アプリ 

アプリの構成は以下のようになっています。(正誤を貯める用)

フィールド名 フィールドタイプ フィールドコード

クイズレコードURL 

文字列(1行)

url

問題

文字列(1行)

question

正誤 

ドロップダウン

result

作成日時

作成日時

CreateTime

さらにこちらのアプリには、カスタマイズビューとして「出題ビュー」「正解ビュー」「不正解ビュー」を作成しています。
(カスタマイズビューのHTML自体については プログラム部分 で説明しています。)

クイズマスタアプリ

アプリの構成は以下のようになっています。

フィールド名 フィールドタイプ フィールドコード

問題

文字列(1行)

question

選択肢1

文字列(1行)

choice1

選択肢2

文字列(1行)

choice2

選択肢3

文字列(1行)

choice3

選択肢4

文字列(1行)

choice4

正解

文字列(1行)

answer

本当は正解フィールドはラジオボタン等の選択式にしたかったですが、今回はコードのわかりやすさ重視で文字列1行フィールドとしています。

プログラム

今回作成した 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で確認したものになります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。