SwitchBot温度計を使ったWordPressプラグインをリリース。Show Temperature for SwitchBot Meterのおもしろ機能をご紹介

2021年11月24日2022年1月24日Webデザイン

こんにちは！

SwitchBot温度計というスマート温度計が売られています。この温度計は、外出先などからスマートフォンのアプリで温度を確認したり、他の機器と連携して自動動作を実現したりすることができます。

この度、このSwitchBot温度計を使って、WordPressサイト上に気温を表示するプラグイン"Show Temperature for SwitchBot Meter“を、WordPress.orgの正式プラグイン・ディレクトリを通して公開しました。通常のWordPressのプラグイン追加画面からインストール可能です。

このプラグインを使うと、WordPressサイトの記事内にSwitchBot温度計が測った温度・湿度を簡単に取り込むことができます。加えて、面白い機能として、下の写真のようにSwitchBot温度計が写った写真の、まさに液晶部分に、実際の温度・湿度をリアルタイムで合成表示する機能を搭載しています。

本日は、そのプラグインの機能とデモを紹介していきます。

機能概要

本プラグイン"Show Temperature for SwitchBot Meter"を使うには、SwitchBot温度計に加えて、SwitchBot Hub ミニが必要になります。プラグインは、SwitchBotのクラウドサービス（Web API）を呼び出すことで、リモートからSwitchBot温度計の現在の温度・湿度を取得します。WordPressのオーナーは、得られた温度・湿度の情報を記事や固定ページの任意の場所に取り込めるようになります。

プラグイン設定画面で、SwitchBotの公式スマートフォン・アプリで得られる認証用トークンを設定することで、特定デバイスの情報にアクセスする仕組みです。

デモ

以下は、本ブログ「しずかなかずし」に組み込んだプラグイン"Show Temperature for SwitchBot Meter"を使って表示している実際の画像です。東京世田谷の筆者の書斎の温度計の現在の温度を表示しています。

温度・湿度をWordPress記事に取り込める

WordPress記事に温度・湿度を埋め込む為には、以下のようなショートコードを使用します。

• 温度: [ssbm-temperature deviceid='8090A0B0C0E0']
• 湿度: [ssbm-humidity deviceid='8090A0B0C0E0']
• 合成画像: [ssbm-image deviceid='8090A0B0C0E0' type='2']

deviceid属性に設定するのは、プラグインの設定画面で表示されるSwitchBot温度計の固有のIDをです。

合成画像というのは、この記事の最初にあった、SwitchBotの写真の上に、実際の温度・湿度を重ね合せて作った画像のことです。WordPressの記事を開いた時点でSwitchBot温度計が示している温度・湿度が合成されて表示されます（クラウドサービスの都合によりタイムラグは発生します）。

4パターンから選べるSwitchBot温度計合成画像

合成画像は、プラグインの設定画面から選択することができ、初期バージョンとしては4種類の画像が選択できます。

横長バージョン１パターン（テーブル置き）、正方形２パターン（ステレオ、螺旋階段）、縦長バージョン1パターン（ケーブル）の4種類です（下記参照）。

開発者向け機能

開発者機能として、WordPressサイトにREST APIのエントリーポイントを追加します。

これにより、例えばWordPressをカスタマイズする際に、JavaScriptのプログラムから自由にSwitchBot温度計の温度・湿度情報を利用することができます。REST APIが返すのはJSON形式の以下のようなフォーマットです。

{
  "status":"ok",
  "temperature":"78.44",
  "unit":"1",
  "humidity":"50"
}

詳しくは、"Show Temperature for SwitchBot Meter"プラグインをインストール後の設定画面でご確認下さい。

インストール方法と使い方

インストールは、WordPressの管理画面より、プラグインの検索をして下さい。一般的なプラグインをインストールされたことがあれば、迷うこと無くできるでしょう。

インストール後、設定 ＞ Show Switchbot Meterで表示される説明に従って、SwitchBot公式スマホアプリより、認証トークン（Application Token）を取得。その値を設定画面上で保存します。

（以下の画像は英語版の画像ですが、WordPressサイトが日本語サイトだと、プラグイン設定も日本語で表示されます）

認証トークン(Application Token)が正しく保存され、そのアカウントにSwitchBot温度計が設定されている場合、下記の動画のようにデバイス一覧とそれを埋め込む場合のショートコードが表示されます。

ショートコードを記事に埋め込むと、温度・湿度が取り込まれます。

（以下の画像は英語版の画像ですが、WordPressサイトが日本語サイトだと、プラグイン設定も日本語で表示されます）

WordPress.orgの正式プラグインディレクトリの"Show Temperature for SwitchBot Meter"のページは以下です。

プラグインのソースコード（github）

プラグインのソースコードはgihub上で公開中です。

今後のバージョンアップ

今後のバージョンアップでは、合成写真を増やしていくと共に、記事に取り込むやり方としてブロックエディタからの取り込みを実現する予定です。

こうご期待！