Q&A
コードの検証時に使用したデバイスは何でしょうか？また、furu()が実行されていないのは間違いありませんか？（単にif文の中に入っていないだけではありませんか？）
前提・実現したいこと
実現したい事 : web(chrome)からデバイスのaccelerometer値を取得し、特定の条件の際に「デバイスが振られた」事を検出したいです。
発生している問題・エラーメッセージ
HTMLのデモコードが上手く動かず、困っております。
当方、unity等のアニメーション関連以外、プログラミング初心者のものです。
こちらのサイトのデモの数値を、ローカルファイル内で変更し、そのファイルをchromeにアップロードした物を作っているのですが、
どうしてもfuru eventが発生せず、原因が分からない状態です。
問題としましては、「同じコードを使っているにも関わらず、なぜfuruが動作しないのか」という事です。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>shaking</title> 6 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> 7 <link rel="stylesheet" href="style.css"> 8 <script src="http://www.google.com/jsapi" type="text/javascript"></script> 9 <script type="text/javascript"> 10 google.load("jquery", "1.6.4"); 11 </script> 12 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 15 $(document).ready(initialize); 16 17 function initialize() { 18 window.addEventListener('devicemotion', function (e) { 19 return furu(e); 20 }, true); 21 } 22 23 function furu(e) { 24 var x = e.accelerationIncludingGravity.x; 25 var y = e.accelerationIncludingGravity.y; 26 var z = e.accelerationIncludingGravity.z; 27 if (Math.abs(x) > 15 || Math.abs(y) > 15 || Math.abs(z) > 15) { 28 alert("now shake"); 29 30 $("#spin").removeClass("spinning_off").addClass("spinning_on"); 31 } 32 } 33 34 </script> 35 </head> 36 <body> 37 <h1>how to write</h1> 38 <p>this is first html page</p> 39 </body> 40</html>
試したこと
元サイトのdemoコードですと、日本語が文字化けする等のエラーが発生した為、日本語関連のワードは削除し、英語に変更したりしました。
コード自体は、元サイト様のものをそのまま使用させて頂いております。
補足情報（FW/ツールのバージョンなど）
コードの編集ツールはvisual studio 2017を使い、htmlファイルで保存した後、そのファイルをそのままchromeにドラッグ＆ドロップしました。
このコードでは、なぜ動かないのか、動かすためにはどこを変更すべきか、ご教授いただけると幸いです。
宜しくお願い致します。
使用したデバイスはandroidになります。 元サイトでは、ios用と記載されておりますが、元サイトのデモページでは作動致しました。furu以外の部分(文字等)は表示された為、furu のみが作動していないと捉えております。
回答ありがとうございます。文字列の表示と関数の実行は直接関係がないので、furu()が作動しているかどうかを文字列の表示で確認するのは誤っています。ただ、下の回答のやり取りをみるに原因は他にありそうなので、こちらの回答はもうしなくても結構です。
回答1件
0
ベストアンサー
コードの編集ツールはvisual studio 2017を使い、htmlファイルで保存した後、そのファイルをそのままchromeにドラッグ＆ドロップしました。
とのことですが、このコードは、webサーバにアップロードしスマホなどのdevicemotionに対応した端末でないと機能しません。
--追記 --
つまり、devicemotion に対応した端末のブラウザで見ないと、ディスプレイを振ったり、PC本体を振ったりしてもalert()は動作しないコードです。
-- 補足 --
こちらでwebサーバにアップロードし、iPhoneでアクセスしてみたところ、一応動作はしております。
投稿2018/11/08 10:58
編集2018/11/08 11:53
総合スコア798
webサーバーへのアップロードは必須事項ではないと思います。ただ、モバイル端末からアクセスするには、どこかのサーバーに上げてしまうのが楽ではあります。
>RYNOさん
検証方法がモバイル端末ではなかったっぽいので、わかりやすくイメージできるようお伝えしました。
修正しておきますね。
ご回答有り難う御座います。 つまり、chromeに直接落とすのではなく、レンタルサーバーにアップロードし、そのurlにデバイスからアクセスすれば良いという事でしょうか？
To: collingさん
既に修正されていますが... そういうことでしたら、納得しました。
>enkunntさん
サーバに上げるのが手っ取り早いです。デスクトップ端末からモバイル端末のブラウザにドロップはできませんので、、。
つまり、devicemotion に対応した端末のブラウザでないと、ディスプレイを振ったり、PC本体を振ったりしても何も起こらないコードです。
分かりやすいご説明、有り難う御座います。
サーバーに上げる方法で確認致します。
例えば、「このコードをメールでモバイル端末に送信し、このコードファイルをメールから開く」という方法で行った場合は、サーバーに上がってないから上手くアクセス出来ない という事になり得ますでしょうか？
度重なる質問で申し訳御座います。
宜しくお願い致します。
モバイル端末のメーラーの htmlメール の解釈が devicemotion に対応していれば動くんじゃないでしょうか？
もしくは、メーラーから内容をブラウザに送る方法があれば、、。
ご自分の端末で確認してみてください。
サーバーに関する知識が不足しており、大変失礼致しました。
先程、bitballoonを通してアップロードすることで、モバイル端末上から動作を確認する事が出来ました。
有り難う御座いました。
あなたの回答
tips
プレビュー
