M5Stackで始めるモノ作り・開発環境構築編


# 今回の概要
[前回](https://qiita.com/Reiji-Nishiyama/items/d06621c15402cd9cb0f8)からの続きで、今回は土壌水分モニターデバイスの実装に必要な環境構築を行っていきます。

# M5Stack開発環境構築
M5Stickc plusはesp32 SoCを搭載しているため、Arduinoによる開発も可能ですが、micropythonを使うことにしているため、こちらの方の環境を整えて行きます。なお、M5Stickc plusを今回は用いますが、他の種類のM5Stackでも書き込むFW以外はどれも同じです。

### 参考ページ
今回M5Stack開発環境セットアップで参照したM5stackの公式サイトを載せておきます。

* インストール手順
https://docs.m5stack.com/en/quick_start/m5stickc_plus/uiflow

* クラウド版IDE環境
https://m5stack.com/uiflow
Get Started for FREEからIDE環境を起動。今回は使用しません。

## デスクトップIDEのセットアップ

M5StackのIDEにはクラウド版とデスクトップ版があります。
UIFlowと呼ばれるブロックを繋げてGUIでプログラミングする方法で実装を行う場合は、クラウド版でも大丈夫です。
今回はPythonコードを記述して実装を行うため、デスクトップIDEをインストールして行きます。
インストールが必要なものは以下の5つです。
1. USBドライバ
1. m5burner
 FWを焼くために必要です。
1. UIFlowファームウェアの書き込み 
micropythonで実装するために必要です
1. UIFlow-Desktop-IDE（インストールしなくても良い）
1. M5Stack開発用VSCodeエクステンション

**１〜４のインストール**
参考ページのインストール手順に従いインストールを行います。
過去esp32でArduino開発したことがある人はおそらくインストール済みだと思うので、インストール不要です。
UIFlow-Desktop-IDEをインストールされる方は、参考ページ内のUIFlow offline programming modeを参照してください。ページ内にはクラウド版IDEの設定手順もあるためご注意ください。UIFlowを使用しない方はインストール不要です。

**M5Stack開発用VSCodeエクステンションのインストール**

VSCodenのエクステンション検索画面にて**vscode-m5stack-mpy**を検索して、インストールします。


M5stickc plusとのシリアル通信機能がとても不安定でVSCodeのリロードが何度も必要になったり、別のツールでシリアルポートを利用中にエクステンションでシリアルに接続するとPCがいきなりリセットするため何かと不便が強いられるツールですが、プログラムの転送に必要なので我慢して使います。

FTPサーバーを本体に立てる方法も後ほど紹介したいと思います。本体と同期を取るのには不便ですが、複数のファイルを送りたい場合には重宝します。

## M5Stickc plus本体操作
本体を操作するにはボタンの名称と役割を覚えておく必要があります。
本体にはA, B, Cの３つのボタンがあります。
* Aボタン
M5の刻印がある表の一番大きなボタンで、決定するときに使用します。
* Bボタン
右側面にあるボタンで、表示メニューを切り替えたり、選択項目を切り替える際に使用します。
* Cボタン
左側面にある電源ボタンで、短押しで電源ONまたはリセット、長押しで電源OFFになります。


## M5Stickc plusとの接続
FWの書き込みとVSCodeエクステンションのインストールが完了したら、VSCodeまたはシリアルターミナルからM5Stickc plush本体に接続することが可能です。


### VSCodeとの接続
本体と通信するには本体を**USB接続モード**にする必要があります。
1. 本体の電源を入れます
2. 画面が表示されたら**直ぐに**Aボタンを押して、設定モードにします
3. Bボタンを押して”Setup”メニューを選択決定します
4. “Setup”メニューの”Switch mode” >> “USB”を選択
5. 本体をリセットします

あとはVSCodeでシリアルポートを選択して、本体と接続します。


### シリアルターミナルからの接続
シリアルターミナルから接続する場合、USB接続モードにしなくても良いようです。
115200bpsで接続できます。

### REPLモードの呼び出し
115200bpsで接続したら、ターミナルで`Ctrl+C`を２回入力するとPythonのREPLを呼び出すことができます。
REPL画面で`Ctrl+E`を入力すると、ペーストモードになるため、 Pythonコードをペーストして実行することができ、重宝します。ペーストモードから抜けるには`Ctrl+D`を入力します。


### FTPサーバーのインストール
M5Stackエクステンションは不安定なのと、一度に１つのファイルしか転送できないためFTPサーバーを本体にインストールします。

**FTPサーバーソースの書き込み**
VSCodeで本体に接続し、
https://github.com/robert-hh/FTP-Server-for-ESP8266-ESP32-and-PYBD
のソースコードを適当な本体の適当なディレクトリ（今回はルートディレクトリ直下）に書き込みます。ここは我慢のしどころです。
（REPLのペーストモードで１ファイルずつ貼り付けて行ってもいいですが）

**サーバー起動用ソースの書き込み**
次にftpup.pyの名前で以下の内容でファイルを作成して、こちらも同じ場所に書き込みます。
```python
# ftpup.py

from m5stack import *

def wifi_up(ssid, password):
    import network
    import socket

    sta_if = network.WLAN(network.STA_IF)
    if not sta_if.isconnected():
        print('connecting to network...')
        sta_if.active(True)
        sta_if.connect(ssid, password)
        while not sta_if.isconnected():
            pass
        print('listening on', addr)

def ftp_server_up():
    import uftpd

def ftpup(ssid, password):
    wifi_up(ssid, password)
    ftp_server_up()

```

**REPLを呼び出す**
書き込みが終わったらVSCodeとの接続を解除して、ターミナルからREPLを呼び出します。
REPLにて以下を実行するとM5stickc plush本体でFTPサーバーを立てることができます。
```python
from ftpup import ftpup
ftpup(ssid='xxxx', password='yyy')
```

関数引数のSSIDとパスワードはご自身のWi-Fi環境のものを指定してください。
Wi-Fiルーターでクライアント間の通信を制限している場合は、解除する必要があります。

あとはお好きなFTPクライアントソフトを利用して、本体へファイルを転送できるようになります。


## プログラムの起動設定

電源ON時に書き込んだプログラムを自動的に起動するようにするには、設定モードの**AppList**メニューから選択する方法と、**boot.py**に記述する方法があります。

#### AppListからの起動設定
設定モードにして、”APPList”メニューを選択決定します。
プログラム一覧から起動させたいものを選択してください。
なおこのメニューで一覧に表示されるのは、本体ファイルシステムの”apps”ディレクトリに保存されているものになります。

#### boot.pyの設定
VSCodeで本体と接続して、boot.pyを開き、起動させたいソースをインポートし、エントリーポイントを呼び出すように記述してあげます。

```python
from ftpup import ftpup
ftpup(ssid='xxx', password='yyy')
```

# 次回
ここまでで必要な開発環境のセットアップは完了になります。次回は、ようやく設計編で設計したものを実装して行きたいと思います。