CLionでPlatformIOを使って、M5StackのHello Worldを作るまで

はじめに

今までArduinoIDEを使って、M5Stackをビルドしていたのですが、
普段使っているJetBrains社の製品でビルド出来ないかと探したら、
CLionとPlatformIOを組み合わせれば出来そうな事がわかりました。
ただ、VSCodeとPlatformIOの組み合わせを紹介するサイトは多々あるのですが、
CLionとPlatformIOの組み合わせを紹介しているサイトが少なかったので、
Hello Worldを出すまでの手順を備忘録として記載しておきます。

目次

0. インストール順
1. Pythonのインストール
2. PlatformIO Coreのインストール
3. 環境変数の確認
4. CLionにPlatformIOプラグインをインストール
5. 新規プロジェクト
6. PlatformIOの設定画面
7. platformio.iniの設定
8. ライブラリの追加
9. Hello Worldの作成
10. ビルドとアップロード

環境

• Windows10 Home
• CLion 2022.2.4
• PlatformIO Core 6.1.5 / Home 3.4.3
• Python 3.9.6
• M5Stack Basic

0. インストール順

CLionでPlatformIOを使えるようにするには、CLionのPlatformIOのページにインストール手順が載っていますが、大まかには以下の感じです。

1. Pythonのインストール
2. PlatformIO Coreのインストール
3. CLionにPlatformIOプラグインのインストール
   CLionは既にインストール済の想定で、以下からそれぞれインストールの解説をしていきます。

1. Pythonのインストール

PlatformIO Coreをインストールするには、VSCodeを入れて、PlatformIO IDEを入れることで、自動的にPlatformIO Coreが入るそうですが、それするならVSCodeで書けよ、って話なので、今回はPlatformIO Coreのみを入れて行こうと思います。ということで、インストールするにはまずはPythonを入れる必要がありますので、Pythonをインストールします。

Pythonのダウンロード

Pythonのサイトにアクセスして、Windows版のインストーラをダウンロードします。

Pythonのインストール

ダウンロードしたインストーラを起動し、Add python.exe to PATHにチェックを入れて、Install Nowをクリックしてインストールを進めます。

Pythonのバージョン

インストール完了後、動作確認のため、コマンドプロンプトでバージョンを確認します。

python --version

と入力するとバージョンが確認できます。

2. PlatformIO Coreのインストール

Pythonのインストールが完了したら、次はPlatformIO Coreをインストールします。

get-platform.pyのダウンロード

PlatformIOのLocal Download (macOS / Linux / Windows)のページから、get-platformio.pyを右クリックして、デスクトップなどに別名で保存します。

PYファイルの実行

コマンドプロンプトを起動して、ダウンロードしたPYファイルを実行します。

インストールが完了すると、PlatformIO Core has been successfully installed...みたいな文言が出てきます。

3. 環境変数の確認

PlatformIO Coreのインストールが完了したら、次はパスを通します。
Windowsのコントロールパネルを開き、
システム > 詳細情報 > システムの詳細設定の順で進むと、
システムのプロパティ画面が開きます。

その後、詳細設定タブから環境変数をクリックし、Pathを選択して、編集を選択。
開いた画面から新規を押して、以下のパスを入力するか、参照ボタンから、該当のフォルダを開いて、選択します。

C:\Users\UserName\.platformio\penv\Scripts

※UserNameの部分は、お使いのパソコンにより異なります。
PlatformIOのInstall Shell Commandsにも説明があります。

4. CLionにPlatformIOプラグインをインストール

CLionのPlatformIOのページにも載っています。

CLionを起動

CLionを起動します。

PlatformIOプラグインをインストール

Pluginsを選択し、MarketplaceからPlatformIOを検索して、インストールします。

再起動

インストールが完了したら、CLionを再起動します。

5. 新規プロジェクト

CLionの再起動後、New Projectを選択すると、左のライブラリ一覧にPlatformIOの項目が出てきます。
PlatformIOを選択すると、ボードとフレームワークの一覧が出てきます。
今回はM5Stack Basicを使用するので、M5Stack > M5Stack Core ESP32を選択しました。
Location:に、プロジェクトを保存する場所を指定して、Createを押すと、プロジェクトが作成されます。

もし、PlatformIO Coreがなかったり、パスを通していないと、上記の画面のようになり、左にメニューは追加されるものの、ボードやフレームワークの一覧が出てきません。

プロジェクト画面

新規プロジェクトを作成するとデフォルトのファイルが色々生成されます。
src > main.cppにコードを書いていきます。

設定ファイル

設定ファイルはplatformio.iniファイルで、直接書くことも出来ますが、
platformioの設定画面を開くことでiniファイルに追記していくことができます。
設定ファイルには、アップロード先のCOMポートやシリアルモニタの速度などを書きます。

M5Stackのポートの確認

というわけで、アップロード先のCOMポートを調べるために、M5StackをWindowsのUSBに接続します。
Windowsマークを左クリックして、デバイスマネージャーを選択します。

ポート（COMとLPT）を開くと、M5Stackが接続されているポート番号が確認できますので、これを覚えておきます。
上記の場合は、COM3がM5Stackのポート番号です。

6. PlatformIOの設定画面

ポート番号が分かったところで、次にiniファイルの設定です。

CLionのTools>PlatformIO>Homeを選択すると、ブラウザでPlatfomIOの設定画面が開きます。

プロジェクトのインポート

PlatformIOの画面でプロジェクトの設定を行う場合、CLionで作ったプロジェクトをインポートする必要があります。

先ほどの設定画面のimport Arduino Projectを選択すると、上記のインポートフォルダの選択画面が出ます。
プルダウン画面で、インポートするプロジェクトのボードを選択します。今回は、M5Stack Core ESP32を選択します。
また、Use libraries installed by Arduino IDEもチェックしてみました。チェックしなくてもいいかもしれません。
CLionで作ったプロジェクトフォルダまで移動して、importを選択します。

インポートが完了すると、ポップアップメッセージが出て、OKを押すと、設定画面に戻ります。
画面下のRecent Projectsに、インポートしたプロジェクトが表示されていればインポートが出来ていると思います。

7. platformio.iniの設定

プロジェクトのインポートも出来たところで、platformio.iniの設定をしていきたいと思います。

設定画面の左メニューからProjectsを選択すると、インポートしたプロジェクトの一覧が表示されます。
先ほどインポートしたプロジェクトを探して、Configureをクリックします。

ここに、設定を追加していくので、New Option :のプルダウンから、必要なオプションを追加していきます。

今回は、monitor_port、monitor_speed、upload_portを追加しています。

upload_port、monitor_portは先ほど調べたM5Stackの COMポート を指定します。

右上のsaveをクリックすれば、保存完了ですので、CLion IDEに戻ります。

platformio.iniファイルに設定が追加されています。

8. ライブラリの追加

次にHello Worldを表示するうえで、画面表示用のライブラリを追加したいと思います。
main.cppファイルには、初期状態で、

main.cpp

#include <Arduino.h>

しかないため、M5Stack用のライブラリを追加します。

1. PlatformIO設定画面に戻り、左のメニューのLibrariesを選択します。
   
   Search libraries...にカーソルを合わせて、M5Stackと入力して、ライブライを検索します。
2. 検索一覧から、M5Stackライブラリを選択します。
   
   Add to Projectを選択します。
3. プルダウンからプロジェクトを選択してAddをクリックすると、ライブラリが追加されます。
   
4. CLionのライブラリ
   
   libdeps>m5stack-core-esp32にM5Stackのライブラリが追加されているのが確認できます。
   ただ、この状態だと、まだCLion側で関連付けができていないので、main.cppにincludeを記述しても、ライブラリが使えないため、コードアシストが出てきません。
   
5. PlatformIOの再初期化

ライブラリを使えるようにするには、PlatformIOを 再初期化 する必要があります。

Tools>PlatformIO>Re-Initを選択すると、PatformIOのファイルが初期化されます。

これで、ライブラリが使えるようになり、includeのコードアシストにM5Stack.hが出てくるようになりました。

9. Hello Worldの作成

ここからようやくHello Worldの作成です。
M5Stack.hをインクルードして、画面表示部分を記述していきます。

main.cpp

#include "Arduino.h"
#include "M5Stack.h"
void setup() {
// write your initialization code here
    M5.begin();
    M5.Lcd.setCursor(20,60);       //表示座標
    M5.Lcd.setTextSize(4);         //文字サイズ
    M5.Lcd.printf("Hello World");  //テキスト表示
}

void loop() {
// write your code here
}

10. ビルドとアップロード

Hello Worldのファイルは出来たので、M5Stackにアップロードします。

画面右上のEdit Run/Debug configurationsのプルダウンを開き、PlatformIO Upload>Run 'PlatformIO Upload'を選択すると、
ビルドが始まり、アップロードが自動的に始まります。

アップロードが完了したら、SUCCESSという文字が出ます。

M5Stackに無事 Hello World が表示されました。

というわけで、記事がめっちゃ長くなりましたが、無事アップロードまで出来た。
この環境ができれば、次回からプロジェクトを作成するところからで良くなります。

platformio.iniのオプションや、ライブラリなどはたくさんありますので、これから色々試したいなと思います。

参考

• Python
• CLion Installation
• PlatformIO / Local Download
• PlatformIO / 環境変数