Slide 1
Slide 1 text
ゲーミングソード？（100円ショップの刀を
ブロックプログラミングで光らせる）
2021年10月28日 (木)
ビジュアルプログラミングIoTLT vol.9 @オンライン
豊田 陽介 ( @youtoy )
Slide 2
Slide 2 text
豊田陽介（@youtoy）
自己紹介
普段は、某通信会社勤務
自宅にたくさん
ガジェット好き
その他
IT系イベント主催、登壇や運営なども
子ども向けの活動いろいろ（IT系以外も）
プライベートでの活動 Microsoft MVP（2021/10 から）
⇒ のびすけさんと同じカテゴリ
Slide 3
Slide 3 text
今日の話題は
「光る刀」
Slide 4
Slide 4 text
ダイソーで 1本200円で
売られてるおもちゃの刀
もともと、4箇所くらい光る
（音も鳴ったりする）
Slide 5
Slide 5 text
分解するとこんな感じに
LED 4つがつながってたり、
スピーカー・スイッチ等も
Slide 6
Slide 6 text
派手に光らせてみる
Slide 7
Slide 7 text
ゲーミングな光り方にしてみたり
MakeCode for micro:bit
で LEDテープを制御
Slide 8
Slide 8 text
IoTでお馴染み「MQTT」を使い映像・音の連動
M5StickC Plus の処理は
UIFlow、MQTT で PC の
表示と連動させた形
（PC側は JavaScript）
Slide 9
Slide 9 text
物理的な部分
Slide 10
Slide 10 text
以前からよく使っている LEDテープ
動画でも変化がよく分かる
Slide 11
Slide 11 text
M5Stack社から出ている LEDテープ
Slide 12
Slide 12 text
プログラム
Slide 13
Slide 13 text
MakeCodeのほう（動画1つ目）
セットアップ
ゲーミングな
色になるやつ
光る LED の
数が変わるやつ
Slide 14
Slide 14 text
UIFlowのほう（動画2つ目）
7つの色の指定
（RGBそれぞれ）
光る LED の数を
変化させる
MQTTの
セットアップ
ボタン押下で
Publish
メッセージ受信で
処理を実行
Slide 15
Slide 15 text
UIFlowを使ったほうの
機器構成
Slide 16
Slide 16 text
M5Stackのコンテスト用に作った構成図
M5Stack Light Sword with Image Effects（光る剣とエフェクト）
Slide 17
Slide 17 text
MQTTで両デバイスの処理の間をつなぐ
M5StickC Plus
のボタン押下
p5.js での
アニメーション
LEDテープを
光らせる処理
Slide 18
Slide 18 text
100円ショップグッズ、
他にも光らせてみた
Slide 19
Slide 19 text
お化けのミニバケツ（ハロウィン向け）
良い感じに光を拡散させる
グッズだという話＠Twitter
を見かけて
Slide 20
Slide 20 text
MakeCodeでの実装内容
セットアップ
ゲーミングな
色になるやつ
時間経過で色を
変化させる
Slide 21
Slide 21 text
【告知】
イベント・コンテスト
Slide 22
Slide 22 text
詳細はこちら
告知： ヒーローズ・リーグの VUI賞
「音声での入力・出力のどちらか、または両方が可能な作品」を
募集中！ ⇒ 11/15 〆切
ヒーローズ・
リーグについて
VUI賞
について
Slide 23
Slide 23 text
ビジュアルプログラミング交流会
再来週 11/2（火）19:30 から（視聴は YouTube にて）
Slide 24
Slide 24 text
終わり！