カテゴリー内の他の記事

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

Index

はじめに

IoT開発を始めたいけど、ハードウェア側の知識などにハードルを感じている方、実は多いのではないでしょうか。

そんな方々のために今回は、JavaScriptでプログラムを書くことができ、Webの知識でハードウェアの操作が可能なデバイス (IoTプラットフォーム) obniz を使って、
Webデータベースの「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の設定

今回の連携でデータベースとして利用したのは、kintoneというサービスです。
複雑なシステム構築がいらず、データベースワークフローコミュニケーションなどの機能を備えながら、豊富なAPIも用意されているクラウドサービスになります。
kintoneの機能についてもっと知りたい方は「開発プラットフォームとしてのkintone」をご覧ください。

1年間無料の開発者ライセンスを申し込む

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

出題ビュー

正解ビュー

不正解ビュー

プログラムの配置

JavaScript / CSSファイルを kintone に取り込む詳細の手順は、こちらをご参照ください。

CSSファイルの style.css は、上記手順に沿って設定画面の「PC用のCSSファイル」にアップロードし、
jQuery と obniz のライブラリ、上記script.js を以下の順番で「PC用のJavaScriptファイル」にアップロードしてください。

順番 詳細 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 との連携で IoT開発を手軽に始めてみましょう。

1年間無料の開発者ライセンスを申し込む

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

記事コメントは受け付けていません。