【SwitchBot + Laravel】ブレーカーが落ちないように消費電力を監視するシステムをつくってみた！

こんにちは！
九保すこひです（フリーランスのITコンサルタント、エンジニア）

【X】九保すこひ＠フリーランスエンジニア

さてさて、最近はSwitchBotばかり触って「夏休みの自由工作」みたいにウキウキしていています！

そして、今回注目したのは、

消費電力の監視

です。

ご存知のとおり、家庭の電気は最初に「契約アンペア数」を決めておき、これを超えるとブレーカーが落ちるわけです。

で、もちろんこの数値が多くなるにつれて基本料金が高くなるので、できるだけ少ないアンペア数で契約したい、となるわけですね。

参照：電気代が安い時間帯はいつ？電力会社ごとの時間帯別料金プランと節約方法を解説

そして、この契約アンペア数を超えないようにするためにつかうのが、自動で電源をON/OFFできる「SwitchBotプラグミニ」です。

SwitchBotプラグミニ

ということで！

今回は消費電力が一定以上になったら、自動で電源を切るという機能をつくってみます！

※家庭用コンセントで充電できるEVとかにいいかもですね🤔

つまり以下のような方に向けて記事を書いています。

「Laravelで実用的なIoTアプリを作ってみたい」
「Laravelを実生活に役立てたい」
「Laravelで電力監視システムを作ってみたい」
「Laravelでリアルと連携する機能をつくりたい」
「Laravelの実案件経験を増やしたい」
「SwitchBotを買ったけど活用しきれていない」
「SwitchBot + Laravel の組み合わせを試したい」
「SwitchBot + APIでガジェットを操作したい」
「ある条件で自動で家電をON/OFFにしたい」
「夢中になれることを探している👍」

ぜひ最後まで読んでくださいね！

「SwitchBotの機械、
6個も買っちゃった（後悔ゼロ👍）」

1 実装に必要なもの・実行環境
2 前提として（リアルタイムな電気消費データの取得について）
3 SwitchBotプラグミニを起動する
4 開発の準備をする3ステップ
5 Laravelで開発をする3ステップ
6 1. コントローラーをつくる
7 2. ビューをつくる
8 テストしてみる
9 企業様へのご提案
10 おわりに

実装に必要なもの・実行環境

今回は以下の機械で実装します。

SwitchBotプラグミニ：電源のON/OFFを切り替えるガジェット

SwitchBotプラグミニ

実行環境は以下のとおりです。

Laravel 12.x
Vue 3
Inertia
TypeScript

では、今回は機械が少なくて済むので、ライトな感じでやっていきましょう！

前提として（リアルタイムな電気消費データの取得について）

電気のデータは、Wi-SUNを通じてスマートメーターからデータを取得する必要があります。

引用：住まいと家計の快適提案　住宅設備の施工専門ショップ[TOOL BOX]

しかし、電力会社への申込みやUSBドングル（←これ高いんす😅）が必要ですし、何より他の人が記事にしているので、この部分は割愛します。

以下の記事がとても詳しいです。感謝！

参考記事：スマートメーターから電力消費量を取得する

そして、今回の機能ではJavaScriptでランダムに電流の大きさを変えて、

ある一定以上になったら：電源OFF
ある一定以下になったら：電源ON

ができるようにしてみます。

※ホントは電力会社がAPIを用意してくれたらいいんですけどね。電気消費量の削減につながると思うんですが…🤔

SwitchBotプラグミニを起動する

（説明書を見ながら）スマホアプリとペアリングしてください。

プラグ型のガジェットは電池のセット不要ですが、Wi-Fiへの接続が必要になります（逆にいうとSwitchBotハブは不要ということですね👍）

開発の準備をする3ステップ

1. SwitchBot APIのトークンを取得する

以下記事を参照して.env&コンフィグをセットしておいてください。

参考記事：SwitchBot APIのトークンを取得する

2. デバイスIDを取得する

SwitchBot APIでつかう「デバイスID」と呼ばれる固有IDが必要になるので、取得しておきましょう。

まずホーム画面でペアリングしたプラグミニを選択。

画面が変わるので、右上にある歯車マークを選択。

「Device Info」を選択。

すると、以下のような表示になるので「BLE MAC」という部分を取得してください。これがデバイスIDです。

以下のように.envにセットしておきましょう。

.env

SWITCHBOT_PLUG_DEVICE_ID="（あなたのデバイスID）"

そして、どこからでも取り出せるようにコンフィグもセットします。

<?php

return [

    // 省略

    'switchbot' => [
        'access_token' => env('SWITCHBOT_ACCESS_TOKEN'),
        'secret_token' => env('SWITCHBOT_SECRET_TOKEN'),
        'devices' => [
            'plug' => env('SWITCHBOT_PLUG_DEVICE_ID'),
        ],
    ],

];

3. SwitchBot APIにアクセスするためのHttpクライアント専用macroをつくる

こちらは、過去記事にまとめていますので、以下をご覧ください。

参考記事：SwitchBot APIにアクセスしやすくするため、Httpクライアントに専用macroをつくる

Laravelで開発をする3ステップ

では本題のLaravel開発です！

1. コントローラーをつくる

以下コマンドを実行してください。

php artisan make:controller PowerConsumptionController

ファイルが作成されるので、中身を次のように変更します。

app/Http/Controllers/PowerConsumptionController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class PowerConsumptionController extends Controller
{
    const THRESHOLD = 20; // 消費電力（正確には電流）のしきい値（アンペア）

    public function index()
    {
        // 消費電力をランダムに変更する擬似的なテストページ

        return inertia('PowerConsumption/Index');
    }

    public function store(Request $request)
    {
        // バリデーションは省略してます

        $power_consumption = (int) $request->input('power_consumption');
        $deviceId = config('services.switchbot.devices.plug');

        // 電源ON/OFFの制御
        $command = ($power_consumption >= self::THRESHOLD) ? 'turnOff' : 'turnOn';
        $payload = [
            'command' => $command,
            'parameter' => 'default',
            'commandType' => 'command',
        ];
        Http::switchbot()
            ->device($deviceId)
            ->command($payload);
    }
}

2. ビューをつくる

さきほどのコントローラーでセットしたビューはこちら。

resources/js/Pages/PowerConsumption/Index.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import axios from 'axios';

// 消費電力の状態
type PowerConsumptionStatus = 'danger' | 'warning' | 'normal';
const THRESHOLD = 20;
const currentStatus = computed<PowerConsumptionStatus>(() => {
    if (powerConsumption.value >= THRESHOLD) {
        return 'danger';
    } else if (powerConsumption.value >= THRESHOLD - 5) {
        return 'warning';
    }
    return 'normal';
});

// 消費電力の監視
const powerConsumption = ref<number>(10);
const classNames = computed(() => {
    if (currentStatus.value === 'danger') {
        return 'text-red-500 font-bold';
    } else if (currentStatus.value === 'warning') {
        return 'text-yellow-500 font-bold';
    }
    return 'text-green-600 font-bold';
});
onMounted(() => {
    setInterval(() => {
        // ランダムな数値を生成
        const minNumber = 5;
        const maxNumber = 30;
        powerConsumption.value =
            Math.floor(Math.random() * (maxNumber - minNumber + 1)) + minNumber;
    }, 3000);
});

// データ送信
watch(
    () => currentStatus.value,
    () => {
        const url = route('power_consumption.store');
        const data = {
            power_consumption: powerConsumption.value,
        };
        axios.post(url, data);
    },
);
</script>

<template>
    <div class="flex h-screen items-center justify-center">
        <div class="text-center">
            <div class="mb-1 text-3xl">消費電力<small>（電流）</small></div>
            <div class="mb-1 text-9xl" :class="classNames">
                {{ powerConsumption }}<span class="text-6xl"> A</span>
            </div>
            <div :class="classNames" class="capitalize" style="opacity: 0.7">
                - {{ currentStatus }} -
            </div>
        </div>
    </div>
</template>

3. ルートをつくる

最後はルートを追加して完了です！

routes/web.php

// 省略

// 消費電力に応じたSwitchBotプラグの制御
use App\Http\Controllers\PowerConsumptionController;

Route::prefix('power_consumption')->group(function () {

    Route::get('/', [PowerConsumptionController::class, 'index'])->name('power_consumption.index');
    Route::post('/store', [PowerConsumptionController::class, 'store'])->name('power_consumption.store');

});