今回の記事では、STUDIOで作成したウェブサイトのUIボタンを使って、Google Apps Scriptを活用し、SwitchBotのAPIを簡単に叩く方法を紹介します。初心者でも簡単にスマートホームデバイスを自在に操れるようになるためのステップバイステップガイドを提供しますので、テクノロジーを最大限に活用して、あなたの生活空間をもっと便利で快適なものに変えてみましょう。
ポチップ
SwitchBotのAPIトークンとデバイスIDを取得
まず初めに、SwitchBotデバイスを操作するためには、APIトークンとクライアントシークレット、デバイスIDが必要になります。これらはSwitchBotアプリ内で簡単に取得できます。セキュリティを確保しつつ、この情報を取得し、後のステップで使用するために安全な場所に保存しておきましょう。
このトークンとクライアントシークレット、デバイスIDの取得については、下記の記事を参考にさせていただきました。
SwitchBotアプリで「開発者向けオプション」が表示されていないとき、「設定」の中にある「アプリバージョン」を10回連打すれば出てくるなんて夢にも思いませんでした。
スクリプトからSwitchBotを操作
APIトークンとクライアントシークレット、デバイスIDを手に入れることができたら、Google Apps Scriptを使用してスクリプトを記述し、ボタンが押された時にSwitchBotのAPIエンドポイントにリクエストを送信するようにしていきます！
Google Apps scriptエディタを準備
Google Apps scriptを使用する際は、まずこちらからGoogleドライブを開きます。
普段からGoogleスプレッドシートやGoogleカレンダーなど使っている人は、普段使っているGoogleアカウントでログインします。（※Googleアカウントをまだ持っていない人は、こちらから無料でGoogleアカウントを作成しましょう。）
Googleドライブを開いたら、上記の画像のように、「新規」→「その他」→「Google Apps script」と選択していくと、下記のようなスクリプトエディタが開くはずです。
この後は、ここにスクリプトを書いていきます。
SwitchBotを動かすスクリプトを作成
今回のスクリプトでは、「controlDevice」という関数を定義し、SwitchBotを操作するためのコマンドを送信します。この関数では、指定されたデバイスIDに対して「turnOn」のコマンドを送信し、デバイスの状態を切り替えます。
具体的なスクリプトは下記です。
※先ほど取得したご自身のトークンとクライアントシークレット、デバイスIDをスクリプトの２〜４行目に入力してください。
const url = 'https://api.switch-bot.com';
const token = "あなたのトークン"; // ここにトークンを入力
const secret = "あなたのクライアントシークレット"; // ここにクライアントシークレットを入力
const deviceId = 'あなたのデバイスID'; // ここにデバイスIDを入力
// デバイスを操作する関数
function controlDevice(commandType, commandParameter) {
const path = `/v1.1/devices/${deviceId}/commands`;
const nonce = Utilities.getUuid();
let timestamp = new Date().getTime().toString();
let sign = Utilities.computeHmacSignature(Utilities.MacAlgorithm.HMAC_SHA_256, token + timestamp + nonce, secret);
sign = Utilities.base64Encode(sign).toUpperCase();
const headers = {
'Authorization': token,
'sign': sign,
't': timestamp,
'nonce': nonce
};
const postData = {
'commandType': commandType,
'parameter': commandParameter,
'command': 'turnOn'
};
const options = {
'method': 'post',
'headers': headers,
'contentType': 'application/json',
'payload': JSON.stringify(postData)
};
const response = UrlFetchApp.fetch(url + path, options);
Logger.log(response.getContentText());
}とりあえず、スクリプトからSwitchBotが動くかを確認したいという方は、こちらのコードをGoogle Apps scriptに貼り付けて実行すると、Botが「turnOn」のコマンドに従って動くことを確認できると思います。
WEBサイトから関数を実行するためのスクリプトを作成
次に、WEBサイト上の任意のボタンからこの’controlDevice’関数を呼び出せるようにするため、イベントリスナーを設定します。ユーザーがボタンをクリックした時、スクリプトは関数を実行し、SwitchBotが動作する流れを作り出します。
具体的なスクリプトは下記です。
// doGet 関数の定義
function doGet(e) {
var commandType = e.parameter.commandType;
var commandParameter = e.parameter.commandParameter;
// コマンドタイプとコマンドパラメータを使用してデバイスを制御
return controlDevice(commandType, commandParameter);
}スクリプト全体(２つをまとめただけ)
先ほど作成した「SwitchBotを動かすスクリプト」と「WEBサイトから関数を実行するためのスクリプト」をまとめただけですが、Google Apps scriptのエディタに記載するスクリプトの全体像は以下になります。↓
const url = 'https://api.switch-bot.com';
const token = "あなたのトークン"; // ここにトークンを入力
const secret = "あなたのクライアントシークレット"; // ここにクライアントシークレットを入力
const deviceId = 'あなたのデバイスID'; // ここにデバイスIDを入力
// デバイスを操作する関数
function controlDevice(commandType, commandParameter) {
const path = `/v1.1/devices/${deviceId}/commands`;
const nonce = Utilities.getUuid();
let timestamp = new Date().getTime().toString();
let sign = Utilities.computeHmacSignature(Utilities.MacAlgorithm.HMAC_SHA_256, token + timestamp + nonce, secret);
sign = Utilities.base64Encode(sign).toUpperCase();
const headers = {
'Authorization': token,
'sign': sign,
't': timestamp,
'nonce': nonce
};
const postData = {
'commandType': commandType,
'parameter': commandParameter,
'command': 'turnOn'
};
const options = {
'method': 'post',
'headers': headers,
'contentType': 'application/json',
'payload': JSON.stringify(postData)
};
const response = UrlFetchApp.fetch(url + path, options);
Logger.log(response.getContentText());
}
// doGet 関数の定義
function doGet(e) {
var commandType = e.parameter.commandType;
var commandParameter = e.parameter.commandParameter;
// コマンドタイプとコマンドパラメータを使用してデバイスを制御
return controlDevice(commandType, commandParameter);
}WEBアプリとしてデプロイ
Google Apps scriptのエディタに先ほどのスクリプトを入力できたら、WEBアプリとしてデプロイします。まずは、エディタの右上に表示されている「デプロイ」というボタンから「新しいデプロイ」を選択しましょう。
すると、下記のような画面が表示されるので、左上の歯車マークから「ウェブアプリ」を選択し、「次のユーザーとして実行：自分」「アクセスできるユーザー：全員」と設定し、右下のデプロイを押します。
するとURLが表示されるので、そのURLをメモしておきましょう。
このURLは、後にSTUDIOのカスタムコードで設定するスクリプトの中に入れるものになります。
STUDIOでUIボタンを作成
ここからはSTUDIO側の操作をしていきます。STUDIOのカスタムコード機能を使用して、ユーザーインターフェースを作成します。作成したボタンには、先に作成したスクリプトが関連付けられ、SwitchBotを操作するためのトリガーとして機能します。
STUDIOのカスタムコードの基本的な使い方は以前書いた下記の記事の「【基礎】カスタムコード使用方法」をご覧ください。
具体的なスクリプトは下記です。
※先ほど作成したGoogle Apps scriptをウェブアプリとしてデプロイした際に表示されたURLを、下記スクリプトの32行目に入力してください。
<!DOCTYPE html>
<html>
<head>
<title>Simple Button Example</title>
<style>
/* ボタンのスタイル定義 */
#myButton {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#myButton:hover {
background-color: navy;
}
</style>
</head>
<body>
<!-- ボタンのHTML -->
<button id="myButton">Click Me</button>
<!-- jQueryを読み込み（Google Apps Scriptとの通信に使用） -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// ボタンクリックイベントの定義
$('#myButton').click(function() {
$.ajax({
url: 'https://script.google.com/・・・・・・・・・・/exec', // Google Apps ScriptのデプロイURL
type: 'GET',
success: function(response) {
console.log('Success:', response);
},
error: function(xhr, status, error) {
console.log('Error:', error);
}
});
});
</script>
</body>
</html>実行した結果
以下のように、STUDIOで作成したWEBサイトのUIボタンを押すことで、Switch Botが動くことを確認できました。（※ボタンを押してから、動き出すまでに少しタイムラグがあります。）
まとめ
今回の記事では、STUDIOでデザインされたUIボタンとGoogle Apps Scriptを使ってSwitchBotを操作する方法について詳しく解説しました。このプロセスを通じて、あなたもスマートホームの世界でより多くのことができるようになり、日常生活に革新をもたらすことができるはずです。テクノロジーは常に進化しており、私たちの生活を豊かにする無限の可能性を秘めています。
コメント