#obniz でビジュアルプログラミング！（ブロックプログラミングを試してみる）

こちらは、[Obniz Advent Calendar 2018](https://qiita.com/advent-calendar/2018/obniz) の 18日目のエントリーとして当初書いていた記事です。

2018年の12月時点では書きかけの部分があったので、2019年2月に加筆をしました。
（少し追加でいろいろ調べて追記するくらいで考えていたのですが、あれこれ試してみてたら、最終的には元の記事の2.5倍くらいの分量になりました）

最終的に、
　**「AI・UI関連のブロックの内容を見てみつつ、UIブロックを使ったプログラムを作って試した」**
という結果の記事になりました。

# はじめに
個人的に気になっているものの1つに、テキストによるプログラミングを使わなくてもシステム・作品を作ることができる、**ノンコーディング・ローコーディング・ビジュアルプログラミング**といったものがあります。

この記事では、[obniz]()の中でも、以下の内容について書いていこうと思います。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ブロックプログラムが新しくなりました！ キットのブロックやAIブロックなども利用できる上に、html/javascriptへの書き出し機能もあります。他にも新機能が！詳しくはリリースをご覧ください <a href="https://t.co/BcjsJ8dUh2">https://t.co/BcjsJ8dUh2</a>ブロックプログラムが新しくなりました</p>&mdash; obniz japan (@obniz_jp) <a href="https://twitter.com/obniz_jp/status/1072083416550535169?ref_src=twsrc%5Etfw">2018年12月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

前置きをいろいろ書いているので、「早く実践に進みたい」という方は、記事の中の
　**[「いくつかのブロックを見てみる」]( https://qiita.com/youtoy/items/8db6d4d299550b6f539a#%E3%81%84%E3%81%8F%E3%81%A4%E3%81%8B%E3%81%AE%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%82%92%E8%A6%8B%E3%81%A6%E3%81%BF%E3%82%8B )**
の項目辺りからお読みください。

# なぜ、ブロックプログラミング？
なぜ、ブロックプログラミングに興味を持ったか。

ノンコーディング・ローコーディング・ビジュアルプログラミング全般に興味がある、と書きましたが、
その理由の1つに、自分が何かプロトタイプを作って試行錯誤するときに、簡単に試したり修正できたりすると良いな、というのがあり、その手段として利用できそうだからです。

また、2013年ごろから、子ども向けプログラミングイベント等での講師・サポーターをやったりすることが定期的にあり、その中で使えると良さそう、というのもあります。

余談ですが、自分が十数年やっている子どもと関わる活動について、昨日の[とあるアドベントカレンダー（CoderDojo Advent Calendar 2018）](https://adventar.org/calendars/2955)で記事にしていたりします。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">CoderDojo Advent Calendar 2018 の 17日目の記事を登録しました。<br><br>4年前にCoderDojoを知ったきっかけや、子どもと関わる活動のこれまでや、CoderDojoでのメンター活動での出来事について書きました。<br><br>●<a href="https://twitter.com/hashtag/CoderDojo?src=hash&amp;ref_src=twsrc%5Etfw">#CoderDojo</a> に関わりはじめて【CoderDojo Advent Calendar 2018】<br>　<a href="https://t.co/7QotnbHol9">https://t.co/7QotnbHol9</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1074392488968777730?ref_src=twsrc%5Etfw">2018年12月16日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ノンコーディング・ローコーディング・ビジュアルプログラミングの例
具体的に、自分が良く関わっている分野で、スマートスピーカー関連では[NOID](https://www.noid.ai/)があります。
ノードベースのビジュアルプログラミングツールで、スマートスピーカースキルを簡単に作ることができ、最近の新機能として動画付のスキルの作成機能があったりもします。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">昨日リリースしました！<br><br>ノンプログラミングスキル制作ツール「NOID」が世界で初めてAlexaカスタムスキルの動画プレイヤーに対応 | 株式会社アイリッジのプレスリリース<a href="https://twitter.com/hashtag/NOID?src=hash&amp;ref_src=twsrc%5Etfw">#NOID</a> <a href="https://t.co/tX9vQGaNgS">https://t.co/tX9vQGaNgS</a></p>&mdash; NOIDノイド＜公式＞ (@noid_ai) <a href="https://twitter.com/noid_ai/status/1073727870952890368?ref_src=twsrc%5Etfw">2018年12月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

また、他にMicrosoftさん関連では、[PowerApps](https://powerapps.microsoft.com/ja-jp/)・[Logic Apps](https://azure.microsoft.com/ja-jp/services/logic-apps/)等があります。自分は、以下のイベントに参加して試してみたりしました。
　[Cogbot勉強会！#15 ノンコーディング開発♪ PowerApps, Logic Apps - connpass](https://cogbot.connpass.com/event/92036/)

映像系だと、ノードベースのビジュアルプログラミングツール [TouchDesigner](https://www.derivative.ca/) などが1例でしょうか。

子ども向けの教育系で、この関連の有名どころは、MITメディアラボが開発した環境 [Scratch](https://scratch.mit.edu/)があります。
ブロックプログラミングができ、また、様々な外部デバイスとつながる機能があったり、アカウントを作成するとSNS機能的なものや作品のコラボ機能も使えたりと、触れてみるとなかなか奥が深いです。

* [Scratchのブロックプログラミングエディタ]( https://scratch.mit.edu/projects/editor/ )

個人的に最近はまっている、イギリスのBBCが主体となって作った教育向けマイコンボードの [micro:bit（マイクロビット）](https://microbit.org/ja/guide/)も、ブロックプログラミングでPCやスマホから開発ができます。

* [Microsoft MakeCode for micro:bit]( https://makecode.microbit.org/ )

# obnizでのブロックプログラミングへ

前置きが長くなりましたが、本題です。

このようにブロックプログラミングが気になっていたところで、冒頭の話と、さらに、スマートスピーカー界隈でよくお会いする[Google Homerさん](https://twitter.com/google_homer_?lang=ja)がこんなツイートをされていました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a><br>上の動画のプロックプログラム。うそみたいに簡単。 <a href="https://t.co/pWfMAWBZid">pic.twitter.com/pWfMAWBZid</a></p>&mdash; Google Homer (@google_homer_) <a href="https://twitter.com/google_homer_/status/1072110260041609216?ref_src=twsrc%5Etfw">2018年12月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a><br>新Block ProgramのAIに起動端末への音声出力の部品もある。 <a href="https://t.co/Ez5VyXdKPD">pic.twitter.com/Ez5VyXdKPD</a></p>&mdash; Google Homer (@google_homer_) <a href="https://twitter.com/google_homer_/status/1072605982218485761?ref_src=twsrc%5Etfw">2018年12月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このとき、「登録はしたけど、アドベントカレンダーのネタを何にしようかな・・・」と、ぼんやりと考えていた題材が確定しました。

## いくつかのブロックを見てみる
[obniz の Online Block Editor のページ]( https://obniz.io/blockprogram ) にアクセスし、利用可能なブロックの一部を見てみます。
使い方は、以下に書かれているようです。

* [クイックスタート - ブロックプログラムレッスン - obniz]( https://obniz.io/doc/lessons_block_start )

[Online Block Editor]( https://obniz.io/blockprogram ) にアクセスすると、以下のように、ブロックが種類ごとに、いくつかのグループに分けられています。
<img width="342" alt="ブロックのグループ.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/af485cd5-46bb-34fc-4bc8-d87cc0799a8d.jpeg">

### AIブロックを見てみる
AIという内容が一番に気になったので、さらに中を見てみます。
<img width="309" alt="AIグループ.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/d56cf0e2-83ff-3782-c2b1-7508eaff6132.jpeg">
特定の場所の天気を条件にする処理（デフォルトは「東京」）、カメラを使った顔検出（顔が写っているかどうかや、写っている場合の市・距離など）、その他、特定物体認識（デフォルトは「バナナ」）などがあるようです。
バナナ以外に何が認識できるのか気になったので、バナナ以外で認識できるものを見てみます。
<img width="355" alt="AIブロック：カメラでの認識.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/4c67750b-d00a-d177-48c3-25659370e8d4.jpeg">
どのようにして選ばれたか気になるものが、認識対象の物体のリストとしてでてきました（笑）

ちなみに、AIの部分について、以下のAIロボットキットの公式説明に、使われている処理の補足が書いてありました。

* [バナナを見つけてみよう - AIロボットキット レッスン - obniz]( https://obniz.io/doc/lessons_airobot_findbanana )　

以下に、該当する箇所を抜粋します。
> 
javascript
今回使用しているTensorflow.jsのモデルはモバイルネットになります。
　https://github.com/tensorflow/models/blob/master/research/slim/nets/mobilenet_v1.md
javascriptで使えばより多くの(1000種類)の識別ができます。

> 識別できるもののリストは
　http://image-net.org/challenges/LSVRC/2012/browse-synsets
　https://github.com/starpentagon/python_scripts/blob/master/dataset/ILSVRC2012_class_name/ILSVRC2012_class_name.csv
などが参考になります。

> 引用：[クイックスタート - ブロックプログラムレッスン - obniz]( https://obniz.io/doc/lessons_block_start ) より

また、「"Hello"と言う」というブロックも気になりました。公式の説明では、こちらに情報が書かれていました。

* [AI: しゃべらせてみよう - ブロックプログラムレッスン - obniz]( https://obniz.io/doc/lessons_block_talk )　

どうやら音声合成（TTS：Text to Speach）の機能のようです。
こちらを参照すると、2019年2月時点では **「iPhone の Safari は未対応で、Android または PC でのみ利用可能」** となっているようです。

余談ですが、ブロックプログラミングで良く名前を見る Scratch も、最新版の 3.0 では、音声合成が拡張機能として簡単に利用でき、日本語を含むたくさんの言語・声の種類を選択できたりします。

* [音声合成拡張機能 - Japanese Scratch-Wiki]( https://ja.scratch-wiki.info/wiki/%E9%9F%B3%E5%A3%B0%E5%90%88%E6%88%90%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD )　　

拡張機能の説明を見ると、AWSのAPIを利用したもののようです。
<img width="808" alt="Scratch3.0の拡張機能.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/d5080649-856f-2898-a07a-c1b00cd948a8.jpeg">

Scratch 3.0 の拡張機能では、音声合成以外にも、GoogleのAPIを使った翻訳や、カメラの利用もできたりします。

### UIブロックを見てみる、実際に試してみる
次に気になったのが、UIブロック。公式の説明はこちらを見ると良さそうです。

* [UIボタンと連動させよう - ブロックプログラムレッスン - obniz]( https://obniz.io/doc/lessons_block_uibutton )　

こちらを参照しつつ、
　**「PCのブラウザ上のボタンを押すと、obniz のディスプレイ上に文字が表示される」**
という処理を作ってみます。

1）「obniz」のグループの中の、

* __obnizに接続するブロック__
* __処理待ちをさせるブロック__
* __ディスプレイに文字を表示させるブロック__
* __obnizのディスプレイ表示を消すブロック__

の4つを取り出します（※ id の部分はマスクしていますが、ご自身の obniz の id を設定してください）。
<img width="523" alt="obniz：手順1.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/3025e0e8-3645-d2e6-27f3-0e2e04e1fa3c.jpeg">

2）先ほどの4つのブロックにうち、**「obnizに接続するブロック」と「obnizのディスプレイ表示を消すブロック」**の2つをつなげ、ここで1度処理を実行してみます。
obnizが正常にインターネットに接続されている状態で、以下の「保存＆開く」を押すと、プログラムの内容が obniz に反映されます。
実行したプログラムを終了させるまで、obniz のディスプレイが真っ暗になるのが確認できるかと思います。
<img width="750" alt="obniz：手順2.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/93a8495e-06b0-3cbd-24b8-937791fe79cf.jpeg">

3）さらに、「論理」の中の**「if文にあたるブロック」**と、
<img width="306" alt="obniz：手順3-1.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/89db65d2-d6ea-79b9-6510-aaa024f30067.jpeg">
**「UI」の中にある「ボタン作成用ブロック・ボタンが押下されている状態を示す条件のブロック」**の2つも使います。
<img width="426" alt="obniz：手順3-2.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/9da0ace4-231c-4c50-5a9c-670ae0bb4124.jpeg">

4）これまで出てきたブロックを組み合わせるとこのようになります（ブロック内のテキストや数字は、適宜、書きかえています）。
<img width="534" alt="obniz：手順4-1.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/7e738a86-30ce-bb55-512d-ca9f6e517e99.jpeg">
一見、これで想定どおりに動きそうに見えるかもしれませんが、注意が必要です。
公式の手順にある例のように、もう1つ以下のブロックが必要です。
<img width="385" alt="obniz：手順4-2.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/5d805521-73c9-6e44-194d-11a8944c354b.jpeg">
この**「while文にあたるブロック」**がないと、上記の手順3）までのブロックのみでは、
**「ブラウザ上でボタン等のUIが表示される ⇒ その後、あっという間に、1度だけボタン押下の判定処理が行われる（ボタンを押す間もなく、処理を通り過ぎる） ⇒ 全ての処理が終了」**
という一連の流れが、一気に行われてしまいます。
そのため、ボタン押下を判定する待ち受け状態にすることができません。それを防ぐために、ボタン押下の判定を含む部分を「ずっと」のブロックで囲む必要があります。
<img width="541" alt="obniz：手順4-3.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/50868/35aff820-3649-912b-5c7d-59e2a3055c49.jpeg">
この処理を試すと、
　**ブラウザ上のボタンを押すたびに、obniz のディスプレイ上に1秒間だけテキストが表示される**
という処理が実行されるのが確認できるかと思います。試した結果の動画は以下のとおりです。
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">先ほどのツイートに画像添付した、<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> のブロックプログラミングの処理を、<br>iPad上で実行して試したときの様子です。<br><br>【↓先ほどのツイート】<a href="https://t.co/PUBK3vEAqJ">https://t.co/PUBK3vEAqJ</a> <a href="https://t.co/OJOWIkPvxu">pic.twitter.com/OJOWIkPvxu</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1094870069375512577?ref_src=twsrc%5Etfw">2019年2月11日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
今回試していないAIブロックも面白そうなので、別途試してみて、その結果はSNSやQiitaの記事など、何らかの形でアウトプットしようと思います。

## 高度な処理を行う、カスタマイズする
ブロックプログラミングだと、実現できる内容が用意されたブロックに依存して決まります。
そのため、高度な処理を行いたい場合は、JavaScriptの利用もオススメされています。

* [javascriptにステップアップ - ブロックプログラムレッスン - obniz]( https://obniz.io/doc/lessons_block_js )　

ただ、上記のブロックプログラミングが無駄にはならず、ブロックプログラミングで作った内容をベースに、JavaScriptのプログラムを追加していくことが可能です。

以下に抜粋した方法で、ブロックプログラムで作った内容が、テキストプログラミングのソース（HTML ＋ javascript） になります。
>
ブロックプログラムエディタの右上に「ツール」というボタンがあります。
ツールから「コードを見る」を押すことでHTMLとjavascriptを確認できます。
>
引用： [javascriptにステップアップ - ブロックプログラムレッスン - obniz]( https://obniz.io/doc/lessons_block_js ) より

ゆくゆくは、このようなテキストプログラミングを交えたものを作ってみると、より楽しい作品を作ることができると思います。

# おわりに
普段、テキストでのプログラミングに慣れていると、ブロックプログラミングの作法で慣れない部分もあるかもしれないですが、使い慣れてくると、処理の流れが見た目的に分かりやすく組み替えやすいです（処理が複雑になってくると、また色々と工夫が必要になってきますが）。

そして、「テキストでのプログラミングはまだ慣れていない」という方が、とりあえず動かしてプロトタイプを作るという目的や、まずは動く物を試してモチベーションを上げる、ということには大変向いていると思います。

好みはあると思いますが、1度試してみると面白いかと思います。