5 minutes Tutorial

PC側のコードを書く

PC側のコードを書きます。on()を使ってsend()で送信されたデータを受信して、向きによって.is-landscapeというクラスを付けたり消したりします(.is-landscapeのスタイルにrotateを指定して回転させます)。

index.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>PC側</title>
<style>
#image{
  -webkit-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#image.is-landscape{
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
</style>
</head>
<body>
<img id="image" src="https://s3-ap-northeast-1.amazonaws.com/new-tutorial/smartphone.min.svg" alt="スマートフォン">
<script src='https://cdn.mlkcca.com/v0.6.0/milkcocoa.js'></script>
<script src="main-pc.js"></script>
</body>
main-pc.js
window.onload = function(){

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

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

  ds.on('send', changeViewFromSentMode);

  function changeViewFromSentMode(sent){
    if(sent.value.mode === 'portrait'){
      image.className = '';
    }
    if(sent.value.mode === 'landscape'){
      image.className = 'is-landscape';
    }
  }
};

ds.on('send', function(sent){ /* コールバック関数 */ })send()メソッドを監視します。「監視する」とは、milkcocoa.dataStore('gravity')send()が発行されると、コールバック関数を実行するといった意味です。

コールバック関数にはsend()で送ったデータが渡されます。スマートフォン側でsend({mode: '現在のモード(向き)'})と送ったので、以下のようにsent.value.modeでその値を取り出すことが出来ます(sentのあとのvalueを忘れないよう注意してください)。

ds.on('send', function(sent){
  console.log(sent.value.mode); // 'portrait' or 'landscape'
});

これで説明は終わりです。スマートフォン側のコードをスマートフォンで表示して、PC側のコードをPCで表示すれば、先ほどのデモと同じような動作が実現できるかと思います。

今回は、send()だけを使用しましたが、send()の代わりにpush()on('push' function(pushed){})を使えば、データストアに保存しながらデータのやり取りができます。

保存したデータは、stream()get()といったメソッドで取得できたり、アプリの管理画面のデータストアで閲覧ができたりします。

前ページにて、ローカル環境で行うよう注意しましたが、こちらのファイルをどこかにホスティングしてしまうとAPI KeyやAPI Secretが他人に知られてしまうからです。API KeyやAPI Secretは管理者であるあなただけが知っておくべきもので、本来はあなたが管理するデバイスなどに隠蔽して利用します。

今回は、簡単に動作を確認できるように例外的にAPI Key認証を利用しましたが、Webアプリでの認証は基本的に「トークン認証」を利用します。詳しくは認証のドキュメントを参照ください。

チュートリアルはこれで以上です。詳しい使い方はGetting StartedAPIリファレンスをご覧下さい。

うまく動作しなかったり、不明な点やトラブルがあれば、Q&AページMilkcocoaのGoogle Groupsで同じ質問がないか確認して、なければお気軽に質問頂ければと思います。