E-inkディスプレイ搭載のM5Paperで今週の献立表を作ってみた

この記事は CARTA TECH BLOG アドベントカレンダー2024 の 12/10 の記事です！

DIGITALIOでエンジニアをしているguriです。
気になっていたけどなかなか触れていなかった技術をアドベントカレンダーの機会を活かして触ってみる「アドベントカレンダー駆動開発」として、今年はE-inkディスプレイ搭載のM5Paperを使って今週の献立を表示するデバイスを作成してみました。我が家では、大体毎週末に一週間分の献立をホワイトボードに作成し冷蔵庫に掛けておくという形になっており、これを手に入れたM5Paperで置き換えたいという算段です。

さっそくですが、完成系はこのようになりました。

コンパクトでありながら様々なセンサーが組み込まれているM5Paperにものすごく可能性を感じました。これを機に色々なAPIやライブラリを活用して自宅IoTデバイスをもっと作ってみたいなと思いました。

この記事では、M5Paperを使って今週の献立表デバイスを作成するまでの試行錯誤を紹介していきます。

今週の献立表デバイスを作成するまで

まずは動作確認

M5PaperをMacに接続して動作確認をしていきます。 M5Paperを用いて開発する方法は複数あるのですが、今回はUIFlowというWebブラウザ上でビジュアルプログラミングやMicroPythonを使って開発を進められる方法で進めていきます。 UIFlowを使うには、M5Burnerを使ってUIFlowに対応したファームウェアを書き込む必要があります。この辺りは公式サイトの手順にしたがって操作を行なっていきます。

M5Burnerの設定が終わったらFactoryTestを使って書き込みが成功するかを確かめました。成功すると以下のような画面が表示されます。

M5Paperはタッチ操作が可能なので、この状態でも色々と触って挙動を体験することができます。 E-inkディスプレイの独特の画面更新がなんだかアナログ感もあってかわいいです。

UIFlowを使ってみる

動作確認が済んだので、さっそくUIFlowを使って開発を進めてみます。 M5BurnerからUIFlow2.0を選んでファームウェアを書き込みます。

成功すると、Web上のUIFlowからM5Paperの開発が可能になります。一度デバイスの設定が済んでしまえばWiFi経由で実行できるのに驚きました。常にデバイスをUSBなどでMacに接続しておく必要がなく開発体験が良いです。

献立を表示させる

まずはどんな感じに表示しようかなーということで、ドラッグ&ドロップでテキストのイメージを配置していきます。

火曜日までの献立を並べたところで面倒になり、プログラミングで解決することにしました。せっかく触ったことのない技術を触ってみるモチベーションでやっているので、まずはビジュアルプログラミングに挑戦しました。

「せっかくだし、アドベントカレンダーのネタとして全部ビジュアルプログラミングで作ってみたでも良さそう！まずは日付の配列を作って、ここに献立を追加していくと良さそうだな！」と思い、画像の部分まで作ったところで面倒になりました。怠惰すぎる。

UIFlowではMicroPythonを使って開発をすることができます。 Python自体をがっつり触ったことが無かったのですが、ChatGPTに聞きながらスムーズに進めることが出来ました。日付とメニューを持つデータ構造を用意して、それを使っていい感じの位置に繰り返し表示ができるようになりました

「よーし、あとは献立データを追加するだけだから余裕余裕」と思い1週間分のデータを追加したところ、画面から大幅にはみ出してしまいました。また、デバイスのサイズはそこまで大きくないのでキッチンでちらっと見れるようにするにはもう少し文字サイズが欲しいです。

そこで、タッチ機能を活かして週の前半と後半でページ送りを出来るようにしました。これもChatGPTに聞いたらシュッと実装することができ、以下のような形になりました。いい感じです。

献立の表示がいい感じになったので、せっかくなので給食っぽくデザインを整えて完成です！画像の表示もUIFlowからアップロードして簡単に実装することができました。これMicroPythonでどう実装するんだろう？というものはサンプルプロジェクトを作ってビジュアルプログラミングで表示した後にソースを確認するなどといった手順も有効でした。