Help us understand the problem. What is going on with this article?

obnizとkintoneで物理ボタンアンケートを作ってみた

はじめに

巷で人気のobnizとkintoneをつなげてみました。
前々からいろいろやってはいたのですが、今回は動画も使って記事化してみます!

obniz とは

obniz
https://obniz.io/ja/

「現実をソフトウェア化する」
しれっともの凄いこと言っている気がするのですが、
つまるところWebの知識でマイコンが操作できる感じです!webエンジニアとしてはものすごく使いやすい(^^)

実際にobnizをいじっていて一番驚きだったのが、
クラウド上にプログラム配置してそれをobnizが読み込んでマイコン操作できる ってこと。
クラウド上にあればどこでも良くて、kintone上 に配置することも可能!!
-> つまり k
¥intone JavaScript API が利用できる!!

やべーですよね。夢広がります!!

今回作ったもの

obnizにつないだボタンを押すとkintoneへレコード登録する仕組みを作ってみました。
ボタンを3つ用意して、アンケート的なノリです!

構成図

超シンプルです。

layout.png

コード

GitHubで共有してます。

vote.js
(() => {
  'use strict';

  const obniz = new Obniz('{YOUR_OBNIZ_ID}');

  const text = ['使う!!', '使いたい!', '使わない'];
  const postRecord = val => {
    const params = {
      app: kintone.app.getId(),
      record: {
        '{YOUR_KINTONE_FIELD_CODE}}': {
          value: val
        }
      }
    };
    return kintone.api(kintone.api.url('/k/v1/record', true), 'POST', params)
      .then(resp => 'POST成功')
      .catch(err => 'POST失敗');
  };

  kintone.events.on('app.record.index.show', (event) => {
    obniz.onconnect = async () => {
      obniz.display.clear();

      // ボタンの設定
      const buttons = [
        obniz.wired('Button',  {signal:0, gnd:1}),
        obniz.wired('Button',  {signal:2, gnd:3}),
        obniz.wired('Button',  {signal:4, gnd:5}),
      ];

      // ボタンにイベントを紐付ける
      buttons.forEach((val, index) => {
        val.onchange = async pressed => {
          if (!pressed) return;
          const msg = await postRecord(text[index]);
          obniz.display.print(msg);
          obniz.wait(1000);
          location.reload();
        };
      });
    };
    return event;
  });
})();

kintoneへの配置

obnizのライブラリ, jquery と上記コードを以下のように配置します。

順番 ファイル/ライブラリ
1 https://js.cybozu.com/jquery/3.4.0/jquery.min.js
2 https://unpkg.com/obniz@2.0.3/obniz.js
3 vote.js(上記コード)

一押しポイント

ボタン押したらレコード登録部分

val.onchange = async pressed => {
  ...
  await postRecord(text[index]);
  location.reload();
  ...
};

Web上で動くので location.reload();がそのまま使える!!

さいごに

これでマイコンが動くってすごくないですか!?
まるでWebライブラリを扱っているように、ハードウェアの処理を書くことができます!!

それでは!≧(+・` ཀ・´)≦

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away