はじめに
DeviceConnect APIを用いてHueランプを操作できるwebアプリを開発しました。カラーピッカーをクリックすることで好きな色にHueを点灯させることができます。
DeviceConect APIはNTTドコモが開発しているAPIです。
今回はJavaScriptで開発を行います。
使用するデバイス
- Android端末（Androidバージョン6.0.1）
- Philips Hue
Device Web API Managerのインストール
- まずサーバとなるスマートフォンにgclue社のDevice Web API Managerをインストールします。
- 使いたいIoTデバイスのプラグインをスマートフォンにインスト―ルします。
今回はHueプラグインを利用します。
JavaScriptでDeviceConnectを利用するための準備
DeviceConnectのJavaScript用SDKのダウンロード
https://github.com/DeviceConnect/DeviceConnect-JS にあるSDKをダウンロードします。
現時点で最新のバージョン2.2.0をダウンロードします。
curlでダウンロードする際は以下のコマンドを使用してください。
$ curl https://raw.githubusercontent.com/DeviceConnect/DeviceConnect-JS/master/dConnectSDKForJavascript/dconnectsdk-2.2.0.js -O
DeviceConnectサーバのIPアドレスを確認
DeviceConnectサーバのIPアドレスを確認します。DeviceConnectサーバのIPアドレスはDevice Web API Managerアプリの設定で確認できます。
開発
DeviceConnectのセットアップ
DeviceConnectを使うためのひな型はDeviceConnect UsersやDeviceConnectを参考に作成しています。DeviceConnectサーバのIPアドレスとHueランプの名前は各自の環境に合わせ、変更してください。
HTMLファイルでSDKとjQueryを読み込んでください。
カラーピッカー
カラーピッカーはFarbtastic Color Pickerで実現します。
イベントの間引き
Hueの色を変えるためのリクエストを短期間で送り続けるとエラーが発生してしまいます。そこで発生するイベントをlodashのthrottle関数で間引きします。
ソースコード
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hue color</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/farbtastic.css" type="text/css" />
<!-- DeviceConnectのJavaScript用SDK -->
<script src="./js/sdk/dconnectsdk-2.2.0.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<!-- カラーピッカー -->
<script src="./js/farbtastic.js" type="text/javascript"></script>
<!-- lodash イベント間引き用 -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="./js/app.js" type="text/javascript"></script>
</head>
<body>
<p>
<button id="getStatus">DeviceConnectセットアップ</button>
</p>
<p>
<!-- DeviceConnectサーバのIPアドレス -->
<input type="text" value="xxx.xxx.xxx.xxx" id="server" placeholder="DeviceConnectサーバのIPアドレス" />
</p>
<div id="checkDeviceConnect"></div>
<h2>hueランプ操作</h2>
<div>
WebColor:<output id="webcolor">#000000</output>
</div>
<div id="picker"></div>
<div>
<input type="button" value="消灯" id="offhue">
</div>
</body>
</html>
JavaScript
app.js
const app = {
scopes:Array("battery", "connect", "deviceorientation",
"file", "mediaPlayer", "mediastreamRecording",
"notification", "phone", "proximity", "settings",
"vibration", "serviceinformation", "servicediscovery",
"illuminance", "touch", "light"
),
applicationName: "myApp",
sessionKey: null
}
// 認可を得る
const getAuthentication = () => {
dConnect.authorization(app.scopes, app.applicationName, (clientId, accessToken) => {
// 許可が得られた場合
app.accessToken = accessToken;
getServices(accessToken);
// WebSocketを開く場合、コメントアウトを外す
// dConnect.connectWebSocket(accessToken, (eventCode, message) => {
// console.log(eventCode + ", " + message);
// });
}, (errorCode, errorMessage) => {
// 許可が得られなかった場合
console.error(errorMessage);
});
};
// 認証を得る
const getServices = (accessToken) => {
dConnect.discoverDevices(accessToken, (json) => {
console.log("json",json);
app.services = json.services;
}, (errorCode, errorMessage) => {
// 認証が得られなかった場合
console.error(errorMessage);
});
};
// hueをoffにする
const offHue = () => {
const service = app.services.filter((s) => {return s.name == "hueの名前"})[0];
const builder = new dConnect.URIBuilder();
builder.setProfile("light");
builder.setServiceId(service.id);
builder.setAccessToken(app.accessToken);
dConnect.removeEventListener(builder.build(),
(json) => {
console.log("Success");
}, (errorCode, errorMessage) => {
console.log("Failed");
});
};
// hueを点灯させる
const hueColor = (huecolor) => {
const service = app.services.filter((s) => {return s.name == "hueの名前"})[0];
const builder = new dConnect.URIBuilder();
builder.setProfile("light");
builder.setServiceId(service.id);
builder.setAccessToken(app.accessToken);
// webカラーの'#'を取り除く
builder.addParameter("color", huecolor.slice( -6 ));
dConnect.post(builder.build(), null, null,
(json) => {
console.log("success");
}, (errorCode, errorMessage) => {
console.log("Failed");
});
};
$(function() {
// DeviceConnectセットアップ
$("#getStatus").on("click", (e) => {
dConnect.setHost($("#server").val());
dConnect.checkDeviceConnect(
(apiVersion) => {
// 動作している場合
$("#checkDeviceConnect").text("動作中");
getAuthentication();
}, (errorCode, errorMessage) => {
// 動作していない場合
$("#checkDeviceConnect").text(errorMessage);
});
});
// hueを消す
$("#offhue").on("click", (e) => {
e.preventDefault();
offHue();
});
// カラーピッカー
$(document).ready(() => {
$('#picker').farbtastic(_.throttle((c) => {
// webcolorの値を表示する
$('#webcolor').val(c)
hueColor(c);
}, 500));
});
});
動作
実際に動作させると次のようになります。
webcolorを#1e060cにしたとき
webcolorを#0802e6にしたとき
カラーピッカーをクリックすることでHueランプの色を変化させることができました。