5 minutes Tutorial

スマートフォン側のコードを書く

アプリを作成したら、スマートフォン側のコードを書きます。
スマートフォン側では、重力加速度付き加速度を取得し続け、そのx方向、y方向ごとの値によって向きを判定してMilkcocoaに向きの変化を送ります。

重力加速度付き加速度を取得する

まずは、devicemotionのイベントで取得できるaccelerationIncludingGravityを使って重力加速度付き加速度を取得します。

※注意:こちらのチュートリアルはローカル環境で行って下さい。

index.html
<body>
<div id="output"></div>
<script src='https://cdn.mlkcca.com/v0.6.0/milkcocoa.js'></script>
<script src="main-sp.js"></script>
</body>
main-sp.js
window.onload = function(){

  var output = document.getElementById('output');

  window.addEventListener('devicemotion', function(e){
    gravity = e.accelerationIncludingGravity;

    output.innerHTML
    = 'x方向: '+gravity.x
    + '<br>y方向: '+gravity.y;

  },true);

};

これで#outputに、x方向とy方向の重力加速度付き加速度がめまぐるしく変化して表示されるかと思います。ここではまだMilkcocoaは使っていません。

API Key、API Secretを生成する

Milkcocoaにデータを送る前に、認証に利用するAPI Key、API Secretを生成しておきます。

管理画面の認証ページに移動して、「新しいAPI KeyとAPI Secretのペアを生成する」ボタンで生成できます。

加速度で向きが変わったと判定されたらMilkcocoaにデータを送る

加速度を取得できたら、重力加速度の値から向きが変わったかどうかを判定して、向きが変わったら「横向きか縦向きか」をMilkcocoaに飛ばしましょう。今回は簡単のため、「y方向が8.5より大きくx方向が1.5未満」であれば縦向き、「x方向が8.5より大きくy方向が1.5未満」であれば横向きと判定します。

main-sp.js
window.onload = function(){

  var currentMode = 'portrait';
  var output = document.getElementById('output');

  // app_id, API_Key, API_Secretは自分のものに書き換えてください
  var milkcocoa = MilkCocoa.connectWithApiKey('app_id.mlkcca.com', 'API_Key', 'API_Secret');
  var ds = milkcocoa.dataStore('gravity');

  window.addEventListener('devicemotion', function(e){
    gravity = e.accelerationIncludingGravity;

    output.innerHTML
    = 'x方向: '+gravity.x
    + '<br>y方向: '+gravity.y;

    sendModeFromGravityValue(gravity);

  },true);


  function sendModeFromGravityValue(g){

    // 絶対値を取得
    var x = Math.sqrt(g.x * g.x);
    var y = Math.sqrt(g.y * g.y);

    // portrait -> landscape
    if(currentMode === 'portrait' && x > 8.5 && y < 1.5){
      currentMode = 'landscape';
      ds.send({mode: currentMode});
    }

    // landscape -> portrait
    if(currentMode === 'landscape' && x < 1.5 && y > 8.5){
      currentMode = 'portrait';
      ds.send({mode: currentMode});
    }
  }
};

前ページで説明したvar milkcocoa = new MilkCocoa("app_id.mlkcca.com");の代わりに、var milkcocoa = MilkCocoa.connectWithApiKey('app_id.mlkcca.com', 'API_Key', 'API_Secret');でMilkcocoaインスタンスを作成することで、接続と同時に認証ができます。milkcocoaというオブジェクトを使うことでMilkcocoaのAPIが使用できます。

var ds = milkcocoa.dataStore('gravity');では、データストアへの参照を作成しています。データストアとは、データのやり取りを行うためのデータベースのようなもので、どんなクライアントでも同じデータストアにアクセスすれば、そのデータストア経由でリアルタイムにデータのやり取りができます。

例えば、dsというオブジェクトを使って、ds.send({key: 'value'})でデータの送信、ds.push({key: 'value'})でデータの送信&保存、ds.on('メソッド名', function(){})で送信されたデータの監視(厳密にはデータストア操作の監視)などが行えます。

今回はds.send()を使って、縦向き(portrait)か横向き(landscape)かをデータストアに送信しています。それをパソコン側で監視して、向きによってスマートフォンの画像を回転させます。