キューブのセンサー機能デモサイトの紹介

あるいはキューブによるレゴのIoT化のすゝめ

これは「toio™(ロボットトイ | toio（トイオ）) Advent Calendar 2019 - Qiita」の20日目の記事です。

toio™(ロボットトイ | toio（トイオ）) Advent Calendar 2019 - Qiita

キューブのセンサー機能を試せるデモサイトを作ったので、その紹介をします。準備は要りません。今すぐ試せます。キューブをお持ちの方は、是非読み進める前にサイトにアクセスして試してみてください。（ただしWindows/macOS/AndroidのChromeブラウザに限る）

Cube Sensor Demo

デモサイトでできること

デモサイトでは先日のアップデートでキューブに新しく追加された以下の２つの機能を試すことができます。

・ダブルタップを検出する機能
・姿勢（6方向）を検出する機能

接続したキューブをダブルタップすると文字が上下に揺れ、姿勢を変えるとそれに応じてサイト内のキューブの絵の姿勢も変化します。キューブのセンサーの精度や反応速度を確認できます。精度も反応も良い！

デモサイトをより楽しむために

キューブの姿勢を変えると、サイトの絵だけではなく背景の色も替わることに気づいたと思います。これは以下の写真のようにキューブを中に入れたレゴのサイコロ（的な何か）を作って遊ぶものです。転がして出た色に連動してサイトの色も変わるというキューブによるレゴのIoT化を体感できます。

必要なレゴのパーツや組み方については手順書を作ったのでトライしたい方は参考にしてください。これを組むと、キューブとレゴの相性が本当に良いことがわかるので是非作って欲しい！！

cube.pdf

1.33 MB

ファイルダウンロードについて

ダウンロード

cube_small.pdf

988 KB

ファイルダウンロードについて

ダウンロード

おまけ： デモサイトの実装及びキューブ用React Hookの話

さて、少しは技術的な話も書きましょう。デモサイトはReactで書かれています。メインのロジックは以下の通り。

import React from "react";
import classNames from "classnames";
import Footer from "./components/Footer";
import CubeView from "./components/CubeView";
import useCube from "./hooks/useCube";
import "./App.css";

function App() {
 // custom hook for Cube
 const [
   connect,
   disconnect,
   connected,
   orientation,
   doubleTap
 ] = useCube();

 // css style according to the cube posture/orientation 
 const styles = [
   { backgroundColor: "#282c34", color: "white" },
   { backgroundColor: "yellow", color: "black" },
   { backgroundColor: "white", color: "black" },
   { backgroundColor: "red", color: "white" },
   { backgroundColor: "orange", color: "white" },
   { backgroundColor: "greenyellow", color: "black" },
   { backgroundColor: "blue", color: "white" }
 ];

 const generateNotice = () => {
   if (!connected) {
     return <p>Connect a cube</p>;
   }
   return <p>Rotate or Double Tap</p>;
 };

 return (
   <div className="App" style={styles[orientation]}>
     <header className="App-header">
       <CubeView posture={orientation} />
       <div className={classNames({ "App-notice": true, bounce: doubleTap })}>
         {generateNotice()}
       </div>
       {connected ? (
         <button className="App-button" onClick={disconnect}>
           Disconnect
         </button>
       ) : (
         <button className="App-button" onClick={connect}>
           Connect
         </button>
       )}
     </header>
     <Footer />
   </div>
 );
}

export default App;

上のコードは簡単のためキューブのバージョンチェック等の処理を省いています。完全なコードは以下から参照できます。

yaeda/cube-sensor-demo

今回はReactで作るため、useCubeというReactのキューブ用Custom Hooksを実装しました。おかげでキューブの状態に応じてダイナミックに変化するUIを宣言的に実装することができています。

useCubeの実装はこれです。キューブを使ったアプリの実装が簡単に書けて開発体験が非常に良かったので、センサー以外の機能も追加してライブラリ化したいと思います。

おわりに

以上、センサー機能デモサイトの紹介でした。今後も試せるデモやアプリケーションを作って紹介していきたいと思います。

あと、希望者がいれば上で紹介したレゴパーツのGroup Buy的なことやってもいいですね。レゴのIoT化楽しいですよ。