WordPress サイトにおんどとり TR-72wb の温湿度を自動表示するまでの全手順

この記事では、T&D 社製データロガー TR-72wb の測定値を API 経由で取得し、
自宅サーバー（Ubuntu）上で WordPress サイトに自動表示 するまでの構築手順をまとめます。

実際に Raspberry Pi / Ubuntu サーバー環境で動作確認済みです。
「温度と湿度を自動で Web サイトに反映させたい」という方に役立つ内容です。

🧩 全体構成の概要

このシステムは以下のように動作します。

[TR-72wb] ──(Wi-Fi)──▶ [T&D WebStorage Service]
      ↓
  (API取得: get_temp.sh)
      ↓
 [/wordpress/currentdata/current_temp.json]
      ↓
 [WordPress ショートコード (room_temp)]
      ↓
 [サイトに温度・湿度を自動表示]

ポイントは以下の3つ：

  1. T&D WebStorage API から最新データを定期取得
  2. JSON ファイル に保存して WordPress が読み取る
  3. cron で定期的に自動更新

1. T&D WebStorage API の準備

まず、TR-72wb がクラウドサービス「T&D WebStorage Service」にデータ送信していることを確認します。

公式サイト：https://ondotori.webstorage.jp/docs/api/

API を利用するには以下の情報が必要です：

  • APIキー
  • アカウントID
  • デバイスのシリアル番号（例：5236xxxx）

これらは WebStorage にログイン後、
「設定 → API設定」から取得できます。

2. 温湿度取得スクリプトの作成

ホームディレクトリにスクリプト get_temp.sh を作成します。

nano /home/hoge/get_temp.sh

以下を貼り付けます（必要に応じてAPIキー・アカウント情報を差し替えてください）。

#!/bin/bash
# T&D TR-72wb から温湿度を取得して JSON に保存するスクリプト

# === 設定部分 ===
API_KEY="あなたのAPIキー"
LOGIN_ID="あなたのアカウントID"
SERIAL="デバイスのシリアル番号"
OUT_FILE="/var/www/html/wordpress/currentdata/current_temp.json"
DEBUG_FILE="/home/hoge/debug_response.json"

# === API呼び出し ===
curl -s -X POST \
  -d "login=${LOGIN_ID}" \
  -d "api-key=${API_KEY}" \
  -d "serial=${SERIAL}" \
  "https://api.webstorage.jp/v1/devices/trend" \
  -o "$DEBUG_FILE"

# === データ解析 ===
TEMP=$(jq -r '.data[-1].ch1' "$DEBUG_FILE")
HUM=$(jq -r '.data[-1].ch2' "$DEBUG_FILE")
TIME=$(date '+%Y-%m-%d %H:%M:%S %z')

# === JSON出力 ===
mkdir -p "$(dirname "$OUT_FILE")"
cat <<EOF > "$OUT_FILE"
{
  "temperature": $TEMP,
  "humidity": $HUM,
  "time": "$TIME"
}
EOF

chmod 644 "$OUT_FILE"

保存後、実行権限を付与します：

chmod +x /home/hoge/get_temp.sh

3. 出力フォルダの設定

WordPress から読み取れる場所に保存するため、専用フォルダを作ります：

sudo mkdir -p /var/www/html/wordpress/currentdata
sudo chmod 777 /var/www/html/wordpress/currentdata

（セキュリティ調整は後からでも可能。まずは動作優先でOK）

4. テスト実行して確認

/home/hoge/get_temp.sh
cat /var/www/html/wordpress/currentdata/current_temp.json

出力例：

{
  "temperature": 25.1,
  "humidity": 43,
  "time": "2025-10-28 02:34:12 +09:00"
}

これが出ればデータ取得は成功です。
ここまでで「サーバーが温湿度データをローカルJSONに保存する」仕組みが完成しました。

5. WordPress に表示させる

(1) mu-plugin を作成する

テーマを編集せずにコードを常時読み込ませるため、
WordPress の mu-plugins 機能を使います。

フォルダ作成：

sudo mkdir -p /var/www/html/wordpress/wp-content/mu-plugins

プラグインファイル作成：

sudo nano /var/www/html/wordpress/wp-content/mu-plugins/room_temp.php

中身：

<?php
/*
Plugin Name: Room Temp Shortcode
Description: Show current room temperature and humidity
Version: 1.0
*/

function show_room_temp() {
    $json_path = '/var/www/html/wordpress/currentdata/current_temp.json';

    if (!file_exists($json_path)) {
        return "温度データがありません";
    }

    $data = json_decode(file_get_contents($json_path), true);
    if ($data === null) return "温度データの読み取りに失敗しました";

    $temp = $data['temperature'];
    $hum  = $data['humidity'];
    $time = $data['time'];

    return "
    <div style='border:1px solid #ccc;padding:8px 12px;border-radius:6px;display:inline-block;'>
      <div><strong>室温:</strong> {$temp} ℃</div>
      <div><strong>湿度:</strong> {$hum} %RH</div>
      <div style='font-size:0.8em;color:#666;'>更新: {$time}</div>
    </div>";
}

add_shortcode('room_temp', 'show_room_temp');

保存して終了します。

(2) WordPress ページにショートコードを挿入

WordPress 管理画面で
「固定ページ → 編集 → 本文」に次を入力：

[room_temp]

保存してプレビューすると、
現在の室温・湿度・更新時刻が表示されます。

6. 自動更新の設定（cron）

毎分データを自動更新するには、cron を使います。

crontab -e

ファイル末尾に1行追加：

* * * * * /home/hoge/get_temp.sh

これで毎分自動的に TR-72wb から最新データを取得し、
サイト上の温度も自動的に更新されるようになります。

7. 動作確認

  1. サイトを開く → 室温と湿度が表示されているか確認
  2. 1〜2分後にページをリロード → 「更新時刻」が新しくなっていればOK

もし表示が止まる場合は：

cat /var/www/html/wordpress/currentdata/current_temp.json

を見て、更新されているか確認しましょう。

8. 不要ファイルの整理

試行中にできた古いファイルを削除しておきます。

rm -f /home/hoge/current_temp.json
rm -f /home/hoge/debug_response.json
rm -f /var/www/html/current_temp.json
sudo rm -rf /var/www/html/wp-content/themes/cocoon-child

これでクリーンな状態になります。

9. 最終構成（完成形）

/var/www/html/wordpress/
├── currentdata/
│   └── current_temp.json
├── wp-content/
│   ├── mu-plugins/
│   │   └── room_temp.php
│   ├── plugins/
│   └── themes/
│       └── cocoon/
└── wp-config.php
/home/hoge/
└── get_temp.sh

これで以下の動作が自動化されます：

✅ get_temp.sh が1分ごとにAPIから最新データを取得
✅ JSONファイルを更新
✅ WordPressが

室温: 18.2 ℃
湿度: 55 %RH
更新: 2025-12-01 07:05:25 +09:00
で自動表示

🎉 まとめ

機能実現方法
データ取得T&D WebStorage API（curl + jq）
ローカル保存JSON ファイル /wordpress/currentdata/current_temp.json
サイト表示WordPress ショートコード
室温: 18.2 ℃
湿度: 55 %RH
更新: 2025-12-01 07:05:25 +09:00
自動更新cron による毎分実行

この仕組みを使えば、
ラズパイや自宅サーバー上の WordPress で「リアルタイム温湿度モニタリングサイト」を簡単に構築できます。

💡発展例

  • JSON をグラフ化（Chart.js や Google Charts 連携）
  • 過去データの保存＆統計表示
  • 異常時に Discord / Slack / LINE へ通知

構築時間の目安：約30〜45分
動作環境：Ubuntu 22.04 / WordPress 6.x / TR-72wb

📘 まとめ

APIキーとJSONの扱いに慣れれば、
おんどとりは非常に簡単にIoT化できます。
1分ごとに自動更新される温湿度データが
自分のWebサイトにリアルタイム反映されるのはとても快感です。

コメント

タイトルとURLをコピーしました