Skip to content

HTML5Application Manual 20

Jump to bottom
Takayuki Hoshi edited this page May 25, 2020 · 2 revisions

1. はじめに

本ドキュメントは、Device Connect SDKを用いてHTMLアプリケーションを開発する方法について解説します。

なお、下記に関する知識のある読者を対象とし、これらの解説は省略します。

  • HTML
  • JavaScript

1.1. 構成

アプリケーションは、スマートフォン内のローカルに起動しているHTTPサーバに問い合わせを行う事で、デバイスの情報取得や操作を行うことを可能にします。

2. 準備

本ドキュメントでは、Android版 Device Connect Managerを使用して、Device Connectシステムの動作確認を行います。

Android版 Device Connect Managerについては、こちらを参照して、インストールを行ってください。

3. Device Connect SDKのインポート

Device Connect SDKを使用するには、dconnectsdk-x.x.x.jsをインポートする必要があります。
※最新版のSDKをインポートしてください。

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

4. Device Connect Manager起動確認

Device Connect Managerを使用するには、最初に起動しているかを確認する必要があります。

Device Connect Managerが起動確認を行うためには、以下の関数を使用します。

dConnect.checkDeviceConnect(successCallback, errorCallback)

  • successCallback : 起動していた場合に呼び出される関数
  • errorCallback : 起動していなかった場合に呼び出される関数
サンプル
<html>
<head>
    <title>Sample</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script src="dconnectsdk-x.x.x.js" type="text/javascript"></script>
    <script type="text/javascript">
        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;
                }
            });
        }
    </script>
</head>
<body>
    <input type="button" value="Check" onclick="getVersion();">
</body>
</html>

apiVersionが取得できれば、Device Connect Managerが起動していることが確認できます。

上記のプログラムでは、Device Connect Managerがインストールされているスマートフォン上のブラウザでしか動作しません。

PCなどの外部にある端末からスマートフォンにインストールされているDevice Connect Managerにアクセスする場合には、以下のようなソースコードの修正が必要になります。

dConnect.setHost("[スマートフォンのIPアドレス]");

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;
        }
    });
}

スマートフォンのIPアドレスは、Device Connect Managerの設定画面で確認することができます。

この設定に表示されているIPアドレスをdConnect.setHost()に設定します。

Device Connect Managerの設定画面で外部IPを許可を有効にする必要があります。
外部IPを許可はデフォルトでは無効になっています。

5. Device Connect Managerの起動

Device Connect Managerが起動していなかった時にアプリケーションからDevice Connect Managerを起動する必要があります。
ただし、Device Connect Managerの起動にはURLスキームを使用しますので、外部からアクセスしている場合には使用することができません。

Device Connect Managerの起動には以下の関数を使用します。

dConnect.startManager(state)

  • state : activityもしくはserverを指定します。

activityが指定された場合には、起動確認用の画面が表示され、ユーザ操作によって起動を行います。

serverが指定された場合には、起動確認用の画面を表示せずに起動を行います。
ただし、Device Connect Managerの設定において、外部からの自動起動/終了が無効になっている場合には、serverが指定されても起動確認画面が表示されます。

6. アプリケーションの認可

Device Connect Managerにアクセスするアプリケーションは、アプリケーション認可を行いアクセストークンを発行する必要があります。

アクセストークンを発行するためには、以下の関数を使用します。

dConnect.authorization(scopes, appName, successCallback, errorCallback)

  • scopes : 使用するプロファイルの一覧(配列)
  • appName : アプリケーションの名前
  • successCallback : アプリケーション認可に成功通知を受け取るコールバック関数
  • errorCallback : アプリケーション認可に失敗通知を受け取るコールバック関数

dConnect.checkDeviceConnect()は、アクセストークンが必要ありません。
この関数以外のdConnect.get()、dConnect.put()、dConnect.post()、dConnect.delete()などの関数にアクセスする場合に必要になります。

サンプル
<html>
<head>
    <title>Authorization</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script src="dconnectsdk-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        // accessTokenを格納する変数
        var accessToken = "";
         
        // アプリケーション名
        var myAppName = "com.test.html5.app1";
         
        // アクセストークンの発行を要求
        function authorization() {
            var scopes = Array("battery", "connect", "deviceorientation", 
                               "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.");
                });
        }
    </script>
</head>
<body>
    <input type="button" value="Authorize" onclick="authorization();">
</body>
</html>

アプリケーションの認可には、ユーザ確認が行われます。
Android版Device Connect Managerの場合には以下のような確認ダイアログが表示されます。

同意するが押下された場合には、アクセストークンが発行されます。
拒否するが押下された場合には、アクセストークンは発行されずに、エラーを返却します。

また、実際にサービスにアクセスを行う際に、第一引数scopesに渡すプロファイル一覧の中にないプロファイルの場合には、エラー(Out Of Scope)が返却されます。
よって、アプリケーションで使用するすべてのプロファイルを指定する必要があります。

本サンプルでは、アクセストークンを変数として持っているためにページをリロードなどした場合にアクセストークンが消えてしまいます。
ページにアクセスする度に認可画面が表示されてしまうのは、ユーザビリティが低下してしまいますので、cookieなどに保存して、ある程度永続化を行なって方が良いです。

Device Connect Managerの設定で、アプリケーション認可を無効にすることができます。
設定画面において、以下の部分のチェックを外して、Device Connect Managerを起動することで、アプリケーション認可は無視されます。

アプリケーション認可が無効の状態では、リクエストにアクセストークンを付加しない状態でも操作することができます。
ただし、どのアプリケーションからも操作が可能になってしまうので、注意が必要になります。

7. サービスの探索

Device Connect Managerと接続しているサービスの一覧を取得するためには、以下の関数を使用します。

dConnect.discoverDevices(accessToken, successCallback, errorCallback)

  • accessToken : アクセストークン
  • successCallback : サービス一覧の取得に成功通知を受け取るコールバック関数
  • errorCallback : サービス一覧の取得に失敗通知を受け取るコールバック関数
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Service Discovery</title>
    <script src="dconnectsdk-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        // accessTokenを格納する変数
        var accessToken = undefined;
         
        // アプリ名
        var myAppName = "com.test.html5.app1";
         
        // アクセストークンの発行を要求
        function authorization() {
            var scopes = Array("battery", "connect", "deviceorientation", 
                               "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);
                });
            }
        }
    </script>
</head>
<body>
    <input type="button" value="Search Service" onclick="searchDevice();">
    <div id="serviceList"></div>
</body>
</html>

上記のようにdConnect.discoverDevices()を呼び出すことで、Device Connect Managerに接続しているサービスの一覧を取得することができます。

以下のようなレスポンスが返却されてきます。

{
    "result": 0,
    "product": "Device Connect Manager",
    "version": "v2.1.0-release-20160928-107-g8b76f4f",
    "services": [
        {
            "online": true,
            "scopes": [
                "vibration",
                "settings",
                "phone",
                "canvas",
                "serviceInformation",
                "keyEvent",
                "mediaPlayer",
                "connect",
                "notification",
                "touch",
                "file",
                "proximity",
                "deviceOrientation",
                "fileDescriptor",
                "mediaStreamRecording",
                "battery"
            ],
            "id": "Host.e87e3213b730843a437ff6c676899df0.localhost.deviceconnect.org",
            "name": "Host"
        },
        {
            "online": true,
            "scopes": [
                "canvas",
                "serviceInformation",
                "echo",
                "deviceOrientation",
                "battery"
            ],
            "id": "my_service_id.b4d087c4efae15a0722c18de9a8e3a.localhost.deviceconnect.org",
            "name": "My Service",
            "type": "Unknown"
        }
    ]
}

servicesの配列にサービスが格納されています。

アプリケーションは、このサービスの情報からid(サービスID)を取得して、各サービスを操作します。

サービスの情報にあるonlineの状態は、サービスの接続状態を示しています。
onlineがfalseの場合には、サービスは接続されていませんので、操作することができません。

8. サービスの情報取得

サービスの詳細な情報を取得するために以下の関数を使用します。

dConnect.getSystemDeviceInfo(serviceId, accessToken, successCallback, errorCallback)

  • serviceId : サービスID
  • accessToken : アクセストークン
  • successCallback : サービス情報取得に成功通知を受け取るコールバック関数
  • errorCallback : サービス情報取得に失敗通知を受け取るコールバック関数

serviceIdには、dConnect.discoverDevices(accessToken, successCallback, errorCallback)で取得したservicesに格納されているidを指定します。
servicesに無いidを指定した場合には、アクセスできるデバイスが見つかりませんのでエラーを返却します。

サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Service Information</title>
    <script src="dconnectsdk-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        // accessTokenを格納する変数
        var accessToken = undefined;
         
        // アプリ名
        var myAppName = "com.test.html5.app1";
         
        // アクセストークンの発行を要求
        function authorization(callback) {
            var scopes = Array("battery", "connect", "deviceorientation", 
                               "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.");
                    });
            });
        }
    </script>
</head>
<body>
    <input type="button" value="Get Information" onclick="getServiceInforamtion();">
    <div id="serviceList"></div>
</body>
</html>

Service Informationによって、サービスが使用できるAPIのリストや接続状態を取得することができます。

以下のようなレスポンスが返却されてきます。

{
    "result": 0,
    "product": "Device Connect Manager",
    "version": "v2.1.0-release-20160928-278-gd9bc18f",
    "connect": {},
    "supports": [
        "canvas",
        "serviceInformation",
        "echo",
        "deviceOrientation",
        "battery"
    ],
    "supportApis": {
        "canvas": {
            "swagger": "2.0",
            "consumes": [
                "application/x-www-form-urlencoded",
                "multipart/form-data"
            ],
            "info": {
                "description": "",
                "title": "Canvas Profile",
                "version": "2.0.0"
            },
            "paths": {
            ...　省略 ...
    }
}

supportApisには、各APIの情報がswagger2.0のフォーマットで情報が格納されています。
swaggerについては、こちらを参照してください。

9. サービスの操作

Device Connect Javascript SDKでは、簡易的にGET、PUT、POST、DELETEメソッドにアクセスするためのメソッドを用意しています。

9.1. dConnect.URIBuilder

Device Connect ManagerにアクセスするURIを作成するために以下のクラスを使用します。

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

上記のプログラムを動作させた場合にはuriには、_http://localhost:4035/gotapi/battery/level?serviceId=xxxx&accessToken=xxxx&key=value_が格納されます。

この値をdConnect.get()、 dConnect.post()、 dConnect.put()、 dConnect.delete()などの関数の第一引数に指定して使用します。

Host名やポート番号は、dConnect.setHost()やdConnect.setPort()で設定した値が格納されます。

dConnect.setHost("192.168.0.1");
dConnect.setPort(8888);

デフォルトでは、Host名はlocalhost、ポート番号は4035が格納されています。

Device Connect Managerにアクセスするためには、パラメータにアクセストークンが必要になります。
dConnect.authorization()で取得したアクセストークンを以下の関数で設定します。

builder.setAccessToken("アクセストークン")

アクセストークンが付加されていなかったり、アクセストークンを取得時に指定していないAPIを指定した場合には、Device Connect Managerはエラーを返却します。

9.2. GET

Device Connect ManagerにGETメソッドの命令を行うために以下の関数を使用します。

dConnect.get(uri, headers, successCallback, errorCallback)

  • uri : Device Connect APIへのURI
  • headers : 送信するヘッダー情報 (省略する場合はundefineまたはnull)
  • successCallback : GET命令成功通知を受け取るコールバック関数
  • errorCallback : GET命令失敗通知を受け取るコールバック関数

送信するヘッダーがなければ、undefinedやnullを指定します。

サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>GET Sample</title>
    <script src="dconnectsdk-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        // accessTokenを格納する変数
        var accessToken = undefined;
         
        // アプリ名
        var myAppName = "com.test.html5.app1";
         
        // アクセストークンの発行を要求
        function authorization(callback) {
            var scopes = Array("battery", "connect", "deviceorientation", 
                               "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.");
                    });
            });
        }    
    </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>

9.3 POST

Device Connect ManagerにPOSTメソッドの命令を行うために以下の関数を使用します。

dConnect.post(uri, headers, data, successCallback, errorCallback)

  • uri : Device Connect APIへのURI
  • headers : 送信するヘッダー情報 (省略する場合はundefineまたはnull)
  • data : 送信するデータ (省略する場合はundefineまたはnull)
  • successCallback : POST命令成功通知を受け取るコールバック関数
  • errorCallback : POST命令失敗通知を受け取るコールバック関数

送信するヘッダーがなければ、undefinedやnullを指定します。
送信するデータがない場合も同様にundefinedやnullを指定します。

サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>POST Sample</title>
    <script src="dconnectsdk-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        // accessTokenを格納する変数
        var accessToken = undefined;

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

        // アクセストークンの発行を要求
        function authorization(callback) {
            var scopes = Array("battery", "connect", "deviceorientation", 
                               "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) {
                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 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) {
                        alert("Failed to take a photo.");
                    });
            });
        }
    </script>
</head>
<body>
    <div>
        カメラ <input type="button" value="TakePhoto" onclick="takePhoto();">
    </div>
    <div>
        <img crossorigin="anonymous" width="240"id="photo">
    </div>
</body>
</html>

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

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

9.4. PUT

Device Connect ManagerにPUTメソッドの命令を行うために以下の関数を使用します。

dConnect.put(uri, headers, data, successCallback, errorCallback)

  • uri : Device Connect APIへのURI
  • headers : 送信するヘッダー情報 (省略する場合はundefineまたはnull)
  • data : 送信するデータ (省略する場合はundefineまたはnull)
  • successCallback : PUT命令成功通知を受け取るコールバック関数
  • errorCallback : PUT命令失敗通知を受け取るコールバック関数

送信するヘッダーがなければ、undefinedやnullを指定します。
送信するデータがない場合も同様にundefinedやnullを指定します。

9.5. DELETE

Device Connect ManagerにDELETEメソッドの命令を行うために以下の関数を使用します。

dConnect.delete(uri, headers, successCallback, errorCallback)

  • uri : Device Connect APIへのURI
  • headers : 送信するヘッダー情報 (省略する場合はundefineまたはnull)
  • successCallback : DELETE命令成功通知を受け取るコールバック関数
  • errorCallback : DELETE命令失敗通知を受け取るコールバック関数

送信するヘッダーがなければ、undefinedやnullを指定します。

10. イベント

WebSocketを使用して、ウェアラブルデバイスやIoTデバイスで発生するイベントを連続的に受信します。

10.1. WebSocket接続

Device Connect ManagerにWebSocketを接続するために以下の関数を使用します。

dConnect.connectWebSocket(accessToken, callback)

  • accessToken : アクセストークン
  • callback : WebSocketの状態通知を受け取るコールバック関数

WebSocketを接続する際には、dConnect.authorization()で取得したアクセストークンが必要になります。
アクセストークンが一致しない場合には、Device Connect Managerは、エラーを返却し、WebSocketを切断します。

第２引数のcallbackには、WebSocketの接続、切断、エラーなどが発生した時の状態通知を行います。
WebSocketが切断された場合には、イベントが停止しますので、再接続する場合にはイベントを登録し直す必要があります。

dConnect.connectWebSocket(accessToken, function(eventCode, message) {
    if (eventCode == 0) {
        // オープン
    } else if (eventCode == 1) {
        // クローズ
    } else {
        // エラー
    }
});

10.2. WebSocket切断

Device Connect Managerに接続しているWebSocketを切断するためには以下の関数を使用します。

dConnect.disconnectWebSocket()

10.3. イベント登録

イベントの登録を行うためには以下の関数を使用します。

dConnect.addEventListener(uri, eventCallback, successCallback, errorCallback)

  • uri : イベントを登録するURI
  • eventCallback : イベントの通知を受け取るコールバック関数
  • successCallback : イベント登録成功時の通知を受けるコールバック関数
  • errorCallback : イベント登録失敗時の通知を受けるコールバック関数

WebSocketが接続されていてもサービスに対してイベントの登録を行わない限りイベントは配送されてきません。

10.4. イベント解除

イベントの解除を行うためには以下の関数を使用します。

dConnect.removeEventListener(uri, successCallback, errorCallback)

  • uri : イベントを解除するURI
  • successCallback : イベント解除成功時の通知を受けるコールバック関数
  • errorCallback : イベント解除失敗時の通知を受けるコールバック関数

イベントの解除は、この関数以外でもWebSocketが切断された場合には、行われます。

サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Sample07(DeviceOrientation)</title>
    <script src="dconnectsdk-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        // accessTokenを格納する変数
        var accessToken = undefined;
        
        // アプリ名
        var myAppName = "com.test.html5.app1";

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

        function searchServiceInternal(callback) {
            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 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 to register a event.");
                    },
                    function(errorCode, errorMessage) {
                        console.log("Failed to register event. error " + errorCode + " " + errorMessage);
                    });
            });
        }

        // 加速度センサーを停止させる
        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 to unregister a event.");
                    },
                    function(errorCode, errorMessage) {
                        console.log("Failed to unregister event. error " + errorCode + " " + errorMessage);
                    });
            });
        }
    </script>
</head>
<body>
    <div>
        加速度センサー
        <input type="button" value="Start" onclick="startDeviceOrientation();">
        <input type="button" value="Stop" onclick="stopDeviceOrientation();">
    </div>
    <div>
        <p><label>x: <input type="text" id="x" size="30" maxlength="30"></label></p>
        <p><label>y: <input type="text" id="y" size="30" maxlength="30"></label></p>
        <p><label>z: <input type="text" id="z" size="30" maxlength="30"></label></p>
    </div>
</body>
</html>

11. Device Connect Manager検証

Device Connect Managerがなりすましなどされていないか確認するために、検証を行います。

検証を行うには、dConnect.setAntiSpoofing()にtureを設定した状態で、dConnect.startManager()を呼び出します。
デフォルトではdConnect.setAntiSpoofing()はfalseに設定されています。

Device Connect SDKでは、dConnect.startManager()の中で、HMACのキーを生成し、Device Connect Managerの起動パラメータとして渡します。

この状態で、dConnect.get()などの関数内で、nonce(ワンタイムの値)を生成してDevice Connect Managerに命令を送信します。

Device Connect Managerからのレスポンスの中に、dConnect.startManagerで送信したHMACキーとnonceで作成したHMACが格納されてきます。

SDKは、同じようにHMACキーとnonceからHMACを生成し比較します。
レスポンスに格納されているHMACと同じHMACが生成されれば、起動したDevice Connect Managerにアクセスしたことと判断します。
一致しない場合には、別のサーバからのレスポンスとして判別し、エラーを返却します。

Device Connect Manager検証機能は、GotAPIの仕様ですので、詳しくは、GotAPIの資料を参照してください。

サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Sample07(DeviceOrientation)</title>
    <script src="dconnectsdk-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        // accessTokenを格納する変数
        var accessToken = undefined;
        
        // アプリ名
        var myAppName = "com.test.html5.app1";

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

        function searchServiceInternal(callback) {
            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);
            }
        }

        // Device Connect Manager検証設定
        function startManager() {
            dConnect.setAntiSpoofing(true);
            dConnect.startManager("server");
        }

        // バッテリー情報取得
        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.");
                    });
            });
        }
    </script>
</head>
<body>
    <div>
        Device Connect Manager検証<br>
        <input type="button" value="Start" onclick="startManager();">
        <input type="button" value="Get Battery" onclick="getBattery();">
    </div>
    <div>
        <p><label>バッテリー残量: <input type="text" id="battery" size="30" maxlength="30"></label></p>
    </div>
</body>
</html>
  1. アプリケーション開発マニュアル
  2. 単体テスト動作マニュアル

Clone this wiki locally