inSmartBank

AI家計簿アプリ「ワンバンク」を開発・運営する株式会社スマートバンクの Tech Blog です。より幅広いテーマはnoteで発信中です https://note.com/smartbankinc

Inside #Board43: ワークショップ編 #rubykaigi

こんにちはRubyKaigi 2026のPicoRubyワークショップ部分やLチカを担当したkoshibaです。

このワークショップについて、3本立てでブログを書いています。基板編はmasawadaさん、ソフトウェア・パッケージデザイン編 はkaoruさんが書いてくれているので、本記事はワークショップ編として、「30分という時間のなかで、参加者が何を持ち帰るか」をどう設計したか、そしてその設計のために作ったり用意したりしたものについて書きます。

基板の構成やソフトウェア側の事情については、それぞれの記事を参照してください。

blog.smartbank.co.jp blog.smartbank.co.jp

ワークショップの具体的な手順はこちらで公開しています。

当日のワークショップの様子

なぜ30分なのか

今回のワークショップは30分の枠で実施しました。普段からたまにプライベートで技術系のワークショップを開催しているのですが、その場合はだいたい90分〜半日くらいとってやっています。

しかし今回はRubyKaigi内。RubyKaigiのメインであるセッションと被ることは避けたいと考えると、実施できるのは休憩時間。一方でスマートバンクはまだまだ小さな会社でエンジニアの人数も少ないため、1回の実施で多くの人を受け入れることや、常に来た人を順次受け入れるような方式は難しいです。そのため、1回の人数を絞る代わりに、実施時間を決めて複数回行うことが、一番多くの方に体験してもらえる方法だと考えました。使える時間は、Lunch Break の後半(前半も休憩時間ではありますがご飯食べないとお腹空きますし)と Afternoon Break。Afternoon Breakが40分で、今年は2つの建物に分かれていることもあり、ならもう30分枠でどうにかするしかないとまずは実施時間を決めました。

ワークショップの告知ボード

ここで決めた「30分」は単なる枠ではなく、設計の出発点でした。あれもこれもとは入れられない、絶対に外せないものは何かを考えることになりました。

ゴールから逆算する

Board43はLEDだけでなくセンサーやスイッチ、ブザーまで搭載していて、さまざまなことができる基板です。つまりいろいろなワークショップ内容が考えられます。また、量産前基板の検証が全て終わって実際のワークショップで使うものが確定したのが3月末だったので、ワークショップの具体的な設計にかけられる時間もあまり残っていません。

そのため、まずはmasawadaさん、kaoruさんと3人でゴール設定をしました。ワークショップ後参加者はどうなっているか、どんな気持ちになっているかの認識を揃えました。

そこで出てきたのが「光って嬉しい・PicoRubyで動かせた実感を持つ・誰かに見せたくなる」の3つでした。

そしてもう一つ、ドキュメントをなぞっただけだとつまらないので、「自分が自分の欲しいものを作った」という感覚を持ってもらえることも意識していました。 企画段階では、USBケーブルを繋いだらばーっと光って音が鳴るという案も出てたのですが「人のはじめてのLチカを奪ってはいけない」と我を通させてもらいました(ステータスLEDが光る案は電源周りの確認にもなるので受け入れました)。はじめて自分でLチカした瞬間の「わっ」となる様子は何度立ち会っても尊いものだと思います。

どう組み立てたか

まずは光らせる。とにかく光らせる。光らせRTA。「楽しい」→ 興味がわく→ もっとやってみたくなる。そのスタートラインにいかに早くたどりついてもらえるか。 最初からいきなりアイコンを光らせることも可能でしたが、そうするとステップが増えてしまう。そこで、4行書いて実行すれば光る、というところからはじめることにしました。256個のLEDが単色で全て光るだけでもインパクトがあります。

require 'ws2812-plus'

led = WS2812.new(pin: Board43::GPIO_LEDOUT, num: 256)  # GPIO 24, LED 256個(16×16)
led.fill(255, 0, 0)   # 全LEDを赤(R=255, G=0, B=0)に
led.show              # バッファの内容をLEDに送信

ほとんどの参加者は普段Rubyを使ってコードを書いている人なので、読む気になるコード量でぱっと光ると「なるほどねー」という気持ちになれるのではないかと考えました。

そこから個別のLEDの色を変えたり、アニメーションをつけたり、と段階的にステップを踏んでもらう構成にしました。 同時にこのステップは、ツール(Board43 Playground)や後述する ws2812-plus という mrbgem に自然と慣れてもらう過程でもあります。「いまPicoRubyを触っている」という実感を持ってもらえることも意識しました。

そしていよいよメインのアイコン表示のステップです。途中で終わってしまうと満足感がないので、一度はアイコンを表示させるところまでやってみて、その後自分の好きなように改変していこうという流れにしています。

アップロードした画像から生成されるコードに加速度センサーの処理まで含まれていますが、ここまでのステップを踏んでいれば、自動生成されたコードも完全なブラックボックスではなく「読めばわかる」状態で受け取れます。それが、その後自分で改変したくなる気持ちを引き出すという狙いです。

ワークショップを組んでいるなかで出てきた「ツールがこうなってたら嬉しい」を、kaoruさんに追加実装してもらいました(具体的なことはソフトウェア・パッケージデザイン編 にあります)。30分でゴールまで辿り着けるよう、設計側から見えた要望を反映してもらった形です。

サンプルコード

ワークショップは30分なのでLEDについてだけで精一杯になるのはわかっていたので、基板のポテンシャルがわかるようなものや、参考実装になるようなものを用意しました。

各センサーのサンプルコードはリファレンスマニュアルに載せているものと同じです。ここではワークショップに合わせて作った5つの複合サンプルについて、制作意図を中心に紹介します。

RubyKaigiロゴ

Board43/workshop/examples/logo.rb at main · smartbank-inc/Board43 · GitHub

ボタン切り替えと、アニメーションのサンプルとして。モチーフはRubyKaigi 2026のロゴ。きっと今年のRubyKaigi参加者にとって一番身近なシンボルになると思ってオフィシャルパーティの告知に使われていたものをさらにドット絵にしてみました(運営には事前にご相談させてもらいました)。ボタンを押した時になる「ピッ」音もお気に入りです。

オフィシャルパーティのキービジュアルを意識した RubyKaigi 2026 ロゴ

流体シミュレーション

Board43/workshop/examples/water.rb at main · smartbank-inc/Board43 · GitHub

せっかくセンサーがついていて、これだけLEDがついてるならやりたいと作ったものです。実は2パターン作ってました。最初に作ったのは波動シミュレーションという手法で、各列の水面の高さを計算して滑らかに揺らしていました。ただこれだと左右にしか滑らかに動かせない。せっかくセンサーが上下左右を検知できるので、ぐるぐる回しても水が追従するようにしたい。そこでセルオートマトンという手法に変えて、水を1粒ずつのドットとして傾けた方向に1マスずつ落ちていくようにしました。これで上下左右どの方向にも対応できるようになっています。

センサーを活かして上下左右に滑らかに動くようにした流体シミュレーション

ドラム

Board43/workshop/examples/drum.rb at main · smartbank-inc/Board43 · GitHub

ボタンを押したら音が鳴って、LEDが光るシンプルな挙動なのですが、割り込み処理を使ってます。これを使うとコードはちょっと複雑になるんですが割り込み処理知りたい人いるかもなと入れてみたんですが、実際ワークショップで質問してもらって、「ありますよ」と紹介できたので満足です。

rand も聞かれるかもなと思い、私がよく自分の作品の中で使ってる擬似乱数生成器を仕込みました。これも質問があったので用意しておいてよかったです*1

スネークゲーム

Board43/workshop/examples/snake_game.rb at main · smartbank-inc/Board43 · GitHub

私自身はゲームに疎いものの、何かゲーム的なものもあったほうが1つの方向性を示せるのではと入れてみました。どんなゲームにするか考えたときにふと、Kaigi on Rails 2025でSamuelさんが基調講演の中でスネークゲーム作ってたのを思い出して作ってみました。

テルミン

Board43/workshop/examples/theremin.rb at main · smartbank-inc/Board43 · GitHub

全てのセンサーを使っているサンプル。元はmasawadaさんが傾けて位置を決めボタンを押すと鳴るものをRubyKaigiの事前イベントで披露されてて(これはC言語実装)、面白いなと思い、私は傾きが安定すると音が鳴る版を作ってみました。乗ってるものフルで使えるのでサンプルにちょうどよかったです。会期中何度もチューリップを実演して結構うまくなりました。サンプルはCメジャーですが他の音階にするのも楽しいかもしれません。

mrbgem

今回の体験の肝になったLED。割と早い段階でアイコン表示できたら楽しそうという企画が上がっていました。でもそうなると16x16くらいないとアイコンとしてわからないよねという話も出ていて、それはそうなんだけど 16x16、つまり256個。…本当にやる?できる?が最初の感想でした。

私は趣味でPicoRubyで今回使ったWS2812というLEDをチカらせるmrbgemを作って使ってたのですが、5x5(=25個)とか8x8(=64個)くらい光れば十分でした。しかし、今回は256個のLEDを制御。しかもアニメーション操作しても問題なく動かすには工夫が必要でした。最終的にはボトルネックだけC言語で書き、それ以外はRubyで書きやすさを維持するといったことをしました。しかしPicoRuby本体の方で、RuntimeGemsマネジャの仕組みが整って、それなら全部Rubyで実装していたほうが使いやすい。しかし今回のように多くのLEDを扱うには不安が残ります。結果Rubyのみ版(無印)とC言語実装含む版(plus)をつくりました。用途に合わせて使いわけてもらえるようにしています。

パフォーマンス部分だけでなく、安全性も考えたり(全力で光らせるとLEDが傷んだり、熱を持ちすぎて溶けたりするのでセーフティをかけたり)今回のワークショップきっかけでずいぶんと改善が進みました。

おわりに

会社のSlackに私の迷言が残っています。2月の頭に「今回やろうとしてること、初心者でも大丈夫なワークショップだよね?」って確認されてこんなこと言ってるんですよね。

今だから言いますが、この発言をしていた段階では256個もチカらせられる実装になってなかったんですよ。前述のような問題もあり、必要な対応もわかっていたものの、まだチカった実績はなく、つまりこれは自分への宣言でもありました。

その後の告知ブログの頃には実装も追いついていて自信を持って「必ず光らせられる!」と宣言してましたが、本番もみんな30分でちゃんとチカって約束果たせてよかったです。

会期中も終わってからも、SNSなどでBoard43で遊んでいる様子を投稿してもらえているのが何より嬉しいです。「楽しかった」「ほんとに30分で光った!」「もっと作ってみたい」といった言葉もたくさんいただきました!この長さについてもアンケートをとったところ「ちょうどよかった」「時間の都合がつけやすかった」という感想を多くいただけました。私たちの事情から決めたものですが、結果的にRubyKaigi中のコンテンツとしてマッチしたようです。

30分というのは私にとっても設計したことのない長さでしたが、masawadaさんが設計した基板、kaoruさんが作ったツール、そして当日サポーターとして直前に出来上がったワークショップドキュメントを読み込んで臨んでくれたnissyiさん、ochiiさん、yuhiさんがいてくれたおかげで、体験としてちゃんと成立させられたのだと感じています。

そして何より、参加してくださった皆さんがいてくださったから完成したワークショップでした。本当にありがとうございました。

Board43の設計やソフトウェアはGitHubで公開しています。何かの参考になれば嬉しいです。私自身、これからもPicoRubyや基板で遊ぶ場を作っていけたらと思っています。

さて、明日はnyancoさんによるスポンサー全体の取り組み(PicoRubyワークショップだけではなかったのです)についてのブログが公開されます。お楽しみに!

*1:最近 picoruby-rngが入ったのでこちらを使う方がよりよさそうです

We create the new normal of easy budgeting, easy banking, and easy living.
In this tech blog, engineers and other members will share their insights.