obnizを使ってロボット工作キット「フォロ」をスマホから操作する。

# obnizを使ってフォロをスマホから操作する。
こんなのを作ります。
![IMG_20180617_161639_R(1).jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/a4a4ccea-f8df-e56d-f6d8-2d5b0df135c3.jpeg)

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">走行テスト<br>操作はスマホから <a href="https://t.co/s4ZFDzLO0s">pic.twitter.com/s4ZFDzLO0s</a></p>&mdash; 鱒子 (@129itw) <a href="https://twitter.com/129itw/status/1008260574860328960?ref_src=twsrc%5Etfw">2018年6月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
走行時の様子。
# 事の発端
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">フォロとobnizは出会うべくして出会ったんだと思う。 <a href="https://t.co/m2AN3kbaZK">pic.twitter.com/m2AN3kbaZK</a></p>&mdash; 鱒子 (@129itw) <a href="https://twitter.com/129itw/status/1008887071660957699?ref_src=twsrc%5Etfw">2018年6月19日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.j![error]()
s" charset="utf-8"></script>
こんなにもピッタリハマってしまっては作るしかない。

# 材料
![IMG_20180619_093925_R.jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/a46da803-ffa6-c364-2c00-a032d381b6d7.jpeg)
1.obniz（公式サイト https://obniz.io/）
2.ユニバーサル基盤（秋月の十字配線ユニバーサル基板を使用）
3.ピンヘッダ（一列タイプ）
4.モバイルバッテリー（できるだけ小型で軽いもの）
5.ジャンパリード２本（15cmメス-メス）
6.USBプラグ基板（aitendoオリジナル基板を使用）
7.モバイルバッテリーを固定する物（タイラップ・タイラップベース・強力両面テープ）
![IMG_20180619_094001_R.jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/c1d49d8e-4a2b-f6a8-b803-c01c8b9ee9c5.jpeg)
8.フォロ（製品情報 https://www.elekit.co.jp/product/MR-9107）


# 作成開始
## obniz側の作成
頭部パーツの中にobnizがピッタリハマる為、電源用のmicroUSBコネクタが使えません。
なので外部電源用のJ1にピンヘッダを半田付けし、ここにジャンパリードをつないでモバイルバッテリーと接続します。
![InkedIMG_20180619_085116_LI_R.jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/d9567c8e-bd9c-5952-a60e-3b6eb947df6e.jpeg)

次にユニバーサル基盤を加工してobnizのIOとモーター側のコネクタを繋ぐ基板を作成します。
今回使ったのは秋月電子通商の十字配線ユニバーサル基板。
全ランドがパターンで繋がっているので、不要な箇所をリューターなどでパターンカットしピンヘッダを半田付けします。
![IMG_20180619_090402(1).jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/751894c2-7b8e-5a99-4a09-1f1527421668.jpeg)

![IMG_20180619_090300(1).jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/b6f5707a-7c43-026a-8c05-90df56b4e8be.jpeg)

接続するとこんな感じ。
前進・後退の青黒ケーブルがobnizの6・7番ピン、胴体回転の赤黒ケーブルが10・11番ピンにつながります。
![IMG_20180619_090451(1).jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/12d794cd-00a9-6c05-642c-8647bc4aa977.jpeg)
基板加工が難しい方はオス-オスの短いジャンパリードを使うのもアリかと思います。

## フォロ側の加工
ケーブルの取り回し関係＆作成した基盤が干渉する箇所を切り取ります。
加工前の写真を撮っていないので、どこを加工したか解りやすくする為に加工箇所を赤く塗りました。

頭部正面
![IMG_20180619_085420(1).jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/96c11dad-4eb1-7e0c-7ed9-4c879799f7e2.jpeg)

頭部下面
![IMG_20180619_085458(1).jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/435ac233-5a13-1071-3a12-0cf7e4ad88cb.jpeg)

胴体
![IMG_20180619_085700(1).jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/fcb42d98-e14a-92aa-020e-e35939191690.jpeg)

## モバイルバッテリー取り付け
バッテリーは背中に取り付けました。
あまり胴体回転軸より外側に付けたり、重いバッテリーを付けると走行中にひっくり返るので注意。
![IMG_20180619_085833(1).jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/b1af340a-59b9-fd6e-39c4-55b34b69019b.jpeg)

## ケーブルの取り回し
モーターからのケーブルを基板に接続し、電源のジャンパケーブルと合わせて取り回しします。
![IMG_20180619_084522_R(1).jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/5f7516b2-df3d-244b-7b02-242a39e907c1.jpeg)

電源のジャンパケーブルはobnizの下を通し、頭部と胴体の隙間から取り出します。
![IMG_20180619_084034 (1)_R.jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/47e4fa15-1f75-ddbf-a3c0-fddede1ed9bf.jpeg)

最後に頭部パーツを組んで電源を繋げば完成です。
![IMG_20180617_163227(1).jpg](https://qiita-image-store.s3.amazonaws.com/0/265107/fdfffdb6-9d3a-9e8a-63bb-f877e2deb4b8.jpeg)

# プログラム
せっかくobnizを使うのでスマホから操作できるようにします。
## HTML
```HTML
    <div id="obniz-debug"></div>
    <div class="center">
    <div class="cross-key-controller">
        <div class="btn-layout">
            <div class="btn-top  cross-key-btn" id="forward"></div>
            <div class="btn-left  cross-key-btn" id="lroll"></div>           
            <div class="btn-right  cross-key-btn" id="rroll"></div>
            <div class="btn-bottom  cross-key-btn"  id="reverse"></div>
        </div>
    </div>
    </div>
```

## JavaScript
```HTML
    <script>
      var obniz = new Obniz("OBNIZ_ID_HERE");      
      obniz.onconnect = async function (){         
        var Walk_motor = obniz.wired("DCMotor", {forward:6, back:7});
        var Roll_motor = obniz.wired("DCMotor", {forward:10, back:11});
        Walk_motor.power(100);
        Roll_motor.power(100);        
        $("#forward").on('touchstart',function(){         
          Walk_motor.move(false);
        }); 
        $("#forward").on('touchend',function(){
           Walk_motor.stop();
        }); 
        $("#reverse").on('touchstart',function(){
          Walk_motor.move(true);
        });
        $("#reverse").on('touchend',function(){
           Walk_motor.stop();
        });        
        $("#lroll").on('touchstart',function(){
          Roll_motor.move(false);
        });
        $("#lroll").on('touchend',function(){
          Roll_motor.stop();
        });        
        $("#rroll").on('touchstart',function(){
          Roll_motor.move(true)
        });
        $("#rroll").on('touchend',function(){
          Roll_motor.stop();
        });
      }
    </script>
```
## CSS
```HTML
    <style>
      .btn-layout {
          display: grid;
          grid-template-columns: 50px 50px 50px;
          grid-template-rows: 50px 50px 50px;
      }
       .btn-layout .btn-top {
          grid-row: 1 / 2;
          grid-column: 2 / 3;        
      }
      .btn-layout .btn-left {
          grid-row: 2 / 3;
          grid-column: 1 / 2;
      }
      .btn-layout .btn-center {
          grid-row: 2 / 3;
          grid-column: 2 / 3;
      }
      .btn-layout .btn-right {
          grid-row: 2 / 3;
          grid-column: 3/4;
      }
      .btn-layout .btn-bottom {
          grid-row: 3 / 4;
          grid-column: 2/3;
      }
      .cross-key-btn {
          width: 50px;
          height: 50px;
          -webkit-border-radius: 25%;
          border-radius: 25%;
          background-color: rgb(60, 80, 100);
      }
      .cross-key-controller {
          display: inline-block;
          background-color: rgb(200, 200, 230);
          padding: 15px;
          border-radius: 25%;
      }
      .center {
          text-align: center;
      }
    </style>
```
スマホで実行するとこんな感じ。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">スマホから操作 <a href="https://t.co/e3aaP6agCK">pic.twitter.com/e3aaP6agCK</a></p>&mdash; 鱒子 (@129itw) <a href="https://twitter.com/129itw/status/1009715645745750016?ref_src=twsrc%5Etfw">2018年6月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
ちなみにスマホで操作する事を前提にしているので、PCから実行するとボタンが反応しません。
PCで操作する場合、JavaScriptの`touchstart` `touchend`を`mousedown` `mouseup`に置換してください。