Device Connectシステムに接続しセンサー値の取得やデバイスの操作を行うサンプルを作りながら解説を行います。
サンプルには、Device Web API ManagerとHOSTデバイスプラグインが入っていることを前提とします。

Device Connect SDKを使用するには、dconnectsdk-2.1.0.jsを読み込む必要があります。
ここからJavascriptファイルをダウンロードして以下のようにインポートしてください。

<script src="dconnectsdk-2.1.0.js" type="text/javascript"></script>

Device Web API Managerを使用するには、最初に起動しているかを確認する必要があります。
本サンプルでは、Device Web API Managerの起動確認を行う手順を解説します。

Device Web API Managerが起動確認を行うためには、dConnect.checkDeviceConnect(successCallback, errorCallback)を使用します。
起動している場合には、第1引数のsuccessCallbackが呼び出され、起動していない場合には、第2引数のerrorCallbackが呼び出されます。

▼ index.html
<html>
<head>
    <title>Sample01</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script src="dconnectsdk-2.0.0.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
    <input type="button" value="button" onclick="getVersion();">
</body>
</html>
▼ main.js
function getVersion() {
    dConnect.checkDeviceConnect(function(apiVersion) {
        alert(apiVersion);
    }, function(errorCode, errorMessage) {
        switch (errorCode) {
        case dConnect.constants.ErrorCode.ACCESS_FAILED:
            alert("Requested to start Device Connect Manager.");
            break;
        default:
            alert(errorMessage);
            break;
        }
    });
}

サンプルプログラムは以下のページで確認することができます。

サンプル01

上記のプログラムでは、Device Web API Managerが入っているスマートフォン上のChrome(ブラウザ)でしか動作しません。
PCなどの外部にある端末からスマートフォンに入っているDevice Web API Managerにアクセスする場合には、以下のコードを追加することでアクセスすることができます。

dConnect.setHost("[IPアドレス]");

また、Device Web API Managerの設定画面から以下の外部IPを許可を有効にする必要があります。
外部からDevice Web API Managerにアクセスされないようにデフォルトでは無効になっています。

Device Web API Managerが入っているスマートフォンのIPアドレスは、Device Web API Managerの設定画面で確認することができます。
この設定に書いてあるIPアドレスをdConnect.setHost()に指定します。

Device Web API Managerにアクセスするアプリは、OAuth(Local)認証を用いてアクセストークンを発行してもらう必要があります。
本サンプルは、Device Connect SDK を使いアクセストークンを取得する手順を解説します。

OAuth(Local)認証を行うためには、dConnect.authorization(scopes, appName, successCallback, errorCallback)を使用します。

  • 第1引数のscopesには配列で使用するプロファイルを指定します。
  • 第2引数のappNameにはアプリ名を指定します。
  • 第3引数のsuccessCallbackには、Local OAuthに成功した時に通知を受けるコールバック関数を指定します。
  • 第4引数のerrorCallbackには、Local OAuthに失敗した時に通知を受けるコールバック関数を指定します。
▼ index.html
<html>
<head>
    <title>Sample02</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script src="dconnectsdk-2.0.0.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
    <input type="button" value="button" onclick="authorization();">
</body>
</html>
▼ main.js
// accessTokenを保存
var accessToken = "";

// アプリ名
var myAppName = "com.test.html5.app1";

// アクセストークンの発行を要求
function authorization() {
    var scopes = Array("battery", "connect", "deviceorientation", 
                       "fileDescriptor", "file", "mediaPlayer",
                       "mediastreamRecording", "notification", "phone", 
                       "proximity", "settings", "vibration",
                        "serviceinformation", "servicediscovery");

    dConnect.authorization(scopes, myAppName,
        function(clientId, newAccessToken) {
            // accessToken
            accessToken = newAccessToken;
            alert(accessToken);
        },
        function(errorCode, errorMessage) {
            alert("Failed to get accessToken.");
        });
}

サンプルプログラムは以下のページで確認することができます。

サンプル02

第1引数に渡すscopesに定義されていないスコープにアクセスした場合には、エラー(Out Of Scope)が返却されてアクセスすることができません。
アプリで使用するプロファイルを全て指定するようにしてください。

var scopes = Array("battery", "connect", "deviceorientation", 
                        "fileDescriptor", "file", "mediaPlayer",
                        "mediastreamRecording", "notification", "phone", 
                        "proximity", "settings", "vibration",
                        "serviceinformation", "servicediscovery");

Device Web API Managerと連携しているサービスの一覧を取得するためには、dConnect.discoverDevices(accessToken, success_cb, error_cb)を使用します。

  • 第1引数のaccessTokenにはdConnect.authorizationで取得したアクセストークンを指定します。
  • 第2引数のsuccess_cbには、discoverDevicesに成功した時の通知を受けるコールバック関数を指定します。
  • 第3引数のerror_cbには、discoverDevicesに失敗した時の通知を受けるコールバック関数を指定します。

▼ index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Sample03(ServiceDiscovery)</title>
    <script src="dconnectsdk-2.1.0.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
    <input type="button" value="searchDevice" onclick="searchDevice();">
    <div id="serviceList"></div>
</body>
</html>
▼ main.js
// accessTokenを保存
var accessToken = undefined;
 
// アプリ名
var myAppName = "com.test.html5.app1";

// アクセストークンの発行を要求
function authorization() {
    var scopes = Array("battery", "connect", "deviceorientation", 
                       "fileDescriptor", "file", "mediaPlayer",
                       "mediastreamRecording", "notification", "phone", 
                       "proximity", "settings", "vibration",
                        "serviceinformation", "servicediscovery");
 
    dConnect.authorization(scopes, myAppName,
        function(clientId, newAccessToken) {
            // accessToken
            accessToken = newAccessToken;
            searchDevice();
        },
        function(errorCode, errorMessage) {
            alert("Failed to get accessToken.");
        });
}

// デバイスの検索
function searchDevice() {
    if (accessToken === undefined) {
        authorization();
    } else {
        dConnect.discoverDevices(accessToken, function(json) {
            var str = "<ul>";
            for (var i = 0; i < json.services.length; i++) {
                str += "<li>" + json.services[i].name + "</li>";
            }
            str += "</ul>"
            document.getElementById("serviceList").innerHTML = str;
        }, function(errorCode, errorMessage) {
            alert(errorMessage);
        });
    }
}

サンプルプログラムは以下のページで確認することができます。

サンプル03

サービスの情報を取得するには、dConnect.getSystemDeviceInfo(serviceId, accessToken, success_cb, error_cb)を使用します。

  • 第1引数のserviceIdに情報を取得したいサービスのidを指定します。
  • 第2引数のaccessTokenにはdConnect.authorizationで取得したアクセストークンを指定します。
  • 第3引数のsuccess_cbには、getSystemDeviceInfoに成功した時の通知を受けるコールバック関数を指定します。
  • 第4引数のerror_cbには、getSystemDeviceInfoに失敗した時の通知を受けるコールバック関数を指定します。

▼ index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Sample04(ServiceInformation)</title>
    <script src="dconnectsdk-2.1.0.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
    <input type="button" value="getServiceinforamtion" onclick="getServiceInforamtion();">
    <div id="serviceList"></div>
</body>
</html>
▼ main.js
// accessTokenを保存
var accessToken = undefined;
 
// アプリ名
var myAppName = "com.test.html5.app1";

// アクセストークンの発行を要求
function authorization(callback) {
    var scopes = Array("battery", "connect", "deviceorientation", 
                       "fileDescriptor", "file", "mediaPlayer",
                       "mediastreamRecording", "notification", "phone", 
                       "proximity", "settings", "vibration",
                        "serviceinformation", "servicediscovery");
 
    dConnect.authorization(scopes, myAppName,
        function(clientId, newAccessToken) {
            // accessToken
            accessToken = newAccessToken;
            callback();
        },
        function(errorCode, errorMessage) {
            alert("Failed to get an accessToken.");
        });
}

function searchServiceInternal(callback) {
    // 名前が「Host」のサービスを探す
    dConnect.discoverDevices(accessToken, function(json) {
        for (var i = 0; i < json.services.length; i++) {
            if (json.services[i].name.indexOf('Host') != -1) {
                callback(json.services[i]);
            }
        }
    }, function(errorCode, errorMessage) {
        alert(errorMessage);
    });
}

// サービスの検索
function searchService(callback) {
    if (accessToken === undefined) {
        authorization(function() {
            searchServiceInternal(callback);
        });
    } else {
        searchServiceInternal(callback);
    }
}

// サービスの情報を取得
function getServiceInforamtion() {
    searchService(function(service) {
        dConnect.getSystemDeviceInfo(service.id, accessToken, 
            function(status, headers, json) {
                console.log(json);
            },
            function(errorCode, errorMessage) {
                alert("Failed to get a serviceInformation.");
            });
    });
}

サンプルプログラムは以下のページで確認することができます。

サンプル04

Device Connect APIのURIを作成するときにdConnect.URIBuilderを使用します。

var builder = new dConnect.URIBuilder();
builder.setProfile("battery");
builder.setAttribute("level");
builder.setServiceId(service.id);
builder.setAccessToken(accessToken);
var uri = builder.build();

上記のuriには、http://localhost:4035/gotapi/battery/level?serviceId=xxxx&accessToken=xxxxが格納されます。
この値をdConnect.get、dConnect.post、dConnect.put、dConnect.deleteなどに渡して処理を行います。

GET要求を行う場合には、dConnect.get(uri, headers, success_cb, error_cb)を使用します。

  • 第1引数のuriにDevice Connect APIにアクセスするためのURLを指定します。
  • 第2引数のheadersでは、HTTPリクエストに付加するヘッダーを指定します。
    何も追加することがない場合にはnullを指定します。
  • 第3引数のsuccess_cbには、dConnect.getに成功した時の通知を受けるコールバック関数を指定します。
  • 第4引数のerror_cbには、dConnect.getに失敗した時の通知を受けるコールバック関数を指定します。

本サンプルでは、バッテリー情報を取得するソースコードでdConnect.getの使用方法を解説します。

▼ index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Sample05(Battery)</title>
    <script src="dconnectsdk-2.1.0.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
    <input type="button" value="Get Battery" onclick="getBattery();">
    <p><label>バッテリー残量: <input type="text" id="battery" size="30" maxlength="30"></label></p>
</body>
</html>
▼ main.js
// accessTokenを保存
var accessToken = undefined;
 
// アプリ名
var myAppName = "com.test.html5.app1";

// アクセストークンの発行を要求
function authorization(callback) {
    var scopes = Array("battery", "connect", "deviceorientation", 
                       "fileDescriptor", "file", "mediaPlayer",
                       "mediastreamRecording", "notification", "phone", 
                       "proximity", "settings", "vibration",
                        "serviceinformation", "servicediscovery");
 
    dConnect.authorization(scopes, myAppName,
        function(clientId, newAccessToken) {
            // accessToken
            accessToken = newAccessToken;
            callback();
        },
        function(errorCode, errorMessage) {
            alert("Failed to get an accessToken.");
        });
}

function searchServiceInternal(callback) {
    dConnect.discoverDevices(accessToken, function(json) {
        // 名前がHostのデバイスプラグインを探す
        for (var i = 0; i < json.services.length; i++) {
            if (json.services[i].name.indexOf('Host') != -1) {
                callback(json.services[i]);
            }
        }
    }, function(errorCode, errorMessage) {
        alert(errorMessage);
    });
}

// サービスの検索
function searchService(callback) {
    if (accessToken === undefined) {
        authorization(function() {
            searchServiceInternal(callback);
        });
    } else {
        searchServiceInternal(callback);
    }
}

// バッテリーの情報を取得
function getBattery() {
    searchService(function(service) {
        var builder = new dConnect.URIBuilder();
        builder.setProfile("battery");
        builder.setServiceId(service.id);
        builder.setAccessToken(accessToken);
        dConnect.get(builder.build(), null,
            function(json) {
                var battery = document.getElementById("battery");
                battery.value = json.level;
            },function(errorCode, errorMessage) {
                alert("Failed to get a battery information.");
            });
    });
}

サンプルプログラムは以下のページで確認することができます。

サンプル05

POST要求を行う場合には、dConnect.post(uri, headers, data, success_cb, error_cb)を使用します。

  • 第1引数のuriにDevice Connect APIにアクセスするためのURLを指定します。
  • 第2引数のheadersでは、HTTPリクエストに付加するヘッダーを指定します。
    何も追加することがない場合にはnullを指定します。
  • 第3引数のdataでは、HTTPリクエストにボディに渡す値を指定します。
    何も指定することがない場合にはnullを指定します。
  • 第4引数のsuccess_cbには、dConnect.postに成功した時の通知を受けるコールバック関数を指定します。
  • 第5引数のerror_cbには、dConnect.postに失敗した時の通知を受けるコールバック関数を指定します。

本サンプルでは、写真撮影を行うソースコードでdConnect.postの使用方法を解説します。

// 写真撮影を行う
function takePhoto() {
    searchService(function(service) {
        var builder = new dConnect.URIBuilder();
        builder.setProfile("mediaStreamRecording");
        builder.setAttribute("takePhoto");
        builder.setServiceId(service.id);
        builder.setAccessToken(accessToken);
        dConnect.post(builder.build(), null, null,
            function(json) {
                var img = document.getElementById("photo");
                img.src = json.uri;
            }, 
            function(errorCode, errorMessage) {});
    });
}

サンプルプログラムは以下のページで確認することができます。

サンプル08

imgタグのsrcに撮影したURIを指定しますが、クロスドメインによって、表示できないことがあります。
その問題を回避するために、imgタグにcrossorigin="anonymous"を追加します。
この属性を追加することで、imgタグの通信にオリジンが追加されるようになるためにクロスドメインが正常に動作するようになります。

<img src="[URI]" crossorigin="anonymous">

PUT要求を行う場合には、dConnect.put(uri, headers, data, success_cb, error_cb)を使用します。

  • 第1引数のuriにDevice Connect APIにアクセスするためのURLを指定します。
  • 第2引数のheadersでは、HTTPリクエストに付加するヘッダーを指定します。
    何も追加することがない場合にはnullを指定します。
  • 第3引数のdataでは、HTTPリクエストにボディに渡す値を指定します。
    何も指定することがない場合にはnullを指定します。
  • 第4引数のsuccess_cbには、dConnect.putに成功した時の通知を受けるコールバック関数を指定します。
  • 第5引数のerror_cbには、dConnect.putに失敗した時の通知を受けるコールバック関数を指定します。

// 振動させる
function startVibration() {
    searchService(function(service) {
        var pattern = document.getElementById("pattern").value;
        var builder = new dConnect.URIBuilder();
        builder.setProfile("vibration");
        builder.setAttribute("vibrate");
        builder.setServiceId(service.id);
        builder.setAccessToken(accessToken);
        if (pattern) {
            builder.addParameter("pattern", pattern);
        }
        dConnect.put(builder.build(), null, null,
            function(json) {
                console.log(json);
            },function(errorCode, errorMessage) {
                alert("Failed to vibrate the device.");
            });
    });
}

サンプルプログラムは以下のページで確認することができます。

サンプル06

DELETE要求を行う場合には、dConnect.delete(uri, headers, success_cb, error_cb)を使用します。

  • 第1引数のuriにDevice Connect APIにアクセスするためのURLを指定します。
  • 第2引数のheadersでは、HTTPリクエストに付加するヘッダーを指定します。
    何も追加することがない場合にはnullを指定します。
  • 第3引数のsuccess_cbには、dConnect.deleteに成功した時の通知を受けるコールバック関数を指定します。
  • 第4引数のerror_cbには、dConnect.deleteに失敗した時の通知を受けるコールバック関数を指定します。

// 振動を止める
function stopVibration() {
    searchService(function(service) {
        var builder = new dConnect.URIBuilder();
        builder.setProfile("vibration");
        builder.setAttribute("vibrate");
        builder.setServiceId(service.id);
        builder.setAccessToken(accessToken);
        dConnect.delete(builder.build(), null,
            function(json) {
                console.log(json);
            },function(errorCode, errorMessage) {
                alert("Failed to vibrate the device.");
            });
    });
}

サンプルプログラムは以下のページで確認することができます。

サンプル06

HOSTデバイスの加速度センサーの値を取得する手順を解説します。

加速度センサーの値を受け取るためには、WebSocketを開き非同期で値を受け取る必要があります。
WebSocketを開くには、dConnect.connectWebSocket(accessToken, callback)を用います。

  • 第1引数には、Authorizationで取得したaccessTokenを指定します。
  • 第2引数には、WebSocketの状態通知を受けるコールバック関数を指定します。

// アクセストークンの発行を要求
function authorization(callback) {
    var scopes = Array("battery", "connect", "deviceorientation", 
                       "fileDescriptor", "file", "mediaPlayer",
                       "mediastreamRecording", "notification", "phone", 
                       "proximity", "settings", "vibration",
                        "serviceinformation", "servicediscovery");
 
    dConnect.authorization(scopes, myAppName,
        function(clientId, newAccessToken) {
            // accessToken
            accessToken = newAccessToken;
            // WebSocketを開く
            dConnect.connectWebSocket(accessToken, function(eventCode, message) {
                console.log(eventCode + ", " + message);
            });
            callback();
        },
        function(errorCode, errorMessage) {
            alert("Failed to get an accessToken.");
        });
}

サンプルプログラムは以下のページで確認することができます。

サンプル07

WebSocketを開くには、アクセストークンが必要になります。 アクセストークンを取り直した場合には、WebSocketも作り直す必要がありますので、ご注意ください。

イベントの登録を解説します。

イベントの登録には、dConnect.addEventListener(uri, event_cb, success_cb, error_cb)を使用します。

  • 第1引数のuriにDevice Connect APIにアクセスするためのURLを指定します。
  • 第2引数のevent_cbには、イベントの通知を受け取るコールバック関数を指定します。
  • 第3引数のsuccess_cbには、dConnect.addEventListenerに成功した時の通知を受けるコールバック関数を指定します。
  • 第4引数のerror_cbには、dConnect.addEventListenerに失敗した時の通知を受けるコールバック関数を指定します。

// 加速度センサーを開始させる
function startDeviceOrientation() {
    searchService(function(service) {
        var builder = new dConnect.URIBuilder();
        builder.setProfile("deviceOrientation");
        builder.setAttribute("onDeviceOrientation");
        builder.setServiceId(service.id);
        builder.setAccessToken(accessToken);
        dConnect.addEventListener(builder.build(),
            function(message) {
                var json = JSON.parse(message);
                var x = document.getElementById("x");
                x.value = json.orientation.accelerationIncludingGravity.x;
                var y = document.getElementById("y");
                y.value = json.orientation.accelerationIncludingGravity.y;
                var z = document.getElementById("z");
                z.value = json.orientation.accelerationIncludingGravity.z;
            },
            function(json) {
                console.log("success");
            },
            function(errorCode, errorMessage) {
                alert("Failed to add the event.");
            });
    });
}

サンプルプログラムは以下のページで確認することができます。

サンプル07

イベントの解除を解説します。

イベントの解除には、dConnect.removeEventListener(uri, success_cb, error_cb)を使用します。

  • 第1引数のuriにDevice Connect APIにアクセスするためのURLを指定します。
  • 第2引数のsuccess_cbには、dConnect.removeEventListenerに成功した時の通知を受けるコールバック関数を指定します。
  • 第3引数のerror_cbには、dConnect.removeEventListenerに失敗した時の通知を受けるコールバック関数を指定します。

// 加速度センサーを停止させる
function stopDeviceOrientation() {
    searchService(function(service) {
        var builder = new dConnect.URIBuilder();
        builder.setProfile("deviceOrientation");
        builder.setAttribute("onDeviceOrientation");
        builder.setServiceId(service.id);
        builder.setAccessToken(accessToken);
        dConnect.removeEventListener(builder.build(),
            function(json) {
                console.log("success");
            },
            function(errorCode, errorMessage) {
                alert("Failed to remove the event.");
            });
    });
}

サンプルプログラムは以下のページで確認することができます。

サンプル07