コードを記述
以下のコードでHTMLとJavaScriptファイルを作成します。
Web Bluetoothの細かい仕様などは公式ドキュメントを参照して下さい。
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button id="pconnect">connect</button>
<button id="ptoggle">on / off</button>
<script src="app.js"></script>
</body>
</html>
'use strict';
const UUIDS = {
SERVICE: `heart_rate`, //0x180D
CHARACTERISTICS: `heart_rate_control_point` //0x2A39
};
const requestOptions = {
acceptAllDevices: true,
optionalServices: ['heart_rate']
};
const $pconnect = document.getElementById('pconnect');
const $ptoggle = document.getElementById('ptoggle');
$ptoggle.disabled = true; //非アクティブに
let ctl = {};
/**
* 接続
*/
const pConnect = async () => {
const device = await navigator.bluetooth.requestDevice(requestOptions);
const server = await device.gatt.connect();
const service = await server.getPrimaryService(UUIDS.SERVICE);
const characteristic = await service.getCharacteristic(UUIDS.CHARACTERISTICS);
ctl = characteristic;
$ptoggle.disabled = false; //アクティブに
console.log('connected');
}
//照明のオン/オフ
const pToggle = async () => {
const val = await ctl.readValue();//現状の照明状態を取得
if(val.getUint8(0) === 0){
await ctl.writeValue(new Uint8Array([1,14]));
}else{
await ctl.writeValue(new Uint8Array([1,0]));
}
}
$ptoggle.addEventListener('click', pToggle);
$pconnect.addEventListener('click', pConnect);
実行してみる
Web Bluetoothを利用するためには最新のGoogle Chromeをインストールしておく必要があります。
上記で作成したファイルをChromeで実行してみましょう。connectボタンを押すと、周辺のBLE機器のリストが表示されます。


接続が完了するとon/offボタンがアクティブになります。
実際に押して確認してみましょう。

Webブラウザから照明のオン/オフが切り替えられましたね!
おわりに
PLAYBULBをWebBluetoothを利用して、ブラウザからLチカすることができました。他のPLAYBULBシリーズも色々なものがありますが、同じ要領でハックすることが可能だと思われます。
おうちハックの定番電球といえばHueを思い浮かべる人も多いですが、PLAYBULBシリーズも、今回紹介した内容を応用すれば十分使えると思います。
応用すれば、家の全ての照明をブラウザから制御したり、指定した時間に照明を付けて起こしてくれるなど、より生活を便利にしてくれる可能性が広がりますね。皆さんもぜひ試してみてください。
