obnizでIoTを実現する為の導入プログラムと購入周辺機器

#当記事の対象者
当記事は、obnizに興味はあるが、周辺機器は何を購入すればいいか分からず、購入を躊躇っている人に向けた記事です。
私が購入した周辺機器から、それらを動かすためのサンプルプログラムをシェアします。
なお、obnizの初期設定については、サイトに記載がある為、そちらを参照してください。
＜初期設定について記載されたページ＞
https://obniz.io/doc/quickstart

#obnizのサイズ感
###箱のサイズ
![IMG_20180620_000022459.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/c670a652-ec35-26d6-772f-08d7ee7f1353.jpeg)
###本体のサイズ
![IMG_20180620_000159017.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/21909649-f75d-50d8-e494-7551330b5785.jpeg)
約7cm × 3.5cm
###本体表
![IMG_20180620_000329650.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/b922d35a-ef85-8936-8e4f-360ba0812b37.jpeg)
###本体裏
![IMG_20180620_000346931.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/ff40e1c0-14ee-245d-f7a4-cffdc008542b.jpeg)

#購入した周辺機器
![IMG_20180620_220525196.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/5f7147d3-751a-d557-4e75-55239c049c14.jpeg)

- モーター : RE-140RA
- コード :  PP-14NH
- スイッチ : HK-PSS05H
- LED : HK-LED5H(R)

機器は、池袋の東急ハンズ(4F)にて購入。
###接続状態
![IMG_20180620_234342438.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/a09fdce8-2b96-a84e-c0e9-1174eb5efda1.jpeg)
Pin0,1 : LED
Pin2,3 : モーター
Pin4,5 : スイッチ
*なお、LEDについては、長い方をPin0に指している*
![IMG_20180620_221129864.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/91cb3212-392b-8a25-2fc2-e69d8606ef58.jpeg)

#この周辺機器を利用するプログラム
*注意)プログラム内にある「XXXX-YYYY」は、obnizのIDになる為、適宜obnizのIDに変更すること*

```JavaScript:qiita.rb
<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@1.4.5/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<!--<div id="obniz-debug"></div>-->
<h1>obniz instant html</h1>
<button id="led-on">LED ON</button>
<button id="led-off">LED OFF</button>
<button id="display-yamamoto">Display 山本</button>
<button id="motor-on">MOTER ON</button>
<button id="motor-off">MOTER OFF</button>
<div id="print"></div>

<script>
  var obniz = new Obniz("XXXX-YYYY");

  obniz.onconnect = async function () {
    
    var led = obniz.wired("LED", { anode:0, cathode:1 } );
    var motor = obniz.wired("DCMotor", {forward:2, back:3});
    var button = obniz.wired("Button",  {signal:4, gnd:5});
    
    obniz.display.clear();
    obniz.display.print("Hello World");
    console.log("Start Date: " + new Date())
  
  obniz.switch.onchange = function(state) {
    $('#print').text(state);
    obniz.display.clear();
    obniz.display.print(state);
  }  

  $('#led-on').click(function () {
      led.on();
      obniz.display.clear();
      obniz.display.print("LED ON");
  });
  $('#led-off').click(function () {
      led.off();
      obniz.display.clear();
      obniz.display.print("LED OFF");
  });
  document.getElementById("display-yamamoto").onclick = function() {
	  console.log("Push yamamoto button. Time : " + new Date())
      obniz.display.clear();
      obniz.display.print("I'm Yamamoto.");
      obniz.display.print("山本");
	};
  document.getElementById("motor-on").onclick = function() {
	console.log("Push MOTER ON button. Time : " + new Date())
    obniz.display.clear();
    obniz.display.print("Moter ON");
    motor.power(10);
    motor.forward();
  };
  $('#motor-off').click(function () {
	console.log("Push MOTER OFF button. Time : " + new Date())
    obniz.display.clear();
    obniz.display.print("Moter OFF");
    motor.stop();
  });
	button.onchange = function(pressed){
  	console.log("pressed:" + pressed)
      obniz.display.clear();
      obniz.display.print("Push Button");
      obniz.display.print(pressed);
	};
}
</script>
</body>
</html>
```
#稼働結果
###PCの画面![IMG_20180620_234649863-01.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/da4eb7ee-086c-2282-feba-ae177219ac48.jpeg)

###LED ON
![IMG_20180620_234525465.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/d0e974f3-fd22-307e-905e-721fcd593a75.jpeg)
*LEDが点灯しているか分かりにくいですが、薄っすら点灯しています。他の機器に電力を取られてしまっているようです。*

###モーター ON
![IMG_20180620_234630636.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/0e7c32c6-298a-e035-9ef4-cf5c1600e727.jpeg)
*モータにプロペラなどがついていない為、回転しているのか分かり辛いですが、obnizのディスプレイにONと表示されています。*

###スイッチON
![IMG_20180620_234450362.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/3eb0ecaf-5ecd-227d-f538-a419df3a1e36.jpeg)

###スイッチOFF
![IMG_20180620_234437413.jpg](https://qiita-image-store.s3.amazonaws.com/0/204260/c601e66f-a7e3-6958-7341-98cd7e55efd2.jpeg)

以上、obniz購入の参考になれば幸いです。