obnizとLEGOとGeekServoでクリスマスツリーを回して光らせて得た知見

この記事は [IoTLT Advent Calendar 2019](https://qiita.com/advent-calendar/2019/iotlt) の7日目の記事です。

## はじめに

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">このモニュメント。obniz フルパワーで回すと先ほどの情緒消失されます。動く速度は大事。サンタさんもきっとドン引き！<br>⚙️🎄⚙️　　　　　　　　　🦌🎅＜ 怖っ<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/GeekServo?src=hash&amp;ref_src=twsrc%5Etfw">#GeekServo</a> <a href="https://twitter.com/hashtag/LEGO?src=hash&amp;ref_src=twsrc%5Etfw">#LEGO</a> <a href="https://twitter.com/hashtag/enebular?src=hash&amp;ref_src=twsrc%5Etfw">#enebular</a> <a href="https://t.co/tXa1oVYQx5">pic.twitter.com/tXa1oVYQx5</a></p>&mdash; Tanaka Seigo (@1ft_seabass) <a href="https://twitter.com/1ft_seabass/status/1200919925604245509?ref_src=twsrc%5Etfw">November 30, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このような仕組みができていたんですが、やはりもっとしっかりしたクリスマスツリーを回して光らせてみたくなりました。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">できたぞー！回る速度が上がるとイルミネーションもスピードアップするのでパーティー感が上昇します！<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/GeekServo?src=hash&amp;ref_src=twsrc%5Etfw">#GeekServo</a> <a href="https://twitter.com/hashtag/Lego?src=hash&amp;ref_src=twsrc%5Etfw">#Lego</a> <a href="https://twitter.com/hashtag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#クリスマス</a> <a href="https://twitter.com/hashtag/Christmas2019?src=hash&amp;ref_src=twsrc%5Etfw">#Christmas2019</a> <a href="https://t.co/QCdy3D00FS">pic.twitter.com/QCdy3D00FS</a></p>&mdash; Tanaka Seigo (@1ft_seabass) <a href="https://twitter.com/1ft_seabass/status/1202577110843346944?ref_src=twsrc%5Etfw">December 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このように、回して光らせることが出来ました。

## クリスマスツリーを買ってきた

![2019-12-05_21h00_23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/63513955-c6d5-0f05-f6bb-368759f057ac.jpeg)

DAISOで買ったクリスマスツリー（ミニ）です。

![2019-12-05_21h16_30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/3d37231d-5784-4d1a-04e6-21e52d66d7a4.jpeg)

こんな感じ。

![2019-12-05_21h23_21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/67b156d3-961d-8fae-228d-65dc4a3d6bee.jpeg)

ひとまず分解します。

![2019-12-05_21h26_16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/aa691c71-c7f9-43e3-fd71-58904cb72a12.jpeg)

キリで裏側から穴を開けます。

![2019-12-05_21h27_06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/62a77f85-498e-2be8-fc24-394fb1ad6ba7.jpeg)

ぶっすーっと。

## LEGOにくっつける

![2019-12-05_21h27_40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/1ba0d397-2ced-e64e-7aea-c46af9ed083b.jpeg)

LEGOとくっつけるためにDAISOおゆぷらを使います。色はクリスマスカラーの赤！

これは、[ゆるメカトロ](https://www.facebook.com/groups/yurumect/) というゆるくメカトロニクスで楽しむグループで新井さんから伺った知見です。

![2019-12-05_21h28_54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/2f2890b0-b468-481c-421a-fbfb2bfd4f83.jpeg)

お湯で温めて柔らかくします。

![2019-12-05_21h29_45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/bb0c1897-b430-9b59-a2b1-8df257365228.jpeg)

柔らかくするぞー！

![2019-12-05_21h31_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/4edc21f6-9601-083e-6a21-5683a5d219fc.png)

ジャボン。

![2019-12-05_21h31_49.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/5c700a2d-e1f9-baad-3a8d-36320f831be9.jpeg)

くんにゃりしてきました。

![2019-12-05_21h32_56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/16644082-1805-7616-7830-7d7407337e01.jpeg)

キリで穴を開けても穴が小さく実装がしにくいので、もうちょっと掘ります。

![2019-12-05_21h34_24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/05cdd0e6-1927-5245-5474-887c6d402d50.jpeg)

うまく空けれました。

![2019-12-05_21h35_33.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/6abb3c24-651f-0731-f3f7-93d1dd27c0cf.jpeg)

おゆプラ1本だけだと量が足りなかったので、2本・3本追加しました。まずは、LEGOのテクニックの軸を結びつけます。

![2019-12-05_21h37_23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/eba76959-5648-9e0d-4604-96b8ede65967.jpeg)

さきほどの、おゆプラましましさせて、ツリーを差し込みました。

![2019-12-05_21h39_08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/00347482-f61b-246b-5bfb-ba2fe51d082d.jpeg)

良い感じに、つながりました！

![2019-12-05_21h42_22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56170/bbef9496-20fb-7045-820f-6c23335b1663.jpeg)

先ほどのものに置き換えてみます！

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">まずは回してみた！良い感じ！<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/GeekServo?src=hash&amp;ref_src=twsrc%5Etfw">#GeekServo</a> <a href="https://twitter.com/hashtag/Lego?src=hash&amp;ref_src=twsrc%5Etfw">#Lego</a> <a href="https://twitter.com/hashtag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#クリスマス</a> <a href="https://twitter.com/hashtag/Christmas2019?src=hash&amp;ref_src=twsrc%5Etfw">#Christmas2019</a> <a href="https://t.co/wrfDQSvfIj">pic.twitter.com/wrfDQSvfIj</a></p>&mdash; Tanaka Seigo (@1ft_seabass) <a href="https://twitter.com/1ft_seabass/status/1202576805766430720?ref_src=twsrc%5Etfw">December 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## obnizのソースコード

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">光らせてみるぞ！2個目のobnizとテープLEDを載せる！<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/GeekServo?src=hash&amp;ref_src=twsrc%5Etfw">#GeekServo</a> <a href="https://twitter.com/hashtag/Lego?src=hash&amp;ref_src=twsrc%5Etfw">#Lego</a> <a href="https://twitter.com/hashtag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#クリスマス</a> <a href="https://twitter.com/hashtag/Christmas2019?src=hash&amp;ref_src=twsrc%5Etfw">#Christmas2019</a> <a href="https://t.co/g4wl9jHWtE">pic.twitter.com/g4wl9jHWtE</a></p>&mdash; Tanaka Seigo (@1ft_seabass) <a href="https://twitter.com/1ft_seabass/status/1202576898334711809?ref_src=twsrc%5Etfw">December 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

obnizのソースコードです。1つのプログラムで、回すobnizと光らせるobnizを同時に動かします。

```html
<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">
  <link rel="stylesheet" href="/css/starter-sample.css">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@2.4.0/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<div class="wrap">

  <div class="DCMotor">
    <h3 class="text-center">Controling on Chritsmas Tree!</h3>
  </div>
  
  <div class="DCMotor">
    <button class="btn btn-primary btn-block" id="forward">Forward</button>
    <button class="btn btn-primary btn-block" id="reverse">Reverse</button>
    <button class="btn btn-primary btn-block" id="rightroll">RightRoll</button>
    <button class="btn btn-primary btn-block" id="leftroll">LeftRoll</button>
    <button class="btn btn-success btn-block " id="powerup">Power 100</button>
    <button class="btn btn-success btn-block" id="powerdown">Power 30</button>
    <button class="btn btn-secondary btn-block" id="stop">Stop</button>
  </div>

</div>

<script>
  var obniz = new Obniz("MY_OBNIZ_1");
  var obniz2 = new Obniz("MY_OBNIZ_2");
  
  var timerID;
  var leds;
  
  obniz2.onconnect = async function () {

    obniz2.display.clear();
    obniz2.display.print("Hello LEDTape!!!");

    leds = obniz2.wired("WS2812B", {gnd:2, vcc: 0, din: 1});

    // Start
    var colors = [
      [255, 0, 0],
      [0, 255, 0],
      [0, 0, 255],
      [255, 0, 0],
      [0, 255, 0],
      [0, 0, 255],
      [255, 0, 0],
      [0, 255, 0],
      [0, 0, 255],
      [255, 0, 0],
      [0, 255, 0],
      [0, 0, 255],
      [255, 0, 0],
      [0, 255, 0],
      [0, 0, 255]
    ];

    leds.rgbs(colors);
  }

  
  obniz.onconnect = async function () {
    
    var motor = obniz.wired("DCMotor", {forward:0, back:1});
    
    obniz.display.clear();
    obniz.display.print("Hello World");

    $('#forward').click(function () {
      motor.forward();
      obniz.display.clear();
      obniz.display.print("forward");
      
    });

    $('#reverse').click(function () {
      motor.reverse();
      obniz.display.clear();
      obniz.display.print("reverse");
    });
    
    $('#powerup').click(function () {
      motor.power(100);
      obniz.display.clear();
      obniz.display.print("powerup");
      
      clearInterval(timerID);
      timerID = setInterval(async function(){
        // ランダム色変更 100ms だけどそれほど速くはない、処理が少し貯まる
        colors = [];
        for(var i = 0; i < 15; i++){
          colors.push([
            Math.floor(Math.floor(Math.random() * 2) * 255),  // R
            Math.floor(Math.floor(Math.random() * 2) * 255),  // G
            Math.floor(Math.floor(Math.random() * 2) * 255)   // B
          ])
        }
        leds.rgbs(colors);
      },100);
      
    });

    $('#powerdown').click(function () {
      motor.power(30);
      obniz.display.clear();
      obniz.display.print("powerdown");
      
      clearInterval(timerID);
      timerID = setInterval(async function(){
        // ランダム色変更 2秒くらい 速度を戻すとき
        colors = [];
        for(var i = 0; i < 15; i++){
          colors.push([
            Math.floor(Math.floor(Math.random() * 25) * 10),  // R
            Math.floor(Math.floor(Math.random() * 25) * 10),  // G
            Math.floor(Math.floor(Math.random() * 25) * 10)   // B
          ])
        }
        leds.rgbs(colors);
      },2000);
    });
    
    $('#stop').click(function () {
      motor.stop();
      obniz.display.clear();
      obniz.display.print("stop");
    });
    
    timerID = setInterval(async function(){
      // ランダム色変更 2秒くらい 初動
      colors = [];
      for(var i = 0; i < 15; i++){
        colors.push([
          Math.floor(Math.floor(Math.random() * 25) * 10),  // R
          Math.floor(Math.floor(Math.random() * 25) * 10),  // G
          Math.floor(Math.floor(Math.random() * 25) * 10)   // B
        ])
      }
      leds.rgbs(colors);
    },2000);
    
  };
  
  
</script>
</body>
</html>
```

動かしたものがこちらです。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">できたぞー！回る速度が上がるとイルミネーションもスピードアップするのでパーティー感が上昇します！<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/GeekServo?src=hash&amp;ref_src=twsrc%5Etfw">#GeekServo</a> <a href="https://twitter.com/hashtag/Lego?src=hash&amp;ref_src=twsrc%5Etfw">#Lego</a> <a href="https://twitter.com/hashtag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#クリスマス</a> <a href="https://twitter.com/hashtag/Christmas2019?src=hash&amp;ref_src=twsrc%5Etfw">#Christmas2019</a> <a href="https://t.co/QCdy3D00FS">pic.twitter.com/QCdy3D00FS</a></p>&mdash; Tanaka Seigo (@1ft_seabass) <a href="https://twitter.com/1ft_seabass/status/1202577110843346944?ref_src=twsrc%5Etfw">December 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 学んだ知見「回転物で光らせるときは一緒に載せる」

そういえば、うっかり床にバッテリーを置いたまま動かすと、そのまま一緒に回転してしまいますね。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">あー、そうか。床においてしまうと、回ったら引きずられるのか！一緒にツリーに載せないと。<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/GeekServo?src=hash&amp;ref_src=twsrc%5Etfw">#GeekServo</a> <a href="https://twitter.com/hashtag/Lego?src=hash&amp;ref_src=twsrc%5Etfw">#Lego</a> <a href="https://twitter.com/hashtag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#クリスマス</a> <a href="https://twitter.com/hashtag/Christmas2019?src=hash&amp;ref_src=twsrc%5Etfw">#Christmas2019</a> <a href="https://t.co/U8oCVPQEw8">pic.twitter.com/U8oCVPQEw8</a></p>&mdash; Tanaka Seigo (@1ft_seabass) <a href="https://twitter.com/1ft_seabass/status/1202576972217368576?ref_src=twsrc%5Etfw">December 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これは一緒に載せる形で解決しました。バッテリーの固定には、ツリーに飾り用のヒモがついてて、かつプラスチックの器がついていてよかったです。

## まとめ

ということで「クリスマスツリーを回して光らせたい！」という気持ちで作ってみたところ、手を動かしてみていろいろな学びがありました。

* おゆプラ
    * こういうときにLEGOと他の物体の固定に便利だった
* 回転物で光らせるときには一緒に載せる
    * もっというと、床にバッテリーを置いたまま、コードが絡まず回るスマート方法が思いつかない
* obniz
    * 2つのobnizを同時に動かすのもラクラク

特に「回転物で光らせるときには一緒に載せる」については、一度やってみると身にしみて分かるんですが、最初ビックリしますね。

最後に、暗い部屋で動かしたバージョンもお伝えしておきます！

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">暗闇モード！クリスマスツリー！<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/GeekServo?src=hash&amp;ref_src=twsrc%5Etfw">#GeekServo</a> <a href="https://twitter.com/hashtag/Lego?src=hash&amp;ref_src=twsrc%5Etfw">#Lego</a> <a href="https://twitter.com/hashtag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9E%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#クリスマス</a> <a href="https://twitter.com/hashtag/Christmas2019?src=hash&amp;ref_src=twsrc%5Etfw">#Christmas2019</a> <a href="https://twitter.com/hashtag/%E3%82%86%E3%82%8B%E3%83%A1%E3%82%AB%E3%83%88%E3%83%AD?src=hash&amp;ref_src=twsrc%5Etfw">#ゆるメカトロ</a> <a href="https://t.co/wIdhGXdrXZ">pic.twitter.com/wIdhGXdrXZ</a></p>&mdash; Tanaka Seigo (@1ft_seabass) <a href="https://twitter.com/1ft_seabass/status/1202582639170875393?ref_src=twsrc%5Etfw">December 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 明日は

wamisnetさんです！