M5StackシリーズのためのArduinoIDEのインストール方法と初期設定、使い方紹介

M5Stack ATOMS3 開発キット【M5STACK-C123】[エムファイブスタックマイコン IoT モジュール電子工作自由工作]

マルツオンライン

M5StickC Plus2 IoT 開発キット IoT

Generic

M5Stack Core2 IoT開発キット

M5Stack

２．ArduinoIDEとは

「ArduinoIDE」とは誰でも簡単にプログラミング学習ができるように開発された、イタリア発祥のマイコンボード「Arduino」の開発環境で無償でダウンロードすることができます。

複雑で専門的な知識を必要とするプログラムが「ライブラリ」としてまとめられており、直感的に理解しやすいコマンドでこの「ライブラリ」を使用することで、初心者でも簡単に複雑な動作を実現することができます。

「Arduino」のプログラミングを目的に開発されたものですが、操作性の高さや理解のしやすさ、情報量の多さから、他のマイコンボードのプログラミング環境としても使用されており「M5Stackシリーズ」もこの一つです。

プログラミング言語は「C言語」をベースにマイコンボードを制御するための「Arduino」独自のコマンドを使用して行います。マイコンボードを動かしながらプログラミングを進めることで「C言語」も自然に身につくため「C言語」の学習にも最適です。

３．ArduinoIDEのインストール方法

「ArduinoIDE」のインストール方法と初期設定について詳しく紹介します。

・インストール

「ArduinoIDE」のインストール方法は以下の手順になります。
まずは「ArduinoIDE」のインストールファイルをダウンロードします。

以下のリンクへアクセスしてください。

Software

Open-source electronic prototyping platform enabling users to create interactive electronic objects.

下画像のようなページが表示されたら［ Downloads］の欄で、お使いのOSに合わせてダウンロードファイルを選択します。
Windows10／11の場合は［ Windows Win 10 and never, 64 bits ］をクリックしてください。

無償でダウンローできますが寄付をしてダウンロードすることもできます。

無償でダウンロードする場合は「JUST DOWNLOAD」をクリックしてください。

上画像のように表示されたら再度「JUST DOWNLOAD」をクリックします。
（メールアドレスを入力してチェックボックスをクリックしておくとメルマガ的な登録もできます。）

ダウンロードが始まるので終わるまで待ちます。
ダウンロードが終わったらダウンロードしたファイルを開いてインストールしていきます。

お使いのOSによってファイルの開き方は異なります。
「Google chrome」と「Microsoft Edge」の場合はそれぞれ下画像のようになります。

Google Chromeの場合

Chromeの場合は右上でダウンロードの状況が確認できます。

ダウンロードが完了したら下画像のように「開くアイコン」をクリックしてください。

Microsoft Edgeの場合

Edgeの場合は右上でダウンロードの状況が確認できます。

ダウンロードが完了したら下画像のように「ファイルを開く」をクリックしてください。

ファイルの場所がわからなくなった場合、ファイルは「ダウンロード」フォルダにあります。
「ダウンロード」フォルダを開くと下画像のようにファイルがあるので、クリックして実行してください。

インストール中には以下のような画面が表示されることがあるので、表示されたらその都度「はい」をクリックしてください。

インストールが始まると下画像のようなウインドウが表示されるので、矢印部をクリックしていってください。

ライセンスを確認し問題なければ［同意する］をクリックします。

上画像のように「すべてのユーザー」にもインストール可能です。必要なければそのまま［次へ］をクリックします。

すでに旧バージョンがインストール済みでも上記のようにアンインストールする必要はないようなので、そのまま［次へ］をクリックしましょう。

上画像のウインドウで保存場所を指定できますが、特にこだわりがなければ、そのまま［インストール］をクリックしましょう。

インストールが始まるので終わるまで待ちましょう。

インストールが完了しました。［完了］をクリックすると「ArduinoIDE」が起動します。

デスクトップには上画像のようなアイコンができているので、次回からこれをクリックで起動できます。

ArduinoIDEが起動すると上画像のような表示になるので、立ち上がるまでしばらく待ちます。

初回起動時には以下のように「ドライバ」のインストールがいくつかあります。
いくつあるかは環境によると思いますが、全てインストールしておきましょう。

起動すると以下のような画面が表示されます。
起動時には画面右下に通知が表示されます。アップデート情報が表示されている場合は［全てをインストール］をクリックしてインストールしておきましょう。

以上で「ArduinoIDE」のインストールは完了です。

「Arduino」を使用する場合はこのまま使用可能ですが「M5Stack」シリーズを使用するには使用デバイスごとに「USBドライバ」をインストールしておく必要があります。

・初期設定（日本語化、配色テーマ設定等）

私の環境では初めから日本語で使用できましたが、日本語でない場合は「基本設定」の画面で変更することができます。
「基本設定」では他にも「エディターの配色」や「コンパイル時の詳細情報表示設定」をすることができるため、基本的な設定方法を紹介します。

日本語化

設定画面は以下のように開くことができます。

英語の場合は「File」→「Preferences」をクリックします。

日本語の場合は「ファイル」→「基本設定」をクリックします。

英語の場合は以下のような設定画面のウインドウが表示されるので「Language:」から「日本語」を選択して［OK］ボタンをクリックすると日本語表示になります。

配色テーマ設定

配色テーマは4つの中から下画像のように選択できます。

配色テーマ「Dark」を選択すると下画像のようになります。
個人的にはこれが見やすくて使いやすいので、自分の環境はこれにしています。

コンパイル、書き込み詳細情報表示

プログラムを変換する「コンパイル」時にエラーの詳細が確認できるため、以下のようにチェックをして「コンパイル」の詳細情報を表示しておくのがおすすめです。

コンパイル時にたまに固まって動いていないのか時間がかかってるだけなのかわからない時がありますが、詳細表示しておくと進捗が表示されるため、進んでいるかどうかの確認にもなります。

４．USBドライバの準備

次に「パソコン」と「M5Stackシリーズ」をUSBケーブルで接続して通信するための「USBドライバ」をインストールしていきます。

まずは「ドライバ」のファイルをダウンロードします。以下のリンクへアクセスしてください。

Download

TUTORIAL M5StickC-Guide Download English 中文日本語 introduce UIFlow Tutorial for M5StickC. Contains 8 course cases M5GO-Guide Download English 中文日本語 introduce UIF...

表示されるページを下へスクロールすると下画像のようなページが表示されます。

M5Stackシリーズでは機種ごとにUSBドライバが異なります。また、同じ機種でもバージョンによって異なるものもあります。
3種類全てをインストールしておくと、機種を気にせずに認識してくれるので、ご自分のパソコン（MacかWindows）に合わせて全てインストールしておくのがおすすめです。
※CH9102には「SER」と「CDC」2種類ありますが「SER」の方で問題ないと思います。

以下「CP210x」のインストールを例に紹介します。このページの「CP210x_VCP_Windows」の右端にある［↓］をクリッして下さい。

「ドライバ」の圧縮ファイルのダウンロードが始まるので、ダウンロードが終わったらダウンロードしたファイルを開いてください。

お使いのOSによってファイルの開き方は異なります。
「Google chrome」と「Microsoft Edge」の場合はそれぞれ下画像のようになります。

Google Chromeの場合

Chromeの場合は左下でダウンロードの状況が確認できます。
ダウンロードが完了したら下画像のように「開く」をクリックしてください。

Microsoft Edgeの場合

Edgeの場合は右上辺りでダウンロードの状況が確認できます。
ダウンロードが完了したら下画像のように「ファイルを開く」をクリックしてください。

ファイルの場所がわからない場合、ファイルは「ダウンロード」フォルダにあります。
「ダウンロード」フォルダを開くと下画像のようなファイルがあるので、クリックして開いてください。

ダウンロードしたファイルが展開されて下画像のようにフォルダが開きます。

お使いのパソコンのCPUが64ビットか32ビットかによって実行するドライバのファイルが以下のように異なります。

・64ビットの場合：CP210ｘVCPInstaller_x64_v6.7.0.0.exe
・32ビットの場合：CP210ｘVCPInstaller_x86_v6.7.0.0.exe

今回インストールした「ArduinoIDEバージョン2」は64ビットのため64ビットの方を実行しましょう。

ドライバファイルをクリックして以下の画面が表示されたら「はい」をクリックしてください。

下画像のようなウインドウが立ち上がったら「次へ」をクリックしてください。

以下の画面では「同意する」にチェックを入れてから「次へ」をクリックしてください。

以下の画面が表示されたらインストール完了です。「完了」をクリックすると画面が閉じて終了です。

最近のパソコンは64ビットだと思いますが、以下の方法で確認できますので、念のため確認しておきましょう。

まずはデスクトップで下画像の「PC」アイコンを右クリックしてください。

「PC」のアイコン名を変更している場合は違う名前になります。

次に表示されたドロップダウンメニューから「プロパティ」をクリックします。

下画像のような画面が表示されるので「システムの種類」で64ビットか32ビットかを確認してください。

５．Arduino IDEの起動と画面説明

「Arduino IDE」の起動と開発画面について紹介します。

デスクトップにある以下のアイコンをクリックして「Arduino IDE」を起動してください。

以下のような画面が表示されるので「Arduino IDE」が起動するまでしばらく待ちます。

しばらくすると下画像のようなウインドウが立ち上がります。
これが「Arduino IDE」のスケッチ（プログラム）作成画面です。

「ArduinoIDE」の画面の機能について、下画像の番号ごとに紹介します。

　①検証：作成したスケッチにエラーが無いかを確認します。
　②書込：作成したスケッチをマイコンボードに書き込みます。
　③デバッグ：ブレークポイントを設定してステップ実行等デバッグ動作を実行します。
　　　　　　　※デバッグ対応ボードのみ実行可能です。
　④ボード名表示：選択しているボード名が表示されます。
　⑤シリアルプロッタ：シリアル出力した数値データを自動でグラフ表示してくれます。
　⑥シリアルモニタ：マイコンボードと通信して、取得した情報を表示したり
　　　　　　　　　　データを送信したりする、シリアルモニタ画面を起動します。
　⑦スケッチ（プログラム）作成エリア：ここでスケッチの作成を行います。
　⑧情報表示エリア：コンパイルや書込み時の進み具合やエラー情報等が表示されます。
　　※コンパイルとは作成したプログラムをマイコンボードに書き込める形式に変換する作業です。
　⑨情報表示エリアの表示／非表示：クリックするごとに表示と非表示が切り換えられます。
　⑩ボード接続情報：接続しているボード名と通信COM番号が表示されます。
　11 通知：書き込みの完了やインストール終了等の通知が確認できます。

「Arduino IDE」では「プログラム」のことを「スケッチ」と呼びます。
これには「キャンバスに自由に絵を描く（スケッチする）ようにプログラムを作成して欲しい」という開発者の思いが込められています。

画面左にあるアイコンについては以下のような機能があります。

一番上のアイコンは［スケッチブック］です。
作成したスケッチが保存されているフォルダ内のファイルが一覧で表示されます。

2番目のアイコンは［ボードマネージャ］です。
使用するデバイスに必要な基本ファイルを検索して、インストールすることができます。

3番目のアイコンは［ライブラリマネージャ］です。
デバイス固有の「ライブラリ」や複雑な機能を簡単に使用するための便利な「ライブラリ」を検索してインストールすることができます。

4番目のアイコンは［デバッグ］です。
「デバッグ」機能のあるデバイスでのみ使用可能で、スケッチ内にブレークポイントを設定したり、1ステップ（1行）ごとにプログラムを実行して、内部の変数の値等を確認しながら動作確認ができます。

一番下のアイコンは［検索］です。
現在開いているプログラム内でキーワードを入力して検索することができます。

６．共通設定

「ArduinoIDE」で「M5Stackシリーズ」を使用する上での共通の初期設定手順について紹介します。

・初期設定

まず初期設定として「M5Stackシリーズ」のボード情報が選択できるようにします。
下画像のように「ファイル」→「環境設定」とクリックしてください

下画像のように「基本設定」ウインドウが表示されます。

「追加のボードマネージャのURL」の所に以下のURLをコピーして貼り付けて［OK］をクリックしてください。

https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json

［OK］をクリックするとデータの更新が始まり、画面右下に下画像のように表示されるので終わるまでしばらく待ちましょう。

情報の更新が完了したら初期設定は完了です。

・ボード（M5Stackシリーズ）の追加

「M5Stackシリーズ」のマイコンボードが選択できるように「ボード情報」の追加を行います。

「ボードマネージャ」アイコンをクリックすると下画像のようなウインドウが表示されます。
検索窓に「M5」を入力すると「M5Stack by M5Stack」が表示されるので［インストール］をクリックします。

下画像のように「Installed」の表示に変われば「ボード情報」の追加は完了です。

・シリアルポート（通信）選択

「パソコン」と「M5Stackシリーズ」デバイスとの通信に使用する「シリアルポート」の選択を行います。

今回は「AtomS3」を使用する例で紹介していきます。
まずは「AtomS3」をUSBケーブルでパソコンと接続します。
初回接続時はパソコン画面の右下に下画像のようなセットアップウインドウが表示され、接続したデバイスが認識されます。

ボードが認識されない場合はUSBドライバが正しくインストールされていない可能性があるので「４．USBドライバの準備」を再度確認してみてください。

次に「ツール」→「ポート」をクリックすると、下画像のように「COM6（ここは環境によります）」のように「カッコ」付のポートが表示されるので、これをクリックします。

「カッコ」内のデバイス名（ボード）は自動で認識されますが正しく認識されていないことがあるので、この場合は手動でメニューの「ツール」→「ボード」から選択しましょう。

以上で「M5Stackシリーズ」共通の設定は完了です。

７．機種別設定

「M5Stackシリーズ」を使用するためには必要なライブラリのインストールやボードの選択方法について、引き続き「AtonS3」を例に紹介します。

「AtomS3」を使用するには以下のライブラリをインストールしておく必要があります。

・M5Unified バージョン 0.1.13
・M5AtomS3 バージョン 1.0.0
・FastLED バージョン 3.6.0

バージョンは動作確認時のものです。基本的には最新のものを使用してください。
うまく動作しない時は1つ前のバージョンにすると動く時もあるので、試してみてください。

・ライブラリの準備

まずは「M5Stackシリーズ」で共通で使用できる「M5Unified」ライブラリをインストールしていきます。

下画像のように「ライブラリマネージャー」アイコンをクリックして、検索窓に「M5Unified」を入力して、インストールをクリックします。

下画像のように関連するライブラリのインストールを知らせるウインドウが表示された場合は［全てをインストール］をクリックしましょう。（後から個別にインストールすることもできます。）

下画像のように通知欄にインストールの完了が通知されたらインストール完了です。

同じ手順で「M5AtomS3」と「FastLED」ライブラリも検索してインストールしておきましょう。

・使用するボードの選択

使用するマイコンボードを選択します。
「ツール」→「ボード：”ここは環境によります”」→「M5Stack」とカーソルを合わせると「M5Stackシリーズ」のマイコンボード一覧が表示されるので「M5AtomS3」をクリックします。

ボードを選択すると下画像のように、選択したボード名が表示されます。

・スケッチ（プログラム）例の読み込み

「Arduino IDE」にはスケッチ（プログラム）例が準備されています。
このスケッチ例を読み込む方法を紹介します。

まず、スケッチ例は「ファイル」→「スケッチ例」をクリックするとデバイスのリストが表示されます。

このリストの一番下にある「　▼　」にカーソルを合わせるとさらに下のリストが表示されるので、その中から下画像のように「M5AtomS3」→「Basics」→「lite_led」をクリックします。

「スケッチ例」をクリックすると新しいウインドウで「ArduinoIDE」が起動します。

・スケッチ（プログラム）例の書き込み

スケッチ例「lite_led」を読み込み、下画像のように新しいウインドウが立ち上がったら下画像のように「→」アイコンをクリックしてスケッチを書き込みます。

書き込みが始まると、下画像のように「→」アイコンが黄色に変わりコンパイル（スケッチを書き込みできるデータに変換）が開始されて、ウインドウ下の「出力」部に状況が表示されます。

書き込みが完了すると下画像のように「通知」ウインドウに、書き込みが完了したことが表示されます。

ここで「コンパイル、書込み情報表示エリア（黒い部分）」に「Warnig」や「Error」で始まる文が表示されて書き込みが失敗した場合は、ボード情報やライブラリ、スケッチ、USB通信設定にエラーがあります。
ここまで紹介した設定内容をもう一度確認してやり直してみてください。

・動作確認

書き込みが完了したら動作確認をしましょう。
「AtomS3 Lite」のスケッチ例「M5AtomS3」→「Basics」→「lite_led」の動作は0.5秒ごとに下画像のように本体のLEDが、赤、青、黄と繰り返し点灯するものです。

書き込みが成功していたら、下画像のようにLEDの色が変化するのが確認出来ます。

M5Stack ATOMS3 Lite【M5STACK-C124】[エムファイブスタックマイコン IoT モジュール電子工作自由工作]

マルツオンライン

AtomS3 Liteの使い方、端子配列、初期設定をサンプルプログラムで詳しく紹介

８．コピペ（コピー＆ペースト）での書き込み方法

ここまで書き込むプログラムは「スケッチ例」を使用してきましたが、当ブログ内で紹介しているプログラムを「コピペ」で書き込む方法を紹介します。

書き込むサンプルプログラムを以下に準備しました。
このコードは「AtomS3 Lite」を使用した「Lチカ（LEDを点灯させる）」プログラムです。

これを「Arduino IDE」のスケッチ（プログラム）作成エリアに貼り付けていきますので、以下のプログラムをコピーしてください。
※コピーは下の黒枠内の右上角にある小さなアイコンのクリックでもできます。

#include <M5AtomS3.h>

// 本体LEDの色指定用（赤、緑、青の明るさを0〜255で設定）
CRGB dispColor(uint8_t r, uint8_t g, uint8_t b) {
  return (CRGB)((r << 16) | (g << 8) | b);
}
// 初期設定 -----------------------------------------------
void setup() {
  AtomS3.begin(true); // M5AtomS3 初期設定
}
// メイン -------------------------------------------------
void loop() {
  AtomS3.update(); // 本体状態更新

  if (AtomS3.BtnA.isPressed()) {                  //ボタンが押されていれば
    AtomS3.dis.drawpix(dispColor(0, 0, 255));     //LED（青）
  } else {                                        //ボタンが押されてなければ
    AtomS3.dis.drawpix(dispColor(100, 100, 100)); //LED（白）
  }
  delay(100); //100ms待機
}

次にコピーしたプログラムを「ArduinoIDE」に貼り付けていきます。

「ArduinoIDE」を起動したら、まずは下画像のようにスケッチ（プログラム）作成エリアを全選択します。

上画像のように「編集」→「すべて選択」をクリックしてください。
※キーボードで「Ctrl ＋ A」でも同じことができます。

上画像のようにスケッチが全て選択されます。

次にコピーしたプログラムを貼り付けていきます。
下画像のように「編集」→「貼り付け」をクリックしてください。
※キーボードで「Ctrl ＋ V」でも同じことができます。

「貼り付け」を実行すると下画像のように貼り付けられます。
あとは「→」アイコンをクリックして書き込みを実行するだけです。

書き込みが完了すると、本体LEDが白色点灯し、本体ボタンを押すと青色に変化します。

当ブログでは上で紹介したように「コピペ」で動作確認できるサンプルプログラムを紹介しています。初心者の方には「M5Stackシリーズ」の中でも「AtomS3 Lite」は安価で高機能なのでおすすめです。

「AtomS3 Lite」については以下のリンクで詳しく紹介しています。

Atom Liteの高機能版AtomS3 Liteの使い方を,端子配列,開発環境別の初期設定,Atom Liteとの違い等をサンプルプログラムで詳しく紹介します。

９．他の便利な書込みツールPlatformIOの紹介

マイコンボードの開発ツールとして「Arduino IDE」は有名で情報量も多く、手軽に導入できますが、プログラムの作成にはもっと便利な開発ツールがあります。

「Arduino IDE」だけでもプログラムの作成から書込みまでできますが、プログラムを作成するための「エディタ（プログラムを作成、編集するソフト）」の機能が少ないため、効率よくプログラムするには少し物足りないです。

「エディタ」には「VS Code（Visual Studio Code）」という高機能なエディタがあります。
「VS Code」は様々なプログラム言語に対応しており、「コピー」「ペースト」はもちろん、コマンドの「選択」から「一括置換」まで豊富な機能が備わっています。

中でも便利なのが「エメット（自動補完）」機能です。
これはプログラムコマンドの一部を入力すると候補の一覧が表示される機能です。

コマンドに限らず頻繁に使用する「for文」等でも「構文」ごと表示してくれます。
これにより、プログラムコマンドの「スペル」や「構文」間違いを気にすることなくプログラミングに専念できます。

現状ではプログラムの作成、編集を行うなら「VS Code」一択で間違いないと個人的には思います。この「VS Code」の中で動作するマイコンボードの開発環境として「PlatformIO」というものがあります。

「PlatformIO」のインストールは「Arduino IDE」よりは少しだけ手間がかかりますが、使い慣れてしまうと、もう「Arduino IDE」には戻れません。

本格的にプログラミングを勉強するなら、他の言語でも使用できる「VS Code」だけでもインストールして使い方に慣れておくと今後必ず役に立つと思います。

以下のリンクで「VS Code」と「PlatformIO」のインストールから初期設定まで詳しく紹介しています。
どちらも無償でダウンロードできるのでこの機会にぜひインストールしてみてください。

「VS Code」と「PlatformIO」のインストール方法は → こちら

１０．まとめ

「M5Stackシリーズ」を「Arduino IDE」で使用する方法を紹介しました。

「M5Stackシリーズ」は基板剥き出しの「Arduino」や「Raspberry Pi」「micro:bit」とは違いケースに入ったものがほとんどで初心者の方でも安心して扱えます。

プログラミング環境としては「Arduino」と同じコマンドが使えて、開発環境は情報量の多い「Arduino IDE」が使えるので、初心者の方にも短時間で気軽にプログラミングを体験することができます。

しかし「Arduino IDE」はスケッチ例やコピペしたプログラムの動作確認には最適ですが、プログラムの作成、編集には「エディタ」の機能が物足りないので、最終的には高機能エディタ「VS Code」で動作する「PlatformIO」でプログラムを作成することをお勧めします。

便利なツールはたくさんあります。まずはそれらを利用して間違っててもいいのでプログラムを作って動かしてみましょう。
難しいプログラミングの知識は書いているうちに自然と身についていきます。

そんな気持ちで、普段何気なく思いついた「こんなのあったらいいな～」を自分で作ってみましょう。

M5Stack ATOMS3 Lite【M5STACK-C124】[エムファイブスタックマイコン IoT モジュール電子工作自由工作]

マルツオンライン

M5Stack ATOMS3 開発キット【M5STACK-C123】[エムファイブスタックマイコン IoT モジュール電子工作自由工作]

マルツオンライン