iOS12の「ショートカット」を使って、WEBページのリンクタグ生成ワークフローを作ってみた

iOS12の「ショートカット」アプリがすげー便利だ、という話を見かけまして。

• 『ショートカット』アプリがクソ捗るぞ！サイトのソースコード表示や「Hey Siri」で家電操作など便利すぎ | 男子ハック
• iOS 12で「ショートカット」アプリを使ってみよう：iPhone Tips - Engadget 日本版

元々は「Workflow」って名前でリリースされていたアプリをAppleが買収してリプレイスしたモノみたいですが、MacのAutomatorみたく複数のアプリを横断したワークフローを登録しておくことで、そのワークフローをショートカット一発、もしくはSiriから実行できるシロモノみたいで。

簡単なものだと、「お気に入りのプレイリストをランダム再生する」とか、「直近で保存した写真をTwitterに投稿する」といった操作が一発でできると。ワークフローを作成するに当たってはプログラムを記述する必要はなく、用意されたパーツを組み上げていけば良いんですが、ちょっと癖がありますし、取得した値を変数に格納するとか、条件分岐とかループ処理もやろうと思えばできるので、プログラミングの心得がある人の方が使いこなせそうなツールではあります。「SSH経由でスクリプトを実行」なんてパーツまであるし。

んで、ふとアプリを眺めていたら、「これリンクタグ作成も一発でできるようになるんじゃね？」と思い、アプリの勉強がてら触ってみました。

……なんでリンクタグを作成したいかと言うと、ブログを書いているときに任意のWEBページのリンクや引用をしたいコトが多々有りまして、そういう時にHTMLタグ（Markdownでも良いんだけど、自分の場合リンクタグに独自のclassを当てたいので）を一発で生成できると大変捗るワケですね。PCのChromeなんかだとCreate Linkみたいな拡張があってそれを実現できるんですけど、iOSのSafariだとそういう拡張が使えないので、リンクタグを生成するJavascriptをブックマークレットとして登録する、みたいな手段しか無かったわけですよ。

んで、しばし試行錯誤した結果目的は達成できたんですけど、やり方がわかればどうってコトは無いんですが、最初何がなんだか良く分からなかったので、備忘録も兼ねてメモしておきたいと思います。

やりたいこと

Safariで今開いているページのリンクタグを作成したい。リンクタグの形式は以下のようにする。

<a href="ページのURL" title="ページタイトル" class="適当なクラス名">ページタイトル</a>

加えて、開いているページで文字列を選択状態にしている場合は、その選択した文字列を引用箇所として、引用及びリンクタグを作成したい（選択文字列が無い場合は、上のリンクタグを生成）。タグの形式は以下のようにする。

<blockquote>
<p>選択したテキスト</p>
<p><cite>via: <a href="ページのURL" title="ページタイトル" class="適当なクラス名">ページタイトル</a></cite></p>
</blockquote>

生成されたタグは、クリップボードにコピーされるものとする。

ショートカットの作成

ショートカットアプリを入れてない場合はApp Storeからダウンロードし、アプリを開いて「ショートカットを作成」 をタップ。開いたら、右上のスイッチみたいなアイコンをタップ。

ショートカットの名前やアイコンを設定できるので、お好みで指定。「ウィジェットに表示」はオフ（Safariから実行する前提なので、ウィジェットに出しても邪魔になるだけなので）、「共有シートに表示」はオン。

「受け入れの種類」をタップし、一度「すべての選択を解除」したのち、「SafariのWEBページ」だけにチェックを入れます。こうすることにより、Safariもしくは他アプリのアプリ内ブラウザでWEBページを表示したときのみ、共有メニューから登録したショートカットが表示されます。

リンクタグの作成

ここからいよいよショートカットの作成なんですが、作成画面の検索窓で「テキスト」と入力します。すると、「テキスト」というそのものズバリな項目が出てくるので、これを選択。

んで、このテキストの入力欄をタップすると、なんか魔法の杖みたいなアイコンが表示されるので、こいつをタップ。これ、「マジック変数」と呼ばれる機能みたいです。

タップすると、上に「ショートカットの入力」と表示されますので、こいつをタップ。

すると、テキストの中に「ショートカットの入力」が入りました。

この「ショートカットの入力」は、このショートカットが呼びだされたときに呼びだし元から受け取った（入力された）モノ。この例の場合、Safariで開いているWEBページがオブジェクトとしてそのまま渡されるイメージかなと。そしてマジック変数を使うコトで、このWEBページのオブジェクトを変数として格納しているイメージになりますかね（プログラムかじったコト無い人にはややこしいかも）。

他にも項目を増やしていくと、それぞれの項目が加工した結果をマジック変数として受け取るコトもできる感じですね。「ショートカットの入力」の場合は、ショートカットカットアプリが呼びだし元から受け取ったものを無加工でそのまま渡してくる、というコトです。

んで、この「テキスト」の中に入った「ショートカットの入力」をタップしてみると、「SafariのWEBページ・ページの内容・ページ選択・ページのURL・名前」と表示されます。

Safariからのみ呼びだされるショートカットなので、デフォルトが「SafariのWEBページ」になってるってコトでしょうね。んで、「ページの内容・ページ選択・ページのURL・名前」は「SafariのWEBページ」に含まれる属性となっており、「ページの内容」はWEBページの内容全部、「ページ選択」はページで選択状態になっている部分、「ページのURL」はWEBページのURL、「名前」はWEBページのタイトルがテキストで出力されます。

まずは「ページのURL」を選択してみると、「ショートカットの入力 | ページのURL」という形に表示が変わりました。

任意のテキストも入力できるので、ひとまずリンクタグを書いちゃいましょう。

あとはページタイトルですが、「ページのURL」と同じ要領でマジック変数を取得し、「名前」を出力してやります。

あとはクリップボードへの出力ですが、また検索窓で「クリップ」とかって入れてやると、「クリップボードにコピー」というそのものズバリな項目が見つかります。

これを追加してやると、自動的に「テキスト」と線で繋がります。この線で繋がっている状態だと、前の項目が加工した結果が自動的に次の項目に渡される形になります。つまり、さっき定義したリンクタグがクリップボードにコピーされる、というコトですね。

ちなみに、前の項目の出力を受け取りたく無い場合は、「何もしない」という項目を間に噛ませるコトで処理を分断させるコトができます。

ここまで作ったら、ひとまず右上の「完了」をタップして、動作を確認してみましょう。Safariで適当なWEBページを開き、共有ボタンから「ショートカット」をタップ（表示されない場合は「その他」から表示させてやる）。

すると、「ショートカットを実行」という画面が表示され、さっき作成したショートカットが表示されているハズなので、こいつをタップ。

一瞬ショートカットアプリの画面が表示され、すぐにSafariの画面に戻るかと思います。あとは、メモ帳がなんかにペーストしてみましょう。

無事、リンクタグが作成できました。

引用タグの作成

続いて、引用タグも生成できるようにしたいと思います。今回は、表示しているWEBページで文字列が選択されている場合はそれを引用箇所として引用タグと引用元のリンクタグを生成、文字列がなにも選択されていない場合は先ほどのリンクタグのみ生成とします。

となると、文字列が選択されているか否かの判定をした上で、条件分岐が必要になりますね。パッとみたところ、「次の場合」という項目が条件分岐に使えそうです。

これ、項目に渡された入力値が、項目に指定した値と「等しい・その値を含む・より大きい・より小さい」のいずれかから選択したものと合致した場合と、そうでない場合でそれぞれ処理を分けるコトができるようで。

今回の場合、入力値が「空っぽか否か」で判定したいワケですが、判定する値に空文字列（もしくはNULL）を指定する方法が分からなかったので、ちょっと一手間掛けることにします。

まず、WEBページで選択されている文字列がある場合、「SafariのWEBページ」の「ページ選択」に入ってくるというのは上述しました。まずこの値を取得して「次の場合」に渡してあげる項目が必要になるワケですが、ここでは「Safari Webページの詳細を取得」というヤツを使います。

この項目に「SafariのWEBページ」を渡してやると、さきほどマジック変数で見たのと同じ内容が取得できるんですね。なので、こいつをショートカットの一番上まで持って来て（項目のタイトルをドラッグしてやると、並び順が変えられます）、「ショートカットの入力」つまり「SafariのWEBページ」を直接受け取れるようにしてやります。

そして「取得」の右にある「選択」をタップすると、「ページ選択」があるのでこいつを選択。これで、WEBページで選択されている文字列が取得できるコトになります。

ただ、こいつをそのまま「次の場合」に渡すと、何も文字列が選択されていなかった（空文字列だった）場合の判定ができません（もしできる方法があったら教えて）。そこで今回は、「テキストを置き換える」という項目を使ってみました。

これ、その名の通り渡されたテキストを置換するものなんですが、こいつは正規表現が使えます（「正規表現」をONにした場合）。なので、検索値に任意の文字が1文字以上、つまり「.+」と入力してやり、その場合「exist」という文字列に置換してやるコトにします。そして、この項目を「Safari Webページの詳細を取得」の下に配置します。

その下に「次の場合」を配置し、「入力」に「次と等しい」、「値」に「exist」と入力します。これにより、WEBページの選択文字列が存在している場合、という条件設定ができました。

あとはリンクタグの作成でやったのと同じ要領で、「テキスト」と「クリップボードにコピー」の項目をもう一組用意し、「テキスト」には引用タグの書式を記述し、マジック変数で「ショートカットの入力」の値を埋め込んでやります。その後、その引用タグの書式を記述した「テキスト」と「クリップボードにコピー」のペアを「次の場合」の下に配置してやります。

で、先に作成したリンクタグのみを生成する「テキスト」と「クリップボードにコピー」のペアを「その他の場合」の下に配置します。

これで「完了」をタップすれば、ショートカットの完成。

さっそくWEBページの文字列を選択した状態でショートカットを実行してみると……

無事引用タグが作成できました！

試しに別の記事を開いて、文字列を選択せずにショートカットを実行すると、リンクタグのみが作成されました。成功です。

そんなこんなで

最初さわり始めたときはかなりワケが分からなかったんですが、各項目になにが入力されてなにが出力されるのか、それとマジック変数がちょっと分かると「あーそういうコトか」とやや理解できた感じがします。実は「WebページでJavaScriptを実行」という項目もあり、JavaScript書くのが得意な人ならこっちのが手っ取り早いんじゃ……って気がしなくもありませんが、今回はノンプログラミングで処理を作るというコンセプトというコトで（あと私プログラマじゃないしJavascriptよく知らないので）。

おそらく突き詰めればかなりのコトがやれてしまう感じがあって、WEBページのリンクぶっこ抜いてリンク先の画像全部保存する、みたいなダウンローダー的な振る舞いもやれそうだし、サーバーの負荷が気になるなら指定した秒数Waitを入れる、なんて項目もあります。ショートカットから別のショートカットを呼びだす、というコトもできるようなので、機能単位でショートカット作ってそれを組み合わせて……なんて芸当も。

あと自分としては、iPhoneの壁紙をランダムに変更するショートカットとかできないかなーと思ったんですが、残念ながら壁紙設定の項目は用意されていないみたいです。どこかのタイミングで対応してくれないかなー。