micro:bit用GROVEシールドで M5Stack社のフルカラーLED系のパーツを使う際の MakeCode での対応

以下のツイートの動画などにあるように、光り物を作るときによく使っている「micro:bit用GROVEシールド」で、「M5Stack社のフルカラーLED系のパーツ」を使う時の話です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ダイソーの刀の改造の続き、<br>LEDテープが単色で順番に光るようにした後、ボタン操作で虹色になったり消えたり、などという動作もさせてみました！<br><br>そして、持ち手の中身の部分を一生懸命削っていって、LEDテープは持ち手の下の部分から出るような配置ができるようになりました。 <a href="https://t.co/9BgUEVczxW">pic.twitter.com/9BgUEVczxW</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1428022043996393476?ref_src=twsrc%5Etfw">August 18, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## micro:bit用GROVEシールドと Seeed社の Grove フルカラー LED テープ
冒頭のツイートの動画では、「micro:bit用GROVEシールド」に「Seeed社の Grove フルカラー LED テープ」を接続して使っています。

## M5Stack社のフルカラーLED系のパーツ
M5Stack社のフルカラーLED系のパーツと書いているものは、例えば以下のツイートに登場しているようなものがあります。

以下は、シンプルな LEDテープで、長さ違いのものが何種類かあります。
スイッチサイエンスさんのオンラインショップだと、「M5Stack用NeoPixel互換 LEDテープ」という名称で売られているものです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ちょっと前に買っていた LEDテープ用の拡散シリコンチューブ、<br>M5StickC ＋ <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> で光らせた SK6812 Digital RGB LED Strip につけてみた。<br><br>こんな感じに光るのか！<br><br>ちなみに、太さ的にダイソーのおもちゃの刀の中には入らなそう...<br>（別の用途で活用できそうな感じはしてます）<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/iAOj9psCoz">pic.twitter.com/iAOj9psCoz</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1446837440413503492?ref_src=twsrc%5Etfw">October 9, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

以下は、37個の LED が六角形になるような並び方となるタイプ。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/M5Stack_Core2?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack_Core2</a> のボタンを押すと、 <a href="https://twitter.com/hashtag/Noodl?src=hash&amp;ref_src=twsrc%5Etfw">#Noodl</a> 上のサンタが飛び出したり隠れたり。<br>そして、そのサンタをポチッと押すと、 <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> 側につながった LED が光って、Noodl上のツリーもピカッと。<a href="https://twitter.com/hashtag/Noodl%E3%82%82%E3%81%8F%E3%82%82%E3%81%8F%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#Noodlもくもく会</a> <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://t.co/pvTkKjsqpd">pic.twitter.com/pvTkKjsqpd</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1335038530746118145?ref_src=twsrc%5Etfw">December 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上記の画像・動画で M5Stack社のフルカラーLED系のパーツを光らせていますが、その処理を実行するデバイスには M5Stack社の純正デバイスを用いています。

## micro:bit用GROVEシールドで M5Stack社のフルカラーLED系のパーツを使う
### うまく動作させられなかった話
この M5Stack社のフルカラーLED系のパーツを、以前 micro:bit用GROVEシールドと組み合わせて使おうとしたことがあったのですが、うまく動作させられませんでした。

具体的には Seeed社の Grove フルカラー LED テープを光らせられるプログラムを作り、プログラムはそのままで、シールドに接続した Seeed社の Grove フルカラー LED テープを単純に M5Stack社のフルカラーLED系のパーツと差しかえて動作させてみる、ということをやろうとしました。
M5Stack社のフルカラーLED系のパーツが光るのを期待してやったのですが、LED は光りませんでした。

### 動作させる方法
#### 問題の原因
上記の「以前うまくいかなかった」という話の原因と対策が、今さらながら分かりました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">以前も、micro:bit用GROVEシールド＋フルカラーLEDテープで作ったプログラム・構成に関して、<br>フルカラーLEDテープの部分を単純に M5Stack のフルカラーLED系のパーツに入れ替えても、そのままでは動かない...、という件。<br><br>「接続先番号の指定を変えればOK」ということに今さらながら気づいたｗ <a href="https://t.co/QDmoHcs4Dj">pic.twitter.com/QDmoHcs4Dj</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1479834194528595972?ref_src=twsrc%5Etfw">January 8, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

まず原因についてですが、どうやら Seeed社の Grove フルカラー LED テープと、M5Stack社のフルカラーLED系のパーツでは、利用している信号線が異なっているようでした。

以前から、Seeed社純正の Grove用ケーブルと、M5Stack社の Grove互換のケーブルでは、4本ある線のうち 2本の色が入れ替わっている部分があるというのは知っていましたが、中で流れる信号も入れ替わっていたというのは認識できていませんでした。

#### Seeed社の Grove フルカラー LED テープを動作させる場合
以下の赤矢印で示している左から 2番目の Groveコネクタに、Seeed社の Grove フルカラー LED テープを接続して動作させる場合、この後に示すような形でピンの接続先の番号を指定します。

![コネクタ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a3cac782-48d1-e601-d528-3a21c0e70b36.jpeg)

以下のように「P0」を指定すれば OK です。

![ピン番号の指定.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0287a083-9402-15ea-ccf6-52acde521025.jpeg)

#### M5Stack社のフルカラーLED系のパーツを動作させる場合
先ほどと同じ Groveコネクタに、M5Stack社のフルカラーLED系のパーツを接続して動作させる場合、ピンの接続先の番号指定を以下のように変更します。

![ピン番号指定（M5Stack系）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/66c3f9b6-224e-4f92-8ef4-dd1ae6b7bbde.jpeg)

先ほど、赤矢印でコネクタの付近を指し示していた画像がありましたが、そこで「P0/P14」という文字がシールドに書かれていました。
この 2つの番号の指定について、Seeed社の Grove フルカラー LED テープを使う場合は左側に書かれた番号を、M5Stack社のフルカラーLED系のパーツを動作させる場合は右側に書かれた番号を指定すれば、どちらの LEDテープも micro:bit用GROVEシールドで動作させることができました。

ちなみに、シールドの「P1/P15」・「P2/P16」と書かれているコネクタを利用する場合も、上記の「P0/P14」と書かれたコネクタを利用するのと同様の対応で OK です。