LoginSignup
2
1

More than 3 years have passed since last update.

@dietposter(研一 吉田)inIoTLT

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

Last updated at Posted at 2019-05-18

この記事は、obnizでブロックを使ったプログラミングの導入部分を押さえるの更新版です。2019年5月よりobnizサイトが更新されましたので、修正を加えました。

概要

obnizはクラウド利用のマイコンボードです。HTML/CSSでブラウザ画面上で操作画面を作りJavaScriptで動作を制御します。「Webの技術でハードとソフトをつなぐ」と銘打たれているように、マイコンやハードウェアの初学者にも向いています。
HTML/CSS, JavaScriptによるコーディングのほかに「ブロックプログラム」も使えます。この記事では「ブロックプログラム」の使い方を紹介します。

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

WiFi接続を行う

電源を差し込み、左上のスイッチを押し、WiFiの設定を行います。
image.png

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

obnizサイトにアクセス

  1. ブラウザでobniz開発者コンソールを表示させ、[プログラム]-[ブロックプログラム]を選択します。
    Image 2019-05-19 07.48.47.png

  2. 「obniz idを入力」のダイアログが出るので、obnizの液晶画面に表示されているobniz idを入力し、[開く]ボタンをクリックします。
    image.png

  3. 以下のようなブロックプログラムの画面が表示されます。Lチカのサンプルプログラムです。
    image.png

もしブロックが表示されない場合は、以下のように並べてみてください。
image.png

LED（抵抗入り）の接続

  1. LED（抵抗入り）をobnizに接続する。0番ピンにLEDの足の長い方（アノード）・1番ピンに足の短い方(カソード）を差し込みましょう。
    IMG_9651.png
    ピン穴の奥まで差し込みます。
    IMG_9650.png

  2. 画面右上のimage.pngボタンをクリックして実行してみましょう。
    image.png

以下のようなブラウザ実行画面が表示され、LEDが点滅するはずです。
image.png右上の[終了]リンクをクリックして実行を終了させると、プログラムが終了しLEDが消灯する。

ボタンでLEDオン・オフ

  1. 以下のようなブロックプログラムを作ってみましょう。
    image.png

  2. 実行すると、[オン][オフ]ボタンが表示され、各々のボタンを押すことによってLEDがオン・オフするプログラムが実行できます。
    image.png

プログラムをスマホやタブレットで実行する

  1. 画面左上にあるimage.pngボタンをクリックしてQRコードを表示させます。
    image.png

  2. スマホやタブレットでQRコードを写して、ブラウザに表示させる。
    IMG_9563.PNG

  3. スマホのブラウザ上でLEDのオン・オフができるのを確認してみましょう。
    IMG_9564.PNG

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1