obnizでブロックを使ったプログラミングのイントロ

この記事は、[obnizでブロックを使ったプログラミングの導入部分を押さえる](https://qiita.com/dietposter/items/f31f1abbd959653df265)の更新版です。2019年5月よりobnizサイトが更新されましたので、修正を加えました。
#概要
[obniz](https://obniz.io/ja/)はクラウド利用のマイコンボードです。HTML/CSSでブラウザ画面上で操作画面を作りJavaScriptで動作を制御します。「Webの技術でハードとソフトをつなぐ」と銘打たれているように、マイコンやハードウェアの初学者にも向いています。
HTML/CSS, JavaScriptによるコーディングのほかに「ブロックプログラム」も使えます。この記事では「ブロックプログラム」の使い方を紹介します。

#ブロックプログラムでLチカ(ただし抵抗入りLED)

##WiFi接続を行う
電源を差し込み、左上のスイッチを押し、WiFiの設定を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/bfd2c6cc-40d7-f980-67e4-dc9b23ba52d8.png)

obnizオフィシャルYoutubeチャネルの動画が参考になります。

* [obniz クイックスタート 2019/3](https://youtu.be/AuAwXtFqhWA)

##obnizサイトにアクセス
1. ブラウザで[obniz開発者コンソール](https://obniz.io/ja/console)を表示させ、[プログラム]-[ブロックプログラム]を選択します。
![Image 2019-05-19 07.48.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/b6fba3b1-4c1a-9a40-6cf5-797c8b7fce8c.png)

2. 「obniz idを入力」のダイアログが出るので、obnizの液晶画面に表示されているobniz idを入力し、[開く]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/4ea1a2b2-1d11-9d04-9f91-59c679a7b672.png)

3. 以下のようなブロックプログラムの画面が表示されます。Lチカのサンプルプログラムです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/34a7a72a-7863-0ca0-e37b-4a6f90b1f124.png)


もしブロックが表示されない場合は、以下のように並べてみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/aec876b9-a467-3cb9-8813-ac0bca8767ed.png)

##LED（抵抗入り）の接続
1. LED（抵抗入り）をobnizに接続する。0番ピンにLEDの足の長い方（アノード）・1番ピンに足の短い方(カソード）を差し込みましょう。
![IMG_9651.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/c5de93b4-4266-d258-ba4f-650345846b96.png)
ピン穴の奥まで差し込みます。
![IMG_9650.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/cf10340c-132e-ec5a-95fb-5902ef4cdb4b.png)

2. 画面右上の![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/eb03c1d7-582d-8871-fd92-53d363933e7a.png)ボタンをクリックして実行してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/d216dd87-a2b0-c55a-3a01-842c311f227a.png)



以下のようなブラウザ実行画面が表示され、LEDが点滅するはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/6456d5e1-0d3d-dce5-3034-03fa0c439e73.png)右上の[終了]リンクをクリックして実行を終了させると、プログラムが終了しLEDが消灯する。

##ボタンでLEDオン・オフ
1. 以下のようなブロックプログラムを作ってみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/f783c5d0-bec7-eb84-0b1d-39f974bdc3d4.png)

2. 実行すると、[オン][オフ]ボタンが表示され、各々のボタンを押すことによってLEDがオン・オフするプログラムが実行できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/e50968b6-772e-4eb3-c0f2-acc73ed50501.png)

##プログラムをスマホやタブレットで実行する
1. 画面左上にある![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/1546701d-101a-0928-1549-60917447b107.png)ボタンをクリックしてQRコードを表示させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/f6093db2-2ef5-3393-b549-ef92cd0ab4d5.png)

2. スマホやタブレットでQRコードを写して、ブラウザに表示させる。
<img width="375" alt="IMG_9563.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/2ad0d034-269d-f789-b133-3f2f1a4381ef.png">

3. スマホのブラウザ上でLEDのオン・オフができるのを確認してみましょう。
<img width="375" alt="IMG_9564.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4092/d84efdcc-f4ee-0d1d-0abc-de8adb71ddc1.png">

以上がブロックプログラムの導入部分となります。テキスト(HTML/CSS, JavaScript)の導入と違い、Lチカのプログラムでオン・オフのボタンが表示されません。自分でボタンを追加して、それから自分のスマホなどで制御できるという部分を最初に持って来てみました。
いかがでしょうか。