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人
  - [モータ](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チカをしてみる
 - 顔認識を使ってみる
 - スマホで操作するラジコンを作る
 - モクモクタイム

## 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を点灯

[ブロックプログラム画面](https://obniz.io/ja/console/blockprogram)を開きます。

まずは単純にLEDをONにしてみましょう。
下にあるのがそのためのプログラムです。ブロックを組み立ててみましょう

<img width="477" alt="スクリーンショット 2019-11-14 13.37.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/5b90fb52-6dac-d205-2b70-26af772f2aa8.png">

obnizに接続する青いブロックは"obniz"の中に、LED関連の黄色いブロックは"光る"の中にあります。
ドラッグ&ドロップしてブロックを組み立てます


そして右上の「実行」ボタンを押してみましょう。
ページを開いた時に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させてみましょう。
まずはONボタンだけを作ってみます。

"ずっと"と"もしも"のブロックを使って、ボタンが押されているかを判定します。

<img width="471" alt="スクリーンショット 2019-11-14 14.31.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/fe46baf6-7a54-532b-3816-7a414353d6c4.png">

これで実行してみましょう。
最初はLEDが消えていて、ボタンをクリックしたら光ったでしょうか。


次に、ボタンをもう一つ追加してOFFもできるようにしましょう。
新しくボタンを作るには"UIButtonの作製"をおして、ボタンの名称を入力します。

<img width="772" alt="スクリーンショット 2019-11-14 14.35.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/76e048ce-9f7f-ccb1-8ec3-70d13e19489d.png">

<img width="516" alt="スクリーンショット 2019-11-14 14.35.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/85d0a28c-b640-65e4-da02-66348e8db01b.png">

ボタンを〇〇で作るのときに、新しく作ったボタンを選びましょう
<img width="412" alt="スクリーンショット 2019-11-14 14.36.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/895d7d98-9d39-20a5-b458-617f09399513.png">


OFFにするときのループ内容は、ONのときと同じです
<img width="438" alt="スクリーンショット 2019-11-14 14.36.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/790ed879-bde2-7fdb-ac69-00c715dc2561.png">


実行してみましょう。
うまく動きましたか？
<img width="1420" alt="スクリーンショット 2019-11-14 14.40.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/6016dfad-2882-efc1-a086-9ae394937c98.png">


## 顔認識でLチカをしよう

ボタンの入力から、顔認識での入力に変えてみましょう。
ボタンの代わりにカメラを準備し、"クリックされた"の代わりに"カメラに顔が写っている"　に変えます

<img width="451" alt="スクリーンショット 2019-11-14 14.48.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/c86248de-1955-c7b2-c78f-b282a0c0fe20.png">


"バナナが写ったら"などのブロックもあるので、試してみてください

## ラジコンを作ってみよう
### ラジコンを組み立てよう
タイヤとモーターをつなげて，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)



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

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

下記のプログラムを作ってみます。LEDのときと同じですね

<img width="501" alt="スクリーンショット 2019-11-14 14.17.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/811c2d81-2800-72b5-68ee-189285ce3050.png">


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

forwardをbackに変えれば逆回転します

<img width="327" alt="スクリーンショット 2019-11-14 14.17.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/6bf048af-5914-90f8-505b-a50803e1c9eb.png">


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

下記のボタンを追加し，プログラムもボタンが押されたときだけ動かすようにします。
LEDのときと同じですね
<img width="477" alt="スクリーンショット 2019-11-14 14.19.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/ca1ec311-8efd-890d-819a-0528a3f3a968.png">




### ボタン２つで前後に動かしてみよう
同じように，ボタンをもう一つ追加して，今度は押されたら逆回転させてみましょう

### モーターを２つ使ってみよう
モーターを２つ動かす場合には，"モーターを接続"ブロックを２つ作ります．

ボタンのときと同じで、モーターが2つあるので、名前を変えるのを忘れないようにしてください
<img width="413" alt="スクリーンショット 2019-11-14 14.21.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/17ef7dd0-d044-4fc8-368b-1fdd92a95532.png">


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

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

<img width="1420" alt="スクリーンショット 2019-11-14 14.22.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/9c584ec5-e79d-7821-b457-0e53cfe89634.png">


自由課題：顔認識を搭載してみよう

 - 顔が見えるとすすむラジコン

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

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

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

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

例）

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