Vibration APIは、スマートフォンやタブレットなどのデバイスのバイブレーションを制御するためのAPIだ。たとえば、通知が来たときにスマホが震える機能をJavaScriptで実装できる。このAPIを使えば、ブラウザから簡単にデバイスのバイブレーションを操作できる。ただし、使いすぎるとバッテリーに影響があるので、適度な利用を心がけよう。



## 基本的な使い方

### バイブレーションの基本操作

デバイスをバイブレーションさせるには、`navigator.vibrate()`メソッドを使う。以下のコードを実行すれば、デバイスが1秒間バイブレーションする。

```javascript
// 単純にバイブレーションを発動させる
navigator.vibrate(1000);  // 1000ミリ秒、つまり1秒間バイブレーションする
```

### バイブレーションパターンの設定

複数回のバイブレーションパターンを設定することもできる。次のコードでは、指定したパターンでデバイスが震える。

```javascript
// 複数回のバイブレーションパターンを示す
navigator.vibrate([500, 300, 500, 300, 1000]); 
// 500ミリ秒バイブレーション -> 300ミリ秒静止 -> 500ミリ秒バイブレーション -> 300ミリ秒静止 -> 1000ミリ秒バイブレーション
```

これを実行すると、指定したパターンでブルブルしてくれるんや。ゲームとかアプリのインタラクションに使うと面白いで！

## Vibration APIのサポート確認

Vibration APIは、対応しているブラウザやデバイスでのみ動作する。利用可能かどうかを確認する方法は以下の通り。

```javascript
if ("vibrate" in navigator) {
    console.log("Vibration APIは使えるで！");
    navigator.vibrate(500); // 500ミリ秒バイブレーション
} else {
    console.log("Vibration APIは対応してへんわ…");
}
```

## ユーザーインタラクションとの連携

バイブレーションは、ユーザーインタラクションと連動させることで、直感的なフィードバックを提供できる。以下の例では、ボタンをクリックするとデバイスが震えるようにしている。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>バイブレーションデモ</title>
</head>
<body>
    <button id="vibrate-button">ブルブルさせるボタン</button>

    <script>
        // ボタンをクリックしたときにバイブレーションさせる
        document.getElementById("vibrate-button").addEventListener("click", function() {
            if ("vibrate" in navigator) {
                navigator.vibrate([100, 50, 100]);
                console.log("デバイスをブルブルさせたで！");
            } else {
                console.log("Vibration APIは対応してないわ…");
            }
        });
    </script>
</body>
</html>
```

このコードを実行すると、ボタンをクリックするたびにデバイスがバイブレーションする。ただし、デモを試すにはスマートフォンやタブレットでアクセスする必要がある。

## まとめ

Vibration APIは、通知やゲームのフィードバックなど、さまざまなシーンでユーザー体験を向上させる強力なツールだ。ただし、バッテリー消耗を避けるため、使用頻度には注意が必要だ。この記事を参考に、Vibration APIを活用して、インタラクティブなウェブ体験を提供するアプリを作成してみよう。


Vibration API

Vibration APIを使って、スマホやタブレットのバイブレーションを制御。通知やゲームのフィードバックに最適なこのAPIの基本概念と使い方を詳しく解説。バイブレーションパターンの設定方法やユーザーインタラクションとの連携も紹介。

Vibration APIの基本概念と使い方 | スマホやタブレットのバイブレーションを制御

動画チュートリアルのこだわりと、なぜ私の講座が有益なものを提供できるか。その理由を書きました。

最新のNuxt.js講座をリリースしました！初心者から経験者まで、現場で即活用できる実践ノウハウを動画で学べます。

Vue.jsの動画チュートリアルを公開しました！Vue.js の基礎だけでなく、実践的な使い方を学びたい方は、是非チェックしてみてください。