今回は実際に自分でブロックを並べてプログラムしてみましょう。
どうやってブロックを並べたらよいかを見ながらやってみましょう。
ブロックはどこにあるのか
画面の中に使えるブロックは用意されています。
まず、クイックスタートでやっていたようにブロックプログラムエディタを開きましょう。
すると、左側にアイコンが並んでいると思います。
下にある画像のように、パソコンなど横幅の大きなディスプレイでは、アイコンの意味がわかる文字が並んでいます。この中にすべてのブロックがあります。
それぞれクリックすることでそれに関係するブロックを見ることができます。
例えば「ループ」を開くと、何かを繰り返すためのブロックが出てきます。
スマホなどの場合は説明する文字がなくなってアイコンだけになります。
ループは回っているようなアイコンになります。指でタップすると関係するブロックが出てきます。
このように左側にブロックが種類別に分けられています。
一番上はobnizで、それ以外に電子部品だったり、画面上の部品だったり、あとは「ループ」といった部品ではないプログラムの流れを決めるためのブロックもあります。
この中から使いたいブロックをドラッグすることで実際にプログラムしていきます。
ブロックを置いてならべる
では、実際に並べてみましょう。
「UI」にある「"text"をコンソールに表示する」というのをすでに画面にある3つのブロックの最後に繋いでみます。
左側の「UI（指のアイコン）」を押すと「"text"をコンソールに表示する」というのがあると思います。
それをクリックしたまま、またはスマホなら指で抑えたまま動かすとついてくると思います。
そのまま、3つあるブロックの一番下につないでみましょう。
そしてそのブロックの"text"となっている部分を「つながった」にしてみます。
obnizがオンラインなのであれば、そのまま実行してみましょう。
すると接続ができた時にobnizにHello Worldと出るのと同時に、プログラムしている画面の方にも「つながった」という文字が表示されると思います。
ブロックプログラムの流れ
ブロックプログラムではつないだ順番にプログラムが実行されます。
いま、エディタ上に並べてあるのはこの4つです。
実行すると、この4つが上から順番に実行されます。
まず、obniz 8506-3053とあなたのPC/スマホがつながります。
（もちろんobniz idは人によって違います）
つながるのが完了するまでその下のブロックには行きません。
つまり、「ディスプレイを消す」がその下にありますが、obnizにつながるまで消えることはありません。
obnizとつながって次にやることは「ディスプレイを消す」です。
このディスプレイはobniz上にある画面のことです。
消されますので、表示されているものが全て消えて、真っ黒になります。
次に「Hello, World!を表示する」です。これによりディスプレイにこの文字が表示されます。
最後に「"つながった"をコンソールに表示する」により今プログラムしている画面の方に「つながった」が表示されます。
これだけでは退屈なプログラムですが、それでもはじめてのブロックプログラムです！
ブロックの外し方・消し方
並べたブロックを外して入れ替えたり、消す方法です。
中央の2つ、obnizのディスプレイを動かす部分を削除してみましょう。
やりかたはたくさんありますが、一番ていねいなやりかたでやってみましょう。
このブロックプログラムエディタでは、つかんだブロックが外れるとその下のブロックも一緒についてきます。
まず、「obnizのディスプレイを消す」を持って、外してしまいましょう。
次に「"つながった"をコンソールに表示する」をつかんで、「obniz id ""に接続する」の下につなぎます。
これでやりたいことができました！しかし、「ディスプレイを消す」と「Hello Worldを表示する」がもういらないので消したいです。
消すやり方は2つあります。パソコンの方は選んだ状態で「Delete」ボタンを押せばブロックが消えます。
スマホの方は画面の右下にあるゴミ箱のアイコンまで持っていって離すことでブロックが消えます。
ブロックを小さくする・大きくする
ブロックが小さすぎたり、逆にに大きくて不便なときは、
画面右下のゴミ箱の上にある＋とーをつかうことで全体の大きさを変えることができます。