スマホでIoTしてみた

# スマホでIoTしてみた
## 概要
　Obnizのクラウドサービスを使って、LEDを点灯、モーターの制御をする。
　ミニ四駆を動かしたり、ラジコンをドリフトさせる。

## Obnizとは？
obniz（オブナイズ）は、ON/OFFやUART通信などのIO制御をクラウドのAPI経由で行える仕組み。

(引用元: https://obniz.io/ja/how_obniz_works)


## ラズベリーパイとどう違うの？
・JavaScriptで電子工作が可能に、面倒な初期設定は不要
・コンセプトは「ハードウェアのAPI化」

(引用元: https://jp.techcrunch.com/2018/11/22/cambrianrobotics-fundraising/)

##手順
### その１．Obnizをネットワークに繋げる
Obnizに電源を繋げる
画面に「WiFi Scanning..」が表示され、
接続先の一覧が表示されます。
<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190792/277e8362-3f11-342e-dfeb-4e3649feb92d.jpeg">

左上の歯車みなものを操作して、接続先の選択とパスワードの入力を行い、
画面にQRコードが表示されればえば接続完了！
<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190792/00dd4606-b4cf-c321-18fb-56db6990d925.jpeg">


### その２．LEDを発光させる
Pinを挿す位置に注意しながらObnizとLEDを繋げます。
QRコードをスマホで読み込むとエディターが表示されて、
クラウド上で実装することができます。
※QRコード横に表示されているIDを使って、PCからもエディターを開くこともできます。
<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190792/cbb90fa0-5594-9ef3-c213-6d07406bbe29.jpeg">


### その３．モーターを動かす
使おうと思った[ラジコンキット](https://www.amazon.co.jp/%E3%82%BF%E3%83%9F%E3%83%A4-%E3%83%9F%E3%83%8B%E5%9B%9B%E9%A7%86%E7%89%B9%E5%88%A5%E4%BC%81%E7%94%BB%E5%95%86%E5%93%81-%E3%82%A2%E3%83%90%E3%83%B3%E3%83%86Jr-30%E5%91%A8%E5%B9%B4%E3%82%B9%E3%83%9A%E3%82%B7%E3%83%A3%E3%83%AB%E3%82%AD%E3%83%83%E3%83%88-95474/dp/B07H8G4QBT/ref=sr_1_6?keywords=%E3%82%BF%E3%83%9F%E3%83%A4+%E3%82%A2%E3%83%90%E3%83%B3%E3%83%86&qid=1579246042&sr=8-6)備え付けのモーターだと遅すぎたので、
ミニ四駆のハイパーダッシュモーターとプラズマダッシュモーターを購入。おまけでアバンテも購入。 
が、まさかのハイパーダッシュとプラズマダッシュ動かず・・・
アバンテ付属のモーターは動いたので少しもったいないお買い物になった。

### 実装   
```html
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@2.2.0/obniz.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="obniz-debug"></div>
    <input type="button" id="brake" value="ブレーキ">
    <input type="button" id="accel" value="アクセル">
    <br />
    <input type="range" id="inputPower" value="0" min="0" max="100" step="10">
    速度：<span id="textPower">0</span>
    <br />
    <input type="radio" name="inputFB" id="forward" checked><label for="forward">前進</label>
    <input type="radio" name="inputFB" id="back"><label for="back">後退</label>

    <script>

      $('#inputPower').change(function() {  
        $('#textPower').text($('#inputPower').val());
      });

      var obniz = new Obniz("ほげほげ");

      obniz.onconnect = async function () {
        var motor1 = obniz.wired("DCMotor", {forward:0 , back:1 });
        var motor2 = obniz.wired("DCMotor", {forward:2 , back:3 });
        var motor3 = obniz.wired("DCMotor", {forward:4 , back:5 });
        var motor4 = obniz.wired("LED", { anode:6, cathode:7 } );

        $('#accel').click(function () {
          motor1.power($('#inputPower').val());
          motor2.power($('#inputPower').val());
          motor3.power($('#inputPower').val());
          var booleanFB = $('input[name="inputFB"]:checked').attr('id') == 'forward' ? true : false;
          motor1.move(booleanFB);
          motor2.move(booleanFB);
          motor3.move(booleanFB);
          motor4.on();
        });

        $('#brake').click(function() {
          motor1.stop();
          motor2.stop();
          motor3.stop();
          motor4.off();
        });
      };
    </script>
  </body>
</html><!--<html>
```


### その４．ラジコンを組み立てる
その3のときに買ったアバンテを組み立て。
組み立て後！
<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190792/cd14a875-5d66-58e5-3bf3-5c4eb0fd6f20.jpeg">

アバンテを組み立てましたが、
スマートカーをドリフトさせることになりました。



### その５．ドリフト！

<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190792/b8962941-64c5-18d4-88a2-eafa82cdfb52.jpeg">
アバンテ付属のモーターを4つ集めるのは厳しいので結局ラジコンキット付属のモーターで動かすことにしました。
ドリフトしようとしてるのに4WDでステアリング不可とまったくドリフトに向いていない車体でやることに・・・。
それぞれのタイヤの回転速度を調整することでなんとかドリフトさせることができました。

### 実装　
```html
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@2.2.0/obniz.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="obniz-debug"></div>
    <input type="button" id="brake" value="ブレーキ">
    <input type="button" id="accel" value="アクセル">
    <br />
    <input type="range" id="inputPower1" value="0" min="0" max="100" step="10">
    速度：<span id="textPower1">0</span>
    <br />
    <input type="range" id="inputPower2" value="0" min="0" max="100" step="10">
    速度：<span id="textPower2">0</span>
    <br />
    <input type="radio" name="inputFB" id="forward" checked><label for="forward">前進</label>
    <input type="radio" name="inputFB" id="back"><label for="back">後退</label>
    <br />
    <input type="button" id="right" value="右">
    <input type="button" id="left" value="左">
    <br />

    <script>

      $('#inputPower1').change(function() {  
        $('#textPower1').text($('#inputPower1').val());
      });
      
      $('#inputPower2').change(function() {  
        $('#textPower2').text($('#inputPower2').val());
      });

      var obniz = new Obniz("ほげほげ");

      obniz.onconnect = async function () {
        var motor1 = obniz.wired("DCMotor", {forward:0 , back:1 });
        var motor2 = obniz.wired("DCMotor", {forward:2 , back:3 });
        var motor3 = obniz.wired("LED", { anode:4, cathode:5 } );
        var motor4 = obniz.wired("LED", { anode:6, cathode:7 } );
        
        $('#right').click(function () {
          motor1.power(30);
          motor2.power(100);
          motor1.move(true);
          motor2.move(true);
          motor3.on();
          motor4.on();
        });
        
        $('#left').click(function () {
          motor1.power(100);
          motor2.power(30);
          motor1.move(true);
          motor2.move(true);
          motor3.on();
          motor4.on();
        });

        
        $('#accel').click(function () {
          motor1.power($('#inputPower1').val());
          motor2.power($('#inputPower2').val());
          var booleanFB = $('input[name="inputFB"]:checked').attr('id') == 'forward' ? true : false;
          motor1.move(booleanFB);
          motor2.move(booleanFB);
          motor3.on();
          motor4.on();
        });
        

        $('#brake').click(function() {
          motor1.stop();
          motor2.stop();
          motor3.off();
          motor4.off();
        });
      };

    </script>
  </body>
</html>
```

## TIPS
 * WiFiが繋がらないことがあり、ファームフェアを更新することで繋がるようになった。
 * モーターの制御に必要なチャネルがモーター3つ分しかなかった(モーターとして制御できるのは3つまで)が、2つはLEDとして接続することで解消