Skip to content

HTML5Application Manual

Jump to bottom
Ryo Mizuno edited this page Nov 2, 2016 · 3 revisions

目次

1. はじめに

本ドキュメントは、Device Connect APIを用いてHTML5アプリを開発する方法について解説します。HTML5に関する一般的な知識と、JavaScriptに関する一般的な知識を保持している事を前提に、解説していきます。

2. Device Connect について

Device Connectでは、RESTfulで、命令やデータの送受信が可能です。各処理は、Profileという形でURIが割り振られ、そのURIをJavaあるいはJavaScriptなどで呼び出す事で、処理を行います。

2.1. Device Connectプロファイル

Device Connectシステム上で定義されている主なプロファイルのリストを以下に示します。

プロファイル名 説明
Availability ホストデバイス上でDevice Connectシステムが起動しているかどうかを確認します。
Authorization Device Connectサービスへのアクセス許可をユーザーに対して求めます。
Service Discovery Device Connectサービスの一覧を取得します。
Service Information Device Connectサービスについての情報を取得します。
System Device Connectシステム自体の情報や、プラグインの情報、プラグインの設定画面の起動などを行います。
Battery バッテリーの状態を保持します。
Proximity デバイスと物体との近接状態を取得します。
Media Player メディアの再生(音声・音楽・動画)を行います。
Vibration デバイスをバイブレートする命令を送ります。
Notification デバイスに通知を行います。
Setting デバイスの設定(音量・画面輝度・画面スリープ時間等)を行います。
Device Orientation デバイスの加速度等を取得します。
File デバイスへのファイル送信、デバイスからのファイル受信等を行います。
File Descriptor デバイスにファイルの生成、書き込み/読み込み等を行います。
MediaStream Recording メディアの録音(音声・音楽・動画)を行います。
Phone デバイスに電話発信の命令を送ります。

2.2. Device Connectシステムへの接続

Device Connectシステムに接続し値を取得するサンプルを作りながら解説していきます。Device Connectでは、HTML5で開発されるアプリケーションは、スマートデバイス内のローカルに起動しているHTTPサーバに問い合わせをおこなう事で、ハードウェアの操作や、情報取得を行う事が可能です。


図1. Device Connect Managerへの問い合わせ

2.3 サンプルの作成

それでは、簡単なサンプルを作りながら解説していきます。JavaScriptで、Ajaxを用いて、Device Connect Managerに問い合わせし、結果のJSONを取得するサンプルを作成します。下記のindex.htmlを入力し、任意のサーバにアップロードします。

index.html

<html>
<head>
  <title>Sample</title>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <script src="js/dconnectsdk-2.0.0.js" type="text/javascript"></script>
  <script>
    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="button" onclick="getVersion();">
</body>
</hrml>

任意のサーバにアップロードしたindex.html に、AndroidのChromeブラウザを起動し、接続します。ボタンを押して、Device ConnectのVersionが取得できたら成功です。


Requestでは、Host名とURIを指定し、HTTP 1.1のGETプロトコルでDevice Connect Managerに問い合わせをおこないます。Responseで、問い合わせに対する返答が、JSONフォーマットで返ってきます。

Request

GET /gotapi/availability HTTP/1.1
Host: 127.0.0.1:4035

Response
{
     "product":"Device Connect Manager",
     "version":"x.x",
     "hmac":"yyyyy",
     "result":0,
}

3. SDKを用いたHTML5アプリケーションの開発

Device Connectとの通信には、いくつかの手順を行う必要があります。Androidでアプリケーションを開発する際に、最初にAccessTokenを取得します。また、接続したハードウェアのServiceIdをService Discovery Profileにアクセスして取得します。AccessTokenとServiceIdを用いて、操作したいハードウェアのプラグインに対して処理の送信が可能となります。


3.1. AccessTokenをDevice Connectから取得

Device Connectにアクセスするアプリは、OAuth(Local)認証で用いるAccessTokenを、Device Connect Managerより発行してもらう必要があります。本サンプルから、Device Connect SDK JavaScript版を用いて解説します。

今回使用するファイル群

ファイル名 説明
/index.html HTML関連処理。
/js/main.js JavaScriptの処理。
/js/dconnectsdk-2.0.0.js Device Connect JavaScript SDK

index.html

<html>
<head>
    <title>Sample</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script src="js/dconnectsdk-2.0.0.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
</head>
<body>
    <input type="button" value="Get accessToken" onclick="authorization();">
</body>
</hrml>

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

以下の箇所では、Hostデバイスプラグインが対応しているProfileの一覧を指定しています。 必要に応じて、Profile名を制限してください。

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

これでAccessTokenが取得できます。

3.2. ServiceIDの取得

　次にServiceIDを取得します。ServiceIDは、Service Discovery Profileを用いて取得可能です。Service Discovery Profileでは、Device Connectが現在接続可能なデバイスの一覧を取得できます。この項では、jQuery Mobileを用いて取得したデバイス一覧をListとして表示します。
　dConnectDeviceHostなど、デバイスプラグインが一つでもインストールされている状態でないと、リストは表示されません。
今回使用するファイル群

ファイル名 説明
index.html HTML関連処理。
/js/main.js JavaScriptの処理。
/js/dconnectsdk-2.0.0.js Device Connect JavaScript SDK
/js/jquery-1.11.0.min.js jQuery 1.11。
/js/jquery.mobile-1.4.2.min.js jQuery Mobile 1.4.2 JavaScript。
/css/jquery.mobile-1.4.2.min.css jQuery Mobile 1.4.2 CSS。

index.html

<html>
<head>
    <title>Sample</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/dconnectsdk-2.0.0.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <link href="css/jquery.mobile-1.4.2.min.css" rel="stylesheet" />
</head>
<body>
     <div id="page1" data-role="page">
        <div data-role="header" data-theme="b" style="text-align:center">
	           Sample App
        </div>
      	<div data-role="controlgroup" data-type="horizontal" style="text-align:center" >
            <input data-icon="grid" data-inline="true" data-mini="true" onclick="javascript:authorization();" type="button" value="accessToken" />
            <input data-icon="grid" data-inline="true" data-mini="true" onclick="javascript:searchDevice();" type="button" value="Search Devices" />
        </div>

        <ul class="list" data-role="listview" id="list"></ul>
    </div>    
</body>  

</hrml>

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", "light",
    		"remoteController", "driveController", "mhealth", "sphero", "dice", "temperature","camera",
    		"serviceinformation", "servicediscovery");


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

// デバイスの検索
function searchDevice() {
    dConnect.discoverDevices(accessToken, function(json) {
        var str = "";
        if (json.result == 0) {
            for (var i = 0; i < json.services.length; i++) {
                str += '<li><a href="javascript:searchServiceInformation(\'' + json.services[i].id + '\');"';
                str += 'value=“' + json.services[i].name + '">' + json.services[i].name + '</a></li>';
            }
        } else {
        	alert(json.result);
        }

        var listHtml = document.getElementById('list');
        listHtml.innerHTML = str;
        $("ul.list").listview("refresh");

    }, function(errorCode, errorMessage) {
		alert(errorMessage);
    });
}

これで、デバイスの一覧が取得できました。

各Listの中には、

<li><a href=“javascript:searchServiceInformation(serviceId)” value=“プラグイン名”>プラグイン名</a>

ServiceIdとプラグインの箇所には、Service Discovery Profileで取得した、Device Connectから接続可能なデバイスのServiceIdとプラグイン名が挿入されます。次の章では、searchServiceInformation(serviceId)で、serviceIdで指定したデバイスのProfile一覧を取得します。

3.3.デバイスプラグインのRESTfulでの問い合わせ処理実装

ここまでの実装で取得した「AccessToken」「ServiceId」を使用して、デバイスプラグインへRESTfulでの問い合わせ処理の実装を行います。
ここでは、Service Discoveryで最初に発見されたデバイスプラグインに対して、「/serviceinformation」を実行し、その応答を得る実装を行います。

今回使用するファイル群

ファイル名 説明
index.html HTML関連処理。
/js/main.js JavaScriptの処理。
/js/dconnectsdk-2.0.0.js Device Connect JavaScript SDK
/js/jquery-1.11.0.min.js jQuery 1.11。
/js/jquery.mobile-1.4.2.min.js jQuery Mobile 1.4.2 JavaScript。
/css/jquery.mobile-1.4.2.min.css jQuery Mobile 1.4.2 CSS。

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", "light",
    		"remoteController", "driveController", "mhealth", "sphero", "dice", "temperature","camera",
    		"serviceinformation", "servicediscovery");


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

// デバイスの検索
function searchDevice() {
    dConnect.discoverDevices(accessToken, function(json) {
        var str = "";
        if (json.result == 0) {
            for (var i = 0; i < json.services.length; i++) {
                str += '<li><a href="javascript:searchServiceInformation(\'' + json.services[i].id + '\');"';
                str += 'value=“' + json.services[i].name + '">' + json.services[i].name + '</a></li>';
            }
        } else {
        	alert(json.result);
        }

        var listHtml = document.getElementById('list');
        listHtml.innerHTML = str;
        $("ul.list").listview("refresh");

    }, function(errorCode, errorMessage) {
		alert(errorMessage);
    });
}

// デバイスのプロファイルの一覧
function searchServiceInformation(serviceId) {

    var builder = new dConnect.URIBuilder();
    builder.setProfile("serviceinformation");
    builder.setServiceId(serviceId);
    builder.setAccessToken(accessToken);
    var uri = builder.build();

    dConnect.get(uri, null, function(json) {
        if (json.result == 0) {
            var str = "";
            for (var i = 0; i < json.supports.length; i++) {
                str += '<li><a href="javascript:searchProfile(\'' + serviceId + '\', ';
                str += '\'' + json.supports[i] + '\');" ';
                str += 'value="' + json.supports[i] + '">';
                str += json.supports[i] + '</a></li>';
            }

            var listHtml = document.getElementById('list');
            listHtml.innerHTML = str;
            $("ul.list").listview("refresh");

        } else {
        	alert(json.result);
        }
    }, function(errorCode, errorMessage) {
		alert(errorMessage);
    });
}

今回のサンプルでは、URIが/serviceinformationに、リクエストを投げます。

下記が、実際に今回利用したURIの作成例になります。

    var builder = new dConnect.URIBuilder();
    builder.setProfile("serviceinformation");
    builder.setServiceId(serviceId);
    builder.setAccessToken(accessToken);
    var uri = builder.build();

http://127.0.0.1:4035/gotapi/serviceinformation?serviceId=取得したServiceID&accrssToken=取得したアクセストークン

というURIが生成されます。このURIを用いて、dConnect.get()で、そのURIへのリクエストを送ります。レスポンスは、JSON形式で送られてきます。

    dConnect.get(uri, null, function(json) {
        if (json.result == 0) {
            var str = "";
            for (var i = 0; i < json.supports.length; i++) {
                str += '<li><a href="javascript:searchProfile(\'' + serviceId + '\', ';
                str += '\'' + json.supports[i] + '\');" ';
                str += 'value="' + json.supports[i] + '">';
                str += json.supports[i] + '</a></li>';
            }

            var listHtml = document.getElementById('list');
            listHtml.innerHTML = str;
            $("ul.list").listview("refresh");

        } else {
        	alert(json.result);
        }
    }, function(errorCode, errorMessage) {
		alert(errorMessage);
    });

URIが、POSTの場合はdConnect.post()を、PUTの場合はdConnect.put()を、DELETEの場合はdConnect.delete()を使用します。

ここまでの作成を終えた後、このサンプルをインストールして起動すると、以下のような画面が表示されます。

ここから先は、Host Pluginが必須になります。mediastreamRecordingプロファイルが選択され、Hostプラグインが写真を撮影し、撮影した写真をブラウザに表示するサンプルを作成します。　 Host Pluginのインストール方法は、こちらなどを参考にしてください。



今回使用するファイル群
ファイル名 説明
index.html HTML関連処理。
/js/main.js JavaScriptの処理。
/js/dconnectsdk-2.0.0.js Device Connect JavaScript SDK
/js/jquery-1.11.0.min.js jQuery 1.11。
/js/jquery.mobile-1.4.2.min.js jQuery Mobile 1.4.2 JavaScript。
/css/jquery.mobile-1.4.2.min.css jQuery Mobile 1.4.2 CSS。

今回必要なアプリ
アプリ名 説明
Hostデバイスプラグイン Hostプラグインを事前インストール。

index.html

<html>
<head>
    <title>Sample</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
    <script src="js/dconnectsdk-2.0.0.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <link href="css/jquery.mobile-1.4.2.min.css" rel="stylesheet" />
</head>
<body>
     <div id="page1" data-role="page">
        <div data-role="header" data-theme="b" style="text-align:center">
	           Sample App
        </div>
      	<div data-role="controlgroup" data-type="horizontal" style="text-align:center" >
            <input data-icon="grid" data-inline="true" data-mini="true" onclick="javascript:authorization();" type="button" value="accessToken" />
            <input data-icon="grid" data-inline="true" data-mini="true" onclick="javascript:searchDevice();" type="button" value="Search Devices" />
        </div>

        <ul class="list" data-role="listview" id="list"></ul>

        <div id="result" data-theme="a"></div>
    </div>    
</body>  

</hrml>

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", "light",
    		"remoteController", "driveController", "mhealth", "sphero", "dice", "temperature","camera",
    		"serviceinformation", "servicediscovery");


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

// デバイスの検索
function searchDevice() {
    dConnect.discoverDevices(accessToken, function(json) {
        var str = "";
        if (json.result == 0) {
            for (var i = 0; i < json.services.length; i++) {
                str += '<li><a href="javascript:searchServiceInformation(\'' + json.services[i].id + '\');"';
                str += 'value=“' + json.services[i].name + '">' + json.services[i].name + '</a></li>';
            }
        } else {
        	alert(json.result);
        }

        var listHtml = document.getElementById('list');
        listHtml.innerHTML = str;
        $("ul.list").listview("refresh");

    }, function(errorCode, errorMessage) {
		alert(errorMessage);
    });
}

// デバイスのプロファイルの一覧
function searchServiceInformation(serviceId) {

    var builder = new dConnect.URIBuilder();
    builder.setProfile("serviceinformation");
    builder.setServiceId(serviceId);
    builder.setAccessToken(accessToken);
    var uri = builder.build();

    dConnect.get(uri, null, function(json) {
        if (json.result == 0) {
            var str = "";
            for (var i = 0; i < json.supports.length; i++) {
                str += '<li><a href="javascript:searchProfile(\'' + serviceId + '\', ';
                str += '\'' + json.supports[i] + '\');" ';
                str += 'value="' + json.supports[i] + '">';
                str += json.supports[i] + '</a></li>';
            }

            var listHtml = document.getElementById('list');
            listHtml.innerHTML = str;
            $("ul.list").listview("refresh");

        } else {
        	alert(json.result);
        }
    }, function(errorCode, errorMessage) {
		alert(errorMessage);
    });
}

// Profile別処理の分岐
function searchProfile(serviceId, profile) {
   	if (profile == "mediastreamRecording") {
        doTakePhoto(serviceId);
    }
}

// 写真を撮影しWebに表示
function doTakePhoto(serviceId) {

    var builder = new dConnect.URIBuilder();
    builder.setProfile("mediastreamRecording");
    builder.setAttribute("takephoto");
    builder.setServiceId(serviceId);
    builder.setAccessToken(accessToken);

    var uri = builder.build();

    dConnect.post(uri, null, null, function(json) {
        if (json.result == 0) {
            var str = "";
            str += '<img src="' + json.uri + '" width="100%">';
            str += '</center><br>';
            $('#result').html(str).trigger('create');

        } else {
        	alert(json.result);
        }

    }, function(errorCode, errorMessage) {
		alert(errorMessage);
    });

}

Profile一覧から、mediastreamRecordingを選択すると写真の撮影が行われ、ページの一番下に撮影した画像が表示されます。

  1. アプリケーション開発マニュアル
  2. 単体テスト動作マニュアル

Clone this wiki locally