p5.js で Androidスマホの振動をブラウザから始動させる（Vibration API を利用、2024年11月時点）【JavaScript】

この記事は後から、「JavaScript Advent Calendar 2024」の 4日目の記事としても登録しました。

はじめに

iPhone だとブラウザ単体では実現できないですが、Android だとブラウザ単体で実現できる「p5.js で Androidスマホの振動をブラウザから始動させる」という話です。

ブラウザのデバイス系API の １つ、以下の Vibration API を使う話になります。

●Vibration API - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Vibration_API

デバイス系の API、気が付くと仕様が変わってたとか、使えなくなった／制約がついて過去に作ったものがそのままでは動かなくなった、みたいなことがわりとある気がするので、記事執筆時点で Android の OS は新しいもので試してみます。

結果

まずは結果から掲載してみます。

2024年11月時点で試した結果、以下のとおり無事に動作させられました。
（画面をタッチすると、キャンバスの背景色と表示されているテキストが、振動する間だけ変化して、その後は元に戻るというもの）

ブラウザの対応状況

Vibration API のブラウザの対応状況は、上記の MDN のページなどを見ると、以下となっています。

Android を使う感じになりそうです。

上記で NG となっている Safari on iOS（iPhone の話）について、「iOS で Chrome を使ったら」ということを思うかもしれません。
しかし、今のところの iOS の Chrome は、Safari と同じエンジン以外は使えないという制約を受けた状態かと思うので、Safari が NG なものは同様となるかと思います。

とりあえず試す

自分のスマホが対応しているか、簡単に試したい場合は既存のサンプルを使うのが楽です。例えば、以下などが良いかと思います。

●Vibration API Sample
https://googlechrome.github.io/samples/vibration/

実際にやってみる

それでは、p5.js で Androidスマホの振動をブラウザから始動させるというのを Vibration API を使ってやってみます。

ちなみに、API で提供されている中の以下のメソッドを使う感じになるかと思います。

●Navigator: vibrate() メソッド - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/Navigator/vibrate

実装

冒頭に動作させた様子を載せていたものの、実装の話です。

以下が p5.js Web Editor で簡易に実装してみたサンプルです。

const messages = {
  start: "タッチでバイブレーション開始",
  vibrating: "振動スタート！",
  unsupported: "この端末は非対応です",
};

let currentMessage = messages.start;
let isVibrating = false;

function setup() {
  createCanvas(500, 400);
  background(220);

  textAlign(CENTER, CENTER);
  textSize(24);
  fill(0);
  text(currentMessage, width / 2, height / 2);
}

function mousePressed() {
  if (navigator.vibrate) {
    navigator.vibrate(1500); // 1500ミリ秒振動
    currentMessage = messages.vibrating;
    isVibrating = true;

    // 振動が終わるタイミングで背景をリセット
    setTimeout(() => {
      currentMessage = messages.start;
      isVibrating = false;
      redrawCanvas();
    }, 1500); // 1500ミリ秒後に背景を元に戻す
  } else {
    currentMessage = messages.unsupported;
  }
  redrawCanvas();
}

function redrawCanvas() {
  if (isVibrating) {
    background(100, 150, 255);
  } else {
    background(220);
  }
  fill(0);
  text(currentMessage, width / 2, height / 2);
}

ポイントになるところは、時間をミリ秒指定で処理する「navigator.vibrate()」を使ったところのみになるかと思います。

    navigator.vibrate(1500); // 1500ミリ秒振動

ちなみに、時間指定の部分は配列を渡してやることもできるようです。

余談

iOS関連の話で、以下のようなものがあるようです。

●端っこまでスクロールしたら端末が震えるようになる iOS Safari 拡張機能を作りました｜Yasuhiro Yamada
https://note.com/yasusun/n/n5a5d58480237