前回の投稿でご紹介した、SwitchBotブランドの製品は、湿温度計でした。今回もこちらを使っていきますので、おさらいです。SwitchBot湿温度計は、Bluetooth搭載でスマホなどから湿度や温度を取り出せる、という商品です。SwitchBotハブミニを使うと、クラウド経由で温度、湿度を取り出すことができます。

SwitchBotの温度計でエアコン連携の設定。クラウドから部屋のエアコンを操作する！

こんにちは！仕事のストレスで物欲がふつふつと沸いてきた、しずかなかずしです。先日、SwitchBotのA ...

https://shizuka-na-kazushi.style/2021/09/12/switchbot-thermo...

上のリンクの投稿が、SwitchBot湿温度計を賢くつかったスマートホーム快適化とも言うべき使い方です。この記事では、スマホアプリの設定を駆使しました。湿温度計の値に従って、部屋にあるエアコンのスイッチを赤外線リモコンを操作して部屋の温度を快適に保つ、という設定です。

一方、SwitchBot商品は、クラウドのAPIが用意されており、プログラミングの知識がある方なら、様々なプログラミング言語を使ってSwitchBot商品の状態を確認したり、コマンドを送って操作するプログラムを記述できます。

以前私は、JavaScript（Nodejs）のプログラムでSwitchBotの赤外線リモコン機能を使ってエアコンの操作をしてみました。

SwitchBot APIの使い方。エアコンをコントロールするプログラムをJavaScriptで書いた

こんにちは！東京２０２０五輪も終わり、夏休み楽しんでますか？暑いですね〜。あまりエアコンを使わ ...

https://shizuka-na-kazushi.style/2021/08/09/control-switchbo...

上記のリンクの投稿では、Nodejsを使って、作業パソコンからコマンドラインでエアコンの操作ができるようになり、一々リモコンに手を伸ばすこと無く、作業中に手元でキーボードを打って、エアコン操作をしています。週末のパソコン作業で便利に使っています。

我が家の室温を公開！

今回は、本サイト「しずかなかずし」のサイト上で東京都世田谷区の筆者の自宅の書斎の温度を一挙大公開します！

こちらからアクセスしてみて下さい。リアルタイムで、我が家の書斎の温度がわかります。そんなの知ってどうするの？というのはともかく、わかります。

以下のページを開いてみて下さい。クラウド経由のAPIがちょっと遅いので開くのに時間がかかる場合があります。また、私のネットの都合により、エラーになる場合もあるかも知れません。しかし、なにしろ、うまくいけば、リアルタイムで私の書斎の温度と湿度が、世界中から見られるようになりました。すごい！

しずかなかずしの書斎のSwitchBot 温度計

本サイトの著者、しずかなかずしの東京都世田谷区の書斎の温度計の温度です。 SwitchBotの湿温度計を使 ...

https://shizuka-na-kazushi.style/display-realtime-switchbot-...

SwitchBotによる室温公開の仕組み

本サイトは、WordPressでできていますので、WordPress上でSwitchBotのAPIを利用するには、PHPでプログラミングせねばなりません。

システム全体の仕組みは以下のようなものです。

自宅には、SwitchBot湿温度計および、SwitchBotハブ・ミニが設置されており、自宅のWiFiネットワーク経由でインターネットに接続しています。湿温計単体ではなく、ハブ・ミニ経由でSwitchBotのサーバーにつながっています。

しずかなかずしサーバーは、レンタルサーバー・サービスのエックスサーバー上で動作するWordPressのサイトです。WordPressの一部としてPHPのプログラムを動かして、HTTPSのGETでSwitchBot APIを使ったデータの読み取りを行います。

そして、ブログ「しずかなかずし」上の温度表示ページをブラウザで開くと、その時点の室温が表示される、という流れです。

SwitchBot APIをPHPで呼び出す

それでは、実際のPHPのソースコードを見てみましょう。以下のPHPのコードは、一部です。WordPressのサイトで温度・湿度を表示するには、下記のShowSwitchBotMeter()関数をどこかで呼び出す必要があります。

私の場合は、独自にWordPressのプラグインを作って、ショートコードを実装して固定ページに貼り付けました。このプラグインはもう少し整備をして、そのうち公開する予定です。

include_once dirname(__FILE__) . '/conf.php';

function GetDevices() {
  global $swbtConfig;

  $headers = [
    'Content-Type: application/json; charset=utf-8',
    'Authorization: ' . $swbtConfig['token'],
  ];

  $options = array(
    'http' => array(
    'method'=> 'GET',
    'header'=> implode("\r\n", $headers),
    )
  );
    
  $context = stream_context_create($options);
  return file_get_contents('https://api.switch-bot.com/v1.0/devices', false, $context);
}

function GetDeviceStatus($deviceId) {
  global $swbtConfig;

  $headers = [
    'Content-Type: application/json; charset=utf-8',
    'Authorization: ' . $swbtConfig['token'],
  ];

  $options = array(
    'http' => array(
    'method'=> 'GET',
    'header'=> implode("\r\n", $headers),
    )
  );
    
  $context = stream_context_create($options);
  return file_get_contents('https://api.switch-bot.com/v1.0/devices/' . $deviceId . '/status', false, $context);
}

function SearchDeviceByName($devices, $name) {
  foreach($devices['body']['deviceList'] as $d) {
    if ($d['deviceName'] == $name) {
      return $d['deviceId'];
    }
  }
  return null;
}

function ShowSwitchBotMeter() {
  global $swbtConfig;

  $devices = GetDevices();
  $obj = json_decode($devices, true);

  $deviceId = SearchDeviceByName($obj, $swbtConfig['deviceName']);
  if (!$deviceId) {
    print('ERR: no device found: '. $swbtConfig['deviceName']);
    return;
  }

  $stat = GetDeviceStatus($deviceId);
  $obj = json_decode($stat, true);

  return "<div class='switchbot-meter-content'>"
    . "<p> 温度:<span class='switchbot-meter-content-value'>" 
    . $obj['body']['temperature'] . "</span>℃</p>"
    . "<p>湿度:<span class='switchbot-meter-content-value'>" 
    . $obj['body']['humidity'] . "</span>％</p>"
    . "</div>";
}

8行目および、27行目に、あるtokenはSwitchBotのスマホアプリから取得したものを埋め込む必要があります。私の場合は、conf.phpというファイルに連想配列$swbtConfigという変数を作りその中の”token”というキーに格納しています。

tokenの取得方法は、以前の投稿に詳しくありますが、以下に簡単に抜粋します。

まずは、Google Play Storeでアプリをダウンロード（iOS版もあり、同様の仕組みがあります）して、ログインします。そして、プロフィール > 設定 > アプリバージョン と進み。アプリバージョンが出ているところを10回タップします。するとどうでしょう。「開発向けオプション」という特権情報を表示するための項目が得られるのです。
開発者向けで表示される「トークン」をHTTPSのリクエスト時に、「Authorization」ヘッダとして加えてあげるだけです。
SwitchBotハブのAPIの使い方。エアコンをコントロールするプログラムをJavaScriptで書いた！