Github Codespacesを使ってブラウザだけでESP-IDF開発環境を作る
IoT関係の開発で一番面倒なのは開発環境を構築することじゃないでしょうか？
複数人数で開発する場合、コンパイラのバージョンを細かく合わせたり、M1 macの場合はそもそもtoolchainが対応していない場合もあります。
Web開発では最近GitHub Codespacesを使ってVSCodeとDocker環境をブラウザだけで作り、その上で開発できるのですが、IoTの場合はデバイスの書き込みの方法がありません。
ということで、私が主に使っているESP32の開発環境のESP-IDFをCodespaces上のVSCodeで動くようにし、その上でWeb Serialを使ってブラウザ(Chrome)から直接デバイスに書き込みできるVSCode機能拡張を作りました。
使い方は簡単、上の機能拡張をインストールしてCommand paletteから”start esp updater”を起動するだけです。
この時、Codespacesを開くブラウザはChrome/Edge/Operaを使ってください。2021年末の時点でWeb Serialをサポートしているのはこれらのブラウザです。iOSやAndroidではサポートされていません。
使い方については上のビデオを見ていただければわかると思います（手抜き
早速試してみるには
まず、Codespacesを使うにはβテストに申し込む必要があります。下記サイトから申し込んでください。現在は無料で使えるようです。
ESP-IDFの環境設定をしたサンプルリポジトリを作ったので、Chrome/Edge/Operaでこれを開いて①②③の順に押してください。皆さんの環境では①のボタンは普通に白だと思います。
これでブラウザでESP-IDFが動いています。⌘ | Alt + E → Bでビルドをした後、Command paletteから”start esp updater”を起動すると別タブでツールが起動します。ロード中のまま進まない時はリロードしてください。
USBにESP32デバイスを接続し、青い「Connect」ボタンを押して適当なものを選択した後「Write」ボタンで書き込みが行われます。
ESP-IDFの環境は、.devcontainer/devcontainer.json で設定されています。特定のバージョンを入れたい場合などはこちらをいじってください。
一番のメリットは、一人で開発していても半年、1年後に自分で触った時に環境の再構築を行う必要がないことです。
今までの開発で「古いコードをビルドしたいけど環境がないな」と思った方は是非この方法を試してみてください。
わからないことがあれば、Pull RequestへパッチやTwitterへの書き込みお待ちしています。