【ITニュース解説】Ambient-Adaptive CO2 Bar with BleuIO & HibouAir

2025年09月03日に「Dev.to」が公開したITニュース「Ambient-Adaptive CO2 Bar with BleuIO & HibouAir」について初心者にもわかりやすいように丁寧に解説しています。

作成日: 更新日:

ITニュース概要

BleuIOとHibouAirを使って、CO2レベルを可視化するWebアプリを紹介。BleuIOドングルでHibouAirセンサーからBLEでCO2値を読み取り、ブラウザ上にカラーバーで表示。閾値を超えると警告を表示。データはローカルで処理され、プライバシーにも配慮。換気の目安として、会議室やオフィスでの利用を想定。

ITニュース解説

この記事では、BleuIO USB BLEドングルとHibouAir CO2モニターを使用して、周囲環境に適応するCO2濃度表示器を作成する方法を解説する。このシステムは、ブラウザ上で動作するシンプルなWebアプリケーションで、HibouAirセンサーからBLE(Bluetooth Low Energy)通信でブロードキャストされるCO2レベルを読み取る。ペアリングやクラウドサービス、バックエンドシステムは不要で、ブラウザ、ドングル、そしてCO2値を色分けされたバーとして表示するHTMLファイルのみで構成される。CO2濃度が設定された閾値を超えると、「High CO2」という警告が表示される。

このプロジェクトは、以前に公開された騒音レベル表示器の構造とUIを再利用し、CO2濃度を読み取るように変更したものだ。

構築するシステムは、単一のHTMLファイルで構成され、Web Serial APIを通じてBleuIOと通信する。ページはBleuIOをセントラルモードにし、HibouAirボードのIDを指定して定期的にスキャンを実行する。そして、受信したアドバタイズメントデータに含まれるManufacturer Specific Data(MSD)からCO2濃度(ppm:100万分率)を抽出する。抽出されたCO2濃度は、水平方向のグラデーションバーに反映され、CO2濃度が閾値を超えると警告が表示される。すべての処理はブラウザ内でローカルに実行される。

CO2濃度のみをブラウザベースで監視する理由は、CO2濃度が換気の指標として利用できるからだ。CO2濃度が高い状態は、空気の淀み、眠気、生産性の低下と関連付けられる。会議室、教室、オフィス、家庭など、多くの場所で、CO2濃度を視覚的に把握することで、換気のタイミングを判断できる。BLEアドバタイズメントからデバイスが計算した単一の数値のみを読み取ることで、設計が簡素化され、高速かつプライバシーが保護される。

必要なハードウェアは、BleuIO USB BLEドングルとHibouAir CO2モニターだ。

システムは、BLEデバイスが定期的にCO2値をアドバタイズメントパケットとしてブロードキャストする仕組みを利用する。ペアリングなしでこれらの値を読み取ることができる。

Webページは、特定のボードIDを持つデバイスからのアドバタイズメントをフィルタリングし、アドバタイズメントデータからCO2濃度を抽出する。抽出されたCO2濃度は、400〜2000 ppmの範囲で0〜100%のバーとして表示され、CO2濃度が閾値(デフォルトは1000 ppm)を超えると警告が表示される。

具体的なCO2濃度を抽出する関数は以下の通りだ。

1function decodeCo2FromAdv(hex) {
2  // sanitize → bytes
3  hex = (hex || '').replace(/[^0-9A-F]/gi, '');
4  if (hex.length % 2) hex = hex.slice(0, -1);
5  const b = new Uint8Array(hex.length / 2);
6  for (let i = 0; i < b.length; i++) b[i] = parseInt(hex.substr(i*2,2), 16);
7
8  // locate MSD anchor and read CO2 at fixed offset (big-endian)
9  for (let i = 0; i <= b.length - 5; i++) {
10    if (b[i] === 0x5B && b[i+1] === 0x07 && b[i+2] === 0x05) {
11      const idx = i + 23;                // CO2 MSB position in this layout
12      if (idx + 1 < b.length) {
13        return (b[idx] << 8) | b[idx+1]; // ppm
14      }
15    }
16  }
17  return null;
18}

この関数は、受信した16進数データをバイト配列に変換し、特定のパターン(0x5B, 0x07, 0x05)を検索する。このパターンが見つかった場合、CO2濃度が格納されている位置から2バイトのデータを読み取り、ppm値に変換して返す。

BLE通信の流れは以下の通りだ。

  1. Connectボタンをクリックすると、ページはBleuIOとのシリアルセッションを開始する。
  2. AT+CENTRALコマンドを送信して、BleuIOをスキャンモードにする。
  3. AT+FINDSCANDATA=<BOARD_ID>=3コマンドを定期的に送信して、3秒間のターゲットスキャンを実行する。
  4. BleuIOがSCAN COMPLETEと出力するまでアドバタイズメントデータを受信する。
  5. アドバタイズメントデータを受信するたびに、16進数のペイロードを抽出し、CO2濃度をデコードし、バーを更新し、閾値を超えた場合はHigh CO2バナーを表示する。

出力は、現在のCO2濃度(ppm)を示す水平方向のカラーバーとして表示される。バーは400〜2000 ppmの範囲で左から右に伸び、CO2濃度が上昇するにつれて満たされていく。CO2濃度が閾値(デフォルトは1000 ppm)を超えると、換気を促すためにHigh CO2バナーが表示される。

このCO2濃度表示器は、人が集まりやすく、空気が淀みがちな場所で効果を発揮する。会議室や教室では、換気のタイミングを視覚的に把握できる。オフィスでは、換気を促し、眠気や生産性の低下を防ぐことができる。家庭では、寝室やリビングの空気を新鮮に保つことができる。

このアプリケーションは、HibouAirがブロードキャストする単一の数値のみを読み取るため、個人データを扱う必要がなく、プライバシーが重視される環境でも簡単に展開できる。

これは軽量なインジケーターであり、校正ツールではないことに注意する。CO2濃度の読み取り値は定期的に更新され、センサーの現在の値を示す。HibouAirとBleuIOを適切な範囲内に配置することで、パケットの損失を減らすことができる。環境がデフォルトの範囲を頻繁に超える場合は、コード内で表示範囲と閾値を調整できる。

プロジェクトの拡張として、読み取り値をCSVまたはIndexedDBに記録して、日次または週次の傾向分析を行うことができる。複数のセンサーがある場合は、複数のボードIDをスキャンして、コンパクトなタイルとして1つのページに表示するマルチデバイスビューを追加できる。自動化のために、CO2濃度が閾値を超えたときにWebhookをトリガーしたり、シリアルコマンドを送信してファンやリレーを制御したりできる。以前に作成した騒音レベル表示器と組み合わせて、騒音とCO2濃度を並べて表示することで、快適性と生産性をより総合的に把握できる。