はじめに
私は普段IoTやハードウェアは全く触ったことがありません。
ただ、とあるきっかけで、知人より M5StickC Plus2 を頂きました。
初めて見た時は「なんだこの長細いの…？」という感じでしたが、これがWi-Fi/Bluetooth内蔵のマイコンで、いろいろ作れるらしい。
せっかくなので勉強がてら何か作ってみることに 🏃
何を作る？
「ボタンがあるなら、押したら何か起きるものを作りたい‼️」
ということで思いついたのが、Slackに出退勤を投稿するボタンです。
毎日の「出勤します」「退勤します」の投稿が、ボタン1つで完了します。
全体像
この記事で作るもの
- Aボタン（正面） → 出勤メッセージ
- Bボタン（側面） → 退勤メッセージ
対象読者
- Arduino / ESP32 初心者 / 「物理ボタン × Slack」を試してみたい人
- IoTに興味があるエンジニア
必要なもの
ハードウェア
| 品名 | 備考 |
|---|---|
| M5StickC Plus2 | Amazonやスイッチサイエンスで購入可 |
| USB-Cケーブル | データ転送対応のもの |
ESP32とは？
Wi-Fi/Bluetooth内蔵の小型マイコン。Arduino IDEで開発でき、IoTデバイスによく使われています。M5StickC Plus2はESP32を搭載した製品です。
ソフトウェア
- Arduino IDE 2.x
- Slackワークスペース（Webhook作成権限）
ネットワーク
- 2.4GHz Wi-Fi（必須）
⚠️ ESP32は 5GHz Wi-Fiに非対応 です。2.4GHz帯のSSIDを使用してください。
手順
1. Slack Incoming Webhook を作成
Slackにメッセージを送るための「Webhook URL」を取得します。
- Slack API にアクセス
- Create New App → From scratch
- App名（例：
出退勤ボタン）とワークスペースを選択 → Create App - 左メニュー → Incoming Webhooks → On に切り替え
- Add New Webhook to Workspace → 投稿先チャンネル選択 → 許可
- 表示された Webhook URL をコピー
https://hooks.slack.com/services/<WorkspaceID>/<AppID>/<Secret>
⚠️ Webhook URLは絶対に公開しない！ これが漏れると誰でも投稿できてしまいます。
2. SlackユーザーIDを確認
メッセージにメンションを付けるため、自分のユーザーIDを確認します。
- Slackで自分のプロフィールを開く
- ︙（その他） → メンバーIDをコピー
U0123456789 のような形式のIDが取得できます。
3. Arduino IDE セットアップ
M5Stickにプログラムを書き込むには Arduino IDE というものを使うらしい？🧐
調べてみると、マイコン開発の定番ツールのようで無料で使えます。
- Arduino IDE 2.x をダウンロード・インストール
ESP32ボードを追加
Arduino IDEを開いたら、M5Stick（ESP32）を認識させるための設定をします。
-
Settings（Preferences） を開く
-
Additional boards manager URLs に以下を追加：
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json -
Boards Manager を開き、
esp32を検索 → Install
M5StickCPlus2ライブラリをインストール
- Tools → Manage Libraries...
-
M5StickCPlus2を検索 → Install
4. コードのポイント
完成コードはGitHubで公開していますが、ポイントを解説します。
4-1. Slackへの送信
Webhook URLにJSON形式でPOSTするだけ。これだけでSlackに投稿できます。
HTTPClient http;
http.begin(SLACK_WEBHOOK_URL);
http.addHeader("Content-Type", "application/json");
String payload = "{\"text\":\"出勤しました\"}";
int code = http.POST(payload);
4-2. ボタン検知
M5StickCPlus2ライブラリのおかげで、ボタン検知も簡単です。
M5.update(); // ボタン状態を更新
if (M5.BtnA.wasPressed()) {
// Aボタンが押された → 出勤処理
}
if (M5.BtnB.wasPressed()) {
// Bボタンが押された → 退勤処理
}
4-3. NTPで時刻取得
インターネット経由で正確な時刻を取得。日本時間（UTC+9）に設定しています。
configTime(9 * 3600, 0, "ntp.nict.jp"); // JST設定
struct tm timeinfo;
getLocalTime(&timeinfo); // 現在時刻を取得
👉 完成コード: GitHub - m5stick-slack-attendance
4-4. config.h を作成して秘匿化
attendance_button/config.example.h をコピーして config.h を作成：
cp attendance_button/config.example.h attendance_button/config.h
config.h を編集：
#pragma once
// Wi-Fi（2.4GHzのみ対応）
#define WIFI_SSID "YOUR_WIFI_SSID"
#define WIFI_PASS "YOUR_WIFI_PASSWORD"
// Slack Incoming Webhook URL（絶対に公開しない）
#define SLACK_WEBHOOK_URL "https://hooks.slack.com/services/XXX/YYY/ZZZ"
// SlackユーザーID（プロフィールからコピー）
#define SLACK_USER_ID "U0123456789"
5. 書き込み
- Arduino IDEで
attendance_button/attendance_button.inoを開く - M5StickをUSBで接続
-
Tools メニューで設定：
-
Board:
ESP32 Dev Module - Port: 接続したシリアルポート
-
Upload Speed:
115200（重要！）
-
Board:
- Upload（→ボタン）で書き込み
ハマりポイント
1. Wi-Fiに繋がらない
ESP32は2.4GHzのみ対応です。5GHz Wi-Fiには接続できません。
ルーターの設定で2.4GHzと5GHzのSSIDが分かれているか確認してください。
2. Upload時にエラーが出る
Failed uploading: uploading error: exit status 2
Upload Speed を 115200 に下げてください。
Tools → Upload Speed → 115200
3. Slackに届かない
- Webhook URLが正しいか確認
- URLの前後に空白や改行が入っていないか確認
- Serial Monitorでログを確認（Tools → Serial Monitor、115200 baud）
動作確認
無事に書き込みが完了したら、動作確認です！
起動時の流れ
- Wi-Fi接続中 →
WiFi Connecting... - 接続成功 →
WiFi Connected! - 時刻同期 →
Time Syncing... - Slack送信 →
Slack Sending... - 待機状態 →
Ready!
起動後の画面
起動すると Ready! と表示され、ボタンの説明が出ます。
動作デモ
Slackに届くメッセージ
ボタンを押すたびに、時刻付きでSlackに投稿されます。
M5Stickの画面
| 状態 | 表示 |
|---|---|
| 待機中 |
Ready! + ボタン説明 |
| 送信中 |
Sending...（黄色） |
| 成功 |
Sent!（緑） |
| 失敗 |
Failed!（赤） |
ボタンを押すとSlackにメッセージが届きます。
動いて嬉しい！🎉
まとめ
初めてIoTを触ってみましたが、思ったより簡単に動くものが作れて楽しかったです！
正直、最初は「ハードウェアって難しそう...」と思っていましたが、Arduino IDEのおかげで馴染みやすい開発体験でした。
C++も基本的な書き方だけで十分動きます。
「ボタンを押したらSlackに投稿される」というシンプルなものですが、実際に動くと結構感動します。
IoTに興味はあるけど何から始めればいいか分からない...という方は、ぜひ試してみてください！
ソースコードは以下で公開しています：
👉 GitHub: m5stick-slack-attendance