Ubuntu 20.04 にインストールした Visual Studio Code で M5Stack アプリの開発環境を作る


この記事は、富士通ソーシアルサイエンスラボラトリ Advent Calendar 2020の 14 日目の記事です。

@GORO_Neko です。毎度毎度の御挨拶をば、ご存知の方ご無沙汰してます。初めての方お初にお目にかかります。

いつも通りではりますが、まずお断りをば一言。

ボク、仕事では「未だ」(そう…未だ…( ;∀;))一切組み込み系のお仕事をしておりません。

以下は、自分が所属する会社の意向を反映したものでもスタンスを示すものでもなく、単なる一個人の趣味の活動から産まれた記述です。

いつの間にか Visual Studio Code が Arduino をサポートするようになっていた

ちょっと前に、ぼぉ〜っとVisual Studio Code(以降 VSCode と略記)の Extensions を眺めていたら、「Arduino」となる Extension が加わっていることに気が付きました。しかも製作者 Microsoft 。

「えっ?」と思っネット等検索してみたら、いつの間にか VSCode のエディタを使って、Arduino 言語によるアプリケーションのコードを編集できたり、マイコンボードにビルドしたアプリケーションをデプロイ出来たりするようになっていたようです。

もっとも VSCode に Arduino 言語のコンパイラが実装されたりしたわけではなく、同じマシンにインストールされた Arduino IDE の機能を toolchain として呼び出してビルドを実行します。

Arduino 対応のマイコンボードが増えたり扱うセンサーが増えた場合、新たなライブラリをネット上から取得して、Arduino IDE が管理するライブラリディレクトリに追加することで、それらのマイコンボードやセンサを使えるようにするのが Arduino IDE 流の対処法でしたが、そのやり方は VSCode のエディタを使って Arduino アプリのコードを編集する場合も踏襲されます。

Arduino 関連のライブラリを追加する場合は別途 Arduino IDE を立ち上げライブラリ追加を実行し、コードの編集やビルド、マイコンボードへのデプロイは VSCode で実行する開発スタイルになります。

「2つの開発環境を行ったり来たりするくらいなら Arduino IDE だけで良くない?」そう思う方、一回 VSCode を使って Arduino アプリケーションを開発してみてください。きっと二度とArduino IDE でコードのエディットしたくなくなりますよ?

環境の整備(インストール編)

今回は Ubuntu 20.04 上に VSCode を使った Arduino アプリケーションの開発環境を構築します。

必要なアプリケーションは2つ、「Arduino IDE」と「Visual Studio Code」です。

Arduino IDE の導入

インストール媒体ダウンロードサイトにアクセスし、表示された画面上の右横にある「 Linux 64 bit 」と書かれたリンクをクリックしインストール媒体(今回取得したファイル名は「 arduino-1.8.13-linux64.tar.xz 」でした)を取得します。

以下の手順を踏むことで、Arduino IDE をインストールします。
1. インストール媒体をホームディレクトリにコピー
2. インストール媒体を解凍
3. 解凍結果出来上がったディレクトリ内に移動
4. インストールシェルを実行

実際のコマンド例を以下に書きます。

$ cd ~/
$ cp Downloads/arduino-1.8.13-linux64.tar.xz .
$ tar Jxfv arduino-1.8.13-linux64.tar.xz
$ cd arduino-1.8.13
$ ./install.sh

Visual Studio Code の導入

Misrosoft が用意した VSCode のリポジトリにアクセスできるようにして、apt-get コマンドでインストールシます。

実際のコマンド例を以下に書きます

cd ~/
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64 signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'

sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install code # or code-insiders

環境の整備(設定編)

以下の3つの設定作業を行います。

1.root ユーザ以外でも、Usbシリアル接続されたデバイスにアクセスできるように OS に対し設定を行います。
2.開発対象のマイコンボードとして M5Stack、利用可能なセンサとして、温度、湿度、気圧センサを兼ね備える ENV II が使えるように Arduino ライブラリを追加します。
3.Arduino IDE と VSCode が連携して動作できるように設定を行います。

OS に対する設定

root ユーザ以外でも、Usbシリアル接続されたデバイスにアクセスできるように OS に対し設定を行います。

VSCode を用いて開発を行うユーザを、グループ dialout に追加します。

ユーザ ID が hoge である場合のコマンド例を以下に書きます

sudo gpasswd -a hoge dialout

Arduino IDE に対する設定

以下の 3 つの作業を行います。

1.ボードマネージャから espressif 社の ESP32 ボード情報を追加します。
2.M5Stack を利用するためのライブラリを追加します。
3.ENV II を利用するためのライブラリを追加します。

まず ESP32 ボード情報を追加します。

Arduino IDE のメニューを、[ツール]→[ボード]→[ボードマネージャ]と押下しボードマネージャを表示させます。

ボードマネージャ上部の検索フィールドに「ESP32」と入力し検索結果の「Espressif Systems の esp32」の欄の「インストール」ボタンを押下します。

"2." と "3." は、どちらも Arduino IDE の「ライブラリマネージャ」から追加が出来ます。
「ライブラリマネージャ」は Arduino IDE のメニューを、「ツール」→「ライブラリを管理…」と押下することで呼び出します。

M5Stack を利用するためのライブラリを追加する場合「ライブラリマネージャ」の上部右側の「検索をフィルタ…」テキストフィールドに「M5Stack」と入力します。

表示されたインストール候補一覧から「M5Stack by M5Stack」となっている表示欄を探し欄の右側にある「インストール」ボタンを押下します。

ENV II を利用するためのライブラリを追加する場合は「ライブラリマネージャ」の上部右側の「検索をフィルタ…」テキストフィールドに「Adafruit BMP280 Library」と入力します。

表示されたインストール候補一覧から「Adafruit BMP280 Library by Adafruit」となっている表示欄を探し欄の右側にある「インストール」ボタンを押下します。

VSCode に対する設定

Arduino IDE をツールチェーンとして M5Stack 用アプリケーションの開発とデプロイが出来るように設定します。

以下の 4 つの作業を行います。

1.Arduino IDE と連携して、Arduino 言語によるソースコードの編集、ビルド、デプロイが出来るように「Arduino」Extension を取り込みます。
2.Arduino IDE を呼び出せるように、Arduino IDE のインストール先ディレクトリ情報を設定します。

以下の操作を行い「Arduino」Extension を取り込みます。

VSCode の画面の一番左側に縦に並んだアイコンのうち「Extensions」を選択し、出てきた表示上段の検索フィールドに「arduino」と入力します。

出てきた候補の中から提供者が「Microsoft」となっているものをインストールシます。

次に以下の操作を行い、Arduino IDE のインストール先ディレクトリ情報を設定します。

メニューを、[ファイル]→[ユーザー設定]→[設定]と押下します。

表示された画面内の[拡張機能]→[Arduino configuration]を押下します。

表示された画面内の「Arduino:Path」のテキストフィールドに Arduino IDE のインストールパス(前述に従い hoge ユーザで Arduino IDE をインストールしていた場合は"/home/hoge/arduino-1.8.13")を記述します。

プロジェクトディレクトリの作製

まず、プロジェクト用のディレクトリを作成します。

今回はディレクトリ名を「/home/hoge/test001」とします

cd ~/
mkdir test001

VSCode を立ち上げ、「ファイル」→「フォルダーを開く」を押下し、先に作った「/home/hoge/test001」を選択します。

次にデプロイ先のマイコンボードが「M5Stack」であることを設定します。

VSCode の画面上で、[Control] と [Shift] と p を同時押し、表示された選択肢の「Arduino : Board Config」を選択します。

現れた表示の「Selected Board:」の選択肢の中から「M5Stack-Core-ESP32(esp32)」を選択します。

最後にマイコンボードとの通信に「/dev/ttyUSB0」を使うことを設定します。

再度VSCode の画面上で、[Control] と [Shift] と p を同時押し、表示された選択肢の「Arduino : Select Serial Port」を選択します。

現れた選択肢の中から「/dev/ttyUSB0」を選択します。

アプリケーションのビルドとデプロイ

ENV II から温度、湿度、気圧の各情報を取得し、M5Stack の液晶ディスプレイに表示するチュートリアルソースコードが提供元の Adafruit によって公開されています。

これを利用してアプリケーションのビルドとデプロイの方法を解説します。

ここで公開されている以下の 4 つのソースファイルを取得します。
1.Adafruit_Sensor.h
2.ENVII.ino
3.SHT3X.cpp
4.SHT3X.h

Adafruit_Sensor.h を「Adafruit_BMP280_Library」 の導入ディレクトリ(前述の手順で作業している場合 「/home/hoge/Arduino/libraries/Adafruit_BMP280_Library」ディレクトリ)にコピーします。

残りのファイルを先に作ったプロジェクト用のディレクトリにコピーします。

この状態で拡張子が「.ino」(この例だと"ENVII.ino")を表示すると、以下の画のように、画面右上に見慣れないアイコンが表示された状態の画面が現れます。

画面の①のアイコンを押下するとビルドが実行されます。

また、画面の②のアイコンを押下するとビルド&デプロイが実行され、M5Stack上でアプリケーションが動作を始めます。

若干コードを修正していますが、プロジェクトをビルドしデプロイすると、下図のような、気温と湿度と気圧を M5Stack の液晶画面上に表示させることができます。

では、また。