バイブレーションチェッカー👀

2023年3月16日 08:46

今回は、デバイスが正常にバイブするかを確認するバイブレーションチェカーを作ってみました！

正直使い道はありませんが練習の一環として優しい目で見守っていただけたらなと思います、、
以下制作物とコードです




<html>
<head>
<style>
body {
  background-color: #49BDF0 ; /* パステルブルー */
}

h1 {
  text-align: center;
  font-size: 36px;
}

button {
  width: 300px;
  height: 150px;
  background-color: #F9F871 ; /* パステルイエロー */
  border: none;
  border-radius: 10px;
  font-size: 24px;
}

.center {
  display: flex;
  justify-content: center;
}
</style>
</head>
<body>

<h1>バイブレーションチェッカー</h1>

<div class="center">
<button id="check">Check</button>
</div>

<script>
// ボタンを取得
var button = document.getElementById("check");

// ボタンがクリックされたらデバイスを振動させる関数
function vibrate() {
    // 振動がサポートされているかチェック
    if (navigator.vibrate) {
        // 振動させる（1000ミリ秒）
        navigator.vibrate(1000);
    } else {
        // 振動がサポートされていない場合はアラートを出す
        alert("振動が対応されていないか、サイトの設定で許可がされていません-Your device does not support vibration.");
    }
}

// ボタンにクリックイベントリスナーを追加
button.addEventListener("click", vibrate);
</script>


</body>
</html>

デバイスが振動しないということですね。原因はいくつか考えられますが、一般的なものは以下の通りです。

デバイスが振動をサポートしていない場合。
この場合は、navigator.vibrate()メソッドは何もしません。

デバイスの設定で振動がオフになっている場合。
この場合は、デバイスの設定を確認して振動をオンにする必要があります。

ではまたーー

この記事が気に入ったらサポートをしてみませんか？