obnizハンズオン

これはobnizハンズオンで使用した資料です


Lチカなどの電子工作の基本を試したあと，
スマートフォンからでも操作できるラジコンを作っていきます
![IMG_8480.JPG](https://qiita-image-store.s3.amazonaws.com/0/227015/27e66beb-96c9-e928-f59a-f1c5c878ccd9.jpeg)


## つかうもの

- 1人あたり
  - obniz　1個/1人
  - USBケーブル　1個/1人
  - [LED](http://akizukidenshi.com/catalog/g/gI-06245/)　1個/1人
  - [距離センサ](http://akizukidenshi.com/catalog/g/gI-02551/)　1個/1人
  - [モータ](https://www.amazon.co.jp/HiLetgo®-2個セット-スマートかーロボットプラスチックタイヤホイールDC-3-6Vギアモーターと付属-ロボット65/dp/B01HTC5C86/ref=sr_1_26?ie=UTF8&qid=1541923520&sr=8-26&keywords=hiletgo)　2個/1人
  - 板　　1個/1人
 
- 全員でシェア
  - セロテープ
  - 両面テープ　
  - モバイルバッテリー


## このハンズオンでやること
 - Lチカをしてみる （20分）
 - 距離センサを触ってみる（30分）
 - スマホで操作するラジコンを作る（40分）
 - モクモクタイム（30分）

## obnizに触れてみよう


### wifiの設定をしよう 
まずはWifiにつなぎましょう。

箱から出したら、マイクロUSBをobnizにつないで電源を入れます。
すると、こちらの画面が出てきます．

![image.png](https://qiita-image-store.s3.amazonaws.com/0/227015/b73fe813-3c55-99c3-3145-8a5e2dd88c87.png)


obnizの左上のスイッチを押すと，近くのWifiリストが出てきます。
スイッチでつなぎたいものを選択して、スイッチを押すことで選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/227015/b1e7fd12-642c-63d7-e3c7-fe183ae7e0cc.png)


Wifiのパスワードを１文字ずつ入力しましょう。
終わったら「END」を選びます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/227015/6147a383-af58-53d9-dd91-0159f7bccd49.png)


QRコードが表示されたら完了です！インターネットに繋がりobnizはオンラインになりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/227015/1ab3d228-2c96-da68-5b61-54a1f8980af7.png)



### ディスプレイに表示してみる

簡単なプログラムからobnizを使ってみましょう。
https://obniz.io/ja/lessons/lessons/quickstart の動かしてみように行き，obnizIDを入れてTest Openボタンを押します


![image.png](https://qiita-image-store.s3.amazonaws.com/0/227015/84c35d4c-f731-2b04-2619-74c5a92278f6.png)


Hello Worldとなっている部分に好きな文字を入力して（日本語でもOK）横にある「Print on obniz」ボタンを押して下さい。すると、obnizに入力した文字が表示されるはずです！

![スクリーンショット 2019-03-06 17.57.19.png](https://qiita-image-store.s3.amazonaws.com/0/227015/00bffdf7-72a3-60bd-c58b-247752ab96a4.png)

![IMG_2109.jpg](https://qiita-image-store.s3.amazonaws.com/0/227015/7910f9a4-a541-21e7-a0be-907ca2e5034a.jpeg)




## LEDちかちか
電子工作で代表的なLチカ（LEDちかちか）をやってみましょう


LEDとは電気を流すことで光る部品です。
アノードとカソードという２本の足があり、アノードにプラス、カソードにマイナスを繋ぐと光ります。
少し足が長いほうがアノードです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227015/10c24396-7960-2811-a66b-1479694cb3c2.png)


アノードをobnizのio0に、カソードをio1にさします。
(ここで使用しているLEDは抵抗入りのLEDですが、もし抵抗入りじゃないLEDを繋ぐときは抵抗を繋いで下さい。)



### LEDを点灯

[プログラム画面](http://obniz.io/ja/console/program)を開きます。

まずは単純にLEDをONにしてみましょう。
下にあるのがそのためのプログラムです。まるごとコピーして自分のプログラム画面に貼り付けます。

```html
<!-- HTML Example -->
<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@latest/obniz.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>LED</h1>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    var led = obniz.wired("LED", {anode:0, cathode:1});
    led.on();
  }
</script>
</body>
</html>
```

ベースはHTMLでボタンなどのUIを書いて，`<script>`と`</script>`の間に囲まれたJavaScriptを使ってobnizを動かすロジックをかきます


そしてプログラムの中で

```javascript
var obniz = new Obniz("OBNIZ_ID_HERE");​
```

のOBNIZ_ID_HEREをあなたのobnizのidにします。
1234-5678なら

```javascript
var obniz = new Obniz("1234-5678");​
```

とします。
そして「Save & Open Html」ボタンを押してこのページを開いてみましょう。
ページを開いた時にledが点灯したら成功です！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227015/ebd12ac1-7d18-d778-e20c-ab773787d2a6.png)



### ボタンを押してLEDをON OFF

次にホームページに「ON」と「OFF」のボタンを追加しそれに合わせてLEDをON・OFFさせてみましょう。
やることは

1. ホームページ上にボタンを２つ追加
2. ボタンが押されたらledの状態を変える

で、この順番にやってみましょう。

まずはホームページ上にボタンを２つ追加します。
htmlの最初に以下の２つを追加します。

```html
<button id="on">ON</button>
<button id="off">OFF</button>
```

これで画面にボタンが２つ出てくるはずです。


<img width="375" alt="IMG_0587.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/227015/e1259a40-ea32-d410-836c-0f3131852939.png">


次に、このボタンが押された時にledのon・offを変えてみます。

jQueryを使って、on・offが押された時の処理を追加します。
例えば、ONと書いたボタンのidはonとしてあります。
jQueryではこのようにonというidが押された時に何かしたい時にこんな風に書くことができます。

```javascript
$("#on").on("click",function(){
  // on pressed
})
```

これを使って、ボタンのonが押されたらledをonに。offが押されたらledをoffにするのはこのように書けます。

```javascript
$("#on").on("click",function(){
  led.on();
})
$("#off").on("click",function(){
  led.off();
})
```

obnizがオフラインになったときはボタンが押されても反応しないようにするには，このように書きます．

```javascript
$("#on").off("click");
$("#off").off("click"); 
```

これで全て完了です。
まとめるとこうなります。
これをプログラム画面に貼り付けて`OBNIZ_ID_HERE` の部分を自分のobnizidに変えて実行すると、ボタンが２つ出てきます。
赤いバーが緑色に変わったらボタンを押すことができます．
ONを押すとLEDが点灯し、OFFなら消灯すると思います。

```html
<!-- HTML Example -->
<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@latest/obniz.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>LED Switch</h1>
<button id="on">ON</button>
<button id="off">OFF</button>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    var led = obniz.wired("LED", {anode:0, cathode:1});
    $("#on").on("click",function(){
      led.on();
    });
    $("#off").on("click",function(){
      led.off();
    });
  };
  
  obniz.onclose = async function(){
    $("#on").off("click");
    $("#off").off("click"); 
  };
</script>​
</body>
</html>
```


## 距離センサを使ってみる
LEDだけでは寂しいので，距離センサを使ってみましょう

 obnizでの動かし方はいくつかありますが．お手軽に試す場合にはドキュメント上で動かすのがおすすめです．最初の天気のプログラムのように，プログラムを１行も書かずに部品を試すことができます

ドキュメントの[距離センサのページ](https://obniz.io/ja/sdk/parts/GP2Y0A21YK0F/README.md?iframe=false)へいきます.

ドキュメントページの写真と同じように距離センサを刺しましょう.

0番が赤，１番が黒，２番が黄色です
![image.png](https://qiita-image-store.s3.amazonaws.com/0/227015/48c1e904-9a40-0919-b48e-f3e4d51711a1.png)

プログラムの上にあるobniz_id入力欄に，自分のobniz idを入力してTestRunを押しましょう
![スクリーンショット 2018-08-21 16.48.34.png](https://qiita-image-store.s3.amazonaws.com/0/227015/7962f6b9-11e1-fc05-f5a9-4751c16e12c9.png)

動き始めたら，距離センサの前に手をだして距離を計測してみましょう



## 距離センサでゲームをする

もう一つお試しとして，距離センサを使ったゲームを触ってみましょう
[こちら](https://obniz.io/ja/explore/35)を開いて下さい

右側に出てくる「今すぐ実行」にobniz_idを入力して動かしてみましょう
![スクリーンショット 2019-03-06 18.17.03.png](https://qiita-image-store.s3.amazonaws.com/0/227015/bc2a11d9-7d17-4ea5-78b0-565dc78a3097.png)


ゲームは楽しめましたか？

obnizでは画面の中と，画面の外とを簡単につなぐことができるので，こういうものも簡単に作れます

## ラジコンを作ってみよう
### ラジコンを組み立てよう
タイヤとモーターをつなげて，obnizに刺します
![IMG_8471.jpg](https://qiita-image-store.s3.amazonaws.com/0/227015/48ccfdf5-bf73-c712-ff06-2f32afb8ba9b.jpeg)

２つ目も同じように刺します
![IMG_8477.JPG](https://qiita-image-store.s3.amazonaws.com/0/227015/1d44e013-7813-d834-d07b-d834dd5fcad5.jpeg)


両面テープで板に止めたら完成です
![IMG_8476.JPG](https://qiita-image-store.s3.amazonaws.com/0/227015/3105d46d-aaca-fc26-c338-aa590123b6f6.jpeg)



### ラジコンのモーターを動かしてみよう

今度はモーターをプログラム画面から触ってみましょう


下記のプログラムを書いてみます

```html
<!-- HTML Example -->
<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>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src="https://unpkg.com/obniz@latest/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="obniz-debug"></div>
  <br>
<button id="buttonA" class="btn btn-warning" style="width:45%;height:100px;font-size:50px;">↑</button>

<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
  var motorA = obniz.wired("DCMotor",  {forward:3, back:2});
  motorA.power(40);
  motorA.move(true);
}

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

<img width="375" alt="IMG_0588.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/227015/eec04a17-f0d1-9c26-d504-f3e7bd3ad602.png">


かけたら，実行してみましょう．
モーターは前に回りましたか？

`motorA.move(false);`に変えれば逆回転します


### ボタンを押している間だけ動かしてみよう

下記のボタンを追加し，プログラムもボタンが押されたときだけ動かすようにします


```javascript
obniz.onconnect = async function () {
  var motorA = obniz.wired("DCMotor",  {forward:0, back:1});
  motorA.power(40);

  $("#buttonA").on('touchstart mousedown', function(){
    motorA.move(true);  //ボタンが押されたら動かす
  })
  $("#buttonA").on('touchend mouseup', function(){
    motorA.stop(); //ボタンが離されたら止める
  })
}
```

### ボタン２つで前後に動かしてみよう
同じように，ボタンをもう一つ追加して，今度は`motorA.move(false);`で逆回転させてみましょう

### モーターを２つ使ってみよう
モーターを２つ動かす場合には，`motorA`の隣に`moterB`を作ります．

```javascript
  var motorA = obniz.wired("DCMotor",  {forward:0, back:1});
  motorA.power(40);
  var motorB = obniz.wired("DCMotor",  {forward:2, back:3});
  motorB.power(40);
```

ボタンを４つに増やしてどこにでも移動できるようにしましょう

### スマートフォンで動かす
コントローラーができたので，スマートフォンでも動かしたいですよね．
スマートフォンを持っている方はプログラム画面の上に出てるファイルからQRを表示して、スマホでスキャンしてみましょう

![スクリーンショット 2020-06-17 18.47.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/4ccc1e1a-69d6-bfdb-a626-26b015756c8e.png)





自由課題：UIをいろいろ変えてみよう 

 - ボタンじゃなくてスライダーにしてみたり
 - スマートフォンをコントローラーにしてみたり
 - スマートフォンの加速度センサで動かしてみたり

自由課題：距離センサを搭載してみよう

 - 前に手があるときだけ動くラジコン

## モクモクタイム／質問タイム

各自，いろいろobnizを使って遊んでみてください

例）

- 上にあった自由課題をやってみましょう
- [作品一覧](https://obniz.io/ja/explore)をみたり，実行したりしてみましょう