質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

756閲覧

スマホを振ることで画面遷移したい(HTML+js)

co23015

総合スコア13

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/10/24 01:32

前提・実現したいこと

スマホを振ることで画面遷移したい

発生している問題・エラーメッセージ

動かない

該当のソースコード

HTML js

1ソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> // 加速度イベント window.addEventListener("devicemotion", accelerationEvent); // イベント発生 function accelerationEvent(event) { // x軸 var x = event.acceleration.x; // y軸 var y = event.acceleration.y; // z軸 var z = event.acceleration.z; if (!(10 < x && x < 100) || !(10 < y && y < 100) || !(10 < z && z < 100)) { window.location.href = "https://www.google.co.jp/"; } } </script> </head> <body> <div style="text-align:left"> <br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <img src="q4.png"> </body> </html>

試したこと

Chrome Ver69 (Android7.1.1)
Safari (iOS 12.0.1)

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikan_s4n

2018/10/24 06:08

どこで躓いているのかを書きましょう。accelerationEventには到達しているのかどうかの確認はしましたか?ログを出すように仕込めば到達していればログが出るのでどこまでは動いているといった判別はできますよね。どこまで動いて、どこから動かないのかは記載しましょう
co23015

2018/10/24 06:13

XYZ値の数値を出すことは成功しています。内部的に動かしたいので、そこは削除しました。PC上では何もせずに遷移しています(そこも問題ですが)が、スマホ上では遷移しない状態です。
mikan_s4n

2018/10/24 06:29

となるとifの判定で引っかかっているのでしょうかね。XYZ値の静止状態、モーション状態での値を書いておくとより分かりやすくなるかなぁと思います。その状態でif分の中に到達しているかどうかログも仕込めば、問題の切り分けになるんじゃないでしょうか
guest

回答1

0

ベストアンサー

振る動作のことを考えると、加速度はXだけで取得しても十分だと思います。

しきい値を超えたのを判断するだけでは、すぐに反応してしまいますので、
しきい値超えの振動があれば、flug1ずつUPし、ある程度大きくなったらURLの推移をさせます。

数字は適当にいじって、より良い数字を見つけてください。
(下記のコードには、数字の表示部分が加えていますので、不要であれば削除してください)

html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta charset="utf-8"/> 6<style> 7@media screen and (max-width: 480px) { 8 body{ 9 font-size:80px; 10 } 11} 12</style> 13</head> 14<body> 15<div id="display"></div><!-- accXの値表示用 --> 16<div id="display2"></div><!-- flugの値表示用 --> 17 18<script> 19var flug=0; 20var target2 = document.getElementById('display2'); 21target2.innerHTML = flug; 22 23window.addEventListener("devicemotion", function(e){ 24 // 傾きの加速度 25 var accX = e.acceleration.x // 左右方向 26 //var accY = e.acceleration.y // 前後方向 27 //var accZ = e.acceleration.z // 上下方向 28 29 var target = document.getElementById('display'); 30 target.innerHTML = accX.toFixed(2);//小数点以下2桁で表示 31 32 if (accX > 6) {//accxが、6より大きい時flugを1UP 33 flug++; 34 target2.innerHTML = flug; 35 if(flug > 9){//振動が 9回以上になったら 36 window.location.href = "https://www.google.co.jp/"; 37 } 38 } 39}); 40 41</script> 42</body> 43</html>

投稿2018/10/29 15:58

colling

総合スコア798

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

co23015

2018/11/06 00:50

ありがとうございます! 振った数という考えには至りませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問