【初見にオススメ】Raspberry Pi PicoをブラウザだけでLチカする入門 (Web Serial API)


この方法だとターミナル系ソフト使わずにLチカまで最速でいけるんじゃないでしょうか。
Macでやっていますが、Windowsでも問題無い気がします。

## Raspberry Pi Pico

Raspberry Piシリーズから出たマイコンです。Raspberry Piが出したArduinoみたいなイメージを持っています。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/raspberrypipico?src=hash&amp;ref_src=twsrc%5Etfw">#raspberrypipico</a> のサイズ。<br><br>銀のエンゼルと横幅が同じくらい<br>縦幅はエンゼル2個分。<a href="https://twitter.com/hashtag/iotlt?src=hash&amp;ref_src=twsrc%5Etfw">#iotlt</a> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/%E3%83%81%E3%83%A7%E3%82%B3%E3%83%9C%E3%83%BC%E3%83%AB?src=hash&amp;ref_src=twsrc%5Etfw">#チョコボール</a> <a href="https://twitter.com/hashtag/raspberrypi?src=hash&amp;ref_src=twsrc%5Etfw">#raspberrypi</a> <a href="https://t.co/wv74SxBE8A">pic.twitter.com/wv74SxBE8A</a></p>&mdash; 菅原のびすけ (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/1357296978061713415?ref_src=twsrc%5Etfw">February 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

特徴はこんな感じです。↓

* 小さい - 銀のエンゼル
* 安い - 500円くらい
* GPIOがけっこうある
* MicroPythonとC/C++で書く
* 通信モジュールは無い

通信モジュールは無い = **Raspberry Pi PicoはWi-FiやBluetoothは付いてません。**

これが良くも悪くも大きな差別化ポイントな気がしますね。
なのでIoTというかTですね。

## 今回やることはLチカ

とりあえずLチカだと思うので最速でそこまで行ってみます。

とりあえず最初はパソコンとRaspberry Pi PicoをUSBケーブルで接続してREPL（コマンドライン）でプログラムを書き込んでいくスタイルです。

> ![](https://i.gyazo.com/3ebd350fc5687de0208b07a3ca229fd6.jpg)

この時にCLIツールなどでシリアル通信をするのが主流ですが、 **ブラウザだけでシリアル通信が使えるWeb Serial API**のデモページを使ってみます。

Google ChromeがあればOKです。

## MicroPythonを使えるようにする

まずは準備です。

こちらの[Getting startedのページ](https://www.raspberrypi.org/documentation/pico/getting-started/)を元に見ていきます。

* `Getting Started with MicroPython`のタブに移動します。

> [![Image from Gyazo](https://i.gyazo.com/6f7df1870f00f260d5108339f3a3b25f.gif)](https://gyazo.com/6f7df1870f00f260d5108339f3a3b25f)

* `Download UF2 file`のボタンから`UF2ファイル`をダウンロードしましょう。
* Raspberry Pi PicoのBOOTSELって書いてるボタンを押しながらUSBに接続して電源を起動させます。
	* そうするとUSBフラッシュメモリを繋いだときのようにデバイスがマウントされて、Finder(エクスプローラ)に`RPI-RP2`といったデバイスが表示されます。

> ![スクリーンショット 2021-02-05 13.13.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/c73997f5-86db-6f46-0f61-ab1118fa0e6e.png "スクリーンショット 2021-02-05 13.13.43.png")

* 先ほどDLした`UF2ファイル`を`RPI-RP2`にドラッグ&ドロップします。

これで完了です。MicroPyhtonが利用できるようになりました。
`RPI-RP2`は自動的にマウントが解除されます。

## Web Serial APIから書き込み

Web Serial APIはGoogle Chromeで利用できるWebブラウザからシリアル通信ができるAPIです。今回はそのデモページを利用します。

https://googlechromelabs.github.io/serial-terminal/

> ![](https://i.gyazo.com/1a8477ca0faad6ac88a1af78c9d870d5.png)

ポートを選択し、Connectボタンを押します。
接続されたら、下の黒い画面を選択して一度Enterを押します。

`>>>`という表示になるので、そこで↓のプログラムを書いていきます。

> [![Image from Gyazo](https://i.gyazo.com/edaed4a99a01acf25a4dd57fe5c95d52.gif)](https://gyazo.com/edaed4a99a01acf25a4dd57fe5c95d52)

一行コピペしたらEnterで次の行に進みます。

```REPL
>>> from machine import Pin
>>> led = Pin(25, Pin.OUT)
# LED光らせる
>>> led.value(1)
# LED消灯する
>>> led.value(0)
```

これでLチカができました。GPIO25に内蔵LEDがつながっているみたいですね。

※使えない場合は、`chrome://flags`にChromeでアクセスして、`#enable-experimental-web-platform-features`のフラグが有効になっているかを確認しましょう。


**ブラウザだけでLチカが出来てしまいましたね。**

## 所感

MicroPythonでLチカするならこれが早そうだと思いました。

次のステップとしては`.py`ファイルを作って書き込めないの？って思いましたが、

[Thonny](https://thonny.org/)というIDEを使って書き込むことを公式チュートリアルで見つけたので、次はこちらを試してみるのがおすすめです。

どうやらC/C++の方がサンプルコード充実がしているので、MicroPythonで少しさわったらC/C++でも試してみると楽しそうです。

### VS Codeから書き込み~~たい~~

VS Codeから書き込みたいなと思って調べてましたが[Pico-Go](https://marketplace.visualstudio.com/items?itemName=ChrisWood.pico-go)という拡張機能でやれる風な話題を見つけるのですが、 ~~Macからだとなのか僕は上手くいってません、できたよーって人いたら教えてもらえると嬉しいです~~ :)

* 追記1: この記事を書いた次の日に試したらPico-Goの更新が来てて、更新後に動きました。このタイミングでアップデートされた模様です。 [Raspberry Pi PicoにThonnyじゃなくてVS Codeでコードを流し込んでみる](https://qiita.com/n0bisuke/items/5fb2f1592c7bfd804015)
* 追記2: C/C++でも試してみました [Raspberry Pi PicoのC/C++開発環境をVS Code on Macで作る](https://qiita.com/n0bisuke/items/f4ff96bd74932c8def77)

## 参考

参考: [Raspberry Pi Picoを入手してみた件](https://qiita.com/emuonpsp/items/a5d48cda95589b0b9898)
参考: [Web Serial API を最短の手順で試したくてやったこと（micro:bit を利用）](https://qiita.com/youtoy/items/a0071a6d2ef7f6930d33)