Brm、Brm！
「官能的な」レベルでのユーザーとのやり取りにより、アプリのユーザーエクスペリエンスを大幅に向上させることができます。通常、開発者は、アプリ内でよりリアルな感覚を伝えるために、視差効果や3Dレンダリングなどの派手なアニメーションに限定する必要があります。しかし、プログレッシブWebアプリがはるかに多くのことを提供できることをご存知ですか？今日は、ウェブとユーザーの間の相互作用の触覚的な側面を見ていきます。
（開発）ジャングルでランブル
執筆時点では、すべての環境が新しいVibration-APIをサポートしているわけではありません。具体的には、すべてのChromiumとFirefoxブラウザーを使用できますが、Safari / WebKitのすべてのバリアントはサポートされていません。注：iOSのすべてのブラウザーは、エンジンとしてWebKitを使用します。
API自体の使用法はそれが得るのと同じくらい簡単です。次に例を示します。
// All examples assume that we have
// access to the 'window' and use Typescript.
// Specifically, we're using optional chaining
// for simplified handling of undefined if no
// API is available.
const vibrateOnceOnClick = () => {
// A simple one-liner is all that's needed.
// To use a single vibration, we simple
// provide an integer representing the ms
// a single pulse should last.
window.navigator?.vibrate?.(200);
}
const vibratePatternOnClick = () => {
// For more than one puse, an array has to be
// provided, again defining each pulse's lenght
// in milliseconds.
window.navigator?.vibrate?.([50, 200, 50, 200]);
}
このコードが機能していることを証明するには、コードスニペットの右下隅にあるコピーボタンをタップするだけです。デバイスがそれをサポートしている場合は、クリップボードへのコピーアクションを確認するために穏やかな振動を開始する必要があります。
ほぼ完了しました。APIの最後の機能を見てみましょう。
const cancelVibration = () => {
// Quick and easy: call 'vibrate' with
// a val of 0 and the current vibration
// is stopped.
window.navigator?.vibrate?.(0);
}
そしてそれはそれについてです！カバーすることはあまりありませんが、正しく適用されます。つまり、アプリにあまり多くはなく、適用可能な場合にのみ、vibration-APIは非常に優れた機能です。最善の使用例は、ユーザーが行った重要なアクションを触覚的に確認または拒否することだと思います。この場合のコードのコピーアクション、または別のアプリの永続的な削除アクション。
- Tom
