スマホの傾きを可視化する

Last updated at 2017-02-18Posted at 2017-02-18

Milkcocoaをメッセージブローカーとして、エッジ(今回はスマホ)の情報を可視化（ブラウザに表示）してみたいと思います。

今回は、スマホの傾き情報を送り、板（スマホ本体をイメージ）を回転させて、傾きを表現したいと思います。

メッセージブローカーの準備

Milkcocoaにアプリを用意し、ここを経由して情報のやり取りをします。

特別なことをする必要はなく、単純にアプリを作成します。
とりあえずここでは「rotate」という名前で作っておきます。

可視化の準備

スマホから送られてきた情報を可視化する方法として、今回はA-Frameを使用します。

ここではA-Frameの詳しい説明は省きますが、HTMLチックに3Dモデリング＆レンダリングができる言語と思っていただければよいかと思います。

まずは簡単な長方形を表示させます。

index.html

<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-cube width="0.65" height="1.25" depth="0.05" position="0 0 0" rotation="0 0 0"></a-cube>
    </a-scene>
  </body>
</html>

ここに、Milckcocoaとのやり取りに関するスクリプトを追加します。

index.html

<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src='https://cdn.mlkcca.com/v0.6.0/milkcocoa.js'></script>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
    <script>
        window.onload = function(){
            var milkcocoa = MilkCocoa.connectWithApiKey('app_id.mlkcca.com', 'API_Key', 'API_Secret');
            var ds = milkcocoa.dataStore('rotate');

            ds.on('send', changeViewFromSentRotate);

            var cube = document.querySelector('a-cube');

            function changeViewFromSentRotate(sent){
               cube.setAttribute('rotation', sent.value.x+90 + ' ' + sent.value.y + ' ' + sent.value.z*-1);
            }
        };
    </script>
  </head>
  <body>
    <a-scene>
      <a-cube width="0.65" height="1.25" depth="0.05" position="0 0 0" rotation="0 0 0"></a-cube>
    </a-scene>
  </body>
</html>

「'app_id.mlkcca.com', 'API_Key', 'API_Secret'」のところは各自の設定に書き換えてください。

なお、スマホと描画を一致させるため、姑息な回転処理をしています。

スマホ側の準備

スマホ側は、専用アプリではなくWebブラウザからスマホの情報を送るようにします。
デバイスの情報をJavaScriptで取得するには「Device Orientation Event」てやつを利用します。
また、秒単位の変位ではなく絶対的な回転情報が欲しいので、「devicemotion」ではなく「deviceorientation」イベントで値を取得します。

index.html

<body>
<div id="output"></div>
<script src='https://cdn.mlkcca.com/v0.6.0/milkcocoa.js'></script>
<script>
window.onload = function(){
  var output = document.getElementById('output');

  var milkcocoa = MilkCocoa.connectWithApiKey('app_id.mlkcca.com', 'API_Key', 'API_Secret');
  var ds = milkcocoa.dataStore('rotate');

  window.addEventListener('deviceorientation', function(e){
    output.innerHTML
    = 'z方向: '+e.alpha
    + '<br>x方向: '+e.beta
    + '<br>y方向: '+e.gamma;

    sendModeFromGravityValue(e);
  },true);

  function sendModeFromGravityValue(r){
    ds.send({x: r.beta, y:r.gamma, z:r.alpha});
  }
};
</script>
</body>