ビジュアルプログラミングで Raspberry Pi Pico が扱える「Piper Make」を軽く試した時のメモ（Maker Pi RP2040 でも試す）

このツイートをきっかけに知った、「Raspberry Pi Pico をビジュアルプログラミングで扱える」開発環境の「[Piper Make](https://make.playpiper.com/)」を軽く試した時のメモです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">昨日このサイトを知り、ちょこっと遊んでみた。ブラウザ上でpico が動かせる。scratchみたいな操作感のプログラミングができて楽しい。おまけにチュートリアルも充実してる。（視覚的にピコパイのGPIOが確認できたり、mycropythonに起こしたプログラムも確認可能）<a href="https://t.co/Wq2rjH4kE5">https://t.co/Wq2rjH4kE5</a></p>&mdash; kometsubitの工作 (@kometsubitstudy) <a href="https://twitter.com/kometsubitstudy/status/1482915508056129538?ref_src=twsrc%5Etfw">January 17, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ちなみに、ラズパイ公式のツイートで、昨年 3月に紹介されていたもののようです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ラズパイの Pico を、ビジュアルプログラミングで扱える話！？ <a href="https://t.co/LraCnjtgW4">https://t.co/LraCnjtgW4</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1483015440826011649?ref_src=twsrc%5Etfw">January 17, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Piper Make とは
先ほどのラズパイ公式のツイートで掲載されていた、以下の記事を見てみると、「Piper Make」は教育xテクノロジーなことをやっているスタートアップの [Piper, Inc.](https://playpiper.in/) が提供しているもののようです。
●Drag-n-drop coding for Raspberry Pi Pico - Raspberry Pi
　https://www.raspberrypi.com/news/drag-n-drop-coding-for-raspberry-pi-pico/
![Drag-n-drop_coding_for_Raspberry_Pi_Pico_-_Raspberry_Pi.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/49fadc63-26e2-97a1-98b2-225a5156c8dc.jpeg)

CircuitPython や　MicroPython などで開発をする話が良く出ている Raspberry Pi Pico の開発を、ビジュアルプログラミングで実現できてしまうようです。

## Piper Make を試す
自分の手元には、以前買っていた Raspberry Pi Pico があるので、早速試してみました。

### セットアップの流れ
まずは、軽くセットアップの流れを紹介しておきます。

開発環境のトップページの URL は「 https://make.playpiper.com/ 」です。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">さて、軽く見てみたり、試したりできればと。<a href="https://t.co/l1zzbT1xLo">https://t.co/l1zzbT1xLo</a> <a href="https://t.co/XbhPtlXnjO">pic.twitter.com/XbhPtlXnjO</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1483057412882206721?ref_src=twsrc%5Etfw">January 17, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

この画面を下に進むと、緑色の「Setu my Pico」と書かれた部分があるので、ここをクリックして先へ進みます。
![セットアップ用.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ed3b5452-b3b5-6416-d73e-5890e3a18202.jpeg)

そして、Raspberry Pi Pico へファームを書き込む手順が、イラストや文字で案内されるので、それに従って進めます。おおまかには、以下の流れになります。

1. Raspberry Pi Pico の「BOOTSELボタン」を押して PC に USB接続する
1. PRI-RP2ドライブとして PCに認識された状態になったら、それをファーム書き込みの対象の場所として GUI上で選ぶ
1. ファームの書き込みが行われる（その際、2つくらい「書き込んで良いですか？」的な確認が表示されるので、それらを許可するようにする）

途中に画面で表示される内容の細かなところは、以下の記事の画像を見ていただくのが良いかもしれません。
　●Setting Up Your Raspberry Pi Pico on Piper Make | Piper Make With the Raspberry Pi Pico | Adafruit Learning System
　　https://learn.adafruit.com/piper-make-with-the-raspberry-pi-pico/setting-up-your-raspberry-pi-pico-on-piper-make

### プログラムを動かす
準備ができたら、ブロックのプログラムを組んでいく画面へ進みます。
トップページの上部に、緑色の「Getting Started」と書かれた部分があるので、それをクリックして以下の画面へ進みます。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">先へ進んでいく <a href="https://t.co/0vjCSyV7RT">pic.twitter.com/0vjCSyV7RT</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1483057849517641732?ref_src=twsrc%5Etfw">January 17, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

この画面の左下に「CONNECT」と書かれた緑の部分があるので、Raspberry Pi Pico をつないだ状態で、それを押します。

そうすると、接続設定を行う表示がブラウザの左上のほうに出てくるので、そこでリストの中の Raspberry Pi Pico に該当するものを選んで、「接続」ボタンを押します。
![シリアルポートへの接続.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f551124a-5b8a-ba1c-0820-93079fd3a1e6.jpeg)

あとは、ブロックのプログラムを作り、画面の左上あたりにある「START」のボタンを押せば OK です。
ちなみに、自分が試したのは、Raspberry Pi Pico がキーボードのように動く（HIDデバイスとして動作する）というものです。

以下のように、ブロック 4つだけと Raspberry Pi Pico本体のみで試せるものにしました。
（写真では Raspberry Pi Pico が Grove Shield for Pi Pico にささってますが、今回の内容には特に関係ありません）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ビジュアルプログラミングで Raspberry Pi Pico が扱える「Piper Make」と、Raspberry Pi Pico 本体のみを使って、<br>「Raspberry Pi Pico から（キーボード的なふるまいで）キー入力をする」というプログラムを試して、無事動作するのが確認できました！ <a href="https://t.co/pB4gZDqaio">pic.twitter.com/pB4gZDqaio</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1483063818708463617?ref_src=twsrc%5Etfw">January 17, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 別デバイス（Maker Pi RP2040）でのお試し
ここで、「手元にある別のデバイスである Maker Pi RP2040 も使えたりするのでは？」と思い、試してみました。
「Maker Pi RP2040」は、RP2040 を搭載という点で Raspberry Pi Pico と共通点があるデバイスです。

さらに、Raspberry Pi Pico が標準搭載していない、様々なパーツを標準搭載しています。
　●Maker Pi RP2040 - スイッチサイエンス
　　https://www.switch-science.com/catalog/7285/

上記のスイッチサイエンスさんのオンラインサイトから一部を引用すると、例えば以下のような仕組みが内蔵されています（※ これで全部ではないです）。

- ロボット制御ボード
    - 4 x サーボモーター
    - 2 x DC モーター（クイックテストボタン付き）
- 13 x ステータス表示LED（GPIOピン用）
- 1 x ピエゾ圧電ブザ（ミュートスイッチ付き）
- 2 x プッシュボタン
- 2 x RGB LED （Neopixel）
- 7 x Groveポート（柔軟なI/O動作オプション：デジタル、アナログ、I2C、SPI、UART...）

つまり、ハンダ付けやブレッドボードを使った配線などをやらなくても、いくつかの入出力を実現するための機能を備えてしまっています（そして、そのわりにかなり安価！）。

結果を示すと、Raspberry Pi Pico の時と同じように動作しました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ビジュアルプログラミングで Raspberry Pi Pico が扱える「Piper Make」を使う話。<br>RP2040 を搭載という点で Pico と共通の Maker Pi RP2040 も使えてしまったぞ！<br><br>ボタン・複数の LED、Groveコネクタを標準搭載していて安価なデバイスなので、楽しいことがいろいろ手軽に試せそう！！ <a href="https://t.co/xUlaA88sPO">pic.twitter.com/xUlaA88sPO</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1483070012844015619?ref_src=twsrc%5Etfw">January 17, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

余談ですが、つい最近、Maker Pi RP2040 で Zoomアプリの操作をする（特定のショートカットキー操作を、Maker Pi RP2040 で実行する）というのを、やってみてました。
この時は、CircuitPython を開発言語に用いて、ライブラリで adafruit/Adafruit_CircuitPython_HID を使っていましたが、今回のビジュアルプログラミングで同じことができてしまいそうです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Maker Pi RP2040 をキーボード（HIDデバイス）として認識させる件の続き（CircuitPython で adafruit/Adafruit_CircuitPython_HID を利用）。<br><br>デバイス上のプログラマブルボタンを押した時に、Zoom のカメラの ON/OFF操作に割り当てられてるショートカットキーが実行されるようにしてみた！ <a href="https://t.co/UBh9HnCPpG">pic.twitter.com/UBh9HnCPpG</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1480940040071294977?ref_src=twsrc%5Etfw">January 11, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そういえば、記事の下書きをある程度は作った状態にしていたものの、完成させられてなかった...
以下が、その下書きの冒頭の部分のキャプチャです。
![下書きの記事.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a248de2a-420f-3f1c-f0b8-a63df20ae9a5.jpeg)
書き上げて公開せねば！

#### 【追記】上記の書きかけだった記事を完成させて公開
●Maker Pi RP2040 をキーボードとして認識させてキー入力（Raspberry Pi Pico と同じ RP2040 を搭載したデバイス） - Qiita
　https://qiita.com/youtoy/items/3ad628354a64015a9cea

### HIDデバイスとしての動きを実現するブロック
今回のお試しでも少し使っていた HIDデバイスとしての機能、それを実現するのに使えるブロックは以下のようなものがあるようでした。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">キーやマウス操作などといった、HIDデバイスとしての処理を扱うためのブロック、このあたりです。 <a href="https://t.co/StxYRBFzLD">pic.twitter.com/StxYRBFzLD</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1483066190633508864?ref_src=twsrc%5Etfw">January 17, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## その他
今回のお試し内容を決めるきっかけとなった記事がありましたので、それを紹介しておきます。
（上記のセットアップ手順の中で、途中に表示される画像の参照先としても示していた記事の、別ページの部分です）
　●Two Keyboard Macro Pad | Piper Make With the Raspberry Pi Pico | Adafruit Learning System
　　https://learn.adafruit.com/piper-make-with-the-raspberry-pi-pico/pi-pico-macropad

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">さきほど知った、「Piper Make」を検索して見つけた記事の1つ。<br><br>これはキーボード的なふるまいをさせるやつを、ビジュアルプログラミングでやってるのでは！？<br><br>●Two Keyboard Macro Pad | Piper Make With the Raspberry Pi Pico | Adafruit Learning System<br>　<a href="https://t.co/B19Me5ljB2">https://t.co/B19Me5ljB2</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1483019177141374979?ref_src=twsrc%5Etfw">January 17, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 【追記2】 テキストで書かれたプログラム
他のビジュアルプログラミング環境でも、ブロックのプログラムをテキストのプログラムに変換できたり、テキストのプログラムも書けたりするものがあります。

Piper Make も、以下の画像で示した部分でテキストのプログラムを見られるようです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">&quot;Piper Make&quot; をあらためて見ていて、テスト的に作ったものを見てたら、すごく見覚えのあるコードが出てきたｗ<br><br>↓この時インポートしたライブラリとかだ。<br>●Maker Pi RP2040 をキーボードとして認識させてキー入力（Raspberry Pi Pico と同じ RP2040 を搭載したデバイス）<br>　<a href="https://t.co/qkn1jnERCw">https://t.co/qkn1jnERCw</a> <a href="https://t.co/RtgDXbr3Ju">pic.twitter.com/RtgDXbr3Ju</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1483467019102322688?ref_src=twsrc%5Etfw">January 18, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

具体的にはこのようなプログラムです。

```python
## ---- Imports ---- ##
import time
import usb_hid
from adafruit_hid.keyboard import Keyboard
from adafruit_hid.keyboard_layout_us import KeyboardLayoutUS
from adafruit_hid.keycode import Keycode

## ---- Definitions ---- ##

time.sleep(1)
keyboard_HID = Keyboard(usb_hid.devices)
keyboard_HID_layout = KeyboardLayoutUS(keyboard_HID)


## ---- Code ---- ##
time.sleep(4)
keyboard_HID.press(Keycode.FORWARD_SLASH)
time.sleep(1)
keyboard_HID.release(Keycode.FORWARD_SLASH)
```

以下の記事に出てくる話のときには、CircuitPython で開発したのですが、キー押下の処理に違いが少しあったり等するようでした。

●Maker Pi RP2040 をキーボードとして認識させてキー入力（Raspberry Pi Pico と同じ RP2040 を搭載したデバイス） - Qiita
　https://qiita.com/youtoy/items/3ad628354a64015a9cea
![CircuitPythonで実装した時のもの.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e92b43ea-6666-5e6c-3b1f-619989b920fc.jpeg)

このあたりは、これからもう少し見ていければと思います。