WebDesigner's Memorandumウェブデザイナーの備忘録

iOS Safariの機能拡張アプリ「Svadilfari」を使って、ウェブ閲覧にジェスチャーを追加する

iOS Safariの機能拡張アプリ「Svadilfari」を使って、ウェブ閲覧にジェスチャーを追加する

iOS15からiOS Safariに機能拡張(PCブラウザでは一般的に「拡張機能」と呼びますが、Safariでは機能拡張と呼びます)が追加されました。

「機能拡張」という名前ですが、PC版ブラウザのようにブラウザ自体にインストールするのではなく、あくまでSafariと連携できるアプリをインストールしての追加になります。

機能拡張自体に関しては、過去に記事にしているのでそちらをご覧ください。

今回はそんなiOS Safariの拡張機能の「Svadilfari(スヴァジルファリ)(北欧神話に出てくる馬の名前)」についてまとめておきます。

Svadilfari

「Svadilfari」はiOS Safariに自由にジェスチャーを登録できる拡張機能です。

アプリを開くとデフォルトのジェスチャーがいくつか登録されていて、下記のようなことができます。

デフォルトのジェスチャー一覧

ジェスチャーを自由に登録できるのと、アクションもJavaScriptで自由に記述できるので、かなり可能性を感じます。

ジェスチャーの追加方法

ジェスチャーを追加したいときは、「ジェスチャー」の右上の「+」アイコンをタップします。
設定は「パターン(この動きをしたら)」「アクション(どうする)」の2つを選択するだけです。

パターンの選択

まずはジェスチャーのパターンを選択します。
「プリセットからパターンを選択する」と「パターンを描く」の2種類から選択します。

パターンの選択

プリセットで用意されているのは下記8パターンです。

パターンのプリセット

それ以外のジェスチャーパターンを設定したい場合は「パターンを描く」を選択します。
これで自分で実際に指を動かして登録できます。

パターンの設定

指を動かしてパターンを描くと、「パターンの確認」画面に遷移するので、「このパターンを使う」をタップすれば設定完了です。

「このパターンを使う」

アクションの選択

パターンを選択したら、今度は発火する「アクション」を選択します。

アクションは下記が用意されていて、「JavaScriptの実行」を選択すれば、JavaScriptが分かる人であればかなりいろんなことができるようになります。

アクションの選択

アクション名内容備考
新規タブ新規タブを開く開いたあとはSafariのホームが開く
タブを閉じる現在のタブを閉じる 
すべてのタブを閉じる全タブを閉じる 
タブの複製現在のページを新規タブで複製して開く 
次のタブへ次のタブへ移動する 
前のタブへ前のタブへ移動する 
リロードページを再読込する 
上までスクロールページの1番上までスクロールする 
下までスクロールページの1番下までスクロールする 
前のページに戻る前のページに戻る左下の「<」アイコンと同じ動き
次のページに進む次のページに進む左下の「>」アイコンと同じ動き
URLを開く指定したURLでページを開く 
JavaScriptの実行JavaScriptを記述して、現在のページで実行する 

ジェスチャー感度の設定

ジェスチャーが誤検知してしまう場合は、設定画面に「ジェスチャー感度」項目があり、ここで感度設定が可能です。

ジェスチャー感度の設定

ただ、いまのところ使っていて誤検知は全然ないので、デフォルトのままで問題なさそうです。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね