M5Stackのボタンの使い方　〜こんな簡単に使えるのか！【超初心者がIoT開発に挑んでみる#4】

はじめに
M5Stackのボタンを使ってみよう！〜M5Stackのボタンって？
M5Stackのボタンを使ってみよう！〜実際にコードを書いてみよう！
最後に
おすすめの書籍
他記事のご紹介

はじめに

　前回の記事（↓）ではM5Stackで遊んでみました。

M5Stackで遊んでみよう！　〜まずは触ってみるのが一番！【超初心者がIoT開発に挑んでみる#3】

まずは触ってみるのが良いということで、M5Stackの画面上に文字や図形を表示する方法を紹介しています。スケッチを詳しく説明しているので、初心者の方にも取り組みやすい内容となっています。

　最近はセンサーを使って遊んだりしてます。一読の価値ありです。

　今回はM5Stackのボタンを使ってみようと思います。
ボタンを使うの難しそう・・・と思いきや簡単に使うことができます！
それではその方法を紹介していきたいと思います。

※以降はM5Stack Basic V2.6を使うことを前提に話を進めていくのでご注意を！

M5Stackのボタンを使ってみよう！〜M5Stackのボタンって？

　ボタンは下の画像のように左からボタンA、B、Cとなっています。これらのボタンを押して画面を切り替えたり、何らかの動作を発生させたい時に使うことができます。色々な使い方ができますが、今回は簡単な例として、前回作った時間変化する画面を、ボタンを押したら変化するプログラムに書き直してみます。

M5Stackのボタンを使ってみよう！〜実際にコードを書いてみよう！

　コードは以下のようになります。今回からソースコードを貼り付けますね。

#include <M5Stack.h>

void setup() {
  // put your setup code here, to run once:
  M5.begin(); //M5Stackの初期化
  M5.Lcd.setTextSize(3); //文字サイズの指定
}

void loop() {
  // put your main code here, to run repeatedly:

  M5.update();  //M5Stackのボタンの操作状況を更新する関数

  if(M5.BtnA.wasReleased()){    //
    //ボタン”A”が押された時の動作
    M5.Lcd.fillScreen(BLACK); //画面をクリア
    M5.Lcd.setTextColor(RED, BLACK);  //文字色と背景色
    M5.Lcd.setCursor(0, 10);  //文字の位置指定
    M5.Lcd.println("Red Rectangle");  //文字の表示
    M5.Lcd.fillRect(135, 95, 50, 50, RED); //図形の表示：四角形
  } else if(M5.BtnB.wasReleased()){
    //ボタン”B”が押された時の動作
    M5.Lcd.fillScreen(BLACK); //画面をクリア
    M5.Lcd.setTextColor(GREEN, BLACK);  //文字色と背景色
    M5.Lcd.setCursor(0, 10);  //文字の位置指定
    M5.Lcd.println("Green Circle"); //文字の表示
    M5.Lcd.fillCircle(160, 120, 25, GREEN); //図形の表示：円
  } else if(M5.BtnC.wasReleased()){
    //ボタン”C”が押された時の動作
    M5.Lcd.fillScreen(BLACK); //画面をクリア
    M5.Lcd.setTextColor(BLUE, BLACK); //文字色と背景色
    M5.Lcd.setCursor(0, 10);  //文字の位置指定
    M5.Lcd.println("Blue Triangle");  //文字の表示
    M5.Lcd.fillTriangle(135, 145, 185, 145, 160, 95, BLUE);  //図形の表示：三角形
  }

}

上記のコードが書けたらM5StackにUploadしてみます。すると、初期は黒い画面ですが、ボタンA→ボタンB→ボタンCと順番に押していくと、前回と同じように「赤い四角形」→「緑の丸」→「青い三角」→「赤い四角形」と変化します。また文字も「Red　Rectangle」→「Green Circle」→「Blue Triangle」→「Red Rectangle」と変化しています。

それでは各コードを説明していきます。ただし、前回と同じコードは説明は割愛させていただきます。

12行目：M5.update()
これはボタンの状態を更新する時に使う関数です。これがないとボタンが動作しないようなので、ボタンを使用する際は必ず必要です。ボタンのほかにもスピーカーの状態を更新する際にも使うようです。書く場所はloop()内の一番先頭です。

14、21、28行目：M5.BtnA.wasReleased()、M5.BtnB.wasReleased()、M5.BtnC.wasReleased()
ボタンを押して離されたタイミングでtrueを返す（動作する）関数です。if文の条件式に入れて使うのが基本となるようです。今回はボタンが離されたタイミングで動作するようにしましたが、ボタン機能は以下のような形の関数で記述することができます。

M5.（どのボタンを使うか）.（どのタイミングで動作させるか）”()

最後に

　M5Stackのボタンの使い方を学びましたが、とても簡単で驚きました。今回がボタンが押されて離されたタイミングで動作するようにしましたが、動作させるタイミングを色々と選べるようです。今後必要になった時にそのあたりの内容も学んでいこうかなと思います。
　次回はいよいよIoTデバイスの開発を紹介できればな〜と思っていますが、気まぐれに書こうかなと思っています。

今回は短いですが、この辺りで終わりにしようかなと思います。
最後まで読んでいただきありがとうございます！