猫好きエンジニアのIoT obnizを使った「遠隔ご飯あげマシーン」

この記事は[エイチームブライズ/エイチームコネクト/エイチーム引越し侍 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/hikkoshi)　13日目の記事です。本日は[エイチームブライズ](https://brides.a-tm.co.jp/)でエンジニアをしている @kakakaori830 が記事を書きます。

# はじめに
我が家にはハルくんという、これはもう、とてもとても可愛い猫がいます。ハルの可愛さについて書き始めるともうそれで記事が終わってしまうので割愛。
<img src="https://qiita-image-store.s3.amazonaws.com/0/200812/1bc83c8d-a4b8-4308-dc7c-280151167d72.jpeg" width='400'>

ハルは元野良猫だったからか食べることへの執着心が凄まじい。ちょっと帰るのが遅くなるとニャーニャー叱られます。しかし私も仕事があるのでそんな毎日同じ時間には帰れません。そこで今回は帰るのが遅くなったときに遠隔からでもご飯をあげられるようなものを作ってみたいと思います。

# 要件
- ご飯が落ちてくる音が鳴ること
    - ハルがご飯が出てきたことに気づくからね
- 決められた量のご飯をあげられること
    - デブ猫になっちゃうからね
- 機器を清潔に維持できること
    - 食べ物だしね

# 準備するもの
私はIoT初挑戦のwebエンジニア。IoTのこととかほんとよくわかんない。そこで[obniz](https://obniz.io/)を使って実装することにしました。なんとJavaScriptでIoTが実現できるそう。すごい。

<img src="https://qiita-image-store.s3.amazonaws.com/0/200812/39bfcd4b-8aa5-ecc6-4c40-59f5f110d3d4.jpeg" width="400">

- [obniz](https://obniz.io/)　
- [マイクロサーボ９ｇ　ＳＧ－９０](http://akizukidenshi.com/catalog/g/gM-08761/)
- [ジャンパーワイヤー　オス～オス 9本](https://www.amazon.co.jp/SFE-PRT-08431-%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%91%E3%83%AF%E3%82%A4%E3%83%A4-%E3%82%AA%E3%82%B9%EF%BD%9E%E3%82%AA%E3%82%B9-10%E6%9C%AC%E3%82%BB%E3%83%83%E3%83%88/dp/B0079BNAC8) （私が最初の時点で買うのを忘れていたので写真に写ってません）
- ペットボトル3つ
- 木箱（セリア）
- プラスチックの箱（セリア）

※サーボモーターの中にはobnizのioから直接電源供給できないものもあるのでご注意を。対応しているサーボモーターは [こちら](https://obniz.io/sdk/parts/ServoMotor/README.md?iframe=false)から確認できます。

# 作り方
## 先ずはobnizを使ってみる
obnizの使い方は[チュートリアル](https://obniz.io/doc/quickstart)にとても丁寧に説明が書かれているのでそれを参考に動かして見ます。
まずmicroUSBをobnizにさしてPCに繋げると電源が自動で入ります。この時点でテンション上がります。その後wifiを選択したらもう完了！obniz についてる小さなディスプレイにQRコードが表示されるのでそれを読み取るとコンソールが開きます。そしてここにプログラムを書いていくことで obniz を動かします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/200812/e7e95979-b2fb-5bd3-ac95-03aedfcd5dfa.png" width="600">


## ペットボトルを切ってプラスチックの箱にセット
まずは全然プログラム関係ないです。ペットボトルを切ってプラスチックの箱にセットします。ただの工作。
このペットボトルを好きな高さに切ります。ここにご飯を好きな量はかって入れておく感じです。これなら取り外して洗えるし汚くなってきたら新しいものに交換もできます。そしてプラスチックの箱の底を切ったものを木箱にセットしその中にペットボトルを設置します。こんな感じ。

<img src="https://qiita-image-store.s3.amazonaws.com/0/200812/94ff1872-3bb0-74c0-5f03-eb30488dc29c.jpeg" width="500">
<img src="https://qiita-image-store.s3.amazonaws.com/0/200812/38af0b23-d99f-eb12-3b39-922c48a0454b.jpeg" width="500">

## obnizにサーボモーターをつけてみる
今回使うサーボモータは、グランド、電源、信号線がそれぞれ下記のようになっているので、io0 GND, io1 vcc, io2 signalになるように接続します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/200812/427af525-8d8e-8003-f3ee-31f9550743a5.jpeg" width="300">

obniz に繋げるとこんな感じ。最初私はジャンパーワイヤーを購入しておらず、ここで「え、、どうやって繋げるの、、」という間抜けな状態になりました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/200812/10338c7c-6142-293f-9830-4497151efae8.jpeg" width="500">

## obnizからサーボモーターを動かしてみる
obnizのコンソールに下記を書いて実行してみます。

```javascript
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
  var servo = obniz.wired("ServoMotor", {gnd:0, vcc:1, signal:2}); // ピンの位置を指定
  servo.angle(90.0); // 90度回す
};
```

<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr"><a href="https://t.co/M7UwKyljTg">pic.twitter.com/M7UwKyljTg</a></p>&mdash; なんとかかおり (@LJs0p50R4P6LlC6) <a href="https://twitter.com/LJs0p50R4P6LlC6/status/1071330591885352960?ref_src=twsrc%5Etfw">2018年12月8日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

動いた動いたー！たったこれだけのコードでモーターが動かせるってすごいですね。

## モーターを3つ接続し、それぞれを区別して動かしてみる
まずは3つのモーターを obniz に接続します。1つ目のモーターが io0 GND, io1 vcc, io2 signal、2つ目のモーターが io4 GND, io5 vcc, io6 signal、３つ目のモーターが io８ GND, io9 vcc, io10 signal　になるように接続しています。
<img src="https://qiita-image-store.s3.amazonaws.com/0/200812/2ae5067a-ee21-ef88-80a2-5481982b6f3e.jpeg" width=500>
そしてコンソールに下記のようなコードを書きます。

```html
<div id="obniz-debug"></div>
<h1>自動ご飯あげマシーン</h1>
<p><a href="#" id="reset">リセット</a></p>
<p><a href="#" class="square_btn" data-boxId="0">ご飯入れ0を開ける</a></p>
<p><a href="#" class="square_btn" data-boxId="1">ご飯入れ1を開ける</a></p>
<p><a href="#" class="square_btn" data-boxId="2">ご飯入れ2を開ける</a></p>
  
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
  // それぞれのモーターのピンの情報ををセットする
  var optionList = [{gnd:0, vcc:1, signal:2}, {gnd:4, vcc:5, signal:6}, {gnd:8, vcc:9, signal:10}];
  $(".square_btn").on('click', function() {
    var options = optionList[$(this).attr('data-boxId')];
    // クリックされたボタンに応じて特定のモーターを動かす
    var servo = obniz.wired("ServoMotor", {gnd:options['gnd'], vcc:options['vcc'], signal:options['signal']});
    servo.angle(0);
  });
  
  // すべてのモーターを初期状態に戻す
  $("#reset").on('click', function() {
    optionList.forEach(function(options) {
      var servo = obniz.wired("ServoMotor", {gnd:options['gnd'], vcc:options['vcc'], signal:options['signal']});
      servo.angle(90);         
    });
    obniz.wait(1000);
    obniz.reset();
  });  
};
</script>
```
動かしてみるとこんな感じに。ネジがついてたりついてなかったり、大きさが違ったりするのは私が大雑把だから。
思ったように動いた！楽しくなってきました。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr"><a href="https://t.co/fZPMOBQLt8">pic.twitter.com/fZPMOBQLt8</a></p>&mdash; なんとかかおり (@LJs0p50R4P6LlC6) <a href="https://twitter.com/LJs0p50R4P6LlC6/status/1071221368404865025?ref_src=twsrc%5Etfw">2018年12月8日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## そしてまた工作に戻る
モーターにプラスチックの板（蓋になる部分）をつけて、位置を決めて固定します。私は今回グルーガンを使ってつけました。その状態で動かすとこうなるイメージ。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr"><a href="https://t.co/YagZ0zwr1s">pic.twitter.com/YagZ0zwr1s</a></p>&mdash; なんとかかおり (@LJs0p50R4P6LlC6) <a href="https://twitter.com/LJs0p50R4P6LlC6/status/1071328745988866048?ref_src=twsrc%5Etfw">2018年12月8日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そしてこのままではご飯がそのまま下に落ちてしまうのでクリアファイルを切って良さげな傾斜を作り貼り付けます。この時点で高さが足りないことに気づいたので、台の上に木箱を置いて高さを出します。
<img width="300" alt="138ED8B6-F2FB-46A4-92F2-224A6DBFF49C.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/200812/08fbd649-5cef-860b-e288-2c0a9931c758.jpeg">

これで無事に遠隔ご飯あげマシーンができました！

# 試してみる
それでは早速試してみましょう。コードは先ほど作ったままの状態です。ご飯は重さをはかりペットボトルにセットしました。食べることに貪欲なハルはこの時点で興味津々です。
<img src="https://qiita-image-store.s3.amazonaws.com/0/200812/b7e952ae-fdff-4460-ef59-e117c2e200a4.jpeg" width="500">


気になるようですがご飯が見えないので諦めてどこかへいってしまいました。破壊されなくてよかった。。それではブラウザにボタンが表示されるので「ご飯入れ２を開ける」のボタンをクリックしてみます。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr"><a href="https://t.co/L5KvLwJqRt">pic.twitter.com/L5KvLwJqRt</a></p>&mdash; なんとかかおり (@LJs0p50R4P6LlC6) <a href="https://twitter.com/LJs0p50R4P6LlC6/status/1071374094887641088?ref_src=twsrc%5Etfw">2018年12月8日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

無事にご飯出てきたー！
そして「カラカラ」という音を聞きつけハル登場。無事にご飯を食べてくれています。感動！！

# まとめ
obniz を初めて使ってみましたが、驚くほど扱いやすく感動しました。実際あまりに簡単でプログラムを書く時間はかなり短く、どちらかというと工作に時間を取られたほどでした。
次はこれにカメラをつけて遠隔からご飯食べる様子を見れるようにしたいななんて企んでいます。obniz はWebhookでIFTTTとつなぐこともできるそうで、アイデア次第で本当にいろんなことが出来そうですね！
<img src="https://qiita-image-store.s3.amazonaws.com/0/200812/642b45de-2197-7e3e-c2a5-a35dfe5f339b.jpeg" width="500">
以上、猫好きエンジニアのIoT 遠隔ご飯あげマシーン作成でした:relaxed:

# お知らせ
エイチームグループでは一緒に活躍してくれる優秀な人材を募集中です。
興味のある方はぜひとも[エイチームグループ採用ページ](http://www.a-tm.co.jp/recruit/)（[Webエンジニア詳細ページ](http://www.a-tm.co.jp/recruit/requirements/career/lifestylesupport-webengineer/)）よりお問い合わせ下さい。

# 明日
明日は弊社の凄腕エンジニアの @sho0211 が何かについて書いてくれるそうです。ギリギリまで隠してるってことはきっとすごい記事を書いてくれるに違いない。みなさんお楽しみに！