光のプログラミング ― LEDパネルで作品をつくろう

総合・探究

8×8 LEDパネルに絵を描いて光らせよう。アニメーションと繰り返し、ボタンのしかけを学んで、最後に自分だけの光の作品をつくって発表しよう。USB・BLE・iPadアプリのつなぎかたも紹介。

小学校~ 初級 60

ここでやること

光(LEDパネル)をプログラミングして、最後に自分だけの光の作品をつくって発表します。
  • LEDパネルに絵を描いて光らせる
  • 一時停止と繰り返しでアニメーションをつくる
  • ボタンで絵が変わるしかけにも挑戦できる
全体の流れ(約60分)
ステップ内容めやす
1. 準備プロジェクトをつくる5分
2. つなぐUSB・BLE・iPadアプリから、使う機械に合わせて接続する10分
3. 光らせるLEDパネルに絵を描いて光らせる10分
4. アニメーション2枚の絵と一時停止で動かす10分
5. くりかえし「繰り返す」ブロックでずっと動かす5分
6. SAI(AI)に相談やりたいことを相談してプログラム案をつくる5分
7. つくる自分だけの光の作品をつくる10分
8. 発表作品をみんなに見せる5分

準備しよう

プログラミング画面を開こう。 「新しいプロジェクトを追加する」をクリックすると、プロジェクト作成ウインドウが出るので、「作成」をクリックしてプログラミング画面を開きます。

つなぎかたをえらぼう

SPACEBLOCKとプログラミング画面のつなぎかたは、使う機械に合わせて3つあります。自分の環境に合うものを選ぼう。
つなぎかたは3とおり
使う機械つなぎかたポイント
パソコン・ChromebookUSBケーブルでつないで「USBで接続する」いちばんかんたん。まずはこれ
パソコン・Chromebook(ワイヤレス)BLEモジュールをつないで「BLEで接続する」ケーブルなしで動かせる
iPad専用アプリをひらいて、BLEモジュールで接続App Storeで「スペースブロック」と検索
SPACEBLOCKをパソコンにつなげよう。 プログラミング画面を開くとデバイス接続ウインドウが表示されるので、SPACEBLOCKとパソコンをUSBケーブルでつなげます。つなげたら「USBで接続する」をクリック。新しくウインドウが表示されるので「SPACEBLOCK」をクリックしてから「接続」を押します。
※2回目からは自動でSPACEBLOCKがパソコンとつながります。
BLEでワイヤレス接続もできる。 BLEモジュール(SBP-BLE5)を使うと、ケーブルをつながずにワイヤレスでプログラムを送れます。ジャンパーワイヤ(オス-メス)で4本、図のとおりにつなごう。
  • VCC → 3.3Vまたは5V / GND → GND / TXD → A3 / RXD → A2(つなげるのは A3・A2 の組み合わせだけ)
  • 電池ボックスやUSB経由で給電する
つないだら、画面から接続しよう。
パソコンのとき:デバイス接続ウインドウの「BLE接続」タブで、つなぎかたの図をいつでも確認できます。さいごに「BLEで接続する」をクリックして、リストから「スペースブロック」を選べば接続完了。
iPadのとき:App Storeで「スペースブロック」と検索して専用アプリをインストールし、アプリからプログラミングします。プロジェクトをひらいて「BLE接続」を選び、リストから「SPACEBLOCK(BLE)」を選択。デバイスが複数あるときは、つなぎたいSPACEBLOCKをiPadに近づけて、バー(信号強度)が緑色のもの(または一番上)を選ぼう。

LEDパネルを光らせよう

LEDパネルをSPACEBLOCKにつなげよう。 USBケーブルの隣にある横向きピンソケットに、LEDパネルが立つように写真のようにつなげます。
※LEDパネルをつなげた後にSPACEBLOCKを持つときは、LEDパネルからは持たず、本体を持ってください。
絵を描いて光らせよう。 「LED」カテゴリをクリックして「RGB LED [A10] を点灯」というブロックをドラッグまたはクリック。プログラミング画面に追加されるので、最初からある「プログラム開始」ブロックにつなげます。
つなげたら色を選んで光らせたいところをクリック。絵ができたら「実行」をクリックしよう。

アニメーションをつくろう

アニメーションをつくってみよう。 光らせられたら2枚目の絵を追加します。プログラムは実行するとすごいスピードで動くので、「基本」カテゴリの中にある「一時停止(1000)ミリ秒」ブロックを絵と絵の間に追加しよう。※1000ミリ秒=1秒。

くりかえして光らせよう

アニメーションをずっと動かしたいときは、「繰り返し」カテゴリの「繰り返す」ブロックでプログラムを囲みます。下の例は、太陽とくもの絵が1秒ずつ交互に光りつづけるプログラムです。

AIアシスタント(SAI)を使う

AIアシスタント(SAI)に、やりたいことをことばで相談すると、プログラム案を作ってくれます。できた案は実際に動かして確かめよう。
AIは「完成品を出す魔法」ではありません。聞く前に「何を・どの色で・何秒・何回」を1文で言えるようにしよう。
AI活用の4ステップ
ステップ内容
1 話すやりたい動きを言葉にする
2 作るブロック案を見る
3 動かす実機で確認する
4 直す条件や時間を調整

AIプロンプト練習

良いプロンプトは、動かしたい結果を具体的に書くことから。出てきた案は 読む → 実行 → 直す でチェックしよう。
まず試す4つのプロンプト
テーマプロンプト例
赤と青を1秒ごとに交互に光らせたい。8×8 LEDで作るには?
アニメハートがだんだん大きくなるアニメーションを作りたい。絵は3枚で。
順番3枚の絵を順番に光らせて、さいごに全部消したい。
発想作品に使える光の合図を3つ考えて。

チャレンジ

できた人は挑戦してみよう。
  1. コマをふやそう:絵を3枚、4枚にふやして、パラパラまんがのように動かそう。
  2. スピードを変えよう:一時停止の数字を変えて、ゆっくり・はやいをくらべてみよう。
  3. ボタンで操作:「基本」カテゴリの「ボタン(PA8)が押された」ブロックを使って、ボタンを押したら絵が変わるようにしよう。
  4. しんごうきをつくろう:赤→黄→青の絵をじゅんばんに光らせて、本物みたいなタイミングにしてみよう。

作品をつくろう

ここまでの技を組み合わせて、自分だけの光の作品をつくろう。どんな絵を光らせる? どんな順番で、どれくらいの速さで切りかえる? ボタンも使ってみる?
困ったら、下の参考プロジェクトを開いて、まねしたり改造したりしてもOK。SAIにやりたいことを相談して、プログラム案から始めるのもおすすめ。

こんなのが作れるよ! 参考プロジェクト

「光だけで、どんな作品になるの?」というときは、この2つを開いてみよう。どちらもコピーして自分のプロジェクトにできます。中をのぞいて、まねしたり、絵をかえて改造したりしてOKです。
① おてんきものがたり
「太陽 → くも → あめ → かみなり → にじ」と、お天気がうつりかわる光のストーリーです。絵と一時停止を順番にならべて「繰り返す」で囲んだだけ。あめは、ドットの位置がちがう2枚の絵を交互に光らせてアニメーションにしています。
QR code for project
② きもちスイッチ
いつもはにこにこ顔。本体の左ボタン(PA8)を押すとハート右ボタン(PA9)を押すとびっくり顔にかわります。「ボタンが押された」ブロックを使うと、押したときだけ動くしかけがつくれます。
QR code for project

発表しよう

つくった作品をみんなに見せよう。
  • どんな作品?(タイトルがあるとかっこいい)
  • 工夫したところ・見てほしいところをひとこと
  • むずかしかったところ、次にやってみたいこと
おつかれさまでした!