Categories: PR

親指サイズのクリスマス──6×10 LEDマトリクスとXIAOボードでつくる、MicroBlocks製ドット絵ビューワ

Seeed Studioが展開する「XIAO」シリーズは、中国語で「小(xiǎo)」を意味する名の通り、親指サイズの小さな筐体を特徴とする開発ボードだ。ESP32、RP2350、RP2040、nRF52840、SAMD21 といった人気プラットフォームをベースにしたラインアップを揃え、どのモデルもArduino互換の扱いやすさを備えている。

Seeed Studioの公式Wikiより引用

筆者はこれまで、カメラやマイクを備えた「XIAO ESP32S3 Sense」を用い、AIプラットフォームと組み合わせた画像解析音声解析といった作例に挑戦してきた。しかし今回は、改めてXIAOシリーズのサイズ感そのものに目を向け、親指サイズだからこそ楽しめる「マイクロな表現」に焦点を当てたい。

そこで組み合わせるのが、同じく “Micro” を冠するビジュアルプログラミング環境「MicroBlocks」と、XIAOシリーズ向けの6×10 RGB LEDマトリクスだ。親指サイズのXIAOとLEDマトリクスだけで、街角のイルミネーションを凝縮したような、小さな冬の光を描く。そんなミニマルなドット絵ビューワをつくってみよう。

XIAO用 6×10 RGBマトリクスボード

公式Wikiより引用

今回扱う「XIAO用 6×10 RGBマトリクスボード」は、XIAO本体と同じ21×17.5mmの親指サイズの基板に、フルカラーRGBを表現するWS2812B LEDを60個ぎゅっと詰め込んだモジュールだ。複数枚を連結できるスプライス接続にも対応しており、ウェアラブルデバイスや小型のインタラクティブ作品での活用が想定されている。

基板にはピンソケットが同梱されているため、まずは半田付けから始めよう。

ピンソケットを半田付けした後。やはり小さい。

RGBマトリクスボードはXIAOシリーズに対応しており、XIAO ESP32S3 Senseも問題なく接続できる。今回はカメラとマイクが載った拡張ボードを外し、本体側にピンヘッダを半田付けした状態でマトリクスボードを装着した。向きはGND同士を合わせると迷わずにセットできるだろう。

制御方法はいくつかあるが、まずは手軽な Arduino IDEから試してみよう。XIAO ESP32S3 Sense本体のセットアップ手順は、以前の記事を参照してほしい。

Arduino IDEにNeoPixelライブラリをインクルードし、公式Wikiに掲載されているサンプルスケッチを書き込むと…

60個のLEDが順番に点灯!親指サイズとは思えないほどの眩さを見せてくれた。この小ささながら十分な光量で、1個ずつの視認性もしっかりあり、十分な表現力を持つマトリクスボードだと実感できる。

リアルタイムのビジュアルプログラミング「MicroBlocks」

この小さなRGBマトリクスをうまく活用すれば、たくさんの表現ができそうだ。冬が近づくこの季節、小さな星の中にサンタや雪だるまを描いて、光るオーナメントのように仕立ててみよう。

作るもののイメージ図。

しかし、通常のコーディング環境だと図柄づくりは少し大変だ。マトリクスの配置を整理しながら、どの位置に何色を置くかを60回くり返し指定する必要がある。NeoPixelのライブラリを使ったとしても、テキストで指定する作業はなかなか骨が折れるし、結果確認のために毎回プログラムを書き込むのも時間がかかる。

「もっと直感的に操作できないだろうか?」と考え、今回はリアルタイムに動作を確認できるビジュアルプログラミング環境「MicroBlocks」を扱うこととした。

公式サイトからスクリーンショット

MicroBlocksは、Scratchに近い操作感で使えるブロック型のビジュアルプログラミング環境だ。アカウント登録などは不要で、ブラウザからそのまま利用できる。見た目はシンプルだが、GPIOピンの制御やセンサーの読み取り、周辺機器との連携、追加ライブラリの読み込みなど、マイコン向けとして十分な機能を備えている。

特徴的なのは、ライブコーディングに対応している点だ。ボードを接続したままブロックを配置・変更すれば、その内容が即座に反映されるため、動作確認がとてもスムーズ。教育用途に限らず、小型マイコンを使った試作やインタラクティブ作品のプロトタイピングにも向いており、XIAOシリーズも含め対応ボードが増え続けている。

利用はとても簡単だ。ブラウザでMicroBlocksのサイトにアクセスし、メニューから「Run」を選択するだけでコーディング画面が開く。ソフトのダウンロードやアカウント登録といった面倒な手続きはいっさいなく、すぐに操作を始められる。

XIAOボードでMicroBlocksを使うためには、最初にファームウェアを書き込む必要がある。開発環境を開いたら、左上の歯車アイコンから 「Advanced Mode」 を有効にし、メニューから「Install ESP firmware from microblocks.fun」を選択。続いてデバイス一覧から 「xiao_esp32_s3」を選んで書き込みを実行すれば準備完了だ。

その後は、メニューの右上から 「Connect(USB)」 を選び、接続されているボードを選択すれば接続が確立する。もし認識されない場合は、他のソフトが同じUSBポートを使っていないかなどを確認してみよう。

Seeed Studioの公式WikiではXIAO ESP32C3の事例が紹介されているが、ESP32S3でも問題なく対応できた。

まずはXIAO ESP32S3のビルトインLEDでLチカを試してみる。MicroBlocksはライブコーディング環境のため、プログラムを変更すると即座にハード側へ反映される。ブラウザ上でLED制御のトグルを切り替えると、ほぼ同時にXIAOのLEDが点灯・消灯し、そのレスポンスの速さに驚かされた。

Arduino IDEでは「コードの変更→コンパイル→書き込み」と工程を踏む必要があり、ちょっとした調整でも数十秒かかる。それに比べてMicroBlocksのこのスピード感は、大きなメリットと言えそうだ。

マトリクスを視覚的に制御するNeoPixelライブラリ

MicroBlocksには標準機能のほか、豊富な追加ライブラリも用意されている。今回のRGBマトリクスを扱う際には、Arduino IDEと同様に NeoPixelライブラリが利用可能だ。メニュー左下の「Add Library」から「NeoPixel」を追加しよう。

このライブラリを読み込むと、マトリクス上の任意の位置をクリックで指定し、色もカラーパレットから直感的に選べるようになる。数値だけでなく見た目でも色を扱えるのは、ビジュアルプログラミングならではの大きな利点だ。

初期設定で使うのは「attach <LEDの数> LED NeoPixel strip to pin <ピン番号>」というブロック。ここに今回のRGBマトリクスのLED数である 60 と、制御ピンにあたる 0 をそれぞれ指定する。

なお、NeoPixelライブラリで用意されている、複数の色をまとめて指定できるブロックは「2×5」「5×5」の2種類。おそらくmicro:bit の5×5マトリクスを意識した構成なのだろう。

赤、青、緑が順番に並んでいるが……

試しに5×5のブロックを使ってみたところ、25個までは問題なく光らせることができた。しかし 26個目以降は別途指定が必要であり、さらに 6×10のマトリクスとは並びが異なるため、画面上のビジュアルと実際の配置は少し異なっている。もう一歩工夫できれば、より直感的な制御ができそうだ。

先人の知恵をお借りして、自由な配列指定

今回の用途に合わせて、より直感的にパターンを制作できる方法を探していたところ、ある作例に辿り着いた。

プロジェクトページより引用

Hackster.ioで公開されている、FabLab Yucatán のluis^m 氏らによるプロジェクトは、XIAOボードと 8×8 NeoPixel マトリクス向けに作られたものだ。「黒はx・赤はr・白はw」というように、色をアルファベットに置き換えてマトリクスの形に並べるだけで、そのままLEDが点灯する仕組みになっている。LED数の制約や配列の再現性といった課題を解決した、痒いところに手が届く拡張ライブラリと言える。

こちらのCodeを元に、6×10のマトリクスを文字指定できるものに改変した。

コードの詳細は元ページに掲載されているが、今回はこれを6×10マトリクス版に書き換え、MicroBlocks用ライブラリ(.ubl形式)としてローカルに保存した。

「Add Library」 で「Computer」を選択すると、ローカルのublファイルをアップロードできる。

MicroBlocks側で「Add Library」から「NeoPixel」と「Other > String」を追加し、続けて自作したUBLファイルも読み込む。うまく追加されると、Pixel_drawing という新たなブロックが表示され、RGBマトリクスのパターンをアルファベットで指定できるようになる。

初期状態では x(LED OFF) が並んでいるので、ここを上書きして好みの模様や文字を制作する。文字列を書き換えると、リアルタイムでマトリクスの表示が更新されるため、見え方を確認しながら編集できるのがうれしいポイントだ。

試しに「XIAO」の文字を描いてみた。ピクセルが密集していても、色さえ変えれば別の文字としてくっきり識別できるのは、フルカラーLEDならではの表現力と言えるだろう。

ドット絵を文字列に変換&デコレーション

さて、ここまでで準備は完了。クリスマスらしい図柄を6×10のドットで表現しよう。今回は「ミニドット絵メーカー3」で描いた図柄をスクリーンショットし、その画像をChatGPT に読み込ませて6×10の文字列に変換してもらった。使用したプロンプトは以下の通りだ。

ドット絵を6x10の小文字アルファベットの列に変換したい。
黒=x、赤=r、黄色=y、緑=g、茶色=n、白=wとして、
xxxxxx
xxxxxx
xxxxxx
xxxxxx
xxxxxx
xxxxxx
xxxxxx
xxxxxx
xxxxxx
xxxxxx
のような形で出力して。
ベルやサンタ、ツリーのドット絵とそれに対応した文字列が完成。

こうして変換された文字列を、先ほど追加したpixel_drawingブロックにそのまま貼り付ければ、RGBマトリクスに模様が表示される。見え方に違和感があれば、その場でテキストを書き換えればすぐに反映されるので調整も簡単だ。ここでもMicroBlocksのライブコーディング特性が効いてくる。

今回はクリスマスらしい星型の外枠を3Dプリントで制作し、その中に柄を表示できるようにした。親指サイズの小ささも相まって、USBなどで電源を確保すれば、小さなツリーに忍ばせられる可愛いオーナメントとして活躍してくれそうだ。置き場所を選ばず、机の片隅や棚のちょっとしたスペースにも飾れるかもしれない。

まとめ

親指サイズのボードとは思えないほど、はっきりと密度の高いビジュアルを表現できる XIAO用RGBマトリクスは、小型ながらも存在感のある光を生み出してくれる。60 個の LEDを扱えることで、オーナメントのような装飾作品から、ちょっとしたインタラクティブ表現まで、手のひらサイズの世界を豊かに彩る道具として活躍してくれそうだ。

また、MicroBlocks のとっつきやすさとライブコーディングの即時性も実感できた。視覚的なブロック操作でコードを編集でき、反映までの待ち時間も少ないため、XIAOシリーズを活かした作品づくりの新しいスタイルとしても活用できそうだ。

一方で、XIAO ESP32S3 Sense に搭載された BOOT ボタンを入力として併用したい場合、MicroBlocksではピンアサインの都合でRGBマトリクスと同時に扱えない場面があった。Arduino IDEでは問題なく動作するので、素早く試作したいときはMicroBlocks、細かい制御を行いたいときはArduino IDEといった使い分けが現実的だろう。小さなボードをいかしたものづくりに、ぜひチャレンジしてみてほしい。

プレゼントのお知らせ

今回紹介したXIAO ESP32S3 Senseが3名様に当たるキャンペーンを2025年12月4日まで実施しています。

詳細はFabSceneの公式Xアカウントをご確認ください。

本記事はSponsored記事です。
提供:Seeed Studio / Seeed 株式会社

淺野義弘

ライター/編集者。大学で3Dプリンターと出会いものづくりの面白さに目覚め、デジタルファブリケーションの世界へ。卒業後、研究員として2年半ほど従事したのち、ものづくりを中心としたライターとして独立。 2023年には墨田区でファブ施設「京島共同凸工所」の運営をスタート。文章と場づくりを行き来しながら、街での生活を満喫している。工房での日々を綴った自主制作本「京島の十月」が販売中。