Skip to content

HTML5Application Manual 30

Jump to bottom
Takayuki Hoshi edited this page May 25, 2020 · 1 revision

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 SDKの初期化

dconnectsdk.jsを使用する場合はオブジェクトを初期化する必要があります。

const sdk = new dConnectSDK({
    sslEnabled: false,
    uriSchemeName: 'gotapi',
    host: '192.168.0.24',
    port: 4035,
    extendedOrigin: 'http://192.168.0.24:4035/',
    isEnabledAntiSpoofing: false,
    appName: 'SDK Sample',
    scopes: ['battery']
  });

dConnectSDKを初期化するための引数はJavaScriptのオブジェクトとして設定します。
設定する時のパラメータ名は以下の通りです。
パラメータが設定されていない場合は、SDKが決めた初期値が設定されます。
これらのパラメータは、SDKの初期化後にも設定することができます。

  • sslEnabled: HTTPおよびWebSocket通信でSSLを使用するかどうかを指定するフラグ.
  • uriSchemeName: Manager起動用URIスキームの名前.
  • host: ホスト名.
  • port: ポート番号.
  • extendedOrigin: ハイブリッドアプリとしてのオリジン.
  • isEnabledAntiSpoofing: HMACによるサーバ認証を行うかどうかのフラグ.
  • appName: LocalOAuth用のアプリケーション名.
  • scopes: LocalOAuthで許可を得たいプロファイル名の配列.

5. Device Connect Manager起動確認

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

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

sdk.checkDeviceConnect()
     .then(apiVersion => {
       // 起動していた場合に呼び出される
     }).catch(e => {
       // 起動していなかった場合に呼び出される
     });
サンプル
<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">
        const sdk = new dConnectSDK({
            appName: 'SDK Sample',
            scopes: ['battery']
          });
        function getVersion() {
            sdk.checkDeviceConnect().then(apiVersion => {
                alert(apiVersion);
            }).catch(e => {
                switch (e.errorCode) {
                case dConnectSDK.constants.errorCode.ACCESS_FAILED:
                    alert("Requested to start Device Connect Manager.");
                    break;
                default:
                    alert(e.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にアクセスする場合には、以下のようなソースコードの修正が必要になります。

  const sdk = new dConnectSDK({
    host: '[外部端末のIPアドレス]',
    appName: 'SDK Sample',
    scopes: ['battery']
  });
  sdk.checkDeviceConnect().then(apiVersion => {
      alert(apiVersion);
  }).catch(e => {
      switch (e.errorCode) {
      case dConnectSDK.constants.errorCode.ACCESS_FAILED:
          alert("Requested to start Device Connect Manager.");
          break;
      default:
          alert(e.errorMessage);
          break;
      }
  });

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

この設定に表示されているIPアドレスを初期化する時のオブジェクトに設定します。

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

6. Device Connect Managerの起動

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

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

 sdk.startManager(state)
  • state : activityもしくはserverを指定します。

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

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

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

Device Connect Managerにアクセスするアプリケーションは、アプリケーション認可を行いアクセストークンを発行する必要があります。
最新版のSDKでは、DeviceConnectのリクエストを実行する時に、アクセストークンが不正の場合は、自動でアクセストークンを取得します。

自分のタイミングでアクセストークンを発行するためには、以下の関数を使用します。

sdk.authorization(scopes, appName)
  .then(accessToken => {
    // プリケーション認可に成功通知を受け取る
  }).catch(e => {
    // アプリケーション認可に失敗通知を受け取る
  });
  • scopes : 使用するプロファイルの一覧(配列)
  • appName : アプリケーションの名前

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

サンプル
<html>
<head>
    <title>Authorization</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 authorization() {
          const sdk = new dConnectSDK();
          // accessTokenを格納する変数
          let accessToken = "";
          // アプリケーション名
          let myAppName = "com.test.html5.app1";
          // アプリケーションで使用するスコープのリスト
          let scopes =["battery", "connect", "deviceorientation",
                             "file", "mediaPlayer", "mediastreamRecording",
                             "notification", "phone", "proximity", "settings",
                             "vibration", "serviceinformation", "servicediscovery"];
          sdk.authorization(scopes, myAppName).then(accessToken => {
              // accessToken
              alert(accessToken);
          }).catch(e => {
              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などに保存して、ある程度永続化を行なった方が良いです。
基本的に、新しいSDKではSDK内部でアクセストークンを管理しているため、アクセストークンの管理を意識する必要はありません。

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

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

8. サービスの探索

Device Connect Managerと接続しているサービスの一覧を取得するためには、以下の関数を使用します。
アクセストークンを取得していない場合は、SDK側で自動的にアクセストークンを取得する処理を行います。

    sdk.discoverDevices()
     .then(json => {
         let devices = json.services;
         // サービス一覧の取得に成功通知を受け取る
     }).catch(e => {
        // サービス一覧の取得に失敗通知を受け取る
     });
サンプル
<!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-x.x.x.js" type="text/javascript"></script>
    <script type="text/javascript">
        const sdk = new dConnectSDK({
          appName: "com.test.html5.app1",
          scope: ["battery", "connect", "deviceorientation",
                             "file", "mediaPlayer", "mediastreamRecording",
                             "notification", "phone", "proximity", "settings",
                             "vibration", "serviceinformation", "servicediscovery"]
        });


        // デバイスの検索
        function searchDevice() {
            sdk.discoverDevices().then(json => {
                let str = "<ul>";
                for (let i = 0; i < json.services.length; i++) {
                    str += "<li>" + json.services[i].name + "</li>";
                }
                str += "</ul>"
                document.getElementById("serviceList").innerHTML = str;
            }).catch(e => {
                alert(e.errorMessage);
            });
        }
    </script>
</head>
<body>
    <input type="button" value="Search Service" onclick="searchDevice();">
    <div id="serviceList"></div>
</body>
</html>

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

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

{
    "result": 0,
    "product": "Device Connect Manager",
    "version": "vx.x.x-release-xxxxxxx-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の場合には、サービスは接続されていませんので、操作することができません。

9. サービスの情報取得

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

     sdk.getSystemDeviceInfo(serviceId)
     .then(json => {
        // サービス情報取得に成功通知を受け取る
     }).catch(e => {
       // サービス情報取得に失敗通知を受け取る
     });
  • serviceId : サービスID

serviceIdには、sdk.discoverDevices()で取得した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-x.x.x.js" type="text/javascript"></script>
    <script type="text/javascript">
        const sdk = new dConnectSDK({
          appName: "com.test.html5.app1",
          scope: ["battery", "connect", "deviceorientation",
                             "file", "mediaPlayer", "mediastreamRecording",
                             "notification", "phone", "proximity", "settings",
                             "vibration", "serviceinformation", "servicediscovery"]
        });


        // デバイスの検索
        function searchDevice(callback) {
            sdk.discoverDevices().then(json => {
                for (let i = 0; i < json.services.length; i++) {
                  if (json.services[i].name.indexOf('Host') != -1) {
                      callback(json.services[i]);
                  }
                }
            }).catch(e => {
                alert(e.errorMessage);
            });
        }
        // サービスの情報を取得
        function getServiceInforamtion() {
            searchService(service => {
                sdk.getSystemDeviceInfo(service.id).then(json => {
                    console.log(json);
                }).catch(e => {
                    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": "vx.x.x-release-xxxxxxxx-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については、こちらを参照してください。

10. サービスの操作

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

10.1. URIの組み立て

Device Connect ManagerにアクセスするURIを作成するために以下のようにオブジェクトを記述します。

let params = {
  profile: 'battery',
  attribute: 'level',
  params: {
    serviceId: service.id,
    key: 'value'
  }
};

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

リクエストパラメータはparamsオブジェクトの中にkey-value形式で指定していきます。 HTTPメソッドがGET/DELETEの場合は、このオブジェクトはQuery形式のパラメータとして認識され、POST/PUTの場合はFormDataオブジェクトのパラメータとして認識されます。

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

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

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

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

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

params['accessToken'] = "アクセストークン";

アクセストークンが付加されていない場合は、sdk側が保持しているアクセストークンが付加されるようになっています。 その方法でもアクセストークンが付加されていなかったり、アクセストークンを取得時に指定していないAPIを指定した場合には、Device Connect Managerはエラーを返却します。

10.2. GET

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

 sdk.get(params, headers)
 .then(json => {
    // GET命令成功通知を受け取る
 }).catch(e => {
   // GET命令失敗通知を受け取る
 });
  • params : Device Connect APIへのURを構成するためのオブジェクト
  • headers : 送信するヘッダー情報 (省略する場合はundefineまたはnull)

送信するヘッダーがなければ、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-x.x.x.js" type="text/javascript"></script>
    <script type="text/javascript">
        const sdk = new dConnectSDK({
          appName: "com.test.html5.app1",
          scope: ["battery", "connect", "deviceorientation",
                             "file", "mediaPlayer", "mediastreamRecording",
                             "notification", "phone", "proximity", "settings",
                             "vibration", "serviceinformation", "servicediscovery"]
        });

        function searchDevice(callback) {
            sdk.discoverDevices().then(json => {
                for (let i = 0; i < json.services.length; i++) {
                  if (json.services[i].name.indexOf('Host') != -1) {
                      callback(json.services[i]);
                  }
                }
            }).catch(e => {
                alert(e.errorMessage);
            });
        }

        // バッテリーの情報を取得
        function getBattery() {
            searchService(service => {
                sdk.get({
                  profile: 'battery',
                  serviceId: service.id
                }).then(json => {
                    let battery = document.getElementById("battery");
                    battery.value = json.level;
                }).catch(e => {
                    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>

10.3 POST

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

 sdk.post(params, body, headers)
 .then(json => {
    // POST命令成功通知を受け取る
 }).catch(e => {
   // POST命令失敗通知を受け取る
 });
  • params : Device Connect APIへのURを構成するためのオブジェクト
  • headers : 送信するヘッダー情報 (省略する場合はundefineまたはnull)
  • data : 送信するデータ (省略する場合はundefineまたはnull)

送信するヘッダーがなければ、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-x.x.x.js" type="text/javascript"></script>
    <script type="text/javascript">
        const sdk = new dConnectSDK({
          appName: "com.test.html5.app1",
          scope: ["battery", "connect", "deviceorientation",
                             "file", "mediaPlayer", "mediastreamRecording",
                             "notification", "phone", "proximity", "settings",
                             "vibration", "serviceinformation", "servicediscovery"]
        });

        function searchDevice(callback) {
            sdk.discoverDevices().then(json => {
                for (let i = 0; i < json.services.length; i++) {
                  if (json.services[i].name.indexOf('Host') != -1) {
                      callback(json.services[i]);
                  }
                }
            }).catch(e => {
                alert(e.errorMessage);
            });
        }

        // 写真撮影を行う
        function takePhoto() {
            searchService(service => {
                sdk.post({
                  profile: 'mediaStreamRecording',
                  attribute: 'takePhoto',
                  serviceId: service.id
                }).then(json => {
                    let img = document.getElementById("photo");
                    img.src = json.uri;
                }).catch(e => {
                    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">

10.4. PUT

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

 sdk.put(params, body, headers)
 .then(json => {
    // PUT命令成功通知を受け取る
 }).catch(e => {
   // PUT命令失敗通知を受け取る
 });
  • params : Device Connect APIへのURを構成するためのオブジェクト
  • headers : 送信するヘッダー情報 (省略する場合はundefineまたはnull)
  • data : 送信するデータ (省略する場合はundefineまたはnull)

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

10.5. DELETE

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

 sdk.delete(params, headers)
 .then(json => {
    // DELETE命令成功通知を受け取る
 }).catch(e => {
   // DELETE命令失敗通知を受け取る
 });
  • params : Device Connect APIへのURを構成するためのオブジェクト
  • headers : 送信するヘッダー情報 (省略する場合はundefineまたはnull)

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

11. イベント

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

11.1. WebSocket接続

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

 sdk.connectWebSocket(s => {
   // WebSocketの状態通知を受け取る
 }).catch(e => {
   // エラーコードを返す.
 });

WebSocketを接続する際には、sdk.authorization()で取得したアクセストークンが必要になります。
sdk.authorization()で取得していない場合は、SDK側で自動的にアクセストークンの取得処理が行われます。
アクセストークンが一致しない場合には、Device Connect Managerは、エラーを返却し、WebSocketを切断します。

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

sdk.connectWebSocket(code, message => {
    if (code == 0) {
        // オープン
    } else if (code == 1) {
        // クローズ
    } else {
        // エラー
    }
});

11.2. WebSocket切断

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

sdk.disconnectWebSocket()

11.3. イベント登録

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

 sdk.addEventListener(params,eventCallback).then(json => {
    // イベント登録成功時の通知を受ける
 }).catch (e => {
    // イベント登録失敗時の通知を受ける
 });
  • params : イベントを登録するURIのオブジェクト
  • eventCallback : イベントの通知を受け取るコールバック関数

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

10.4. イベント解除

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

 sdk.removeEventListener(params).then(json => {
    // イベント解除成功時の通知を受ける
 }).catch (e => {
    // イベント解除失敗時の通知を受ける
 });
  • uri : イベントを解除するURI

イベントの解除は、この関数以外でも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-x.x.x.js" type="text/javascript"></script>
    <script type="text/javascript">
        const sdk = new dConnectSDK({
          appName: "com.test.html5.app1",
          scope: ["battery", "connect", "deviceorientation",
                             "file", "mediaPlayer", "mediastreamRecording",
                             "notification", "phone", "proximity", "settings",
                             "vibration", "serviceinformation", "servicediscovery"]
        });

        function searchDevice(callback) {
            sdk.discoverDevices().then(json => {
                for (let i = 0; i < json.services.length; i++) {
                  if (json.services[i].name.indexOf('Host') != -1) {
                      callback(json.services[i]);
                  }
                }
            }).catch(e => {
                alert(e.errorMessage);
            });
        }
        // 加速度センサーを開始させる
        function startDeviceOrientation() {
            searchService(service => {
                sdk.addEventListener({
                  profile: 'deviceOrientation',
                  attribute: 'onDeviceOrientation',
                  serviceId: service.id
                }, message => {
                    let x = document.getElementById("x");
                    x.value = json.orientation.accelerationIncludingGravity.x;
                    let y = document.getElementById("y");
                    y.value = json.orientation.accelerationIncludingGravity.y;
                    let z = document.getElementById("z");
                    z.value = json.orientation.accelerationIncludingGravity.z;
                }).then(json => {
                    console.log("Success to register a event.");
                }).catch(e => {
                    console.log("Failed to register event. error " + e.errorCode + " " + e.errorMessage);
                });
            });
        }

        // 加速度センサーを停止させる
        function stopDeviceOrientation() {
            searchService(function(service) {
                var builder = new dConnect.URIBuilder();
                builder.setProfile("deviceOrientation");
                builder.setAttribute("onDeviceOrientation");
                builder.setServiceId(service.id);
                builder.setAccessToken(accessToken);
                sdk.removeEventListener({
                  profile: 'deviceOrientation',
                  attribute: 'onDeviceOrientation',
                  serviceId: service.id
                }).then(json => {
                    console.log("Success to unregister a event.");
                }).catch(e => {
                    console.log("Failed to unregister event. error " + e.errorCode + " " + e.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>

12. Device Connect Manager検証

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

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

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

この状態で、sdk.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-x.x.x.js" type="text/javascript"></script>
    <script type="text/javascript">
        const sdk = new dConnectSDK({
          appName: "com.test.html5.app1",
          scope: ["battery", "connect", "deviceorientation",
                             "file", "mediaPlayer", "mediastreamRecording",
                             "notification", "phone", "proximity", "settings",
                             "vibration", "serviceinformation", "servicediscovery"]
        });

        function searchDevice(callback) {
            sdk.discoverDevices().then(json => {
                for (let i = 0; i < json.services.length; i++) {
                  if (json.services[i].name.indexOf('Host') != -1) {
                      callback(json.services[i]);
                  }
                }
            }).catch(e => {
                alert(e.errorMessage);
            });
        }
        // Device Connect Manager検証設定
        function startManager() {
            sdk.setAntiSpoofing(true);
            sdk.startManager("server");
        }

        // バッテリーの情報を取得
        function getBattery() {
            searchService(service => {
                sdk.get({
                  profile: 'battery',
                  serviceId: service.id
                }).then(json => {
                    let battery = document.getElementById("battery");
                    battery.value = json.level;
                }).catch(e => {
                    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