端っこまでスクロールしたら端末が震えるようになる iOS Safari 拡張機能を作りました
iOS15 から Safari が拡張機能に対応しました。拡張機能を使えばコンテンツブロックしたり、ジェスチャに対応したりと、様々な UX 向上の機能を追加することができます。
私が拡張機能に触れたのは年末のころだったのですが、調べてみると案外いろんなことができそうだということで、一つ拡張機能を作ってみることにしました。製作期間は１日と短いのですが、Chrome や Firefox の拡張機能とほぼ同じ作り方なので、さほど苦労はしませんでした。ということで作った拡張機能がこちらの "Oh Corner" です。
Oh Corner の機能
機能としては大変シンプルで、画面端までスクロールしたら端末が振動するというだけのものです。
拡張機能を動作させるためにはあらかじめ動作の許可設定が必要になります。設定についてはこちらの Apple 公式ページをご覧ください。
あまり賢く作っていないので、ページ遷移前後時にも振動してしまうサイトがあったり、こちらが想定したスクロールの検知に引っかからず振動しないサイトもたまにありますが、こちらは後々改善するかもしれないので今はご勘弁ください。
バイブレーションについて
iOS Safari では今のところバイブレーション API に対応していません。Can I use で見ると Safari on iOS の項目は未だ Not supported になっています。そのため端末を振動させるにはちょっとした仕込みが必要でした。
Safari 拡張機能は先ほど Chrome 等に用いられる Web Extensions と作り方が同じだと言いましたが、少しだけ異なる点があります。それは、ネイティブアプリでしかできないこともある程度はできるということです。
Safari 拡張機能は Web Extensions とネイティブアプリがワンセットになるような形でユーザへ提供されます。そして、Web Extensions とセットになったネイティブアプリ間で通信を行うことができます。
今回は Web Extensions でスクロールが端まで行ったことを検知し、それをネイティブアプリ側へ伝え、ネイティブアプリ上でバイブレーションを行っています。
ネイティブアプリとのやりとりは Native messaging で行います。
ネイティブアプリ側の作り方はこちらの Apple 公式記事をご覧ください。
Native messaging の情報を見ていただければ案外いろんなことができそうだと思います。これを読まれた皆さんも是非いろんなアイデアで iOS Safari 向けの拡張機能を作っていただければ嬉しいです。
まとめ
すでに国内でも Safari 拡張機能に関する記事はいろいろでていますが、ネイティブアプリの機能も駆使すればまだまだユニークな機能を作ることができそうです。
今回製作したアプリは Web Extensions の知識の延長線上で作れたので、元々 Web Extensions を作っていた身からすると簡単でしたし、App Store へのリリースまで特にトラブルも起きず、制作の敷居は低いと感じました。
今後リリースされる拡張機能も面白いものがいろいろとでてきそうで、とても楽しみです。
この記事が気に入ったらサポートをしてみませんか？