iOS15がiPhoneでも使えるようになってちょっと試してみた人もいるだろうか。iOS15ではいくつか新たなものもあってその一つがSafariの機能拡張ですよね。（ただ別にブラウザの拡張機能なので大したことはない）
だけどその機能拡張の中にジェスチャー機能を使うことのできるSvadilfariっていうものがあって、これがちょっと面白いから見ていきたい。ではいこう。
目次
iPhoneのSafariでジェスチャー操作できるSvadilfariとは
SvadilfariはSafariでジェスチャー機能を使うことのできる機能拡張。Safariで開いているページを指で設定された通りになぞると、タブを閉じたり開いたりすることができる。
指でちょいちょいやるだけで操作できるのはいいですよね。使いこなせばSafari操作が楽になりそう感はある。ジェスチャーは元からあるもので現状だと以下の6つ。
- 前のタブへ
- 次のタブへ
- タブを閉じる
- 全てのタブを閉じる
- 新規タブ
- タブの複製
それとカスタムでジェスチャーを作ることができる。むしろこっちがメインですよね。自分の好きなジェスチャに好きな操作を割り当てることができるのはワクワクする。ジェスチャーは元から用意されているものを使うこともできるし、自分で作ることもできる。そしてそのジェスチャーにアクションを割り当てるのだ。
使えるアクションはいくつかあるけど、現状だとさっき見たタブ関連のもの以外だとこんな感じ。
- リロード
- URLをコピー
- 上までスクロール
- 下までスクロール
- JavaScriptの実行
リロードやスクロールなどなど、うんうん。いいじゃん。そしてJavaScriptの実行。これがあるだけでもはや勝ったも同然な印象です。コードが使えるのであれば自分のアイディア次第で無限に色んなことがジェスチャーでできそう。
Svadilfari - ジェスチャーの使い方
- 機能拡張アプリをインストール
- インストールしたものを有効化
いくつか使える機能拡張はあるけど、今回はSvadilfariについてだからこいつに焦点を当てよう。まずはAppStoreからSvadlifariをインストールする。そしたら[設定→機能拡張→Svadilfari]をオンにすればOK。
SvadilfariでURLを一瞬でLINEに共有するジェスチャー機能を作る
せっかくだしやっぱり何か作りたいですよね。自分たまに気になる記事とかあったらLINEに共有して自分に送るんだけど、それがちょっと面倒。だからこれを一瞬でできるようにしていきたい。
何かジェスチャーしたら今開いている記事のURLをLINEで自分に共有する
これをやります。一見複雑そうな感じも文字から見える気がするけど大丈夫だ。何せJavaScriptが使えるのだから。ちなみに作るとこんな感じになる。ジェスチャでショートカットが実行されてLineNotifyからURLと共に通知が来てるね。
毎回Safariの下の共有ボタンからいくつかタップしてLINEに送信するよりはきっと楽。
LINEに共有するまでの流れ
何かジェスチャをしたらLINEに今見ている記事のURLを送るんだけど、今回はこういった作戦でいこう。
- ジェスチャーでLINE通知するショートカットを呼び出す
- ショートカットからIFTTTのWebhookを呼び出す
- IFTTTからLINEに通知
これを実現するにあたってIFTTTを使うことにする。（全部JavaScriptだけでできそうだからそっちの方が楽かもしれん）
イメージは雑にこんな感じだ。何かジェスチャーしたらショートカットが動いてIFTTTにいってIFTTTからLINEに通知させる。
じゃあやっていこう。ちなみにIFTTTって何？って場合にはこっちの記事をどうぞ。
IFTTTからLINEに通知する
まずはLINEに通知する部分からやっていこう。これにはIFTTTを使うんだけど、こっちでやったのと同じような感じでやる。
作成するAppletはシンプルでIf、Thenそれぞれで使うアクションはこんな感じ。
- Webhooks・・・Receive a web request
- Line・・・Send message
web requestのイベント名を設定して・・・
LINEで送るメッセージはValue１だけ入れておく。このvalue1に共有したい記事のURLが入ってくる想定。
作成したら実際にLINEに何か送信されるか見たいならwebhooksを試してみるといいですよ。
LINEに通知されたら、次はショートカットからIFTTTを呼び出せるようにしていく。（うーんただこういうのやったことないと何やってんの？ってなりそうだな。。多少触ったことないとちょっときつい気がした。。。）
ショートカットからIFTTTを呼び出してLINE通知する
次はショートカットからIFTTTを呼び出すやつ。ショートカットからIFTTTで取得できるURLを叩けばOK。使うURLはこれだからIFTTTからコピーしておこう。（{event}は自分の設定したイベント名にしてね）
ショートカットを作っていくんだけど、使うアクションは以下の2つ。
- URL・・・IFTTTでコピーしたURLをコピペ
- URLの内容を取得・・・方法はPOST、フィールドにvalue1をキーとして入れて、値はショートカットの入力
アクションを追加する前に送られてくるURLを取得しないといけないから、そのために[共有シートに表示]をONにして[URL]や[テキスト]をセットしておこう。
（これショートカットをJavaScriptで実行したときに値受け取れるようにしているつもりだけど、どうなっているのかちょっと謎なんだよなあ）
そしたらURLのアクションを追加して、IFTTTでコピーしたものを貼り付け。URLの内容を取得の方は方法はPOSTにしてフィールドにvalue1を追加、値はショートカットの入力を選ぶ。（フィールドはテキスト）
次にショートカットをジェスチャーで起動するようにしよう。
ショートカットをジェスチャーで起動する
今作ったショートカットをジェスチャーで動かせばLINEに通知されるはずだから、ジェスチャーを追加しよう。
ジェスチャで何すんのってところだけど、これはジェスチャーでJavaScriptを動かしてショートカットを実行するんだ。JavaScriptからショートカット実行なんてできるの？と思うけどURLスキームを使えばできる。
「ショートカット」のURLスキームを使用して、ショートカットコレクションに保存されているショートカットを実行できます。
JavaScriptからショートカットのURLスキームをぶっ放してやれば実行できるからそれでいこう。ジェスチャーを行ったときにそれをしたいから、ここでSvadilfariの出番だ。
ジェスチャーをとりあえず適当に作ろう。
そしたら[JavaScriptを実行]をタップしてコードを書く。
location.href = `shortcuts://run-shortcut?name=自分が作成したショートカット名&input=${location.href}`この辺りはiPhoneまたはiPadでURLスキームを使用してショートカットを実行するをチラ見しておくといいです。なんかここら辺ちょっと謎い。それと説明は現状だと後で編集することもできないので入れておいたほうがいいです。どれが何のジェスチャーなのか分からなくなる。
設定が完了したら、Safariで表示したWebページで設定したジェスチャをすればLINEに通知が来る。
作ってしまえば楽でいいね。ただやっぱりちょっと面倒かったなあ・・・っていうのはある。ジェスチャーしたらJavaScriptだけでLINEの通知までするってできる気がするから、コード書けるならそっちの方がいいかもね。ただ試してないからなんとも言えない。
結構勢いでやった部分があるからもっと楽な方法もあると思うけど、まあジェスチャーでJavaScript使えるの便利！
まとめ
ジェスチャー便利！
ただジェスチャーの編集ができないのはちょっときついから、早く編集できるようになったら嬉しいなあ。JavaScript使わないならそうでもないかもしれないけど、使う場合はコードの一部分変更したいとか軽い動作確認したいとかなった時だいぶしんどいから頑張ろう。
使い方次第で色んなことできそうだから、何か試してみたいものあったらやってみるといいですよ。
