Milkcocoaのチュートリアルがうまくいかない
Milkcocoaの公式のチュートリアルをそのまま行いました。ローカル環境での構築などはおおよそわかったのですが、スマホとPCが連動してくれません。
発生している問題・エラーメッセージ
スマホとPCが連動していない。スマホを横に向けてもPCが反応していない。 またMilkcocoaのデータベースにもデータがきていない。
該当のソースコード
sp/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>
sp/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}); } } };
pc/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>
pc/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'; } } };
試したこと
Milkcocoaのチュートリアルを実装【入門者向け】
Milkcocoa のチュートリアルを試す
以上のサイトも行いましたが、ロカールでの環境構築がもしかしたらうまくいっていないかもしれないです。
どなたかよろしくお願いします。
あなたの回答
tips
プレビュー