NextionディスプレイでFridgeyeアプリを構築：ステップバイステップガイド

必要な部品と用品

Arduino UNO	×1
フォトレジスタ（光センサー）	×1
抵抗 3.3kΩ	×1
Itead Nextion Enhanced 3.5インチ タッチディスプレイ	×1

使用するアプリとオンラインサービス

• Nextion GUI Editor（Windowsのみ）
• Arduino IDE
• GIMP（画像編集用）

プロジェクト概要

2021年7月、ドイツのデザイン学生たちが風刺的なKickstarterプロジェクト「Fridgeye」を開始しました。冷蔵庫内の光を検知するセンサー付きデバイスです。一見ジョークのようですが、IoT入門に最適なスコープのプロジェクトでもあります。この記事では、NextionタッチディスプレイとArduinoを使ってFridgeyeアプリを動かすまでの全工程を解説します。

Fridgeyeデバイスを作る

まず光センサー部分を作ります。Arduino、ブレッドボード、フォトレジスタ、3.3kΩ抵抗だけで5分ほどで完成します。以下のように配線してください（ディスプレイ接続は後で行います）。

筆者はProtoShieldにミニブレッドボードを貼り付けて一体化しました。

動作確認スケッチ

void setup() { Serial.begin(9600); }
void loop() {
  int val = analogRead(A0);
  Serial.println(val);
  delay(500);
}

Arduino IDEのシリアルモニタ（ボーレート9600）を開くと、約0.5秒ごとに光量を表す整数（0〜1023）が表示されます。センサーを手で覆ったり、ライトを当てたりして値の変化を確認してください。

Fridgeyeアプリとは？

Fridgeyeアプリはデバイスの相棒となるスマホアプリです。Kickstarterのモックアップでは、検知した光量を0%か100%の二値で表示するだけでしたが、せっかくなので中間値も活用してよりリッチな表示を目指します。

Nextionディスプレイ入門

今回使用するのはNextion Enhanced 3.5インチタッチディスプレイです。抵抗膜式タッチパネル搭載で、グラフィック処理をディスプレイ側で完結できるため、Arduinoのような低スペックMCUでもシリアル2線で制御可能です。ドキュメントが初心者には難解なので、順を追って解説します。

ディスプレイのプログラミングモデル

従来のArduino用ディスプレイライブラリはランタイムで描画コマンドを送りますが、Nextionは「画面上のUIをあらかじめエディタで作成し、IDで参照する」というMVVM/MVCライクなアプローチを取ります。Arduinoはビューの指揮者役に徹し、ピクセル単位の描画から解放されます。

ビューの準備

Fridgeyeアプリは単一ページで完結します。背景画像（ロゴ、背景色、下部の緑バー）は静的なので、GIMPで480×320ピクセル（3.5インチ画面の解像度）の画像を作成します。所要時間約5分。

Nextion Editorでの作業手順

注意: Nextion Editorは.NET Framework必須でWindowsのみ対応。MacではParallels等のVMで動作可能。

1. File → New でプロジェクト作成
2. デバイス選択ダイアログで「Enhanced」「3.5インチ」を選ぶが、まだOKを押さない
3. DISPLAYタブを開き、表示方向を「90 Horizontal」に設定
4. ここでOK
5. ツールボックスからPictureを追加（要素名 p0）
6. 左下のPicture/FontペインでPictureタブを選択
7. +ボタンでGIMPで作った背景画像をインポート
8. 右側属性ペインのpic属性をダブルクリックし、背景画像を選択
9. ツールボックスからTextを追加（要素名 t0、IDは後でArduino側で必要なのでメモ）
10. テキストエリアを「Light Status」の下にドラッグしてリサイズ
11. sta属性を「solid color」から「crop image」に変更し、背景を透過させる
12. picc属性で同じ背景画像を選択（透過効果）
13. pco属性で文字色を設定（例：R125 G231 B191）
14. Tools → Font Generatorでフォント作成（高さ96、Montserrat等）
15. フォント名を付けてGenerate Font、保存場所をメモ
16. ダイアログを閉じ、「生成したフォントを追加しますか？」でYes（フォントインデックス0として登録）
17. t0のtxt属性を「100%」にして見た目確認
18. 位置を微調整
19. ツールバーのCompileをクリック

成功すれば %AppData%\Nextion Editor\bianyi\ に .tft ファイルが生成されます。

ディスプレイへの書き込み

方法は2つ：

• USB-TTL変換アダプタ経由：Nextion IDEから直接アップロード
• microSDカード経由：FAT32フォーマット、単一の.tftファイルのみを配置

SDカード手順：

1. ディスプレイの電源を切る
2. SDカードを挿入
3. 電源オン → 更新画面が表示される
4. 完了後、電源オフ → SDカード抜く（挿したままではアプリが起動しない）
5. 再度電源オン → Fridgeyeアプリ画面が表示される（光量値はまだ0%）

ArduinoにNextionの言葉を教える

Nextionライブラリのインストール

1. 最新版 ITEADLIB_Arduino_Nextion をダウンロード
2. Arduinoの libraries フォルダにフォルダごとコピー
   • Windows: C:\Users\[ユーザー名]\Documents\Arduino\libraries
   • Mac: ~/Documents/Arduino/libraries
3. Arduino Unoの場合、ライブラリ内の NexConfig.h を編集：
   • #define DEBUG_SERIAL_ENABLE と #define dbSerial Serial をコメントアウト
   • #define nexSerial Serial に変更（Unoのハードウェアシリアルを使用）
4. Arduino IDEを再起動

スケッチ全文

#include "Nextion.h"
long lastUpdate;
int SENSOR = A0;
NexText t0 = NexText(0, 2, "t0");

void checkSensor() {
  int val = map(analogRead(SENSOR), 0, 1024, 0, 100);
  String displayText = String(val) + "%";
  t0.setText(displayText.c_str());
}

void setup(void) {
  lastUpdate = millis();
  pinMode(SENSOR, INPUT);
  nexInit();
}

void loop(void) {
  nexLoop(NULL);
  if (millis() - lastUpdate > 100) {
    checkSensor();
    lastUpdate = millis();
  }
}

コード解説

• #include "Nextion.h"：ライブラリ読み込み
• lastUpdate：画面更新間隔制御用変数
• SENSOR = A0：ピン番号にわかりやすい名前を付与
• NexText t0 = NexText(0, 2, "t0")：ページ0、コンポーネントID2のテキスト要素を参照
• checkSensor()：analogReadで0〜1023を取得し、map()で0〜100%に変換、文字列化してt0.setText()で表示更新
• setup()：シリアル初期化、ピンモード設定、Nextionライブラリ初期化
• loop()：nexLoop()でライブラリ内部処理を回し、100msごとにセンサー読み取り・表示更新

ディスプレイ接続

スケッチを書き込んだら（Unoの場合、書き込み中はディスプレイを外す）、Fritzing図の通りに配線して電源投入。光センサーの値がリアルタイムで画面に表示されます。

まとめと発展

「冷蔵庫の中に入れると画面が見えないじゃないか」という鋭い指摘はごもっとも。このプロジェクトは「作って学ぶ楽しさ」が主目的です。発展として、センサーを冷蔵庫内に、ディスプレイを外部に配置し、Wi-Fi/Bluetooth/Zigbee等で無線化するアイデアがあります。挑戦した方はTwitter @KevinSidwar またはメールで教えてください。

IoT入門コースを準備中です。興味があればチェックしてみてください。最後までお読みいただきありがとうございました！

コード

Arduinoスケッチ（上記全文と同一）

回路図

Arduino、フォトレジスタ、抵抗、Nextionディスプレイの配線図