初めてのobniz[遠隔猫じゃらし]！！！(obniz Board 1Y)


![16942.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/939b6b35-6916-27bb-6b6a-465d6e3e83c9.jpeg)


#動機
　　　  obnizを使いたい！！
　　   obniz Board 1Y を使いたい！！！
　　　　obnizを使ってみたい！！

   　　しかし、チュートリアルどうりはつまらないので自分の日常にobnizを導入したいと思いついたのが、猫ちゃんをあやす「obniz cat toy」！！
　　これで、スマホ一つで少し遠くにいても猫ちゃんをあやせます！
　　つまり、遠隔操作猫じゃらしです。

#前提スペック
　　obniz[公式チュートリアル](https://obniz.io/ja/lessons/airobot/lessons_airobot_start)のロボットプログラミングとJSプログラミングだけ！！
　　初めてobnizを使うので何もわかりません！！
　　
#材料
　　obniz Board 1Y
    　　モーター ×2
  　　 タイヤ ×2
  　　 キャスター
  　　 段ボール
　　211円の普通の猫じゃらし
　　キャスター
　　単三電池×3
    単三電池が3つ入る電池パック

#工作編
##手順1
　　とりあえず、猫じゃらしを動かしたいと思ったのでタイヤとモーターを使います！！![16947.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/50a3ee33-6f40-53b5-001c-53ded3cea568.jpeg)


   一つでは左右に動かせないので、同様のものを2つ用意します。

##手順2
　　次に、モーターを支えるダンボールをモーター幅の大きさに切り取りモーターをダンボールの上に固定します。![17115.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/4278b69e-4efd-f350-7294-d8797022ad5d.jpeg)
　　　
　　1つのモーターの大きさは縦6.5cmなので、これからつける支えも計算しダンボールの縦幅は10cmにします。
　　横幅は、ギリギリ2つのモーターが当たらない距離かつ(タイヤをつけていない白の部分)タイヤをダンボールからはみ出さすため6cmにします。


　　両面テープでモーターとダンボールをくっつけます。
　
　　また、屋根を作りたいため、前と後ろに二重で支えを作りました。![17117.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/633fe95e-3e82-e74c-f613-76d9f7f8e67a.jpeg)


##手順3 
　　　　屋根を同様の大きさで縦10cm ×横6cmで作りフタをします。

![17116.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/5c2bd9ce-f784-7a32-10dc-00049aea629a.jpeg)

　　配線を通すフタに穴を開けるのがポイントです。
　　この穴に猫じゃらしを差し込むので、大きすぎない穴にしましょう。


　　

##手順4
　　　ここまでくれば、もう完成です。
　　　配線をしっかり輪ゴムでまとめることでobnizに差込みやすくなるのと、見栄えもいいです。
　　　![17124.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/e176d4eb-f61f-1101-b1e0-dc5dbe1eda5c.jpeg)
　　　
　　　そして、裏面の前方にキャスターを付けバランスを整えます。
![17121.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/039607af-1055-2330-cb41-7eaf766e02cf.jpeg)
　　　
　　　後方のモーターのみだったら前方が常に床に付いている状態になるからです。



　　　これで、工作編は完成です！！

#プログラム編
##手順1
     
ここでは猫じゃらしを操作するために、止まる、前、後ろ、右、左と動かすプログラムを作成します。
　　 [公式サイトのロボットプログラム]https://obniz.io/ja/lessons/airobot/lessons_airobot_firstmove のロボットプログラムを参考にします。

<img width="292" alt="スクリーンショット 2019-12-11 16.47.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/7c79422e-046d-6371-0114-76e1bf90a21d.png">

1行目でobnizとブラウザを繋ぐ指示をします。obniz idのところにそれぞれのidを入力してください。
2~6行目でUIボタンを設置します。
7行目でobnizとモーターを繋ぎます。
8行目以降で操作待ちのfor文を定義し、その中でボタンが押された処理を定義します。

##手順2
   次に、この猫じゃらしがランダムな動きをして猫の気を引くプログラムを作りましょう。
[公式サイトのロボットプログラム]https://obniz.io/ja/lessons/airobot/lessons_airobot_givecuriousity のロボットプログラムを参考にするので難しくないです。
　　しかし、ここではボタンを押すことでこのランダムな動きをするようにしましょう。
<img width="393" alt="スクリーンショット 2019-12-11 17.03.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/ea4b2b5a-29fd-941f-982d-8a723dcf83bc.png">

　　　チュートリアルと同じようなプログラムですが、stopボタンが押された時にこのobnizを止めるように関数を定義しましょう。

　　　そして、メインプログラムにこの関数を使いたい時の処理を書きます。
<img width="286" alt="スクリーンショット 2019-12-11 17.06.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/3940cc2c-514b-3483-e403-56d61bc77b21.png">

　　　ランダムボタンを追加し、そのランダムボタンが押された時に関数を実行するように処理を書きます。


##手順3

　　　
   
　　 以上で、このプログラムは完成！！ではありません。
　　 勘のいい人は、気づいているかもしれませんが実は、関数operantの定義は不十分です。
　　確認して見ましょう。<img width="393" alt="スクリーンショット 2019-12-11 17.03.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/4c3cd3a3-92eb-e557-3a8e-717b0378544f.png">
　　　1行目のランダムの動きは問題ないですが、実は3行目のstopが押された時の処理が問題です。
　　　

　　　このoperant関数の中身は、while文といいずっと実行されています。
　　　この定義のwhile文は上から下の処理を永遠と繰り返します。

　　　つまり、この条件の元ではstopボタンが押されたからと言って、このoperant処理は終わりません。
　　　今、私たちがしたいことはstopボタンを押してこのoperant処理を終わらせ、前や後ろのボタンを使って私たちのしたいように、この遠隔猫じゃらしを動かすことです。

　　　では、解決策にいって見ましょう。
<img width="492" alt="スクリーンショット 2019-12-11 17.18.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/069c5466-5c3e-e6a6-78f2-a67867f13d43.png">
　　　ページ左上のファイル名をクリックし、コードを見るをクリックします。

　　　すると、このロボットプログラムのjavascriptを使った本当のコードが出てきました。
<img width="1064" alt="スクリーンショット 2019-12-11 17.21.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/c7414715-0fc5-ac52-cc1b-61adfd2352d8.png">

　　　関数operantの部分を見ましょう
　　　<img width="290" alt="スクリーンショット 2019-12-11 17.38.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/b16fab31-fd44-1610-e561-851509e79516.png">
    　　
ストップのボタンをクリックした時の処理を見てみると
　　 モーターがストップすることしか書かれていません
![17120.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/5a8c9ded-1ef5-2444-6d2d-ccb81e2a3f98.jpeg)

      
先ほど説明したようにwhile文を抜けたいので、
      airobotkit.stop()の下にbreak；という一言を追加しhtml形式で保存します。
　　　　<img width="282" alt="スクリーンショット 2019-12-11 17.57.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546786/b34368f6-e116-3d82-7c4d-bbb97b550f77.png">

　　　　　以上で、ついに完成です！！


　　　　　これで、猫じゃらしをスマホで遠隔操作できるようになりました！！


##感想

　　　最新のobniz Board 1Yは電池タイプで動くので、私が思うように遠隔で処理できたことはとてもいい性能でした。
　　　従来のobniz Boardは、USBコードが連携されていなければならなかったため、場合によっては配線が邪魔になっていたでしょう。


　　　皆さんも、配線が不必要な場合やさらなる通信の速度UPを目指す方はobniz Board 1Yがおすすめでしょう。

　　　ありがとうございました。