インターネットブラウザのバイブ機能

2023/08/19

ガラケー時代の時に、flashを使ったモバイルアプリは非常に面白い開発でした。まだ、javascriptも正常に動作しなかったモバイルブラウザの環境で、メモリが少なくて比較的クセはありましたが、想定できるプログラミングができたのが楽しかったんでしょうね。その中でも、パソコンのインターネットブラウザではできなくて、モバイルならではの機能だったのがバイブ機能です。これは、スマートフォンにも継承されていて欲しかったんですが、これまで他社からの依頼で「ブラウザのバイブ機能は無い！」と言って断ってきましたが、実は、非常に手軽に実装できるということを知り、今更ながらブログにまとめておくことにしました。

インターネットブラウザのバイブ機能について

当たり前ですが、スマートフォンなどのバイブ機能を搭載した端末専用の機能です。恐らくほとんどのパソコンのブラウザでは動作しません。でも、スマートフォンであれば、大体の端末でブルブルと震えます。でも、safariブラウザは対象外なので、残念ですが、iphoneは全滅です・・・orz

ちなみに、Android(chrome)では、正常にブルブルしました。

ソースコード

<meta charset='utf-8'/>
<meta name="viewport" content="width=device-width, initial-scale=1">

<button id='vibrate'>バイブ</button>

<script>
  document.getElementById('vibrate').onclick = (()=>{
    navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100])
  })
</script>

引数の数値配列は、ミリ秒を繋げて書いてあります。奇数番目が"ブル-on"で、偶数番目が"ブル-off"です。色々なパターンのバイブが作れますね。

リファレンスサイト

Navigator.vibrate() 英語サイト

バイブ機能の使い所

普通のwebサイトでも、リンクをクリックした場合や、入力フォームで発生するようなエラーなどの場合に、バイブ機能を実装したら、結構効果的な触覚効果が生まれると思います。また、ゲームを作る時に、バイブ機能は必須と言っても過言ではないでしょう。 safariで使えないのが非常に残念なんですが、iphone使用率は、世界的には50%、使えない人は残念という事で、体感できる人だけでも楽しめるコンテンツ作りに活かせればいいかと思います。

インターネットブラウザのバイブ機能