PHPやJavascript、ラズパイにSSH接続にVisual Studio Codeを使っているついでに、そろそろArduino IDEを卒業して代わりにVSCodeにPlatformIO IDEを導入して使ってみることにします。
最近はM5StackやM5Paperが増えたので、ESP32やマイコンボードをVisual Studio Codeで使うためのインストール・設定を解説していきます。
最後の項目で、Visual Studio CodeとPlatformIO IDEでArduino.hが無いエラーになったので、その回避方法も説明していきます。
Visual Studio Code イントールと日本語表示
Visual Studio Codeとは？
Microsoftの高速オープンソースコードエディターで、コーディング（プログラムを書く）からデバッグ（プログラムを実行してバグを発見する）・デプロイ（開発したプログラムを本番環境で使えるようにする）までトータルな作業がVisual Studio Code一つでできます。
また、拡張機能をインストールすればできることがさらに広がります。
使いやすいのでかなり流行っているようで、自分も遅ればせながらWeb開発で使わせてもらっています。コレ便利です。
Visual Studio Codeでできること
最近はVisual Studio Codeが流行っているようで、PHP・HTML・JSなど、Web系の開発はもちろん、プラグインのPlatformIOを入れればArduino IDEの代わりとしても使えて、バージョン管理もできてかなり便利。
さらにVimも使えて、もうWindowsだけあればLinuxのテスト環境もいらないんですね・・・時代は変わってプログラムの世界もどんどん便利になります♪
自分もVisual Studio Codeはあまり使ったことが無いので、初心者向けに詳しく説明していきます。
Visual Studio Code インストール
まずは、こちらのページからVisual Studio Codeをダウンロード・インストールしていきます。
適当にお使いのOSをクリックするとダウンロードが始まって、DL完了後にダブルクリックで起動させてインストールしてください。
Visual Studio Codeを日本語表示にする
インストールが完了したらVisual Studio Codeを起動すると↓英語表示になっていますので、まずは日本語表示にするととっつきやすくなりますので、設定をしていきましょう。
View ＞ Command Paletteを選択↓
現在英語（en）になっているので、下のInstall additional languages…を選択↓
Configure Display Languageを探します。↓
すると以下のように日本語が表示されるのでInstallボタンを押す。↓
最後に右下のRestart Nowを押して再起動すると日本語表示になりました♪
これで、Visual Studio Codeの最初の設定は終わり、
おまけ、テキストエディタVim（ヴィム）もあるヨ
拡張機能にはマウスを使わずにキーボードが高速入力可能なテキストエディタVim（ヴィム）もあります。（正確にはGVim（ジーヴィム）なのかな？）
CUI（キャラクターユーザーインターフェース）が好きなLinuxユーザーでVim操作が好きな方には最適ですね。
拡張機能のブロックアイコンで「Vim」と検索すると出てきます。
インストールすると右窓のエディタ部分がVim操作できるようになります。
Vimの拡張機能で「無効にする」を押すとVimが無効になって、普通のエディタに変わりすので、Vimを練習したい場合にも最適。
PlatformIO IDE 拡張機能インストール
続いてVisual Studio CodeにPlatformIOをインストールしていきます。
PlatformIOはESP32やESP8266、M5Stack、Arduino UNOなどのマイコンやフレームワークに対応したVisual Studio Codeプラグインの組み込み用IDEで、マイコンボードをArduino IDEの代わりにかなり便利に開発可能。
まぁ、いろいろと出来ますが説明が難しくなるので、Visual Studio Codeにプラグインとして追加すれば、Arduino IDEの代わりに便利に使えますということです。
ちなみに、Arduino IDEを別途インストールしたり、Visual Studio Codeの拡張機能のArduino IDEをインストールする必要はありません。
拡張機能PlatformIO IDEインストール
左下の①ブロックアイコン（機能拡張アイコン）を押して②「PlatformIO」と検索すると、③「PlatformIO IDE」が出てくるのでインストールしましょう。
PlatformIO IDEユーザー登録
特にユーザー登録する必要はなさそうですが、PlatformIOにユーザー登録しないと新しいProjectを作成できないようだった？（勘違いでした。ユーザー登録しないでもプロジェクト作成できます。）登録したらプロジェクト作成できるようになりました。
自分はメンドウなのでGithubのIDでPlatformIOを登録しました。
ユーザー名・メルアド・姓・名の登録が必要で、アクティベーションのメールが届きます。
もし、PlatformIOでプロジェクトを作れないようでしたら登録作業をしてみてください。
PlatformIOで新しいプロジェクト作成
プロジェクトが作成できるようになったら、PlatformIOのHOME↓の右側に「New Project」が表示されるので新しいプロジェクトを作ってみましょう。
↑数字の順番にクリックすれば新しいプロジェクトを作れます。
今回は、PlatformIOがうまく使えるかテストするためにESP32マイコンボードの内蔵LEDをLチカさせてみましょう。
使うのは↓ESP-WROOM-32で青LEDはLED_PIN 2を指定すると使えます。
プロジェクトウィザードが表示↓されるので、NameとBoardを選択します。
Boardは大量のマイコンボード名がリストになりますのでESP32と入力すると探しやすいです。
- Name：プロジェクト名（なんでもOK）
- Board：ESP32を入力して「Espressif ESP32 Dev Module」を選ぶ
- Framework：Arduino（Boardを選ぶと自動で表示されるので、いじらない）
- Location：チェックを外すと好きなフォルダに保存可能。
Locationにチェックを入れておいたままプロジェクトを作ると以下のフォルダに保存されます。
C:\Users\<ユーザー名>\Documents\PlatformIO\Projects\<プロジェクト名>
main.cppを編集
プロジェクトができたら左上のファイルアイコンのsrcにあるmain.cppがボードのプログラムを書くファイルになります。
main.cppを編集していきましょう。
例としてLチカするのにブレッドボードや抵抗・LEDを接続するのがメンドウなので・・・ボードに付いている青LEDを点滅Lチカする実験をしてみます。
ソースは以下、コレを main.cppにコピーします。
#include <arduino.h>
#define LED_PIN 2
void setup() {
Serial.begin(115200);
delay(100);
Serial.printf("%s - run\n",__func__);
pinMode(LED_PIN, OUTPUT);
}
void loop() {
digitalWrite(LED_PIN, HIGH);
Serial.printf("%s - LED_PIN - HIGH\n",__func__);
delay(1000);
digitalWrite(LED_PIN, LOW);
Serial.printf("%s - LED_PIN - LOW\n",__func__);
delay(1000);
}
プログラムできたらビルドしてみる
ビルドは簡単に言うとプログラムにバグがないかチェックして、問題なければ実行できるものに変換する作業。
Arduino IDEでは左上のほうにチェックアイコンのコンパイル↓がありました。
このコンパイルとほぼ同じ役割ですね。
PlatformIOのビルドは↓下左のほうにあるチェックアイコンを押します。
ビルドに成功すると↓SUCCESSの表示になります。失敗はFAILED表示になる。
ビルドがうまくいかなくてFAILEDになった場合は下のPlatformIOのエラーの項目をご覧ください。
デバイスのポートを確認する
ポートはPlatformIOが自動的に検出して選んでくれるので、特に選択する必要はありません。
もし必要であればplatformio.iniにupload_port=14（←ポート番号）を追加して指定すればOK
シリアルモニタ
シリアルモニタはデフォルトでの速度を設定していきましょう。
シリアルモニタの速度を115200にする場合は以下の行を追加します。
monitor_speed = 115200
ボードに書き込んだあとのシリアルモニタはコンセントアイコンをクリックすると表示されます。次の項目で説明しますね。
ESP32ボードにアップロード
ここまでうまくいったらESP32に書き込んでみましょう。
画面下左のほうの「→」右矢印アイコンを押すと書き込みが始まります。
ターミナルの表示が「…….._____……….._____.」の表示になったらESP32ボードのBootボタンを押すと書き込みが始まります。
上記のようにSUCCESSが表示されたら成功です♪
ESP32ボードに書き込んだあとに↓コンセントアイコンをクリックすると、ターミナルのタブにSerial.printfが「loop – LED_PIN – HIGH」などと出力されます。
Lチカできました❤
これでArduino IDEを卒業してVisual Studio Code+PlatformIO IDEでESP32などのボードを書き込みできるようになりました。
プログラムを手軽にダウンロードできるようにGitをインストールする
Visual Studio CodeはGitを使うことで、プログラムをダウンロードできるようになります。
Gitとは？
ここで簡単にGitを説明します。
Gitは分散型バージョン管理システム（VCS）で、おおざっぱに言うとプログラムのソースコードの変更履歴を記録します。
Gitを使うとプログラムを書いているときに、前の状態に戻りたい時に、簡単に戻れることを可能にします。
一人で開発している場合にも、以前のコードが必要になる場合があるのでプログラマーにとってバージョン管理はけっこう重要になってきます。
今回は、プログラムをダウンロードして利用するのみなので、Gitの詳細は理解する必要はありません。
誰かが書いたプログラムの最新バージョンや古いバージョンをダウンロードできるツール、くらいに理解しておけばいいでしょう。
GitHubとは？
GitとGitHubは違うもので、GitHubはプログラマが開発したプログラムを公開するサービス（サイト）。
たくさんのプログラマのGitリポジトリ（保管場所）が集まったものがGitHubになり、プログラマは必須ツールで、プログラマでない方も結構使う方はいるのではないでしょうか。
ESP32などマイコンボードのツールをダウンロードする時にも使いますね。
WindowsにGitインストールする
Gitのことがちょっとだけ分かったところでダウンロードしていきましょう。
ダウンロードすると以下のようにインストーラができますのでダブルクリックして起動。
あとは、インストーラの指示どおりにNextボタンを押していきまして、コマンドプロンプトなどでGitを単体で使う場合はエディターを自分の好みのものを選んだり設定も変えていけます。
Visual Studio Codeで使うだけの場合は特に気にせずNextを押し続けてインストールすればよさそう。
Git単体ではコマンドプロンプト（Windowsの場合）を使って操作可能ですが、プログラマでない方はそこまでする必要はないかと思います。
Visual Studio CodeのなかでGitを使うとGUI（グラフィックユーザーインターフェース）で操作することができるので簡単便利です。
Visual Studio CodeのGit関連 拡張機能
Visual Studio CodeでGitをさらに使いやすくする拡張機能を備忘録的に紹介します。
GitLens
git blameの強化（プログラマの便利ツール）プログラムの変更を誰が・いつ・どの行を変更したのかをVisual Studio Codeで視覚的に確認可能。
Git history
Gitのコミット履歴を表示してくれるツール
M5PaperをPlatformIOで戻せるようにする
GitがVisual Studio Codeで使えるようになったところで、M5PaperのFactoryTestのリポジトリのクローン（プログラムの複製）をダウンロード・設定していきます。
M5Paperに別のプログラムを書き込んでも、元（工場出荷時）の状態に復旧できるようにしていきましょう。
GitHubにVisual Studio Codeからアクセス許可する
まずはGitHubからダウンロードしますので、VSCodeがGitHubにログインできるようにします。
自分はGithubのアカウントを使ってVSCodeがGitHubにアクセスできるように許可しました。
M5Paper関連のリポジトリのクローンを取ってくる
M5Paperに初期時に入っているプログラムはFactoryTestで、まずはこれをダウンロードしていきましょう。
以下のGitHubのページからダウンロード可能、Visual Studio Codeでダウンロードします。
Visual Studio Codeのファイルアイコンを押してボタンを押します。
右上のほうに「GitHubから複製」とURLを入力するフォームが表示されるので、「https://github.com/m5stack/M5Paper_FactoryTest」を入力・Enterしましょう。
すると、FactoryTestのプログラムを保存するフォルダを聞かれるので、お好きな場所に保存します。
ダウンロードすると↓以下のようにM5Paper_FactoryTestフォルダの中にファイルが保存されます。
実行ファイルのmain.cppを開くとライブラリが足りないエラーになるので、このままではM5Paperに書き込みできない。
M5Paper_FactoryTestをPlatformIOプロジェクトに登録
M5Stackライブラリを登録する前に、M5Paper_FactoryTestをPlatformIOのプロジェクトにする必要があります。
以下のように左下の①PlatformIOアイコン・②Projects・③Add ExisingM5Paper_FactoryTestのフォルダを選択・④Open “M5Paper_FactoryTest”ボタンを押す。
M5Paper_FactoryTestフォルダーは先程GitHubからダウンロードした時に保存したフォルダーになります。（上の例ではC:\Users\<ユーザー名>\Dropbox\Code\M5Paper_FactoryTest）
これで、M5Paper_FactoryTestにライブラリを登録できるようになりました。
続いて不足しているM5Stackのライブラリを追加していきましょう。
M5EPDライブラリを登録
M5Paper_FactoryTestにM5EPDのライブラリを使えるように登録します。
ちなみにライブラリは、各プロジェクトごとに登録しないといけないようです。
①PlatformIOのPIO Homeを開いて②Librariesの③フォームに「M5EPD」と入力するとM5EPDが出てきます。
注：ドジな自分は最初間違えてM5Stackのライブラリをいれてしまいました・・「M5EPD」と検索してM5Paper用のライブラリをインストールしましょう。
M5EPDの中程にあるボタンを押します。
先ほど作成したプロジェクト（M5Paper_FactoryTest）を選択してAddボタンを押す。
余計なライブラリを誤ってインストールした場合
①PlatformIO・②Libraries・③Installedで削除したいライブラリをUninstallします。
余計なライブラリが入っているとビルド失敗します。自分の場合はM5Stackを入れていたのでビルドエラーで終了してしまいました。
M5Paper_FactoryTestをビルドしてみる
準備ができたのでいよいよビルドしてみましょう。
うまくいきました♪、これで心置きなくM5Paperにプログラムを書き込んで、元に戻したくなったら初期状態に戻せます。
M5Paperのページやプログラム
M5Paperの使用やExampleが載っている公式ページ。
今ページを見ながらM5Paperをちょっと改造してみます。
M5Paper ライブラリ
これが無いとArduino IDEでもVSCode+PlatformIOでもM5Paperに書き込めません。
サンプルプログラム
サンプルプログラムはカレンダーやTodoもあるので試してみます。
ローカルのLinux(ラズパイ）にSSH接続
ついでにラズパイやJetson nanoにVisual Studio CodeからSSH接続する設定もみていきましょう。
Remote Development インストール
必要な拡張機能はRemote Developmentです。
左下のほうにある①ブロックアイコン・②Remote Developmentと入力・③インストールの順にやってみます。
すると、Remote – WSL・Remote – SSH・Remote -Containersも必要ということで自動でインストールされました。
ラズパイに接続
拡張機能を
左下のほうの①パソコンアイコン・②SSH Targets・③「+」ボタンを押して接続したラズパイの「ID@IPアドレス」を入力
リターンすると、Linux・Mac・Windowsの表示になりますのでLinuxを選ぶと↓以下のような画面になるので「Continue」↓を選ぶ。
続いて、パスワードを入力する画面になるのでパスワードを入力すると接続完了。
接続したラズパイのファイルを開いてみましょう。
フォルダを開いて、
これでラズパイの中のファイルにアクセスできた。↓
PythonファイルUTF-8 文字化け（未解決）
ラズパイのファイルを起動すると、日本語が文字化けするので直していきます。
まずは、ファイル ＞ ユーザー設定 ＞設定を開く
Encoding
エンコーディングがUTF-8になってないんじゃない？と思って、テキストエディター ＞ ファイル ＞ Encodingをチェックすると、ちゃんとUTF-8になってる。
これはユーザー・リモート・ワークスペースの全てUTF-8になっている。
AutoGuessEncoding
テキストエディター ＞ ファイルにあるAutoGuessEncodingもユーザー・リモート・ワークスペースの全てにチェックを入れた。
これでも文字化け治らない。
ソースコードの文字設定
右下のほうにある文字設定が「ISO 8859－2」だから文字化けしてるのかと思って変更してみた。
UTF-8に変更・・・
したけどまだ文字化けする。ううん・・・ダメだ。
未解決。
PlatformIOのエラー Arduino.hが無い！と言われる
ここからは自分がハマったトラブル回避法を説明していきます。
Visual Studio Codeに拡張機能や設定などを加えていったあとにPlatformIOをインストールしして、main.cppを開いたらArduino.hが無い！と言われる、エラーになった。↓
PHPやSSHで使ってました
もともとVisual Studio CodeはPHP言語で使っていて、ラズパイにSSHで接続していたので、そのあたりの設定が邪魔したのかもしれません。
試しに他のパソコンにVisual Studio CodeとPlatformIOだけを新規インストールして、試したところ、Arduino.hが無いエラーにはならなかったので、なにかが邪魔するかコンフリクトしているような気がする。
いろいろと原因を調べたり、.vscod/c_cpp_properties.jsonファイルにパスを追加したりしたけどエラーはずっと出てコンパイルも不可。
なので、全ての設定を初期状態にすることにした。
Visual Studio Code 全ての設定を削除して初期化
Visual Studio CodeとPlatformIOを初期化するために削除するもの一覧
- C:\Users\<ユーザー名>\AppData\Roaming/Code/User/settings.json
- C:\Users\<ユーザー名>\.vscode
- C:\Users\<ユーザー名>\.platformio
- C:\Users\<ユーザー名>\Documents\PlatformIO（Project作った場合のみ）
その他のVSCodeの設定フォルダ
- C:\Users\<ユーザー名>\AppData\Local\Programs\Microsoft VS Code
WindowsのVisual Studio Codeの設定ファイルを削除
WindowsのVisual Studio Codeの設定は↓
%APPDATA%/Code/User/settings.json
ちなみに%APPDATA%はデフォルトで以下のパスになります。
C:\Users\<ユーザー名>\AppData\Roaming
Visual Studio Codeの設定を全て削除
C:\Users\<ユーザー名>\.vscode
PlatformIO IDEの設定を全て削除
C:\Users\<ユーザー名>\.platformio
PlatformIO IDEのプロジェクトを削除
PlatformIO IDEで新しいプロジェクトを作った時に「Use default location」にチェックを入れた場合ここに保存される。
C:\Users\<ユーザー名>\Documents\PlatformIO
これでVisual Studio CodeとPlatformIOともに初期の状態に戻りました。
再起動してPlatformIOを再度インストール・プロジェクトを作成するとmain.cppのArduino.hが無いエラーが消えました。
ふぅ、これでやっとスタート地点に立てて、Visual Studio Code+PlatformIOでマイコンボードの開発ができるぞ！
正常時の.vscod/c_cpp_properties.jsonの状態
正常時にはincludePathにたくさんのパスが追加されていますが、エラーになる場合は3行ほどしかパスが追加されていませんでした。
何回か実行してErrorで5回ほど実行でやっとSuccessになる
#include <Arduino.h>は無事パスが通ったようで、エラーにはならなくなりました。
試しにESP32のマイコンボードに付いているLEDをLチカさせるためにコンパイルしてみましたが、今度はビルドするとまた違うファイルが無いようでエラーを繰り返す・・・↓
ただ、しつこくビルドを繰り返すと↓なぜかビルド成功しちゃった。
なぜうまくいったかは不明。何回か繰り返すと自動的にパスが通るようになっているのかな？
分かりません。（わかったら追記していきます。）
とりあえずうまく行ったのでESP32やM5Stackで遊んでみます。
コメント