14
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

M5Stack 入門 環境構築編 (主にMac向け)

Last updated at Posted at 2018-11-26

はじめに

M5Stackを手に入れたはいいけど、そこからどうしたら良いかわからないという方を対象に環境構築の方法を簡単に説明したいと思います。

基本情報

開発言語

開発環境

環境構築

全環境共通作業

まずシリアル通信用のドライバを入れる必要があります。Silicon labsのサイトで自分のOSに合わせてドライバをダウンロード、インストールします。
※ Windowsの人はUniversal版ではなく、for Windows 7/8/8.1 (v6.7.6)を入れた方がいいようです。
※ macの場合、Macのシステム環境設定セキュリティとプライバシー内でソフトウェアがブロックされているので、許可(ブロック解除)してあげないといけません。


オンライン環境


UiFlow

以下、Mac向けに説明します。他のOS使っている方はなんとか頑張ってください。

まず、esptoolというファームウェア書込み用のツールをインストールします。ターミナルを開いて以下のコマンドを入力します。

esptool_install

# pipの確認。入ってない場合は、自分で調べてインストールしてください・・・
$ pip -V
pip 18.1 from /usr/local/lib/python2.7/site-packages/pip (python 2.7)

# esptoolをインストール
$ pip install esptool

# バージョン確認
$ esptool.py version
esptool.py v2.5.0
2.5.0

そしてブラウザでUiFlowのページにアクセスします。
右上の歯車の設定ボタンをクリックします。

UiFlow01

モーダル画面が開くので、そこからFirmwareをダウンロードします。
※ Mac向けはfirmwareのバージョンが最新ではないので、Windows向けを落としてください。

UiFlow02

もしMac版のアプリを使う場合は、先に以下の作業が必要になります。

$ sudo spctl --master-disable

Macのシステム環境設定セキュリティとプライバシーすべてのアプリケーションを許可


M5StackとパソコンをUSBケーブルで接続します。またターミナルに戻り、以下のコマンドを入力します。

burn_firmware
# ダウンロードしたファイルを解凍します。
$ unzip ~/Downloads/M5Burner-flow-only.zip -d M5Burner-flow-only

# 執筆時点の最新版はv0.9.1ですが適宜最新版に読み替えてください
$ cd M5Burner-flow-only/firmwares/M5Flow/v0.9.1-en/

$ sh flash.sh

書込みが完了したら、M5Stack本体横のリセットボタンを一回押して再起動します。起動したら画面下の右ボタンを連打してください。以下の画面にきたらChange WiFi Connectを選択し、真ん中のボタンを押します。以下の画面まで来なかったら、再度リセットして右ボタンを連打してください。

IMAGE01.jpg

表示されているSSIDのWiFiに接続します。

IMAGE02.jpg

ブラウザで http://192.168.4.1/ にアクセスします。

IMAGE03.jpg

使用するSSIDを選択し、パスワードを入力します。最後にConfigureをクリックします。

IMAGE04.jpg

接続できるかな・・・

IMAGE05.jpg

うまくいきました!

IMAGE06.jpg

WiFi接続設定が完了すると、M5Stackが自動的に再起動し、しばらくすると以下の画面になると思います。(APIKEYは異なります。)

IMAGE07.jpg

ブラウザのUiFlowのページに戻り、また右上の歯車をクリックします。

UiFlow01

先ほど、M5Stackに表示されていたAPIKEYを入力し、Saveをクリックします。

UiFlow03.png

Titleをドラッグして、Titleオブジェクト配置します。そしてTitleオブジェクトをクリックし、プロパティボックスを表示します。textの内容を書き換えて、最後に右上の実行ボタンをクリックします。

スクリーンショット 2018-11-24 16.50.53.png

M5Stackに同じ画面が表示されていたら、成功です。

IMAGE08.jpg

M5Cloud

M5Cloudのページにアクセスし、登録を行う必要があります。大まかな流れはUiFlowと似ているので割愛します。現在は更新が止まっているようですが、M5Cloud向けのfirmwareはGitHubから取得できます。


オフライン環境


Arduino IDE

Arduino IDEを公式サイトからダウンロードして、インストールします。

Arduino IDEを起動したらメニューからArduinoPreferences...を開き、追加のボードマネージャのURLに以下のURLを追記し、右下のOKボタンを押します。そして一旦Arduino IDEを再起動します。(再起動不要かも)
https://dl.espressif.com/dl/package_esp32_index.json

追記
リリース候補のRC版を入れる場合は、以下のURLとのことです。
https://dl.espressif.com/dl/package_esp32_dev_index.json

Arduino01

次にArduino IDEのメニューからツールボードボードマネージャを選択します。

tool-board-boardmanager.png

ボードマネージャ内でesp32と検索し、出てきたボードをインストールします。

boardmanager.png

※ ただし、執筆時の安定版であるarduino-esp32のstable-1.0.0ではI2C周りのライブラリにバグがあるため、GitHubから最新版を落として入れた方がいいかもしれません。やり方はこちらの記事:【心折れずに】MacでM5stackをはじめるにまとめられています。

次にArduino IDEのメニューからスケッチライブラリをインクルードライブラリを管理を選択します。

sketch-include-lib.png

ライブラリマネージャ内でm5stackと検索し、m5stackのライブラリをインストールします。

libmanager.png

次にボードの設定をします。Arduino IDEのメニューからツールボードM5Stack-Core-ESP32を選択します。

追記
M5Stack-Fireというボードも選べるそうです。詳しくはコメント欄参照。

board.png

次にポートの設定をします。Arduino IDEのメニューからツールポート→**/dev/cu.SLAB_USBtoUART**を選択します。

port.png

最後にサンプルスケッチを実行してみましょう。Arduino IDEのメニューからファイルスケッチ例M5StackBasicsHelloWorldを選択します。

sample.png

そしてM5StackとパソコンがUSBケーブルで接続されていることを確認して、書込みを実行します。

execute.png

うまく言ったら、M5Stackの画面に"Hello World"と表示されるはずです。

IMAGE09.jpg


ESP-IDF

ESP-IDFを使うとESP32の機能を全て使うことができます。例えばCPUのクロックを変更したり。ここを参考にインストールしていきます。まずはtoolchainを入れる必要があります。

Mac向けに説明します。まずはここからツールチェインをダウンロードします。執筆時の最新版は以下のリンクになります。
https://dl.espressif.com/dl/xtensa-esp32-elf-osx-1.22.0-80-g6c4433a-5.2.0.tar.gz

$ mkdir -p ~/esp
$ cd ~/esp
# 解凍するファイル名は適宜読み替えてください。
$ tar -zxf ~/Downloads/xtensa-esp32-elf-osx-1.22.0-80-g6c4433a-5.2.0.tar.gz
$ echo 'export PATH=$HOME/esp/xtensa-esp32-elf/bin:$PATH' >> ~/.bash_profile
$ git clone --recursive https://github.com/espressif/esp-idf.git
$ python -m pip install --user -r $IDF_PATH/requirements.txt
$ cp -r $IDF_PATH/examples/get-started/hello_world .
$ cd ~/esp/hello_world
$ make menuconfig
# メニューコンフィグで、SerialPortの設定を変更してSaveし、M5Stackとパソコンをケーブルで接続し書込み
$ make flash
# M5Stackをリセットして以下のコマンドで接続、hello worldとesp32の詳細情報が表示されていたら、成功です。
$ screen /dev/tty.SLAB_USBtoUART 115200

make flashの際、自分の場合はLDFLAGSとCPPFLAGSを設定していたら、エラーが出たので以下で回避。

$ unset LDFLAGS && unset CPPFLAGS
$ make flash

PlatformIO

VSCodeの場合は、Extensions: MarketplcePlatformIO extensionをインストールします。そして、PlatformIOのPlatformマネージャでEspressif 32、BoardマネージャでM5Stack Core ESP32M5Stack FIRE、LibraryマネージャでM5Stackと他に各自のプロジェクトで必要なものを入れます。

まとめ

ちょっと(かなり?)後半雑になってしまいましたが、何か間違いやご指摘などありましたら、お気軽にお知らせください。

14
15
2

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
14
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?