Windows10上のArduino IDEを使ってM5Stack BasicでHello Worldするまで

# 用意した物
1. M5Stack Basic
1. 64bit版Windows10の動いているPC
1. microUSB端子付きのACアダプタ（スマホ充電用のもの）
1. microUSBをUSB-Cに変換するアダプタ

# M5Stack Basicの初期動作チェック

ケースから取り出します。

![M5StackBasicのパケージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/99dd06e9-84e7-5d5e-0ca6-64a38c233b35.jpeg) ![M5StackBasicを取り出したところ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/76a423d9-984a-7c45-14cf-3435410d2ae4.jpeg)

ACアダプタのmicroUSB-C端子にUSB-C変換アダプタを挿して、M5Stack BasicのUSB-C端子に接続します。

起動音とスプラッシュスクリーンが表示されたあとに、動作確認用のディスプレイへのカラーアニメーションが表示されます。

テストプラグラムが起動するので、3つのボタンを押すと、ボタンの名前がディスプレイに表示されることを確認します。

![ボタンを押すと対応する文字が表示される](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/1bd7c39a-7971-89fa-f997-06ecdfb84ad9.gif)

# Windows PCへのドライバインストール

Windows PCで動作する適当なWebブラウザで、M5Stackの公式サイトにアクセスします。

https://m5stack-store.myshopify.com/

"SOFTWARE"→"DOWNLOADS"と選んでいきます。

"CP2104 Driver"の"Download"→"Windows"を選んで、CP210x_VCP_Windows.zipをダウンロードします。

ダウンロードしたCP210x_VCP_Windows.zipをエクスプローラ上でダブルクリックし、メニューバーの「圧縮フォルダーツール」から「すべて展開」を選び、「展開」ボタンをクリックします。

展開後に開いたウィンドウの中から、CP210xVCPInstaller_x64_vX.X.X.X.exeをダブルクリックして起動します。（"X.X.X.X"にはバージョン番号が入ります）

インストーラーが起動するので、「次へ」を選択します。

![CP210x USB to UART Bridge Driver：インストーラ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/5ac82169-b8be-64a4-f728-f9a8b436f1ca.png)

使用許諾契約の確認が表示されるので、読んだ上で「同意します」にチェックを入れて、「次へ」を選択します。

![CP210x USB to UART Bridge Driver：使用許諾契約](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/345c84dc-3a2d-21d5-f574-fc4524d2b4c4.png)

インストールプロセスが始まり、終了後に「完了」を選択します。

![CP210x USB to UART Bridge Driver：インストーラの完了](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/2c14e91b-489e-6eb5-1b45-0146a12f8b1a.png)

# Windows PCへのArduino IDEのインストール

Windows PCで動作する適当なWebブラウザで、M5Stackの公式サイトにアクセスします。

https://m5stack-store.myshopify.com/

"SOFTWARE"→"DOWNLOADS"と選んでいきます。

"Arduino IDE"の"Download"→"Win10 x64"を選ぶと、Arduino.ccのダウンロードサイトに転送されるので、"SOFTWARE"を選択します。

"Windows Win7 and newer"をクリックしてダウンロードページに移動し、"JUST DOWNLOAD"を選択します。(寄付する場合は金額を選択した上で"CONTRIBUTE & DOWNLOAD")

arduino-X.X.X-win.exeがダウンロードされます。（"X.X.X.X"にはバージョン番号が入ります）

arduino-X.X.X-win.exeを実行すると、インストーラーが起動します。

はじめに、License Agreement（使用許諾契約）の確認が表示されるので、読んだ上で"I Agree"を選択します。

![Arduino IDE：使用許諾契約](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/713ef2a1-32f7-df29-6ba9-43cc3c421a19.png)

次に、インストールするものを選択しますが、デフォルトのままで"Next"を選択します。

![Arduino IDE：インストールするものを選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/3909f837-0d33-5e36-a840-1e3bbbf08a13.png)

そして、インストール先のフォルダの入力を求められますが、ここもデフォルトのままで"Install"を選択します。

![Arduino IDE：インストール場所の入力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/17e38d4f-fa65-eb06-d917-233aacf38e83.png)

ファイルのコピーが始まるので、しばらく待ちます。

![Arduino IDE：ファイルコピー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/4a345587-cf06-8c3b-7d74-9500094a4896.png)

ドライバのインストールの確認のダイアログが表示sれますが、すべて「インストール」を選択します。

![Arduino IDE：ドライバーインストールの確認ダイアログ1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/14901c98-9fb4-fd85-db64-e85940fd94e9.png)
![Arduino IDE：ドライバーインストールの確認ダイアログ2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/55b4139a-b82f-ffd8-14a9-32648a72d82a.png)
![Arduino IDE：ドライバーインストールの確認ダイアログ3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/a991f93b-93df-8d49-0af6-a273b9ab63d2.png)

すべてのファイルのコピーが終了したら、"Close"を選択します。

![Arduino IDE：インストーラの完了](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/cf32b51b-21bc-7b33-6cfc-d6425caedb20.png)

# Windows PCへのM5Stack Basicの接続

Windowsのスタートボタンを右クリックしてメニューを表示し、「デバイス マネージャー」を選択します。

「デバイス マネージャー」のウィンドウが起動するので、「ポート(COMとLPT)」をダブルクリックして、"Silicon Labs CP210x USB to UART Bridge"の横の"(COMX)"という表示を確認します。

![デバイスマネージャでCOMXを確認](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/8b91ebe3-c102-67e7-6260-a7673c959482.png)

この場合は、"COM3"になっていました。

# Arduino IDEの設定

Windowsのスタートボタンを押して、"Arduino"を選択すると、スプラッシュスクリーンが表示されて、Arduino IDEが起動します。

![Arduino IDE：スプラッシュスクリーン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/69641b16-e9e2-4b49-dca3-677ffe1f1e10.png)
![Arduino IDE：起動直後の画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/989b4ca0-8656-9742-01e0-26bc8df64e6f.png)

初回起動直後に、Windowsファイアウォールの確認ダイアログが表示されますが、ここでは「アクセスを許可する」を選択します。

![Arduino IDE：Windowsファイアウォールの確認画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/5fe392c6-c711-25d5-b5b0-0f2f992918b2.png)

無事に起動したら、メニューバーの「ファイル」から「環境設定」を選択します。

![Arduino IDE：ファイル→環境設定を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/f0438eac-bb1c-2b08-8494-0f7d5f6a84e4.png)

環境設定のウィンドウが起動するので、このなかで「追加のボードマネージャのURL」の入力欄の右にあるボタンをクリックします。

![Arduino IDE：環境設定ウィンドウが開くので「追加のボードマネージャのURL」の右にあるボタンをクリック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/87b8ed31-aeba-861d-066a-e4c9286913d5.png)

さらに「追加のボードマネージャのURL」というウィンドウが開くので、「追加のURLを１行ずつ入力」の入力欄に、
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
を入力して、"OK"を選択します。

![Arduino IDE：追加のボードマネージャのURLにhttps://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.jsonを入力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/8eea1924-7dfa-c138-48f2-c309c5831df6.png)

環境設定のウィンドウの"OK"を選択して、元のArduino IDEの起動画面に戻ります。

そして、メニューバーの「ツール」から「ボード:"Arduino Uno"」→「ボードマネージャ」と選択します。

![Arduino IDE：ボードマネージャを選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/e1a8b2a5-957d-5864-af4f-f45e22b2f38d.png)

ボードマネージャのウィンドウが起動するので、タイプの入力欄に"esp32"と入力して下段枠内に現れる"esp32 by Espressif Systems"をクリックして「インストール」ボタンを選択します。

![Arduino IDE：esp32をインストール](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/4f1791d0-443e-2752-2c49-8d2e02c60855.png)

インストールが完了したら「閉じる」をクリックして、元のArduino IDEの起動画面に戻ります。

次に、メニューバーの「スケッチ」から「ライブラリをインクルード」→「ライブラリを管理」と選択します。

ライブラリマネージャのウィンドウが起動するので、トピックの入力欄に"m5stack"と入力して下段枠内に現れる"M5Stack"をクリックして「インストール」ボタンを選択します。

![Arduino IDE：ライブラリを管理を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/6649c26d-06f4-ad7d-dae1-554f34d99a76.png)

ライブラリのインストールの終了後に「閉じる」をクリックして、元のArduino IDEの起動画面に戻ります。

![Arduino IDE：M5Stackをインストール](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/0e971ab4-87ba-e5c1-4ac3-6572f7dfdd23.png)

そして、メニューバーの「ツール」から「ボード:"Arduino Uno"」→"ESP32 Arduino"→"M5Stack-Core-ESP32"と選択します。

![Arduino IDE：M5Stack-Core-ESP32を選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/ae20a9b1-41fc-6949-9242-89b15da7fb85.png)

最後に、メニューバーの「ツール」から「シリアルポート」を選択し、さきほどデバイスマネージャで確認した"COMX"を選択します。

![Arduino IDE：COMポートの選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/e1d4228c-01f9-d02a-f730-43d641860ee6.png)

# M5Stack BasicへのHello Worldの書き込みと実行

メニューバーの「ファイル」から「スケッチ例」→"M5Stack"→"Basics"→"HelloWorld"と選択して、サンプルコードを読み込みます。

![Arduino IDE：HelloWorldサンプルコードの読み込み](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/d805eb06-edc1-151b-85b8-221a5f0ebc72.png)

読み込みが完了すると、Arduino IDEのメインウィンドウに、HelloWorldのコードが表示されます。

![Arduino IDE：HelloWorldのサンプルコードの読み込み後の表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/e9f580c3-923d-5550-2efc-ffda30ee5df6.png)

メニューバーの「スケッチ」から「マイコンボードに書き込む」を選択します。

![Arduino IDE：マイコンボードに書き込むを選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/a61a19f3-b42d-cd0b-82a8-f4eaacdcfb33.png)

しばらくの間、コードをM5Stackが実行可能なデータに変換するコンパイル処理が行われて、M5Stack Basicに書き込まれます。

![Arduino IDE：コンパイル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/659cd603-3df6-e2e4-74dc-4752871bc86b.png)

書き込みが完了すると、M5Stackは自動的に再起動して、画面上に"Hello World"が表示されます。

![rps20210313_230415_586.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169654/be43f3c3-b054-d60c-32b8-b639a4d1f379.jpeg)

# 参考サイト
https://raspberrypi.mongonta.com/howto-start-m5stack-arduinoide/
https://note.com/rasen/n/n83680dd38573