前回の transform と deviceorientation における回転の表現 (HTML) では、
そのデバイスのブラウザー上で回転の状態を表示していましたが、
今回は他のデバイスのブラウザーにネットワーク経由で同期するようにしました。
WebSocket で同期するためのフレームワークとして ASP.NET SignalR を利用し、
Azure Web App に GitHub からの継続的デプロイを設定しています。
HTML 3D Device Orientation on Web Browsers
これを実装する方法を以下に示します。
Visual Studio で空の ASP.NET Web プロジェクトを作成し、NuGet で Microsoft.AspNet.SignalR をインストールします。
まずサーバー側の C# コードとして、次のクラスを実装します。
using System; | |
using Microsoft.AspNet.SignalR; | |
namespace DeviceSyncWeb | |
{ | |
public class SensorHub : Hub | |
{ | |
public void UpdateOrientation(double alpha, double beta, double gamma) | |
{ | |
Clients.Others.NotifyOrientation(alpha, beta, gamma); | |
} | |
} | |
} |
using System; | |
using Owin; | |
namespace DeviceSyncWeb | |
{ | |
public class Startup | |
{ | |
public void Configuration(IAppBuilder app) | |
{ | |
app.MapSignalR(); | |
} | |
} | |
} |
Startup.Configuration メソッドの中で ASP.NET SignalR を有効にします。
そして、送受信をするためのハブとして SensorHub クラスを作成しています。
今回は、JavaScript の deviceorientation イベントで取得できる alpha, beta, gamma
の値を引数で受け取って
クライアントに通知するだけです。なお、Clients.Others
は送信者以外のクライアントを表します。
次に、クライアントとなる HTML を実装します。
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width" /> | |
<title>DeviceSync - Sensor</title> | |
<script type="text/javascript" src="/Scripts/jquery-1.6.4.min.js"></script> | |
<script type="text/javascript" src="/Scripts/jquery.signalR-2.4.0.min.js"></script> | |
<script type="text/javascript" src="/signalr/hubs"></script> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
var sensorHub = $.connection.sensorHub; | |
$.connection.hub.start(); | |
if (window.DeviceOrientationEvent) { | |
window.addEventListener("deviceorientation", function (e) { | |
sensorHub.server.updateOrientation(e.alpha, e.beta, e.gamma); | |
}); | |
} | |
</script> | |
</body> | |
</html> |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width" /> | |
<title>DeviceSync - Viewer</title> | |
<script type="text/javascript" src="/Scripts/jquery-1.6.4.min.js"></script> | |
<script type="text/javascript" src="/Scripts/jquery.signalR-2.4.0.min.js"></script> | |
<script type="text/javascript" src="/signalr/hubs"></script> | |
<!-- style の記述を省略 --> | |
</head> | |
<body> | |
<div id="log"></div> | |
<div class="container"> | |
<div id="cube"> | |
<div class="face front">1</div> | |
<div class="face back">6</div> | |
<div class="face right">2</div> | |
<div class="face left">5</div> | |
<div class="face top">3</div> | |
<div class="face bottom">4</div> | |
</div> | |
</div> | |
<img id="image" src="website_news.png" style="margin: 80px;" /> | |
<script type="text/javascript"> | |
var sensorHub = $.connection.sensorHub; | |
sensorHub.client.notifyOrientation = updateOrientation; | |
$.connection.hub.start(); | |
var logEl = document.querySelector("#log"); | |
var cubeEl = document.querySelector("#cube"); | |
var imageEl = document.querySelector("#image"); | |
function updateOrientation(alpha, beta, gamma) { | |
logEl.innerHTML = `alpha: ${alpha}<br />beta: ${beta}<br />gamma: ${gamma}`; | |
var rotation = `rotateZ(${-alpha}deg) rotateX(${-beta}deg) rotateY(${gamma}deg)`; | |
cubeEl.style.transform = rotation; | |
imageEl.style.transform = rotation; | |
} | |
</script> | |
</body> | |
</html> |
センサーのデータを送信する sensor.html と、それを受信して表示する viewer.html に分かれています。
各 JS ファイルを <script>
で読み込み、$.connection
から各機能にアクセスします。
前回: transform と deviceorientation における回転の表現 (HTML)
作成したサンプル
- DeviceSignal (GitHub)
バージョン情報
- .NET Framework 4.7
- ASP.NET SignalR 2.4.0