navigator.vibrateのAndroidでの動作について

monacaのチュートリアルにあるおみくじアプリを作ってみました。

見ていたのはコレ
http://www.slideshare.net/AsialCorp/monaca-2

最後のほう(p76)にバイブ機能をつかう例として「navigator.vibrate(2000)」という記述があるのですが
Monacaデバッガーを使い実機テストしてみたところ、どうしてもAndroidで振動しません。
iPhoneでは振動しています。

調べたこと

https://developer.mozilla.org/ja/docs/Web/API/Navigator/vibrate
ここで確認したところ
「Beginning in version 60, this method requires a user gesture. Otherwise it returns false.」
ということでした。
なにかユーザーが動作をすればいいのかと思いましたが、元々このチュートリアルはクリック後にこの関数を使用しています。

知りたいこと

何をすればAndroidで「navigator.vibrate」が機能するようになりますか？

行動規範の内容に同意します

回答1件

新規プロジェクトでおみくじアプリテンプレート使って作成し、

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    
10    <script>
11        function omikuji (){
12            var dice = Math.floor(Math.random() * 3);
13            var image_name;
14            if (dice == 0) {
15                image_name = "omikuji-daikichi.png";
16            } else if  (dice == 1) {
17                image_name = "omikuji-chuukichi.png";
18            } else {
19                image_name = "omikuji-hei.png";
20            }
21
22            navigator.vibrate(2000);
23        
24            document.getElementById("saisyo").style["display"] = "none";
25            document.getElementById("kekka").src = "images/" + image_name;
26            document.getElementById("kekka").style["display"] = "inline";
27            document.getElementById("button").src = "images/omikuji-btn-yarinaosu.png";
28        }
29    </script>
30    <style>
31        body {
32            background-image: url("images/omikuji-bg.png");
33            background-size: cover;
34            background-repeat: no-repeat;
35            margin: 0;
36            padding: 0;
37            text-align: center;
38        }
39        #hako {
40            margin-top: 15%;
41            margin-left : 0;
42            margin-right : 0;
43        }
44        
45        img {
46           width: 70%; 
47        }
48
49        #bottombar {
50            position: absolute;
51            bottom: 30px;
52            width: 100%;
53        }
54    </style>
55</head>
56<body>
57    <div id="hako">
58        <img id="saisyo" src="images/omikuji-box.png" />
59        <img id="kekka" style="display : none;"/>
60    </div>
61    <div id="bottombar">
62        <img id="button" src="images/omikuji-btn-hajimeru.png" onclick="omikuji()">
63    </div>
64</body>
65</html>
66

でAndroidでMonacaDebuggerから起動したらバイブレーションしたのですが、機種依存なのかなぁ
(私のはHUAWEI P20 liteです)

投稿2019/01/15 12:50

rururu3

総合スコア5545

Tama_

2019/01/15 15:02

回答ありがとうございます。頂いたソースそのまま貼り付けて動かしてみましたがやっぱりだめでした。ためしに console.log(navigator.vibrate(2000)); とやってみたら、バイブしていないのにtrueとでています。またためしに他の人がつくったやつと思い https://qiita.com/kurehajime/items/27c98de56fd06f93d0b8 こちらをChromeで開いてみましたがやっぱりダメでした。機種依存なのか、なにか設定がひつようなのか… 自分の機種かいてなかったのでここに書きます XperiaのXZ1 Compact(Android8.0)です

rururu3

2019/01/16 02:47

https://bugs.chromium.org/p/chromium/issues/detail?id=372431 動かないっていう報告もあるようですね・・・とはいえ、FireFoxでは動いたっていう記事もあるようです・・・お役に立てなくて申し訳ない

Tama_

2019/01/21 15:26

遅くなってすみません。その後上のリンクにある他の方が作ったプログラムをFirefoxで表示してみました。するとバイブを許可するかというよなダイアログがでて、許可すると動作するようになりました。 Chromeやmonacaでつくったアプリではもちろんそんなダイアログは出ません。出し方がわかればいいのですが、見つけわれませんでした。こうなるともう、こちらから手を出せるところはないですかね…

行動規範の内容に同意します