メインコンテンツに移動

builders.flash

日常で楽しむクラウドテクノロジー

朝に弱い私を救う! M5Stack Core2 で作る朝の情報ダッシュボード

2025-10-02 | Author : 大久保 裕太

はじめに

Note: This project is designed for Japanese users and contains Japanese language strings and region-specific API (Tokyo public transportation). The code includes Japanese text for display purposes and is optimized for use in Japan.

朝起きて「今日は燃えるゴミの日だっけ?」「電車遅延してないかな?」「傘いるかな?」こんな疑問を毎朝スマホで調べるのに疲れていませんか?

私も朝が弱く、ベッドから起き上がってスマホを開いて、複数のアプリを確認して...という作業が面倒で仕方ありませんでした。特に寝ぼけているかつ急いでいる状態だと、重要な情報を見落とすことも多々ありました。電車の遅延に気づかずに遅刻したり、雨予報を見逃して傘を忘れたり、ゴミ出しの日を間違えたりと、朝の情報収集の失敗は日常生活に直結する問題でした。

「もっと直感的に、一目で分かる方法はないだろうか?」

そこで思いついたのが「一目で分かる朝の情報ダッシュボード」です。M5Stack Core2 は液晶ディスプレイ、Wi-Fi、LED、各種センサーがコンパクトに搭載されたマイコンボードで、プロトタイピングから実用的なIoTデバイス開発まで幅広く活用できます。今回のような「情報を視覚的に表示する」用途には、LED とディスプレイの両方を使える M5Stack Core2 がまさにぴったりでした。この M5Stack Core2 と AWS を使って、電車・天気・ゴミ出し情報を LED の色で視覚的に表示するデバイスを作りました。

X ポスト » | Facebook シェア » | はてブ »

ご注意

本記事で紹介する AWS サービスを起動する際には、料金がかかります。builders.flash メールメンバー特典の、クラウドレシピ向けクレジットコードプレゼントの入手をお勧めします。

*ハンズオン記事およびソースコードにおける免責事項 »

builders.flash メールメンバー登録

builders.flash メールメンバー登録で、毎月の最新アップデート情報とともに、AWS を無料でお試しいただけるクレジットコードを受け取ることができます。

今すぐ登録 »

概要

このシステムでは、Web ページ上で天気予報を知りたい地域名、運行状況を知りたい路線、ゴミ出しのスケジュールを設定すると、Web ページと M5Stack Core2 デバイスの両方で確認することができます。

ダッシュボードの設定

まず Webページ上で「天気予報を取得したい場所」、「電車の路線名」、「ゴミ出しスケジュールやエリア名」を設定すると、ダッシュボード上でリアルタイムに確認することができます。

M5Stack Core2 での動作

同時に、M5Stack Core2 上では電車・天気・ゴミ出し情報を LED の色で視覚的に表示されます。電車運行状況では遅延・運休時に赤い LED で警告し、天気予報では悪天候時に青い LED で傘の準備を促し、ゴミ出し日には緑の LED でお知らせしてくれます。

家のドア近くにデバイスを設置しておけば、出かける前にパッと LED を見るだけで何を準備していくべきなのかが一目で分かります。

今回の例では、天気が悪天候かつゴミ出し日であったため青と緑のライトが点灯しています。

デバイスの操作も直感的に設計されており、M5Stack Core2 本体の3つのボタンで情報を切り替えることができます。左側のボタンで電車情報、中央のボタンで天気情報、右側のボタンでゴミ出し情報の詳細表示が可能です。ボタンの位置と表示される情報が対応しているため、初めて使う方でも迷うことなく操作できます。

システムアーキテクチャ

アーキテクチャは以下の通りになります。
このシステムは、朝の忙しい時間に必要な情報を一目で把握できることを最優先に設計しました。複雑な操作は一切不要で、LED の色を見るだけで状況が分かる仕組みになっています。

Missing alt text value

アーキテクチャの説明

  • Amazon EventBridge が15分間隔で AWS Lambda を起動し、東京公共交通オープンデータチャレンジ(ODPT)の API から電車運行情報を取得します。天気情報については、まず Amazon Location Service(GeoCoding機能)を使用して設定された地域名から緯度経度を取得し、その座標を基に Open-Meteo API から天気情報を取得します。取得したデータは Amazon DynamoDB に保存されると同時に、AWS IoT Core を経由して MQTT プロトコルで M5Stack Core2 デバイスにリアルタイム配信されます。M5Stack Core2 は受信したデータを解析してLEDの色で視覚的に通知し、ディスプレイに詳細情報を表示します。
  • ユーザーが M5Stack Core2 のボタンを押しても、デバイスから AWS IoT Core にデータ更新リクエストが送信され、即座に Lambda が起動して最新情報を取得・配信する手動更新の仕組みもあります。この機能により、定期実行を待たずに最新の情報を確認することができます。
  • Web アプリケーションは Amazon S3 + Amazon CloudFront でホスティングし、AWS AppSync の GraphQL API 経由で DynamoDB のデータにアクセスして、ブラウザで各種情報の確認や設定変更ができます。
では、作っていきましょう!

環境構築

typescript
M5StackCore2-SmartHome/
├── README.md                    
├── deploy.sh                   # デプロイスクリプト
├── platformio.ini              # M5Stack Core2 設定
├── requirements.txt            # Python依存関係
│
├── src/                        # M5Stack Core2 ソースコード
│   └── main.cpp
│
├── cdk-infra/                  # AWS CDK インフラ
│   ├── .env                    # 環境変数
│   ├── package.json
│   ├── schema.graphql          # GraphQL スキーマ
│   ├── bin/
│   │   └── m5stack-aws-cdk.ts
│   ├── lib/
│   │   └── m5stack-aws-cdk-stack.ts
│   └── lambda/                 # Lambda 関数
│       ├── shared_utils.py     # 共通ユーティリティ
│       ├── settings_handler.py # 設定管理
│       ├── weather_handler.py  # 天気情報
│       ├── train_handler.py    # 電車情報
│       ├── garbage_handler.py  # ゴミ出し情報
│       ├── data_sender_handler.py # 統合データ送信
│       └── layers/             # Lambda Layer
│           └── requirements.txt
│
└── web-app/                    # Web アプリケーション
    ├── package.json
    ├── vite.config.js
    ├── index.html
    ├── public/
    └── src/
        ├── main.jsx
        ├── App.jsx
        ├── components/         # React コンポーネント
        │   ├── Dashboard.jsx
        │   ├── Settings.jsx
        │   ├── WeatherWidget.jsx
        │   ├── TrainWidget.jsx
        │   └── GarbageWidget.jsx
        └── graphql/           # GraphQL クエリ
            ├── queries.js
            ├── mutations.js
            └── subscriptions.js

はじめに、サンプルコードをダウンロード してください。M5StackCore2-SmartHome.zip を展開すると以下のディレクトリ構成になっています。

🛠️ Step 1: 開発環境準備

M5Stack Core2 の開発環境をセットアップ

まず、M5Stack Core2 のプログラムを開発するための環境を整えます。Visual Studio Code と PlatformIO 拡張機能を使うと便利に開発できるため、この方法をご紹介します。Visual Studio Code と PlatformIO のセットアップは Core2 for AWS IoT Kit :: AWS IoT Kit にまとまっていますのでドキュメントの手順にそって準備してください。

Missing alt text value

Python 仮想環境セットアップ

M5Stack Core2 デバイス登録スクリプト用のPython環境を準備します。

python
# プロジェクトルートで実行
cd M5StackCore2-SmartHome

# Python仮想環境作成
python3 -m venv m5stack_venv

# 仮想環境アクティベート
# macOS/Linux:
source m5stack_venv/bin/activate
# Windows:
# m5stack_venv\Scripts\activate

# プロンプトが変わることを確認
# (m5stack_venv) $ 

パッケージをインストール

仮想環境がアクティブな状態で、必要なパッケージをインストールします。

python
# 仮想環境がアクティブな状態で実行
pip install --upgrade pip
pip install -r requirements.txt

requirements.txt には、AWS SDK for Python (Boto3)、証明書生成用の cryptography、M5Stack Core2 通信用の pyserial(オプション)、AWS CLI、HTTP 通信用の requests が含まれています。

🌐 Step 2: 外部 API 準備

このシステムでは、リアルタイムな情報を取得するために複数の外部 API を活用しています。

ODPT (東京公共交通オープンデータ) API

電車運行情報の取得には、東京公共交通オープンデータチャレンジ(ODPT)の API を使用します。これは東京都内の公共交通機関の運行情報をリアルタイムで提供する無料のサービスです。

ODPT では電車運行情報、遅延情報、駅情報等の詳細なデータを提供しており、東京メトロや都営地下鉄、JR東日本の一部路線の情報を取得できます。利用は無料ですが、事前の登録が必要です。

アクセストークンを取得するには、以下の手順を実行します:

  1. https://developer.odpt.org/ にアクセス
  2. 「ユーザ登録」をクリック
  3. メールアドレス、パスワードなどを入力し、利用規約に同意して登録
  4. 登録申請後、最大2営業日程度で承認完了のメールが送られる
  5. ログイン後、「ODPT センター用アクセストークン」をクリックしてトークンを入手

 

Missing alt text value

Open-Meteo API (天気情報)

天気情報の取得には、Open-Meteo API を使用します。

Open-Meteo では天気予報や現在の気象情報を提供しており、世界中の地域の天気データを取得できます。例えば東京の天気が知りたい際は、東京の座標(緯度35.6895、経度139.6917)を指定することで、現在の天気や今日の予報を取得できます。

※ Open-Meteo APIは個人利用や非商用利用では無料で使用できますが、商用利用の場合は有料プランへの加入が必要です。商用利用を検討される場合は、Open-Meteo の料金プランをご確認ください。

Missing alt text value

📱 Step 3: M5Stack Core2 デバイスの設定

M5Stack Core2 を Type-C ケーブルで PC に接続した状態で準備しておきます。この手順では、デバイスを AWS IoT に登録し、必要な証明書を生成して、M5Stack Core2 にコードを書き込む作業を行います。

Missing alt text value

デバイス登録スクリプト実行

AWS IoT Core にデバイスを「モノ」として登録し、AWS に接続するために必要なデバイス証明書などをダウンロードします。この作業により、M5Stack Core2 がAWS クラウドと安全に通信できるようになります。

typescript
# 仮想環境がアクティブであることを確認
source m5stack_venv/bin/activate

# デバイス登録実行
python scripts/register_device.py --device-id DEVICE_ID #例:m5stack-demo-001

# 実行結果例:
# ✅ Device 'm5stack-demo-001' registered successfully
# 📁 Certificates saved to: data/
# 🔑 Private key: data/private_key.pem
# 📜 Certificate: data/device.pem
# 🏛️ Root CA: data/rootCA.pem

M5Stack Core2 コード書き込み

先ほど生成したデバイス証明書や、デバイス上で実行するスクリプトを M5Stack Core2 に書き込みます。ここで最初に設定した PlatformIO を使用します。

VS Code で PlatformIO の拡張機能をクリックし、QUICK ACCESS → Miscellaneous → New Terminal から PlatformIO ターミナルを起動します:

Missing alt text value

AWS IoT エンドポイントを確認

次に、AWS IoT エンドポイントを確認します:

typescript
# AWS IoTエンドポイント取得
aws iot describe-endpoint --endpoint-type iot:Data-ATS

# 出力例:
# {
#     "endpointAddress": "XXXXXXXX-ats.iot.us-west-2.amazonaws.com"
# }

main.cpp ファイルを編集

次に、src/main.cpp ファイルを編集し、設定を更新します:

cpp
// Wi-Fi設定を更新
const char* ssid = "YOUR_WIFI_SSID";        // あなたのWi-Fi SSID
const char* password = "YOUR_WIFI_PASSWORD"; // あなたのWi-Fiパスワード

// AWS IoT設定(実際の値に更新)
const char* aws_iot_endpoint = "xxxxxxxx-ats.iot.us-west-2.amazonaws.com"; // 取得した値
const char* device_id = "DEVICE_ID";   // 登録したデバイスID #例:m5stack-demo-001

PlatformIO ターミナルでコマンドを実行

PlatformIO ターミナルで以下のコマンドを順番に実行します:

typescript
# SPIFFSファイルシステム書き込み
pio run -t buildfs
pio run -t uploadfs

# メインコード書き込み
pio run -t upload

🔧 Step 4: AWS リソース作成

最後に AWS 上のクラウドリソースを作成していきます。このステップでは、CDK(Cloud Development Kit)を使用してインフラストラクチャをコードとして管理し、一貫性のあるデプロイを実現します。

環境変数設定

まず、CDK ディレクトリに移動し、環境変数ファイル .env を設定します:

typescript
# CDKディレクトリに移動
cd cdk-infra

.envファイルの設定例

ODPT センター用アクセストークンをODPT_ACCESS_TOKEN に、記入してください

typescript
# Project Configuration
PROJECT_NAME=M5StackSmartHome

# Replace with your actual IoT endpoint (format: xxxxxx-ats.iot.region.amazonaws.com)
IOT_ENDPOINT=
DEVICE_ID=

# External API Configuration
TRAIN_API_ENDPOINT=https://api.odpt.org/api/v4/odpt:TrainInformation
WEATHER_API_ENDPOINT=https://api.open-meteo.com/v1/forecast

# ODPT Access Token
# Get your token from: https://developer.odpt.org/
ODPT_ACCESS_TOKEN=

CDK デプロイ実行

typescript
# CDKディレクトリに移動
cd cdk-infra

AWS Cloud Deployment Kit (CDK) を使うのが初めての場合は、AWS CDK 概要 (Basic #1)【AWS Black Belt】CDK の開発者ガイドなどを参考に CDK をインストールしてください。すでに CDK がインストールされていれば、以下のコマンドでセットアップできます。

CDK デプロイ実行

AWS Cloud Deployment Kit (CDK) を使うのが初めての場合は、AWS CDK 概要 (Basic #1)【AWS Black Belt】CDK の開発者ガイド などを参考に CDK をインストールしてください。すでに CDK がインストールされていれば、こちらコマンドでセットアップできます。

Missing alt text value

デプロイ完了

デプロイが完了すると以下のようなメッセージが表示されます。

bash
🎉 M5Stack Smart Home Deployment Completed!

📊 Deployment Information:
==========================
🌐 Web Application URL: https://XXXXXXXXX.cloudfront.net
📡 IoT Endpoint: XXXXXXXXX-ats.iot.us-west-2.amazonaws.com
🔗 GraphQL API URL: https://XXXXXXXXXXX.appsync-api.us-west-2.amazonaws.com/graphql

📱 Next Steps:
1. Visit your web application: https://XXXXXXXXXX.cloudfront.net
2. The app has real configuration from CloudFormation
3. Configure your M5Stack device with IoT endpoint: XXXXXXXXX-ats.iot.us-west-2.amazonaws.com
4. Monitor your device status through the web interface

🔧 How It Works:
• CDK creates infrastructure first
• Web app builds with real CloudFormation outputs
• CDK uploads web app with correct config.json
• Everything works perfectly!

🔧 Additional Resources:
• AWS Console: https://console.aws.amazon.com/
• CloudFormation Stack: https://console.aws.amazon.com/cloudformation/
• S3 Bucket: https://console.aws.amazon.com/s3/
• CloudFront Distribution: https://console.aws.amazon.com/cloudfront/

✨ Your M5Stack Smart Home system is now fully deployed!

成功 !

表示された 🌐 Web Application URL にアクセスしてこのような画面が出てきたら成功です!

Missing alt text value

まとめ

いかがだったでしょうか?

正直、最初は「 LED で情報表示って本当に便利なの?」と半信半疑でした。でも実際に使ってみると、朝の忙しい時間にパッと見るだけで「今日は傘いるな」「電車遅れてないな」が分かるのは想像以上に便利でした!特に良かったのは、スマホを何度も確認する必要がなくなったこと。朝の情報収集時間が大幅に短縮されて、その分ゆっくりコーヒーを飲む時間ができました。

朝が弱い方、毎朝の情報収集に疲れた方、IoT 初心者で M5Stack Core2 と AWS で本格的なIoTシステムを体験したい方、個人開発者でフルスタック開発のスキルアップを目指す方、効率化好きで日常の小さな不便を技術で解決したい方におすすめです。

朝の時間を有効活用して、より良い一日のスタートを切りましょう!

筆者プロフィール

大久保 裕太 (Yuta Okubo)

アマゾンウェブサービスジャパン合同会社
ソリューションアーキテクト

普段は流通小売業のお客様を中心に技術支援を行っています。
好きな AWS サービスは AWS IoT Core と Amazon Braket。

Missing alt text value