ESP32で上司に「たすけて」っていうシステムを作りたかった話

# はじめに
はじめまして。深夜のノリでAdvent Calenderに登録してしまった新人エンジニアです。
9月に入社し、まだ3か月と少ししか経っていません。
現在フルリモートで働いています。
メンバーとのコミュニケーションもぼちぼち取れてきたかな…という状況です。

**だったのですが、今投稿します。** 現在無事2年目に突入しました！！

ということでこの記事はAdvent Calender2022改め
PERSOL CROSS TECHNOLOGY Advent Calendar 2024です。
素敵な先輩たちがいっぱい記事を書いてくれているので、ぜひ読んでください！
https://qiita.com/advent-calendar/2024/persolcrosstechnology
<br>
そんな私ですが、大きな悩みがあります。
それは、**「うわ！！！困った！！！助けてマネージャー！！！」** という際に
「でもスケジュール見たらすごい忙しそう…急に連絡するの、迷惑かな……。」とか、
「まだ気軽に助けてって言いにくいな……。」とか考えてしまい、
連絡するのに二の足を踏んでしまっていることです。(2022年時)
困っているということを言い出せないけど気づいてほしい……。

そこで閃きました。

言わなくても困ってるってことが伝わればな……。
そういえばサーバールームとかエラー起きたときにパトランプ光ってるよな……。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/a3b15280-49b5-fd49-7109-9266b41320dd.png)
こういうの
<br>
<br>



あ！！！！！！！
<br>
<br>

**ボタンをポチっとしたらランプ光らせるやつ作って上司のデスクに置いてもらお！！！<br>リモートワークでも気づいてもらえるじゃん！！**

やっていきます。

# やりたいこと
わたし「わーーーーー困った！！！！！！！」
↓
スイッチぽち
↓
:rotating_light:ペカー
↓
マネージャー「うわー！！なんか光っとる！！」
<br>
# 用意したもの

#### ESP32(というかM5Stack)
ESP32初心者なのでM5Stackを使います。

>M5Stack（エムファイブスタック）は、約5cm×5cmの正方形のケースの中にWi-FiとBluetoothによる無線通信機能を備えたCPU（ESP32）をはじめ、カラー液晶ディスプレイ・プッシュボタン・スピーカ・microSDカードスロット・バッテリーなどの周辺部品がひとつのモジュールにまとまっている、小型のマイコンモジュールです。
IoT機器を開発する際に頻繁に使われる機能が上述のように標準搭載されているため、液晶ディスプレイやmicroSDカードスロットなどを使うためにわざわざ配線をする必要がなく、ハードウェア開発の手間が大幅に削減され、ソフトウェア開発に専念することができる汎用性の高さから人気が高まっています。

 https://deviceplus.jp/mc-general/what-is-m5stack/


今回はSwitch Scienceの[**ATOM Lite**](https://www.switch-science.com/products/6262?_pos=13&_sid=7bd63e77e&_ss=r)を使用します。

1500円、やっすい

#### リレーユニット
リレーモジュールなんもわからん！となったのでリレーユニットを購入。
「M5Stack リレーユニット」で検索してヒットした[こちら](https://www.switch-science.com/products/7628?_pos=4&_sid=d8c3af7d0&_ss=r)を使用。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/3918e79f-468d-42b3-534e-2b5e531231ee.png)

#### ジャンプワイヤとブレッドボード
具体的な製品名を覚えていないのですがこんなやつを買いました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/9afd1be4-dcd8-fdc4-ebe1-c768663d1041.png)


#### ランプ
Amazonでなんかいい感じのやつを買います。


# 環境構築
#### エディタ
Arduino IDE(2.0.3)を使用します。

https://www.arduino.cc/en/software

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/ed9458c9-ba46-88ba-8c56-562db7ff2dc7.png)

入った！あとはM5 Stackと繋げたらいいんだよね、楽～！！
……あれ？

#### USBに挿しても認識されない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/ec8a7e26-53d1-32b8-d305-45d6ff27b2c8.png)
ここに出てくるって聞いたんだけど出てないな……？

![スクリーンショット 2022-12-08 092318.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/1ed6a9a8-f62c-3e39-3cf8-5c1d7fee7380.png)
ドライバーがないのか。
じゃあドライバーをインストールしよう！


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/a33e324d-f1fe-dcff-7e49-6643ac86113d.png)
調べたらCP210x_VCP_Windowsってやつらしいな、インストール！

![スクリーンショット 2022-12-08 092318.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/1ed6a9a8-f62c-3e39-3cf8-5c1d7fee7380.png)
:thinking:

![スクリーンショット 2022-12-08 093006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/f9a90eec-e37d-c73a-b475-47ab71e34655.png)
![スクリーンショット 2022-12-08 093506.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/26faf0be-d487-9f96-944d-cb48e4de3bd7.png)


IoT自信~~おじさん~~お兄さんたちありがとう
この記事はこのお兄さんたちに支えられてできています
~~なお2022年時点でいたこのお兄さんたちは今ほぼいません。~~

https://dev.classmethod.jp/articles/m5stack-usb-driver/

教えてもらったのがこのサイト。
私が使うATOM Liteは「FTDI Drivers」というやつが必要らしく…
[ここ](http://docs.m5stack.com/en/download)からインストールできます。


インストール後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/fadec112-f876-d5cc-d169-cb68e3ffd166.png)
なんか出た！合ってそうな気がする！

あとはボード。どれがいいのかわからず……。

https://karakuri-musha.com/inside-technology/arduino-02-install-board-manager/

こちらのサイトにお世話になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/bc6e38df-6162-2232-503d-855ab4c80775.png)
たぶんこれかな？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/3d2fd7dd-5569-7d8f-f5bb-063d25a4ea34.png)
できた！！！！！！

# 動確をする
とりあえずLチカをやってみよう！

#### ライブラリのインストール
Arduino IDEの「ツール」より「ライブラリを管理…」を選択し、ライブラリを追加します。
(と偉そうに言っていますが初めての開発なのでライブラリって何？と思っています)

>　ライブラリは、センサやディスプレイ、モジュールなどとArduinoとの接続を容易にするためのコードの集合です。例えば、Arduinoソフトウェア付属のLiquidCrystalライブラリはLCDディスプレイの操作を容易にします。インターネット上にはダウンロード可能な追加ライブラリが多数存在します。付属のライブラリといくつかの追加ライブラリはLibrariesに載っています。追加のライブラリを利用するには、それらをインストールする必要があります。

https://garretlab.web.fc2.com/arduino_guide/libraries/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/72a77b1a-77c3-86d6-b193-93ce87c40c8e.png)
「M5ATOM」と検索し、こちらのライブラリをインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/f356014f-aa0f-1994-deab-19a48c81d620.png)
「FastLED」はこれを使います。

#### いざLチカ

「ファイル」→「スケッチ例」→「M5Atom」→「Basics」→「LEDSet」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/50325801-b358-f572-92de-89b3c38f2f17.png)
参考サイト：https://msr-r.net/atom-lite-setting/

![trim.ADA279EB-5310-411B-933D-05BE2C3731C0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/a10f238d-44bb-f31f-c3c9-e2241727d593.gif)

**動いた！！！！！！！！**
ひとまずATOM LiteとArduino IDEの接続はちゃんとできました。
やっと半分というところ……。

# 工作
とても雑ですが今回の回路図はこちら。
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/c28d5b43-28b0-05f4-d593-afdf434aebff.png)

ということでまずはランプの線を切ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/0594b9be-6a89-90f2-e77b-154f9772f0f6.png)
抑えている場所が悪いのですが、ちょうど真ん中くらいで切断し、ランプ側とPC側の2本にしました。

外側がビニールで覆われているので、ペンチでいい感じに取ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/5f67f206-26c1-dc76-5933-e2605ad46b4f.png)

と、黒い線と赤い線がでました。(回路図の黒と赤に対応してます)

これもビニールなので、また外側を取ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/40c7a53e-65be-6fcd-81e5-e99242f514a2.png)

これ赤が成功パターンです。
後から「これどっちの線！？」となるので若干見えるように残しておきましょう……。

続いてジャンプワイヤも同じく切断し、銅線を出します。
ジャンプワイヤを使ってブレッドボードに繋げるためです。

銅線が出たら、ランプの銅線とよりよりして一本にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/e3d0619e-faf0-0b7d-c184-be71c2675230.png)
ジャンプワイヤと繋げるときに銅線長い方がよりよりしやすかったので多めにむき出しておくことをお勧めします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/509b1958-68ef-38f2-374b-e4a2f57f25d0.png)
はんだ付けじゃ～～～～～！！！！！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/cb7f31a0-b92d-e468-2559-e1d5a9002e1f.png)

へたくそか？つながったのでOKです。
このあとは、はんだ付けした部分をセロテープで保護し、
ブレッドボードにはんだ付けしたジャンプワイヤをさし、
ブレッドボードとリレーを未加工のジャンプワイヤで繋ぎます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/ce9c1276-e41d-e878-aa24-84253844f45b.png)

ブレッドボードはこんなかんじです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/f6b0dd58-23dc-ffb3-2cbd-b518bbce224c.png)

これも有識者おじさんに教えてもらったのですが、
ブレッドボードの裏側をみるとこんな感じになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/b40f4101-a3ae-2132-bfe6-abd0fef1aae0.png)

上段と中段は縦に繋がっていて、下段は横に繋がっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/f93a7d17-8f42-4c7e-c3ad-0e788c7d0d7d.png)

同じ番号のラインに線をつないじゃうと回路がパーンとなるのでずらさないといけないみたいです。
こちらのサイトでとてもわかりやすく書いてくれています！
https://iot.keicode.com/electronics/what-is-breadboard.php

# とりあえず回路ができているのか確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/bb664f74-facf-4cd2-9d3b-7455e401d4e7.png)
普通にランプの電源をONにしてみます。
これで点かなかったらシンプルな回路ミスです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/74723bdf-362d-5623-ef2b-d34fc748327f.png)
点いた！ヨシ！！！！

# コードを書こう
やっとコードを書くところにたどり着きました。
今回書いたコードはこちら。

```c
// M5 Atomのライブラリをインポートする
#include <M5Atom.h>

#define RELAY_PIN1 32
#define RELAY_PIN2 26

//M5Stackが起動したとき1回だけ走る
void setup(){
  M5.begin();
  // リレー接続したピンを出力モードに変更
  pinMode(RELAY_PIN1,OUTPUT);
  // pinMode(RELAY_PIN2,OUTPUT);
  // リレーOFF
  digitalWrite(RELAY_PIN1,LOW);
  //digitalWrite(RELAY_PIN2,LOW);

}
// setupが終わり次第Loopに入る
void Loop(){
  // ボタンを押したらリレーをONにする
  if(M5.Btn.wasPressed()){
    digitalWrite(RELAY_PIN1,HIGH);
    // 1000ミリ秒待つ
    delay(1000);
  }
  // リレーOFF
  digitalWrite(RELAY_PIN1,Low);
  //ボタン操作の取得に必要
  M5.update();
}
```
初めてArduinoを使ったのですが、C/C++のような感じで書くんですね……。
ちなみに頻出するPINはこれのことです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/fa35da49-99f3-6d19-4127-f4d67005e4fd.png)

びっくりするくらい粗いのですが、白いコードがPIN1、黄色がPIN2です。


で、書いたコードを読み込ませる(Type-CでPCと接続する)と、完成です！

![プレゼンテーション1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217543/4e745ce2-c457-44eb-e79f-627de5c0754a.gif)

完！！

# はんせいかい
2022年のアドベントカレンダーに登録したはずが2024年のアドベントカレンダーに投稿されるというめちゃ時差投稿でした。ほんとうに申し訳ない。
今もリモートワークが続いているので、今度こそPower Automateを使って在宅の上司にアラートを飛ばすシステムを作りたいです。