LoginSignup
2

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

Last updated at Posted at 2023-03-06

はじめに

今までArduinoIDEを使って、M5Stackをビルドしていたのですが、
普段使っているJetBrains社の製品でビルド出来ないかと探したら、
CLionとPlatformIOを組み合わせれば出来そうな事がわかりました。
ただ、VSCodePlatformIOの組み合わせを紹介するサイトは多々あるのですが、
CLionPlatformIOの組み合わせを紹介しているサイトが少なかったので、
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_01_web.png
Pythonのサイトにアクセスして、Windows版のインストーラをダウンロードします。

Pythonのインストール

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

Pythonのバージョン

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

python --version

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

2. PlatformIO Coreのインストール

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

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

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

PYファイルの実行

コマンドプロンプトを起動して、ダウンロードしたPYファイルを実行します。
python_05_platformio_install.png
インストールが完了すると、PlatformIO Core has been successfully installed...みたいな文言が出てきます。
python_06_platformio_success.png

3. 環境変数の確認

PlatformIO Coreのインストールが完了したら、次はパスを通します。
Windowsのコントロールパネルを開き、
システム > 詳細情報 > システムの詳細設定の順で進むと、
システムのプロパティ画面が開きます。
path_02_moreinfo.png
その後、詳細設定タブから環境変数をクリックし、Pathを選択して、編集を選択。
開いた画面から新規を押して、以下のパスを入力するか、参照ボタンから、該当のフォルダを開いて、選択します。

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

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

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

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

CLionを起動

clion_02_init.png
CLionを起動します。

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

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

再起動

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

5. 新規プロジェクト

clion_06_newprojct.png
CLionの再起動後、New Projectを選択すると、左のライブラリ一覧にPlatformIOの項目が出てきます。
PlatformIOを選択すると、ボードとフレームワークの一覧が出てきます。
今回はM5Stack Basicを使用するので、M5Stack > M5Stack Core ESP32を選択しました。
Location:に、プロジェクトを保存する場所を指定して、Createを押すと、プロジェクトが作成されます。
clion_06_newprojct_nocore.png
もし、PlatformIO Coreがなかったり、パスを通していないと、上記の画面のようになり、左にメニューは追加されるものの、ボードやフレームワークの一覧が出てきません。

プロジェクト画面

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

設定ファイル

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

M5Stackのポートの確認

というわけで、アップロード先のCOMポートを調べるために、M5StackをWindowsのUSBに接続します。
Windowsマークを左クリックして、デバイスマネージャーを選択します。
platformio_05_device.png
ポート(COMとLPT)を開くと、M5Stackが接続されているポート番号が確認できますので、これを覚えておきます。
上記の場合は、COM3がM5Stackのポート番号です。

6. PlatformIOの設定画面

ポート番号が分かったところで、次にiniファイルの設定です。
clion_08_home.png
CLionのTools>PlatformIO>Homeを選択すると、ブラウザでPlatfomIOの設定画面が開きます。
platformio_01_home.png

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

PlatformIOの画面でプロジェクトの設定を行う場合、CLionで作ったプロジェクトをインポートする必要があります。
platformio_02_import.png
先ほどの設定画面のimport Arduino Projectを選択すると、上記のインポートフォルダの選択画面が出ます。
プルダウン画面で、インポートするプロジェクトのボードを選択します。今回は、M5Stack Core ESP32を選択します。
また、Use libraries installed by Arduino IDEもチェックしてみました。チェックしなくてもいいかもしれません。
CLionで作ったプロジェクトフォルダまで移動して、importを選択します。
clion_03_import_success.png
インポートが完了すると、ポップアップメッセージが出て、OKを押すと、設定画面に戻ります。
画面下のRecent Projectsに、インポートしたプロジェクトが表示されていればインポートが出来ていると思います。

7. platformio.iniの設定

プロジェクトのインポートも出来たところで、platformio.iniの設定をしていきたいと思います。
clion_04_project.png
設定画面の左メニューからProjectsを選択すると、インポートしたプロジェクトの一覧が表示されます。
先ほどインポートしたプロジェクトを探して、Configureをクリックします。
platformio_03_config.png
ここに、設定を追加していくので、New Option :のプルダウンから、必要なオプションを追加していきます。
platformio_06_option.png
今回は、monitor_portmonitor_speedupload_portを追加しています。

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

右上のsaveをクリックすれば、保存完了ですので、CLion IDEに戻ります。
platformio_08_ini.png
platformio.iniファイルに設定が追加されています。

8. ライブラリの追加

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

main.cpp
#include <Arduino.h>

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

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

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

platformio_09_reinit.png
Tools>PlatformIO>Re-Initを選択すると、PatformIOのファイルが初期化されます。
clion_16_include_reinit.png
これで、ライブラリが使えるようになり、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にアップロードします。
clion_18_run.png
画面右上のEdit Run/Debug configurationsのプルダウンを開き、PlatformIO Upload>Run 'PlatformIO Upload'を選択すると、
ビルドが始まり、アップロードが自動的に始まります。
clion_19_success.png
アップロードが完了したら、SUCCESSという文字が出ます。
IMG_2197.png
M5Stackに無事 Hello World が表示されました。

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

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2