こんにちは。絹ごしです。
今回は、当サークル初の技術書の発行に合わせて、M5Stackの開発環境構築について
解説記事を書かせていただきます。
![](https://booth.pximg.net/c/620x620/89cac75b-afbd-45fc-939f-9f2891740da7/i/3117713/ca5754af-a0f8-4ed7-8b23-8de196f36732_base_resized.jpg)
技術書頒布中!
M5Stackの開発環境はいくつかあるのですが、
今回は『Visual Studio Code』で使用できるプラグインである『PlatformIO』を導入する手順を
ご紹介します。
他の開発環境については、下の記事を参考にしてみてください。
Visual Studio Codeをインストールする
まず、この環境を構築するに当たって『Visual Studio Code(以下 VSCode)』をインストールする必要があります。
VSCodeでできることや、DLサイトの紹介を以下の記事で行ってますのでご確認ください。
VSCodeが無事にインストールできましたら、本題に移っていきましょう。
PlatformIO IDEの導入
PlatformIO IDEは、VSCodeで使用する拡張機能です。
早速導入していきましょう。
拡張機能のページを開き、検索欄に『platform ide』と入力します。
一番上に出てくるプラグインが、今回使用するものになりますので、インストールしましょう。
![](https://frees.jp/wp-content/uploads/2021/12/pio-set1_A-1024x555.png)
インストールが完了すると、左側にPlatformIO専用のアイコンが追加されます。
![](https://frees.jp/wp-content/uploads/2021/12/pio-set2_A.png)
プロジェクト作成
アイコンクリック→『OPEN』の順番でクリックすると、メインページが表示されます。
![](https://frees.jp/wp-content/uploads/2021/12/pio-set3_A-1-1024x555.png)
『New Project』をクリックして新規プロジェクトを作成します。
表示されたウィンドウで必要事項を入力していきます。
今回は以下のように入力しました。
① Name: test
② Board: M5Stack Core ESP32
③ Framework: Arduino
![](https://frees.jp/wp-content/uploads/2021/12/pio-set4_A-1024x555.png)
「Please wait…」と言われるので気長に待ちましょう。
![](https://frees.jp/wp-content/uploads/2021/06/pio-set5-1024x555.png)
プロジェクトの作成が終わると、下の画面が表示されます。
![](https://frees.jp/wp-content/uploads/2021/06/pio-set7-1024x555.png)
左のツリーの『> src』→『main.cpp』の順番でクリックしましょう。
プログラムを入力する画面にたどり着きます。
![](https://frees.jp/wp-content/uploads/2021/12/pio-set8_A-1024x555.png)
ここにプログラムを入力していきます。
M5Stackライブラリのインストール
次にM5Stackを使用するためにライブラリを導入します。
左下のメニューから家のマークをクリックし、メインページに戻ります。
![](https://frees.jp/wp-content/uploads/2021/06/pio-set3-1024x555.png)
左のアイコンメニューの『Libraries』をクリックします。
![](https://frees.jp/wp-content/uploads/2021/06/pio-set10.png)
検索欄に『m5stack』と入力してEnterキーを押します。
表示された一覧から『M5Stack by Zibin, M5Stack』を選びます。
![](https://frees.jp/wp-content/uploads/2021/06/pio-set11.png)
ライブラリのページに遷移するので、『Add to Project』をクリックします。
表示されたウィンドウで先ほど作成したプロジェクトを選択し、右下の『Add』をクリックします。
![](https://frees.jp/wp-content/uploads/2021/06/pio-set12.png)
少し待ってウィンドウが消えたら完了です。
操作について
左のメニューの『Projects』をクリックし、先程作成したプロジェクトの『Open』をクリックしてプロジェクトを開きましょう。
![](https://frees.jp/wp-content/uploads/2021/06/pio-set13.png)
左下のアイコンメニューから、ビルドやプログラムの書き込みを行うことができます。
画像の赤丸部分です。
![](https://frees.jp/wp-content/uploads/2021/06/pio-set9.png)
左から順番に、『ビルド』『アップロード(書込み)』『クリーン』『シリアルモニター』になります。
M5Stackへプログラムの書き込み
動作確認として、M5Stackのサンプルプログラムを書き込んでみます。
まずはサンプルプログラムを入手しましょう。
先程紹介した手順でライブラリページを開き、『Installed』のタブをクリックします。
![](https://frees.jp/wp-content/uploads/2021/06/pio-set14.png)
先程インストールしたM5Stackライブラリが表示されるため、クリックします。
開いたページのリストをクリックすると文字入力ができるようになるので、「helloworld」と入力します。
表示されたコードを丸々コピーして、自分のプロジェクトの「main.cpp」に貼り付けます。
![](https://frees.jp/wp-content/uploads/2021/06/pio-set15.png)
![](https://frees.jp/wp-content/uploads/2021/06/pio-set16-1024x689.png)
『ビルド』アイコンをクリックして、エラーがないか確認します。
![](https://frees.jp/wp-content/uploads/2021/06/pio-set17-コピー.png)
問題なければ、隣の『アップロード』アイコンをクリックしてM5Stackに書き込みます。
書込み後、M5Stackが自動で再起動し、画面に『Hello World』と表示されたら成功です。
以上で、動作確認は完了となります。
最後に
今回はVSCodeのプラグイン『PlatformIO IDE』を使用したM5Stack用の開発環境構築について
ご紹介させていただきました。
参考になっていれば幸いです。
個人的には、『Arduino IDE』に比べて初期設定が少ないので楽だなと感じました。
皆さんも、開発環境を整えてM5Stackの開発を楽しみましょう!
それでは。
ご覧いただきありがとうございました!
コメント
一番分かりやすいサイトです
ありがとうございました。