M5StackのWi-Fi機能

  前回はM5StackでLCDに文字を表示させるという初歩的な実行をさせてみました。M5Stackには他にも様々な機能があり、今回は特にWi-Fi機能を取り上げてみたいと思います。まず、Wi-Fiとはパソコンやスマホなど多くの電子機器に採用されている無線によるネットワークへの接続方式です。またWi-Fiには、周波数として2.4GHz帯、5GHz帯の2種類を使用するものが多いです。M5StackにはWi-Fi機能が使用できるESP32が搭載されていますが、ESP32は2.4GHz帯だけに対応しているため、M5StackでWi-Fiを利用する際は注意が必要です。今回のゴールは、M5StackにWi-Fi接続させて、NTP(Network Time Protocol)から現在時刻を取得し、表示させてみようと思います。

Wi-Fiに接続する

 まず、M5Stackを近くにあるWi-Fiのアクセスポイント(AP)に繋いでみます。先に接続したいWi-Fiアクセスポイントの2.4GHzのSSIDとパスワードを調べておくと良いです。下記にサンプルコードを記載したのでコピーすれば実装できますが、”myssid”と”password”を自分のものに書き換えて下さい。

#include <M5Stack.h>                  //M5Stackのファイルを取り込む、スケッチを書くのに必要
#include <WiFi.h>

const char* ssid = "myssid";          //接続するアクセスポイントのSSIDに書き換える
const char* password = "password";    //パスワードを書き換える
void setup() {
    M5.begin();                        //m5stackのオブジェクト(機能)の初期化
    M5.Lcd.setTextSize(3);             //フォントサイズ

    WiFi.begin(ssid, password);            //Wi-Fiのアクセスポイントに接続
    while (WiFi.status() != WL_CONNECTED){ //Wi-Fiのアクセスポイント接続待ち
        delay(500);                        //0.5秒ごとに待つ
        M5.Lcd.print('.');
    }
    M5.Lcd.print("\r\nWiFi connected\r\nIP address: ");
    M5.Lcd.println(WiFi.localIP());
}
void loop() {
}

 このコードを動かすと数秒でWi-Fiに接続され、以下のような出力結果になります。

インターネットから正確な時刻を取得する

 インターネットから現在時刻を取得するには、NTP(Network Time Protocol)という通信手順(プロトコル)を使います。また、configTime関数で時刻の同期をし、getLocalTime関数で現在時刻を取得します。
 confugTime関数のパラメータは、configTime(協定世界時との時差(秒), 夏時間で進める時間(秒), NTPサーバのURL(最低1つ指定する))です。1個目のパラメータの標準時刻との時差ですが、日本は9時間ずれているので、9×3600秒を指定します。2個目のパラメータの夏時間で進める時間は日本の場合は0を設定します。
 getLocalTime関数のパラメータは、getLocalTime(struct tm * info: 時刻情報を格納する領域, タイムアウト時間(ミリ秒))です。struct tmには以下のメンバ変数があります。
・int tm_year : 1900年を0とした年数。tm_year+1900で今年の年数になる。
・int tm_mon : 1月を0とした月数。tm_mon+1で今月になる。
・int tm_day : 日にち
・int tm_hour : 時間
・int tm_min : 分
・int tm_sec : 秒

これらの要素を先程のソースコードに組み込むと下のようになります。日本語でも表示できるようにフォントをmicroSDカードに保存して、読み込むコードを付け加えました。microSDカードを挿入して実行すると使用できるようになります。

#include <M5Stack.h>                       //M5Stackのファイルを取り込む、スケッチを書くのに必要
#include <WiFi.h>

#define JST (3600L*9)                      //世界標準時と日本の時差(秒)9時間分に3600秒を掛ける

const char* ssid = "***";                  //接続するアクセスポイントのSSIDに書き換える
const char* password = "*******";    //パスワードを書き換える
void setup() {
    M5.begin();                            //m5stackのオブジェクト(機能)の初期化

    String f24 = "genshin-regular-24pt";   //源真フォントで日本語化
    M5.Lcd.loadFont(f24, SD);              //SDカードのvlwファイルから取り込む

    WiFi.begin(ssid, password);            //Wi-Fiのアクセスポイントに接続
    M5.Lcd.printf("少々お待ちください");
    while (WiFi.status() != WL_CONNECTED){ //Wi-Fiのアクセスポイント接続まで
        delay(100);
        M5.Lcd.printf("・");               //「・」をdelay分表示してWi-Fi接続まで待つ
    }

    M5.Lcd.setCursor(80,60);
    M5.Lcd.printf("Wi-Fi接続完了");
    M5.Lcd.setCursor(40,100);
    M5.Lcd.printf("IPアドレス:");
    M5.Lcd.setCursor(60,140);
    M5.Lcd.println(WiFi.localIP());        //IPアドレスの表示
    delay(500);

    configTime(JST, 0, "ntp.nict.jp", "time.google.com", "ntp.jst.mfeed.ad.jp");
    //このURLから時刻を取り出す
}
void loop() {
    struct tm tm;
    if (getLocalTime(&tm)){
        M5.Lcd.fillScreen(BLACK);          //背景黒に
        M5.Lcd.setCursor(80,75);           //〇年〇月〇日の表示位置調整
        M5.Lcd.printf("%d年%2d月%2d日", tm.tm_year+1900, tm.tm_mon+1, tm.tm_mday);
        M5.Lcd.setCursor(85,135);          //〇時〇分〇秒の表示位置調整
        M5.Lcd.printf("%02d時%02d分%02d秒", tm.tm_hour, tm.tm_min, tm.tm_sec);
        //M5.Lcd.unloadFont();
    }
    delay(1000);                           //1秒ごとに時刻更新(ループ)させる
}

出力結果

 上記のソースコードをM5Stackに書き込んで実行すると下のような表示になります。

M5StackのWi-Fi機能まとめ

 今回はM5StackでWi-Fiに接続してインターネットから正確な現在時刻を表示させることができました。注意点としては、使用できる周波数帯が2.4GHzであることですかね。上手く機能しなかった場合は一度そこを見直してみてください。その他のWi-Fi機能としては、M5Stack自身をWebサーバー化することも可能であり、M5Stack上で指定したURLにアクセスされるとサーバーが開くようにコードを書けば簡単に機能するそうなので、外部センサの情報をサーバー上に表示させるIoTデバイス化にも挑戦してみたいと思います。ということで次回は、その前段階として外部センサの制御をM5Stackでやってみようと思います。

参考文献

・下島健彦「みんなのM5Stack入門」、リックテレコム、2021年3月、第1版第3刷