はじめに
NRIハッカソン bit.Connect - Hack for NEWSTYLE というイベントに参加してきました。
https://bitconnect.nri.co.jp/
IBMクラウドのファンクションを活用していたのを評価され、IBM賞をいただきました!
企業さんの技術サポートも手厚く、第一線の方に直接Slackで手取り足取り教えてもらえたのでめちゃくちゃ贅沢な時間を過ごせました!
つくったもの
お地蔵さんデモ動画
https://www.youtube.com/watch?v=8mviNWsBKp8
余談ですが、最初は磁石にピップエレキバンを使ってみたんですが、意外と磁力が弱く、動作が安定しないので、100均で買った磁石に付け替えました。
ストーリーなど作品の詳細はこちら
https://protopedia.net/prototype/2151
ハードウェアの実装
今回は2人チームで参加し、私の担当がobnizを用いたハードウェアの部分だったので、実装について困ったことや役に立ったことなどをつらつらと書いていきます
IBMクラウドをはじめて触った友人(AWSは日常的に触ってる人)曰く、とても使いやすかったとのこと
・AWSみたいな迷子になりそうなUIではなく、やりたいことがどうしたらいいのかすぐわかるような素晴らしいUI
・ハッカソンで使うなら、初めてでもこっちの方が楽かもしれない
とのことなので、私も触ってみようかなと思いました。
構成について
今回の作品でobnizでやるべきことは以下の3点でした。
1. IBMクラウドのファンクションからAPIを叩いてハードウェアで動作をさせる
2. 1が起きてから元に戻るまでの時間を計測する
3. 2の結果をIBMクラウドのファンクションに知らせる
1~3の流れは、ユーザーがすぐ行動すれば一瞬ですが、なかなか行動しないユーザーもいると想定され、待機時間が読めません。
なので本来は、1の機能だけを請け負うobnizと2~3の機能だけを請け負うobnizの2台構成でやるべきですが、所持台数の制限と、ハッカソンという限られた時間の中で対応するために、1~3を一つのobnizで実装できるように試行錯誤を行いました。(obnizの木戸さんありがとうございました!)
obnizクラウドでWebhookURLを吐き出す
結論から言うとこれは、今回の要件には適していなかったので他のサービスを利用しました。
obnizクラウド はobnizのホスティングサービスで簡単にWebhookURLを吐き出せました(今回初利用)
obniz のコンソールにアクセスし、デバイスを選択します(デバイスをまだアカウントに紐づけてない人は紐付けをしてから)
いろんなテンプレートがありますが、今回は「空のプロジェクト」を選択
コードをちゃちゃっと書いて
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@3.x/obniz.js" crossorigin="anonymous" ></script>
</head>
<body>
<div id="obniz-debug"></div>
<div class="container">
<div class="text-center">
<p id="start_date-text">開始時間 : </p><p id="start_date"></p>
<p id="end_date-text">終了時間 : </p><p id="end_date"></p>
</div>
</div>
<script>
//type in your obniz ID
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
// obnizクラウド上での動作かどうかの判定
if (Obniz.App.isCloudRunning()) {
obniz.display.print('===== start');
// ソレノイドを0,1に繋ぐ
var solenoid = obniz.wired('Solenoid', {gnd:0, signal:1});
solenoid.click();
// マグネットスイッチを9,10,11に繋ぐ
var ct10 = obniz.wired("CT10", {gnd:9, vcc:10, signal: 11});
myFunc = async function(){
const start_date = new Date();
$("#start_date").text(start_date);
obniz.display.print("start_date");
obniz.display.print(start_date);
// マグネットスイッチがONになる(笠が被される)のを待つ(ハッカソンみあふれるコード)
await ct10.stateWait(true);
const end_date = new Date();
$("#end_date").text(end_date);
obniz.display.print("end_date");
obniz.display.print(end_date);
const score = end_date - start_date
obniz.display.draw(score);
}
// APIをキックしてすぐだと、誤作動するので若干ディレイをかけて実行
setTimeout(myFunc, 1000);
// 実際に動かしたコードではないので雰囲気が伝われば
$.ajax({
type: 'POST',
// このURLはすでに無効です
url: 'https://b3fcdcbe.us-south.apigw.appdomain.cloud/ojizo/record',
data: {
score: score
},
dataType: 'json'
});
}
}
</script>
</body>
</html>
アプリの設定からブラウザ実行にチェックを入れて設定を更新します
デバイス一覧から「Webhook URLの確認」が選択できるようになります
注意点
obnizクラウドではawaitをかけて待機していても、接続が最大30秒までなので今回の要件的には適さないようでした。
待機ができる
以上のことをobnizの木戸さんに相談したところ、 repl.it というサービスで実現できるかもとの情報をいただき、試してみました。
repl.itではNode.jsのホスティングが無料ででき、APIとしても公開できます。
コードをnodejs用にすこし修正し(こちら大変たすけていただきました🙇♂️ありがとうございました🙇♂️)
const express = require('express');
const Obniz = require('obniz');
const fetch = require("node-fetch")
const app = express();
const port = 3000;
let solenoid = null;
let ct10 = null;
let obniz = new Obniz("xxxxxxxx");
obniz.onconnect = function(){
console.log("connected")
solenoid = obniz.wired('Solenoid', {gnd:0, signal:1});
ct10 = obniz.wired("CT10", {gnd:9, vcc:10, signal: 11});
}
// トップページに来たときに
app.get('/', async (req, res) => {
//とりあえずレスポンスは先に返す(ブラウザ対策)
res.json({"status": "OK"});
if (obniz.connectionState === "connected") {
obniz.display.print('===== start');
solenoid.click();
const start_date = new Date();
// $("#start_date").text(start_date);
obniz.display.print("start_date");
obniz.display.print(start_date);
await ct10.stateWait(true);
const end_date = new Date();
obniz.display.print("end_date");
obniz.display.print(end_date);
score = end_date - start_date
// $.ajaxはnodejsで使えないのでfetchに変換
const data = {
user_id: obniz.id,
start_date: start_date,
end_date: end_date,
};
await fetch('https://b3fcdcbe.us-south.apigw.appdomain.cloud/ojizo/record'
, {
method: "POST",
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
}
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
});
console.log("wakeup")
これで10分は待機できるようになりました!
まとめ
・ひさびさのハッカソンはすごく楽しい
・ピップエレキバンの磁力はそんなに強くない
・ハードウェアは極力シンプルな動きにしないとツラくなる(今回で言うと、やっぱどうにかobniz二台構成にしたほうがやりやすかったろうなぁ)
・IBMクラウドのファンクションはわかりやすくて便利だぞ