obniz スターターキットハンズオン（ブロックプログラム）

これはobnizハンズオン（ブロックプログラム）で使用した資料です。
 
スターターキットを使っていろいろな部品を触ってみたり、サービスとつないでみたりします

## つかうもの

- 1人あたり
  - obniz スターターキット　1個/人

## このハンズオンでやること
 - obnizをセットアップする（WiFiへの接続）（10分）
 - Lチカをしてみる （15分）
 - 距離センサ、サーボモーターを使ってみる（20分）
 - 複数部品を組み合わせてみる(15分)


## 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://docs.obniz.com/ja/reference/board-1y/quick-start/quick-start の「動かしてみよう」に行き，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とは電気を流すことで光る部品です。スターターキットの中にはLED信号が入っています。

まずはサンプルを動かしてみましょう。
https://docs.obniz.com/ja/guides/obniz-starter-kit/

付属パーツについて > LED信号 > パーツライブラリ　とたどって、LED信号のドキュメントに行きましょう。

写真のようにLED信号を接続します
![IMG_4304_1200.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/4dd5badb-d072-d7ab-bec6-266057de30ba.jpeg)


ドキュメント内のobnizID入力欄にobnizIDを入力し、となりのTEST RUNボタンを押しましょう


LEDはついたでしょうか。

![IMG_4305_1200.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/3d20003e-a30f-da78-d2f6-8d26178b9a57.jpeg)


その下のnext()も試してみましょう


### プログラム画面からLEDを点灯

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

![SS20240513131756.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/faa33cb8-e14f-36bb-b369-6967a0b746b8.png)

とします。
そして右上の「実行」ボタンを押してこのページを開いてみましょう。
ページを開いた時にLEDが点灯したら成功です！




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

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

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

![SS20240513132029.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/aef5db07-a6f0-697c-624d-3d5e94330783.png)


## 距離センサ、サーボモーターを使ってみる
LEDだけでは寂しいので，いくつかサンプルを試してみましょう

ボタンや距離センサ、サーボモーターを使ってみましょう。
ドキュメント上のサンプルをそのまま実行することができます。

また、下のようにプログラムを作ることもできます

#### 距離センサ

![IMG_3467（大）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/269af796-3952-67ba-6a82-d291787ab138.jpeg)


![SS20240513132500.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/0b495cb9-3d16-3391-d2e3-9be24b942000.png)

「コンソールに表示する」のブロックはこの下のところのボタンを押すと見えます

![SS20240513132441.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/dc958282-1132-38b7-4119-ba5ed9a4355d.png)


#### サーボモーター

![IMG_3470（大）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/7cff9117-98ec-abba-6572-7769a69e4c60.jpeg)

![SS20240513132725.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/d13ea82f-454c-ab49-62ef-afb33e745cd1.png)



## 複数部品を組み合わせてみる

物理的なボタンを押したらLEDが光る　というのをやってみましょう。

LEDを光らせるサンプルとボタンを押すサンプルを組み合わせます。

いままではパーツを一つずつしか使わなかったので、0番から使っていましたが、今回は２つ使うので、ボタンパーツの配置を9~11にずらしています。

![IMG_4307_1200.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/2983bafc-95a3-aff1-fd24-3e9d2f80a10e.jpeg)

そのときは、プログラムでの設定もずらす必要があります

![SS20240513133119.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/1af86928-4b58-303d-1f4c-46227b717f8c.png)

２つの部品を接続しましょう

![IMG_3468（大）.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/1a52459a-12d7-52df-6f2a-8f604bb3b66d.jpeg)

![SS20240513133100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/8d329d99-fbfb-023f-6477-1003456f354a.png)

### バナナ判定機

カメラ機能を使うときは、ブラウザの制約上、「新しいタブで実行」が必要です
![SS20240513134633.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/9d54cbd0-6fd0-71c8-1f42-56b6a50a42fe.png)

![SS20240513134136.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/5d22bc41-aa19-e000-39f8-6cedc324fabc.png)
 


### 高度なプログラム
![SS20240513133748.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/5e7b51a9-fc50-a7c0-e83f-75c391a357fa.png)